// pages-inst-a.jsx — 機構端: 總覽 / 班別 / 班別詳情 / 學員名冊 / 學員檔案
const { useState: useIA } = React;

const CLASS_RATE = { c1: 94, c2: 81, c3: 76, c4: 68 };
const INST_PERIOD = {
  week:  { rate: 87, uses: 312, blurb: '本週有 38 位長輩動手用了教具。' },
  month: { rate: 84, uses: 1180, blurb: '本月有 41 位長輩動手用了教具。' },
};

function PeriodToggle({ period, setPeriod }) {
  const opt = (k, l) => <span onClick={() => setPeriod(k)} style={{ cursor: 'pointer', color: period === k ? 'var(--ink)' : 'var(--ink-3)', borderBottom: period === k ? '1px solid var(--ink)' : '1px solid transparent', paddingBottom: 1 }}>{l}</span>;
  return <div style={{ fontSize: 12, letterSpacing: '.08em', color: 'var(--ink-3)', display: 'flex', gap: 10 }}>{opt('week', '本週')}{opt('month', '本月')}</div>;
}

function BackLink({ onClick, children }) {
  return <span onClick={onClick} style={{ cursor: 'pointer', fontSize: 12, letterSpacing: '.04em', color: 'var(--ink-2)' }}>← {children}</span>;
}

