// staff.jsx — 機構端 · 服務員視角（第一線老師：今日帶班、我的學員、覆核 AI 報告）
const { useState: useST } = React;

const STAFF = { name: (window.sn ? window.sn('陳志明') : '陳志明'), title: '服務員 · 課程老師' };

function StaffStatusPill({ status }) {
  const map = { '活躍': { tone: 'mint', shape: '●' }, '需關注': { tone: 'sun', shape: '◐' }, '未啟用': { tone: 'primary', shape: '○' } };
  const m = map[status]; const c = window.tone(m.tone);
  const color = status === '未啟用' ? 'var(--ink-3)' : c.ink;
  const bg = status === '未啟用' ? 'var(--sunken)' : c.soft;
  return <span style={{ background: bg, color, borderRadius: 999, padding: '4px 12px', fontSize: 'var(--fs-small)', fontWeight: 800, whiteSpace: 'nowrap' }}>{m.shape} {status}</span>;
}

function StaffApp({ onExit, onManager }) {
  const [toast, setToast] = useST(null);
  const [done, setDone] = useST({}); // 已覆核的報告 id
  const [member, setMember] = useST(null); // 點開個人即時數據
  const ping = (m) => { setToast(m); setTimeout(() => setToast(null), 1800); };

  const myClasses = window.CLASSES.filter((c) => c.lead === STAFF.name); // 認知活化 A 班、律動健身班
  const myIds = myClasses.map((c) => c.id);
  const myStudents = window.STUDENTS.filter((s) => myIds.includes(s.classId));
  const watch = myStudents.filter((s) => s.status === '需關注');
  const pending = [
    { key: 'p1', sid: 's1', type: '前後測成效', conf: 86 },
    { key: 'p2', sid: 's6', type: '前後測成效', conf: 74 },
    { key: 'p3', sid: 's7', type: '需關注提示', conf: 63 },
  ].map((p) => ({ ...p, s: window.studentById(p.sid) }));
  const pendingLeft = pending.filter((p) => !done[p.key]).length;

  return (
    <window.PortalShell roleTag="服務員" crossLabel="機構管理 →" onCross={onManager} onExit={onExit}>
      <window.MascotSay text={`${STAFF.name}，早安！今天有 ${myClasses.length} 班要帶，${watch.length} 位長輩想多陪陪、${pendingLeft} 份 AI 報告等您覆核。`} mood="happy" size={80} />

      {/* KPI */}
      <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', margin: '22px 0' }}>
        <SStat label="今日帶班" value={myClasses.length} unit="班" tone="primary" />
        <SStat label="我的學員" value={myStudents.length} unit="位" tone="sky" />
        <SStat label="今日待關注" value={watch.length} unit="位" tone="sun" />
        <SStat label="待覆核報告" value={pendingLeft} unit="份" tone="grape" />
      </div>

      {/* 兩欄：左＝今日課表，右＝待覆核 AI 報告 */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(360px,1fr))', gap: 16, alignItems: 'start' }}>
        {/* 今日課表 */}
        <div>
          <h3 style={{ fontSize: 'var(--fs-h3)', fontWeight: 900, margin: '4px 0 12px' }}>今日課表</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {myClasses.map((c) => {
              const n = window.studentsByClass(c.id).length;
              return (
                <window.Card key={c.id} style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
                  <div style={{ width: 52, height: 52, borderRadius: 14, background: 'var(--sunken)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
                    <window.MenuIcon name="play" color="var(--primary)" size={28} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 'var(--fs-lead)', fontWeight: 900 }}>{c.name}</div>
                    <div style={{ fontSize: 'var(--fs-body)', color: 'var(--ink-2)', fontWeight: 700 }}>{c.schedule} · {n} 位長輩</div>
                  </div>
                  <window.BigButton size="sm" onClick={() => ping('已開始帶領「' + c.name + '」')}>帶領活動</window.BigButton>
                </window.Card>
              );
            })}
          </div>
        </div>

        {/* 待覆核 AI 報告 — 服務員就是覆核者 */}
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '4px 0 8px' }}>
            <h3 style={{ fontSize: 'var(--fs-h3)', fontWeight: 900, margin: 0 }}>待我覆核的 AI 報告</h3>
            <window.Tag tone="grape">AI 產出</window.Tag>
          </div>
          <p style={{ fontSize: 'var(--fs-body)', color: 'var(--ink-2)', margin: '0 0 12px' }}>AI 先擬好草稿，由您確認後才會送出。</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {pending.map((p) => {
              const isDone = done[p.key];
              return (
                <window.Card key={p.key} style={{ borderColor: isDone ? 'var(--border)' : 'var(--primary)', borderWidth: isDone ? 1 : 2 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
                    <window.Avatar tone="mint" name={p.s.name} size={48} />
                    <div style={{ flex: 1, minWidth: 140 }}>
                      <div style={{ fontSize: 'var(--fs-lead)', fontWeight: 800 }}>{p.s.name} · {p.type}</div>
                      <div style={{ fontSize: 'var(--fs-small)', color: 'var(--ink-3)' }}>{window.classById(p.s.classId).name} · 模型信心度 {p.conf}%</div>
                    </div>
                    {isDone
                      ? <span style={{ background: 'var(--mint, #E4F3EC)', color: 'var(--active-text)', borderRadius: 999, padding: '8px 16px', fontSize: 'var(--fs-body)', fontWeight: 800 }}>✓ 已處理</span>
                      : (
                        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                          <window.BigButton size="sm" onClick={() => { setDone((d) => ({ ...d, [p.key]: 1 })); ping('已採納 ' + p.s.name + ' 的報告'); }}>採納</window.BigButton>
                          <window.GhostButton onClick={() => { setDone((d) => ({ ...d, [p.key]: 1 })); ping('已微調後採納'); }} style={{ minHeight: 44, padding: '8px 16px', fontSize: 'var(--fs-body)' }}>微調</window.GhostButton>
                          <window.GhostButton onClick={() => { setDone((d) => ({ ...d, [p.key]: 1 })); ping('已退回，請 AI 重寫'); }} style={{ minHeight: 44, padding: '8px 16px', fontSize: 'var(--fs-body)' }}>退回</window.GhostButton>
                        </div>
                      )}
                  </div>
                </window.Card>
              );
            })}
          </div>
        </div>
      </div>

      {/* 我的學員（整列） */}
      <h3 style={{ fontSize: 'var(--fs-h3)', fontWeight: 900, margin: '28px 0 12px' }}>我的學員（{myStudents.length} 位）</h3>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(260px,1fr))', gap: 12 }}>
        {myStudents.map((s) => (
          <window.Card key={s.id} pad={16} hover onClick={() => setMember(s)} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <window.Avatar tone={s.status === '需關注' ? 'sun' : 'mint'} name={s.name} size={46} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 'var(--fs-body)', fontWeight: 800 }}>{s.name}</div>
              <div style={{ fontSize: 'var(--fs-small)', color: 'var(--ink-3)' }}>本週 {s.weekUses} 次 · 看即時數據 ›</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
              <StaffStatusPill status={s.status} />
              <button onClick={(ev) => { ev.stopPropagation(); ping('已為 ' + s.name + ' 記錄一筆觀察'); }} style={{ background: 'none', border: 'none', color: 'var(--primary-deep)', fontSize: 'var(--fs-small)', fontWeight: 800, cursor: 'pointer', padding: 0 }}>＋ 記錄</button>
            </div>
          </window.Card>
        ))}
      </div>

      <p style={{ fontSize: 'var(--fs-small)', color: 'var(--ink-3)', textAlign: 'center', marginTop: 24 }}>
        ※ AI 報告為輔助草稿，須經第一線老師覆核後採用；本系統為健康促進參考，非醫療診斷。
      </p>

      {member && <window.StaffMemberReport student={member} onClose={() => setMember(null)} />}
      <window.WarmToast msg={toast} />
    </window.PortalShell>
  );
}

function SStat({ label, value, unit, tone: t }) {
  const c = window.tone(t);
  return (
    <window.Card pad={18} style={{ flex: '1 1 180px' }}>
      <div style={{ fontSize: 'var(--fs-body)', color: 'var(--ink-2)', fontWeight: 700 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
        <span className="num" style={{ fontSize: 'var(--fs-display)', fontWeight: 900, color: c.solid, lineHeight: 1 }}>{value}</span>
        <span style={{ fontSize: 'var(--fs-lead)', color: 'var(--ink-2)', fontWeight: 800 }}>{unit}</span>
      </div>
    </window.Card>
  );
}

Object.assign(window, { StaffApp });