// bu/v11-record.jsx — 実施記録（3項目＋自分用メモ）
//  ・面談準備済みなら「前回からの引継ぎ」は閉じた状態＋概要のみ
//  ・「AIで整理」は1回のみ生成。以降は「AI案を再生成 / AI案を取り消す」
//  ・共有先を断定する文言は置かない
const { P, Q } = window.V4;
const { T, PU, MarkBU, CheckBU } = window.BU9;
const { D10 } = window;
const T11 = window.V11.T11;

const WHO = ['本人', '上長', '会社'];
const AI_TODO11 = [
  { t: '不明点をまとめて共有し、聞く相手を決める', who: '本人', due: '2026-06-30' },
  { t: '相談役の割り当てを正式に依頼する', who: '上長', due: '2026-06-25' },
  { t: '週2時間の学習時間を確保できるよう調整する', who: '会社', due: '2026-07-03' },
];
const AI_NEXT11 = [
  { t: 'キャッチアップの負荷が下がったか' },
  { t: '相談役に実際に相談できているか' },
];

function Blk11({ n, title, note, right, tone, children }) {
  return (
    <div className={'blk' + (tone ? ' ' + tone : '')}>
      <div className="blkh">
        <span className="blkn tnum">{n}</span>
        <span className="blkt">{title}</span>
        {note && <span className="blknote">{note}</span>}
        {right && <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 12 }}>{right}</span>}
      </div>
      {children}
    </div>
  );
}

function Handoff11({ st, setSt, onCarry, prepared }) {
  const [open, setOpen] = React.useState(!prepared);
  const todos = D10.prev.filter((p) => p.kind === 'todo');
  if (!open) {
    return (
      <div className="hoff compact">
        <span className="step">↩ 前回からの引継ぎ</span>
        <span className="hoffsum">面談準備で {D10.prev.length}件 確認済み</span>
        <span style={{ marginLeft: 'auto' }}><button className="pbtn gh sm" onClick={() => setOpen(true)}>内容を見る</button></span>
      </div>
    );
  }
  return (
    <div className="hoff">
      <div className="hoffh">
        <span className="step">↩ 前回からの引継ぎ</span>
        <span className="hoffd tnum">2026/05/15 の記録より</span>
        <span style={{ marginLeft: 'auto', display: 'inline-flex', gap: 14, alignItems: 'center' }}>
          <button className="mlnk g">前回記録の全文</button>
          {prepared && <button className="tlnk dis g" onClick={() => setOpen(false)}>閉じる</button>}
        </span>
      </div>
      {D10.prev.map((p, i) => {
        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>}
                </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={() => setSt({ ...st, [i]: s })}>{s}</button>)}
                </span>
                {cur === '未完了' && <button className="mlnk" onClick={() => onCarry(p)}>「次にやること」へ追加</button>}
              </div>
            ) : <span className="tagq">結果を面談メモに記録</span>}
          </div>
        );
      })}
    </div>
  );
}

function Seg11({ v, on, opts }) {
  return <span className="seg">{opts.map((s) => <button key={s} className={'segb' + (v === s ? ' on' : '')} onClick={() => on(s)}>{s}</button>)}</span>;
}

function TodoRow11({ r, i, on, del }) {
  return (
    <div className="trow">
      <CheckBU on={r.done} onClick={() => on(i, { done: !r.done })} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <input className={'fld' + (r.ai ? ' ai' : '')} value={r.t} placeholder="やることを1件ずつ記入" onChange={(e) => on(i, { t: e.target.value, ai: false, edited: r.ai || r.edited })} />
        <div className="tmeta">
          <label className="mini">担当
            <select className="fld sm" value={r.who} onChange={(e) => on(i, { who: e.target.value })}>{WHO.map((w) => <option key={w}>{w}</option>)}</select>
          </label>
          <label className="mini">期限
            <input className="fld sm tnum" type="date" value={r.due} onChange={(e) => on(i, { due: e.target.value })} />
          </label>
          {r.ai && <span className="aiflag"><MarkBU s={12} />AI案・要確認</span>}
          <button className="mlnk g" style={{ marginLeft: 'auto' }} onClick={() => del(i)}>削除</button>
        </div>
      </div>
    </div>
  );
}