// ---------- 總覽 ----------
function PageInstOverview({ go }) {
  const { CLASSES, TOOL_HEAT, WATCH, classById, Kicker, SectionTitle, Hero, StatStrip, DotRow, HeatRow, StatusMark, OutlineButton, Row } = window;
  const [period, setPeriod] = useIA('week');
  const p = INST_PERIOD[period];
  const maxHeat = Math.max(...TOOL_HEAT.map((t) => t.uses));
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
        <Kicker>機構總覽</Kicker><PeriodToggle period={period} setPeriod={setPeriod} />
      </div>
      <Hero value={p.rate} unit="%" label="整體參與率" blurb={p.blurb} />
      <StatStrip items={[{ value: p.uses, label: '教具使用次數' }, { value: WATCH.length, label: '需關注學員' }, { value: CLASSES.length, label: '開課班別' }]} />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', marginTop: 26 }}>
        <div style={{ paddingRight: 24 }}>
          <SectionTitle>各班參與率</SectionTitle>
          {CLASSES.map((c) => (
            <div key={c.id} onClick={() => go('inst.class', { classId: c.id })} style={{ cursor: 'pointer' }} className="hoverline"><DotRow label={c.name} value={CLASS_RATE[c.id]} /></div>
          ))}
          <Kicker style={{ marginTop: 4 }}>點選班別可下鑽至班級學員名單。</Kicker>
        </div>
        <div style={{ paddingLeft: 24, borderLeft: '0.5px solid var(--border-strong)' }}>
          <SectionTitle>教具使用熱度</SectionTitle>
          {TOOL_HEAT.map((t, i) => (
            <div key={t.id} onClick={() => go('inst.device', { toolId: t.id })} style={{ cursor: 'pointer' }} className="hoverline"><HeatRow rank={i + 1} name={t.name} value={t.uses} max={maxHeat} /></div>
          ))}
        </div>
      </div>
      <div style={{ marginTop: 24 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
          <SectionTitle style={{ marginBottom: 0 }}>需關注學員</SectionTitle>
          <span onClick={() => go('inst.priority')} style={{ fontSize: 12, color: 'var(--ink-2)', cursor: 'pointer', borderBottom: '1px solid var(--ink-2)', paddingBottom: 1 }}>查看四象限優先級 →</span>
        </div>
        {WATCH.map((s) => (
          <Row key={s.id} onClick={() => go('inst.member', { studentId: s.id })} pad={12}>
            <span style={{ flex: 1, fontSize: 14 }}>{s.name}</span>
            <span style={{ width: 120, fontSize: 13, color: 'var(--ink-2)' }}>{classById(s.classId).name}</span>
            <span className="fr" style={{ width: 90, textAlign: 'right', fontSize: 13, color: 'var(--ink-2)' }}>{s.lastDays} 天前</span>
            <span style={{ width: 80, textAlign: 'right' }}><StatusMark status={s.status} /></span>
          </Row>
        ))}
      </div>
      <div style={{ marginTop: 22, display: 'flex', justifyContent: 'flex-end' }}><OutlineButton onClick={() => go('inst.reports')}>匯出評鑑報表</OutlineButton></div>
    </div>
  );
}

// ---------- 班別列表 ----------
function PageClasses({ go }) {
  const { CLASSES, studentsByClass, Kicker, PageHeader, Row } = window;
  return (
    <div>
      <PageHeader kicker="機構 · 康寧日間照顧中心" title="班別" blurb="目前開設 4 個復能課程班別。點選班別檢視排程、帶課人員與學員名單。" />
      <div style={{ display: 'flex', paddingBottom: 7 }}>
        <Kicker style={{ flex: 1 }}>班別</Kicker><Kicker style={{ width: 180 }}>排程</Kicker><Kicker style={{ width: 90, textAlign: 'right' }}>已建檔／人數</Kicker><Kicker style={{ width: 70, textAlign: 'right' }}>參與率</Kicker><Kicker style={{ width: 90, textAlign: 'right' }}>帶課</Kicker>
      </div>
      {CLASSES.map((c) => (
        <Row key={c.id} onClick={() => go('inst.class', { classId: c.id })} pad={14}>
          <span className="sr" style={{ flex: 1, fontSize: 15 }}>{c.name}</span>
          <span style={{ width: 180, fontSize: 13, color: 'var(--ink-2)' }}>{c.schedule}</span>
          <span className="fr" style={{ width: 90, textAlign: 'right', fontSize: 14, color: 'var(--ink-2)' }}>{studentsByClass(c.id).length} / {c.size}</span>
          <span className="fr" style={{ width: 70, textAlign: 'right', fontSize: 14, color: 'var(--ink-2)' }}>{CLASS_RATE[c.id]}%</span>
          <span style={{ width: 90, textAlign: 'right', fontSize: 13, color: 'var(--ink-2)' }}>{c.lead}</span>
        </Row>
      ))}
    </div>
  );
}

// ---------- 班別詳情 ----------
function PageClassDetail({ go, classId }) {
  const { classById, studentsByClass, recentAvg, deltaAvg, round1, Kicker, PageHeader, StatStrip, StatusMark, Delta, Row } = window;
  const c = classById(classId);
  const roster = studentsByClass(classId);
  const totalUses = roster.reduce((a, s) => a + s.weekUses, 0);
  const assessed = roster.filter((s) => s.status !== '未啟用');
  const avgDelta = assessed.length ? round1(assessed.reduce((a, s) => a + deltaAvg(s), 0) / assessed.length) : 0;
  return (
    <div>
      <BackLink onClick={() => go('inst.classes')}>班別</BackLink>
      <PageHeader kicker={c.schedule + ' · 帶課 ' + c.lead} title={c.name} right={<div style={{ textAlign: 'right' }}><div className="fr" style={{ fontSize: 32 }}>{CLASS_RATE[classId]}<span style={{ fontSize: 18 }}>%</span></div><Kicker style={{ marginTop: 2 }}>班級參與率</Kicker></div>} />
      <StatStrip items={[{ value: c.size, label: '班級人數' }, { value: totalUses, label: '本期教具使用' }, { value: (avgDelta >= 0 ? '+' : '') + avgDelta, label: '六力平均變化', tone: avgDelta >= 0 ? 'var(--gain)' : 'var(--loss)' }]} />
      <div style={{ marginTop: 26 }}>
        <div style={{ display: 'flex', paddingBottom: 7 }}>
          <Kicker style={{ flex: 1 }}>姓名</Kicker><Kicker style={{ width: 90, textAlign: 'right' }}>本期使用</Kicker><Kicker style={{ width: 84, textAlign: 'right' }}>近期六力</Kicker><Kicker style={{ width: 64, textAlign: 'right' }}>變化</Kicker><Kicker style={{ width: 84, textAlign: 'right' }}>狀態</Kicker>
        </div>
        {roster.map((s) => {
          const live = s.status !== '未啟用';
          return (
            <Row key={s.id} onClick={() => go('inst.member', { studentId: s.id })} pad={12}>
              <span style={{ flex: 1, fontSize: 14 }}>{s.name}</span>
              <span className="fr" style={{ width: 90, textAlign: 'right', fontSize: 13, color: 'var(--ink-2)' }}>{s.weekUses} 次</span>
              <span className="fr" style={{ width: 84, textAlign: 'right', fontSize: 14, color: 'var(--ink-2)' }}>{live ? Math.round(recentAvg(s)) : '—'}</span>
              <span className="fr" style={{ width: 64, textAlign: 'right', fontSize: 14 }}>{live ? <Delta value={Math.round(deltaAvg(s))} /> : <span style={{ color: 'var(--ink-3)' }}>—</span>}</span>
              <span style={{ width: 84, textAlign: 'right' }}><StatusMark status={s.status} /></span>
            </Row>
          );
        })}
      </div>
    </div>
  );
}

// ---------- 學員名冊 ----------
function PageMembers({ go }) {
  const { STUDENTS, CLASSES, classById, recentAvg, deltaAvg, Kicker, PageHeader, SearchField, FilterRow, StatusMark, Delta, Row, Note } = window;
  const [q, setQ] = useIA(''); const [status, setStatus] = useIA('全部'); const [cls, setCls] = useIA('全部');
  const filtered = STUDENTS.filter((s) =>
    (status === '全部' || s.status === status) &&
    (cls === '全部' || s.classId === cls) &&
    (!q.trim() || s.name.includes(q.trim())));
  return (
    <div>
      <PageHeader kicker="機構 · 康寧日間照顧中心" title="學員"
        right={<SearchField value={q} onChange={setQ} placeholder="搜尋姓名…" />}
        blurb="41 位長輩已建立六力檔案。依狀態或班別篩選，點選開啟個人雷達、教具歷程與備註。" />
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 28, marginBottom: 18 }}>
        <FilterRow label="狀態" options={['全部', '活躍', '需關注', '未啟用']} value={status} onChange={setStatus} />
        <FilterRow label="班別" options={[{ value: '全部', label: '全部' }, ...CLASSES.map((c) => ({ value: c.id, label: c.name }))]} value={cls} onChange={setCls} />
      </div>
      <div style={{ display: 'flex', paddingBottom: 7 }}>
        <Kicker style={{ flex: 1 }}>姓名</Kicker><Kicker style={{ width: 120 }}>班別</Kicker><Kicker style={{ width: 80, textAlign: 'right' }}>本期使用</Kicker><Kicker style={{ width: 72, textAlign: 'right' }}>近期六力</Kicker><Kicker style={{ width: 56, textAlign: 'right' }}>變化</Kicker><Kicker style={{ width: 84, textAlign: 'right' }}>狀態</Kicker>
      </div>
      {filtered.map((s) => {
        const live = s.status !== '未啟用';
        return (
          <Row key={s.id} onClick={() => go('inst.member', { studentId: s.id })} pad={11}>
            <span style={{ flex: 1, fontSize: 14 }}>{s.name}</span>
            <span style={{ width: 120, fontSize: 13, color: 'var(--ink-2)' }}>{classById(s.classId).name}</span>
            <span className="fr" style={{ width: 80, textAlign: 'right', fontSize: 13, color: 'var(--ink-2)' }}>{s.weekUses}</span>
            <span className="fr" style={{ width: 72, textAlign: 'right', fontSize: 14, color: 'var(--ink-2)' }}>{live ? Math.round(recentAvg(s)) : '—'}</span>
            <span className="fr" style={{ width: 56, textAlign: 'right', fontSize: 14 }}>{live ? <Delta value={Math.round(deltaAvg(s))} /> : <span style={{ color: 'var(--ink-3)' }}>—</span>}</span>
            <span style={{ width: 84, textAlign: 'right' }}><StatusMark status={s.status} /></span>
          </Row>
        );
      })}
      <div style={{ marginTop: 14 }}><Note>顯示 {filtered.length} / {STUDENTS.length} 位學員</Note></div>
    </div>
  );
}

