// bu/v11-prep.jsx — 面談準備モーダル
//  ・質問0件でも保存できる（0件のときだけ軽い確認）
//  ・「＋メモを残す」でその質問を自動選択
//  ・「完了」に変更したら次回への引継ぎ指定を解除
//  ・状態選択（未完了/完了）は黒塗りをやめ、薄い背景＋濃い文字＋枠線
const { P } = window.V4;
const { T, PU, MarkBU, CaretBU, CheckBU } = window.BU9;
const { D10, D11 } = window;
const T11 = window.V11.T11;
const { TrendTag } = window.V11;
const QGROUPS = [
  ...D11.items.map((it) => ({ id: it.id, q: it.q, trend: it.trend, label: it.label, qs: it.qs })),
  { id: 'span', q: '前回1on1', trend: 'span', label: D11.interval.label, qs: D11.interval.qs },
];

function HandoffPrep11({ st, setSt, carried, setCarried }) {
  const setState = (i, s) => { setSt({ ...st, [i]: s }); if (s === '完了' && carried[i]) setCarried({ ...carried, [i]: false }); };
  return (
    <div className="hoff">
      <div className="hoffh">
        <span className="step">↩ 前回の宿題・対応の状況</span>
        <span className="hoffd tnum">2026/05/15 の記録より</span>
        <span style={{ marginLeft: 'auto' }}><button className="mlnk g">前回記録の全文</button></span>
      </div>
      {D10.prev.map((p, i) => (p.kind !== 'todo' ? null : (() => {
        const cur = st[i] ?? p.st;
        return (
          <div className="hrow" key={i}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="hc">{p.c}</div>
              <div className="ht">{p.t}</div>
              {p.kind === 'todo' && (
                <div className="meta">
                  <span>期限 {p.due}</span>
                  {cur === '完了' && p.done && <span className="done">完了日 {p.done}</span>}
                  {cur === '未完了' && <span className="late">未完了</span>}
                  {carried[i] && cur === '未完了' && <span>次回へ引き継ぎ</span>}
                </div>
              )}
            </div>
            {p.kind === 'todo' ? (
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 9 }}>
                <span className="seg">
                  {['未完了', '完了'].map((s) => <button key={s} className={'segb' + (cur === s ? ' on' : '')} onClick={() => setState(i, s)}>{s}</button>)}
                </span>
                {cur === '未完了' && (
                  <label className="carry">
                    <CheckBU on={!!carried[i]} onClick={() => setCarried({ ...carried, [i]: !carried[i] })} />
                    次回へ引き継ぐ
                  </label>
                )}
              </div>
            ) : null}
          </div>
        );
      })()))}
    </div>
  );
}

