// bu/v11-prevrec.jsx — 前回1on1記録カード（実施記録モーダルと同じ4項目フォーマットの読み取り表示）
//  ① 面談メモ ② 次にやること ③ 次回確認事項 ④ 自分用メモ（非共有）
const { P } = window.V4;
const { CardB } = window.V7;
const { T, PU, MarkBU, CaretBU } = window.BU9;
const { TXT2, NEXT8, D11 } = window;
const T11 = window.V11.T11;

const PREV_REC = {
  date: '2026/05/15', method: '対面', form: '個別',
  memo: ['6月からの案件切り替えに向け、引き継ぎの進捗と新しいチームでの進め方について確認した。現時点で大きな支障はないものの、切り替え直後はキャッチアップに時間がかかりそうとのこと。不明点を整理し、困ったときに相談できる状態にしておくこととした。', 'また、資格学習を続けたい意向がある一方、案件切り替えと重なることで学習時間を確保できるか気になっているとの話があった。'],
  todos: D11.prev.filter((p) => p.kind === 'todo').map((p) => ({ t: p.t, who: p.c.indexOf('本人') >= 0 ? '本人' : '上長', due: p.due, st: p.st, done: p.done })),
  next: [
    '案件切り替え後、新しいチームでの進め方に慣れているか',
    'キャッチアップの負担が続いていないか',
    '困ったときの相談先が明確になっているか',
    '資格学習の時間を確保できそうか',
  ],
  priv: '案件切り替え後の進め方や負担について、本人から困りごとが出るのを待つのではなく、こちらから具体的に確認する。資格学習については、本人の希望を確認してから必要な支援を考える。',
};

function RoBlk({ 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 PrevRecordCard11() {
  const [open, setOpen] = React.useState(false);
  const r = PREV_REC;
  return (
    <CardB pad={open ? '22px 30px 26px' : '20px 30px'}>
      <button onClick={() => setOpen((o) => !o)} aria-expanded={open} style={{ all: 'unset', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12, width: '100%' }}>
        <CaretBU open={open} />
        <span className="lbl8" style={{ fontSize: T11.sub, fontWeight: 800, letterSpacing: '.06em', color: P.ink }}>前回1on1記録</span>
        <span className="tnum" style={{ fontSize: T11.micro, fontWeight: 600, color: P.muted }}>{r.date} ・ {r.method} / {r.form}</span>
        {!open && <span style={{ marginLeft: 'auto', fontSize: T11.micro, fontWeight: 700, color: P.muted, whiteSpace: 'nowrap' }}>次にやること {r.todos.length}件 ／ 次回確認事項 {r.next.length}件</span>}
      </button>
      {open && (
        <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <RoBlk n="1" title="面談メモ">
            <div>{r.memo.map((t, i) => <p key={i} style={{ margin: i ? '11px 0 0' : 0, fontSize: 13.5, lineHeight: 1.85, color: P.ink2, textWrap: 'pretty' }}>{t}</p>)}</div>
          </RoBlk>

          <RoBlk n="2" title="次にやること" note="内容・担当・期限">
            <div>
              {r.todos.map((t, i) => (
                <div className="trow" key={i} style={{ alignItems: 'center' }}>
                  <span className="bullet" style={{ marginTop: 0 }}></span>
                  <span style={{ flex: 1, minWidth: 0, fontSize: 13.5, fontWeight: 700, color: P.ink, lineHeight: 1.6, textWrap: 'pretty' }}>{t.t}</span>
                  <span className="meta" style={{ margin: 0 }}>
                    <span>担当 {t.who}</span>
                    <span className="tnum">期限 {t.due}</span>
                    {t.st === '完了' ? <span className="done tnum">完了 {t.done}</span> : <span className="late">未完了</span>}
                  </span>
                </div>
              ))}
            </div>
          </RoBlk>

          <RoBlk n="3" title="次回確認事項" note="今回の確認ポイントに引き継がれています">
            <div>
              {r.next.map((t, i) => (
                <div className="trow" key={i}>
                  <span className="bullet"></span>
                  <span style={{ flex: 1, minWidth: 0, fontSize: 13.5, lineHeight: 1.8, color: P.ink2, textWrap: 'pretty' }}>{t}</span>
                </div>
              ))}
            </div>
          </RoBlk>

          <RoBlk n="4" title="自分用メモ" tone="priv" note="共有されません。自分だけが見返せます" right={<span className="privtag">非共有</span>}>
            <p style={{ margin: 0, fontSize: 13, lineHeight: 1.8, color: '#5f5536', textWrap: 'pretty' }}>{r.priv}</p>
          </RoBlk>
        </div>
      )}
    </CardB>
  );
}

Object.assign(window, { PrevRecordCard11, PREV_REC });