function RecordModal11({ onClose, onSave, pickedList = [], noteList = [], prepared = false }) {
  const memoInit = (pickedList.length ? pickedList.map((q, i) => '・' + q + (noteList[i] ? '\n　→ ' + noteList[i] : '')).join('\n') + '\n\n' : '')
    + '新しい案件に入ってから覚えることが多く、キャッチアップに時間がかかっている。分からないことを聞ける相手が決まっておらず、確認に時間を使っている様子。週2時間ほど学習の時間を取りたいとのこと。';
  const [memo, setMemo] = React.useState(memoInit);
  const blankTodo = { t: '', who: '本人', due: '', done: false, ai: false };
  const [todos, setTodos] = React.useState([{ ...blankTodo }]);
  const [next, setNext] = React.useState([{ t: '', ai: false }]);
  const [priv, setPriv] = React.useState('');
  const [st, setSt] = React.useState({});
  const [method, setMethod] = React.useState('対面');
  const [form, setForm] = React.useState('個別');
  const [organized, setOrganized] = React.useState(false);
  const onTodo = (i, patch) => setTodos(todos.map((r, j) => (j === i ? { ...r, ...patch } : r)));
  const delTodo = (i) => setTodos(todos.length === 1 ? [{ ...blankTodo }] : todos.filter((_, j) => j !== i));
  const carry = (p) => setTodos([...todos.filter((r) => r.t), { t: p.t, who: p.c.indexOf('本人') >= 0 ? '本人' : '上長', due: '', done: false, ai: false }]);
  // AI案は常に「未編集のAI案だけ」を置き換える。ユーザーが直した行は残す
  const organize = () => {
    setTodos([...todos.filter((r) => r.t && !r.ai), ...AI_TODO11.map((r) => ({ ...r, done: false, ai: true }))]);
    setNext([...next.filter((r) => r.t && !r.ai), ...AI_NEXT11.map((r) => ({ ...r, ai: true }))]);
    setOrganized(true);
  };
  const clearAi = () => {
    const t = todos.filter((r) => !r.ai), nx = next.filter((r) => !r.ai);
    setTodos(t.length ? t : [{ ...blankTodo }]);
    setNext(nx.length ? nx : [{ t: '', ai: false }]);
    setOrganized(false);
  };
  const aiCount = todos.filter((r) => r.ai).length + next.filter((r) => r.ai).length;
  return (
    <div className="ov">
      <div className="modal rec">
        <div className="mh plain">
          <span className="t">実施記録を登録</span>
          <span className="recmeta">{Q.member.name}</span>
        </div>
        <div className="mb rec">
          <Handoff11 st={st} setSt={setSt} onCarry={carry} prepared={prepared} />

          <div className="fldrow">
            <label className="mini col">実施日<input className="fld sm tnum" type="date" defaultValue="2026-06-18" /></label>
            <div className="mini col">実施手法<Seg11 v={method} on={setMethod} opts={['対面', 'オンライン']} /></div>
            <div className="mini col">実施形態<Seg11 v={form} on={setForm} opts={['個別', '会議体']} /></div>
            {form === '会議体' && (
              <div className="kaigi">
                <span className="kt">同席メンバー</span>
                <span className="kc">B班 副班長L</span><span className="kc">B班 主任M</span><span className="kc">B班 K</span>
                <button className="mlnk">メンバーを選ぶ</button>
                <span className="kn">会議体では1画面で複数人の記録を登録します。以下は「B班 副班長L」の記録です。</span>
              </div>
            )}
          </div>

          <Blk11 n="1" title="面談メモ" note={pickedList.length ? `面談準備で選んだ質問 ${pickedList.length}件を引き継いでいます` : '話したこと・気になったこと・決まったことをまとめて記入'}>
            <textarea className="fld ta" rows="8" value={memo} onChange={(e) => setMemo(e.target.value)} />
            <div className="genbox" style={{ marginTop: 12 }}>
              {!organized
                ? <button className="pbtn gh sm" onClick={organize}><MarkBU s={13} />AIで整理</button>
                : <>
                  <button className="pbtn gh sm" onClick={organize}><MarkBU s={13} />AI案を再生成</button>
                  <button className="pbtn gh sm" onClick={clearAi}>AI案を取り消す</button>
                </>}
              <span className="genhint">
                {organized
                  ? `AI案を ${aiCount}件 入力しています。再生成すると未編集のAI案だけが差し替わり、修正した内容はそのまま残ります。`
                  : '面談メモから「次にやること」「次回確認事項」の入力案をつくります。内容は確認・修正のうえ保存してください。'}
              </span>
            </div>
          </Blk11>

          <Blk11 n="2" title="次にやること" note="内容・担当・期限を1件ずつ">
            <div>
              {todos.map((r, i) => <TodoRow11 key={i} r={r} i={i} on={onTodo} del={delTodo} />)}
              <button className="addrow" onClick={() => setTodos([...todos, { ...blankTodo }])}>＋ 1件追加</button>
            </div>
          </Blk11>

          <Blk11 n="3" title="次回確認事項" note="次回の確認ポイントに表示されます">
            <div>
              {next.map((r, i) => (
                <div className="trow" key={i}>
                  <span className="bullet"></span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <input className={'fld' + (r.ai ? ' ai' : '')} value={r.t} placeholder="次回に確認したいことを記入" onChange={(e) => setNext(next.map((x, j) => (j === i ? { ...x, t: e.target.value, ai: false } : x)))} />
                    {r.ai && <div className="tmeta"><span className="aiflag"><MarkBU s={12} />AI案・要確認</span></div>}
                  </div>
                  <button className="mlnk g" onClick={() => setNext(next.length === 1 ? [{ t: '' }] : next.filter((_, j) => j !== i))}>削除</button>
                </div>
              ))}
              <button className="addrow" onClick={() => setNext([...next, { t: '' }])}>＋ 1件追加</button>
            </div>
          </Blk11>

          <Blk11 n="4" title="自分用メモ" tone="priv" note="共有されません。自分だけが見返せます" right={<span className="privtag">非共有</span>}>
            <textarea className="fld ta priv" rows="3" value={priv} placeholder="気づき・補足・次に気をつけたいことなど" onChange={(e) => setPriv(e.target.value)} />
          </Blk11>
        </div>
        <div className="mf">
          <span className="rr">
            <button className="pbtn gh sm" onClick={onClose}>閉じる</button>
            <button className="pbtn sm" onClick={onSave}>登録する</button>
          </span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RecordModal11 });