function PrevNextSec11({ picked, toggle, notes, setNotes }) {
  const list = window.PREV_REC ? window.PREV_REC.next : [];
  return (
    <div className="qsel">
      <div className="qrow">
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', gap: 10, alignItems: 'baseline', flexWrap: 'wrap' }}>
            <span className="qt">前回の「次回確認したいこと」</span>
            <span className="hoffd tnum">2026/05/15 の記録より</span>
          </div>
          <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {list.map((q, j) => (
              <QuestionRow11 key={j} q={q} on={!!picked['pnext-' + j]} toggle={() => toggle('pnext', j)}
                note={notes['pnext-' + j]} setNote={(v) => setNotes({ ...notes, ['pnext-' + j]: v })} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function QuestionRow11({ q, on, toggle, note, setNote }) {
  const [open, setOpen] = React.useState(!!note);
  const openMemo = () => { setOpen(true); if (!on) toggle(); };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <label style={{ display: 'flex', gap: 11, alignItems: 'flex-start', cursor: 'pointer', flex: 1, minWidth: 0 }}>
          <CheckBU on={on} onClick={toggle} />
          <span className="qq" style={{ margin: 0 }}>{q}</span>
        </label>
        {!open && <button className="mlnk g" style={{ flexShrink: 0 }} onClick={openMemo}>＋ メモを残す</button>}
      </div>
      {open && (
        <div style={{ paddingLeft: 28, display: 'flex', flexDirection: 'column', gap: 7 }}>
          <input className="fld" value={note || ''} placeholder="面談中に確認したいことを短くメモ" onChange={(e) => setNote(e.target.value)} />
          <span className="fldnote">実施記録の面談メモに引き継がれます</span>
        </div>
      )}
    </div>
  );
}

function PrepModal11({ onClose, picked, setPicked, notes, setNotes, st, setSt, carried, setCarried, onSave }) {
  const [confirm, setConfirm] = React.useState(false);
  const toggle = (id, j) => setPicked((p) => { const k = id + '-' + j, n = { ...p }; n[k] ? delete n[k] : (n[k] = true); return n; });
  const n = Object.keys(picked).length;
  const save = () => { if (n === 0 && !confirm) { setConfirm(true); return; } onSave(); };
  return (
    <div className="ov">
      <div className="modal wide">
        <div className="mh plain"><span className="t">面談準備</span>
          <span className="recmeta">今回1on1：未実施（前回 2026/05/15）</span></div>
        <div className="mb" style={{ maxHeight: 'calc(100vh - 220px)', overflow: 'auto' }}>
          <div className="step"><b>1</b>前回の宿題・対応の状況</div>
          <HandoffPrep11 st={st} setSt={setSt} carried={carried} setCarried={setCarried} />
          <div className="step" style={{ marginTop: 8 }}><b>2</b>今回聞くことを選ぶ</div>
          <div className="aihint"><MarkBU s={13} /><span>AIの提案：{D11.ai.lead}</span></div>
          <div className="qsel">
            {QGROUPS.map((g) => (
              <div className="qrow" key={g.id}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}><span className="qt">{g.q}</span><TrendTag trend={g.trend} label={g.label} /></div>
                  <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 14 }}>
                    {g.qs.map((q, j) => (
                      <QuestionRow11 key={j} q={q} on={!!picked[g.id + '-' + j]} toggle={() => toggle(g.id, j)}
                        note={notes[g.id + '-' + j]} setNote={(v) => setNotes({ ...notes, [g.id + '-' + j]: v })} />
                    ))}
                  </div>
                  <div style={{ marginTop: 12 }}><button className="mlnk">別の質問例を見る</button></div>
                </div>
              </div>
            ))}
          </div>
          <div className="step" style={{ marginTop: 8 }}><b>3</b>前回からの引継ぎ</div>
          <PrevNextSec11 picked={picked} toggle={toggle} notes={notes} setNotes={setNotes} />
          <div className="step" style={{ marginTop: 8 }}><b>4</b>毎回確認する項目</div>
          <div className="qsel">
            <div className="qrow">
              <div style={{ flex: 1, minWidth: 0 }}>
                <span className="tagq" style={{ paddingTop: 0 }}>定型の質問例（データの変化とは別に、毎回確認する項目）</span>
                <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {D11.standard.map((q, j) => (
                    <QuestionRow11 key={j} q={q} on={!!picked['std-' + j]} toggle={() => toggle('std', j)}
                      note={notes['std-' + j]} setNote={(v) => setNotes({ ...notes, ['std-' + j]: v })} />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
        {confirm && n === 0 && (
          <div className="cfm">質問が選択されていません。このまま保存しますか？
            <span className="rr"><button className="pbtn gh sm" onClick={() => setConfirm(false)}>選び直す</button><button className="pbtn sm" onClick={onSave}>このまま保存</button></span>
          </div>
        )}
        <div className="mf">
          <span className="mfnote tnum">選択中 {n} 件</span>
          <span className="mfnote">保存した内容は実施記録へ引き継がれます</span>
          <span className="rr">
            <button className="pbtn gh sm" onClick={onClose}>閉じる</button>
            <button className="pbtn sm" onClick={save}>準備内容を保存</button>
          </span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PrepModal11 });