// ---------- 學員檔案 ----------
function PageMember({ go, studentId }) {
  const { studentById, classById, SIX_ORDER, PSYCHOSOCIAL, recentAvg, baselineAvg, deltaAvg, round1, quadrantOf, QUADRANT_META, INST_MEAN,
    studentToolLog, studentAttendance, studentNotes, Kicker, StatStrip, Delta, StatusMark, Radar, Tabs, KV, Note, AttendanceTicks, Bar, OutlineButton } = window;
  const s = studentById(studentId);
  const c = classById(s.classId);
  const [tab, setTab] = useIA('six');
  const [notes, setNotes] = useIA(studentNotes(s));
  const [draft, setDraft] = useIA('');
  const avgDelta = round1(deltaAvg(s));
  const q = QUADRANT_META[quadrantOf(s)];
  const rows = SIX_ORDER.map((k) => ({ name: k, b: s.sp[k][0], r: s.sp[k][1], d: s.sp[k][1] - s.sp[k][0] })).sort((a, b) => b.d - a.d);
  const live = s.status !== '未啟用';

  return (
    <div>
      <BackLink onClick={() => go('inst.members')}>學員名冊</BackLink>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 20, margin: '14px 0 22px' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
            <span className="sr" style={{ fontSize: 28 }}>{s.name}</span><StatusMark status={s.status} />
          </div>
          <Kicker style={{ marginTop: 8 }}>{c.name} · 加入 {s.joinMonths} 個月 · 最近使用 {s.lastTool}{s.lastDays != null ? '（' + s.lastDays + ' 天前）' : ''}</Kicker>
        </div>
        <OutlineButton onClick={() => go('inst.reportgen', { studentId: s.id })}>輸出前後測報表</OutlineButton>
      </div>

      <Tabs value={tab} onChange={setTab} tabs={[{ value: 'six', label: '六力' }, { value: 'tools', label: '教具歷程' }, { value: 'attend', label: '出席' }, { value: 'notes', label: '備註' }]} />

      {tab === 'six' && (
        <div>
          {live ? (
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                <div style={{ flex: 1, minWidth: 300 }}><Radar student={s} /></div>
                <div style={{ flex: 1, minWidth: 230 }}>
                  <div style={{ display: 'flex', paddingBottom: 7 }}><Kicker style={{ flex: 1 }}>能力</Kicker><Kicker style={{ width: 84, textAlign: 'right' }}>初評→近期</Kicker><Kicker style={{ width: 54, textAlign: 'right' }}>變化</Kicker></div>
                  {rows.map((r) => { const soft = PSYCHOSOCIAL.includes(r.name); return (
                    <div key={r.name} style={{ display: 'flex', alignItems: 'center', padding: '9px 0', borderTop: '0.5px solid var(--border)' }}>
                      <span style={{ flex: 1, fontSize: 14, color: soft ? 'var(--ink-2)' : 'var(--ink)' }}>{r.name}{soft ? ' ◦' : ''}</span>
                      <span className="fr" style={{ width: 84, textAlign: 'right', fontSize: 14, color: 'var(--ink-2)' }}>{r.b} → {r.r}</span>
                      <span className="fr" style={{ width: 54, textAlign: 'right', fontSize: 14 }}><Delta value={r.d} /></span>
                    </div>
                  ); })}
                </div>
              </div>
              <div style={{ margin: '10px 0 18px' }}><Note>◦ 標記者為心理社會三力（自主 · 社交 · 情緒），由參與行為推估；無標記為功能三力，取自教具感測硬數據。兩者精度不同。</Note></div>
              <StatStrip items={[{ value: s.weekUses, label: '本期使用次數' }, { value: s.weekDays, label: '連續參與天數' }, { value: (avgDelta >= 0 ? '+' : '') + avgDelta, label: '六力平均變化', tone: avgDelta >= 0 ? 'var(--gain)' : 'var(--loss)' }]} />
              <div style={{ marginTop: 22, paddingTop: 16, borderTop: '0.5px solid var(--border)', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                <div><Kicker>雙錨點定位（個人前測 × 機構平均 {INST_MEAN}）</Kicker><div className="sr" style={{ fontSize: 16, marginTop: 6 }}>{q.label} · <span style={{ color: 'var(--ink-2)' }}>{q.note}</span></div></div>
                <span onClick={() => go('inst.priority')} style={{ fontSize: 12, color: 'var(--ink-2)', cursor: 'pointer', borderBottom: '1px solid var(--ink-2)', paddingBottom: 1, whiteSpace: 'nowrap' }}>在四象限中查看 →</span>
              </div>
            </div>
          ) : <Note>此學員剛加入，尚未開始使用教具，因此暫無六力評估資料。完成初評後將顯示雷達圖。</Note>}
        </div>
      )}

      {tab === 'tools' && (
        <div>
          {live ? <div>
            <div style={{ display: 'flex', paddingBottom: 7 }}><Kicker style={{ flex: 1 }}>教具</Kicker><Kicker style={{ width: 70, textAlign: 'right' }}>本期次數</Kicker><Kicker style={{ width: 160, textAlign: 'right' }}>主要參數</Kicker></div>
            {studentToolLog(s).map((t, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '11px 0', borderTop: '0.5px solid var(--border)' }}>
                <span style={{ flex: 1, fontSize: 14 }}>{t.name}</span>
                <span className="fr" style={{ width: 70, textAlign: 'right', fontSize: 14, color: 'var(--ink-2)' }}>{t.uses}</span>
                <span style={{ width: 160, textAlign: 'right', fontSize: 13, color: 'var(--ink-2)' }}>{t.metric} <span className="fr">{t.value}</span></span>
              </div>
            ))}
            <div style={{ marginTop: 14 }}><Note>參數為教具 mockup 示意（借用真實參數詞彙）；實際感測規格依 Minimal-Sensing 原則由 AI 推論需求反推。</Note></div>
          </div> : <Note>尚無教具使用紀錄。</Note>}
        </div>
      )}

      {tab === 'attend' && (
        <div>
          <Kicker style={{ marginBottom: 12 }}>近 8 次課程出席（左舊右新）</Kicker>
          <AttendanceTicks present={studentAttendance(s)} />
          <div style={{ marginTop: 24 }}>
            <StatStrip items={[{ value: s.weekDays, label: '本期參與天數' }, { value: s.weekUses, label: '本期使用次數' }, { value: s.progress + '%', label: '目標完成進度' }]} />
          </div>
          <div style={{ marginTop: 16 }}><Bar value={s.progress} /></div>
        </div>
      )}

      {tab === 'notes' && (
        <div>
          {notes.map((n, i) => (
            <div key={i} style={{ padding: '14px 0', borderTop: '0.5px solid var(--border)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}><Kicker>{n.by}</Kicker><Kicker>{n.date}</Kicker></div>
              <div className="sr" style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink)' }}>{n.text}</div>
            </div>
          ))}
          <div style={{ marginTop: 18, paddingTop: 16, borderTop: '0.5px solid var(--border-strong)' }}>
            <textarea value={draft} onChange={(e) => setDraft(e.target.value)} placeholder="新增服務員備註…" rows={2}
              style={{ width: '100%', border: '0.5px solid var(--border-strong)', background: 'var(--surface)', padding: '10px 12px', fontFamily: "'Noto Sans TC',sans-serif", fontSize: 14, color: 'var(--ink)', resize: 'vertical', outline: 'none' }} />
            <div style={{ marginTop: 10, display: 'flex', justifyContent: 'flex-end' }}>
              <OutlineButton solid onClick={() => { if (draft.trim()) { setNotes([{ date: '2026.05.31', by: c.lead, text: draft.trim() }, ...notes]); setDraft(''); } }}>新增備註</OutlineButton>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { PeriodToggle, BackLink, PageInstOverview, PageClasses, PageClassDetail, PageMembers, PageMember });