// family.jsx — 長者端 · 家屬視角（家人查看長輩近況；溫暖、放心、手機友善）
const { useState: useF } = React;

// 家屬版白話摘要（正向、放心，不臨床）
function familySummary(s, callName) {
  const base = window.round1(window.baselineAvg(s));
  const recent = window.round1(window.recentAvg(s));
  const delta = window.round1(window.deltaAvg(s));
  const rec = window.SIX_ORDER.map((k) => ({ k, b: s.sp[k][0], r: s.sp[k][1], d: s.sp[k][1] - s.sp[k][0] }));
  const improved = [...rec].sort((a, b) => b.d - a.d)[0];
  const strongest = [...rec].sort((a, b) => b.r - a.r)[0];
  const name = callName.replace(/(奶奶|爺爺)$/, '');
  let head;
  if (delta > 1.5) head = `${callName}最近狀況很不錯，整體比剛來的時候進步了！`;
  else if (delta < -1.5) head = `${callName}最近比較需要多點陪伴，老師有在留意。`;
  else head = `${callName}最近狀況穩定，持續來活動中。`;
  const line = improved.d > 0
    ? `這段時間「${improved.k}」進步最多，玩活動時${name}投入又開心。`
    : `${name}在「${strongest.k}」上表現最好，可以多鼓勵他繼續。`;
  return { base, recent, delta, head, line, improved, strongest };
}

function FamilyApp({ onExit, onElder }) {
  const roster = window.ELDER_ROSTER;
  const [pick, setPick] = useF(roster[0].id);
  const [toast, setToast] = useF(null);
  const [report, setReport] = useF(false);
  const ping = (m) => { setToast(m); setTimeout(() => setToast(null), 1800); };
  const e = roster.find((r) => r.id === pick);
  const s = window.studentById(pick);
  const sum = familySummary(s, e.callName);
  const cls = window.classById(s.classId);
  const att = window.studentAttendance(s);
  const came = att.filter(Boolean).length;
  const notes = window.studentNotes(s);
  const tools = window.studentToolLog(s);

  return (
    <window.PortalShell roleTag="家屬" crossLabel="長輩端 →" onCross={onElder} onExit={onExit}>
      {/* 家人選擇 */}
      <div style={{ fontSize: 'var(--fs-body)', color: 'var(--ink-2)', fontWeight: 800, marginBottom: 10 }}>選擇您的家人</div>
      <div style={{ display: 'flex', gap: 10, overflowX: 'auto', paddingBottom: 6, marginBottom: 18 }}>
        {roster.map((r) => {
          const on = r.id === pick;
          const c = window.tone(r.tone);
          return (
            <button key={r.id} onClick={() => setPick(r.id)} style={{
              display: 'flex', alignItems: 'center', gap: 8, flex: '0 0 auto', cursor: 'pointer',
              background: on ? c.soft : 'var(--surface)', border: '2px solid ' + (on ? c.solid : 'var(--border)'),
              borderRadius: 999, padding: '7px 14px 7px 7px' }}>
              <window.ElderAvatar avatar={r.avatar} tone={r.tone} size={36} />
              <span style={{ fontSize: 'var(--fs-body)', fontWeight: 800, color: on ? c.ink : 'var(--ink-2)' }}>{r.callName}</span>
            </button>
          );
        })}
      </div>

      {/* hero：近況一句話 + 產生報告書 */}
      <window.Card style={{ borderColor: 'var(--primary)', borderWidth: 2 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <window.ElderAvatar avatar={e.avatar} tone={e.tone} size={72} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 'var(--fs-h2)', fontWeight: 900, lineHeight: 1.1 }}>{e.callName}</div>
            <div style={{ fontSize: 'var(--fs-body)', color: 'var(--ink-2)', fontWeight: 700, marginTop: 4 }}>{cls.name} · 加入 {s.joinMonths} 個月</div>
          </div>
          <span style={{ background: 'var(--active)', color: '#fff', borderRadius: 999, padding: '6px 14px', fontSize: 'var(--fs-small)', fontWeight: 800, whiteSpace: 'nowrap' }}>● 本週有來</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 16, flexWrap: 'wrap' }}>
          <window.Mascot mood="cheer" size={56} />
          <p style={{ fontSize: 'var(--fs-lead)', fontWeight: 800, lineHeight: 1.5, margin: 0, flex: '1 1 280px' }}>{sum.head}</p>
          <window.BigButton size="md" onClick={() => setReport(true)}>產生詳細報告書</window.BigButton>
        </div>
      </window.Card>

      {/* 兩欄：左＝數據，右＝近況敘述 */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(330px,1fr))', gap: 16, marginTop: 16, alignItems: 'start' }}>
        {/* 左欄 */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ display: 'flex', gap: 12 }}>
            <FStat label="本週來活動" value={s.weekDays} unit="天" tone="sky" />
            <FStat label="活動次數" value={s.weekUses} unit="次" tone="mint" />
            <FStat label="六力平均" value={sum.recent} unit="分" tone="primary" delta={sum.delta} />
          </div>
          <window.Card>
            <h3 style={{ fontSize: 'var(--fs-h3)', fontWeight: 900, margin: '0 0 4px' }}>樂齡六力</h3>
            <p style={{ fontSize: 'var(--fs-small)', color: 'var(--ink-3)', margin: '0 0 8px' }}>實線＝近期，虛線＝剛加入時</p>
            <window.Radar student={s} />
            <div style={{ display: 'flex', gap: 10, marginTop: 8, background: 'var(--sunken)', borderRadius: 14, padding: 14 }}>
              <span style={{ flex: '0 0 auto', marginTop: 2 }}><window.IcCheck size={20} color="var(--gain)" /></span>
              <span style={{ fontSize: 'var(--fs-body)', fontWeight: 700, lineHeight: 1.55 }}>{sum.line}</span>
            </div>
          </window.Card>
        </div>

        {/* 右欄 */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <window.Card>
            <h3 style={{ fontSize: 'var(--fs-h3)', fontWeight: 900, margin: '0 0 12px' }}>最近玩了什麼</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {tools.slice(0, 3).map((t, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--sunken)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
                    <window.MenuIcon name="musicAI" color="var(--primary)" size={24} />
                  </span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 'var(--fs-body)', fontWeight: 800 }}>{t.name}</div>
                    <div style={{ fontSize: 'var(--fs-small)', color: 'var(--ink-3)' }}>本週 {t.uses} 次 · {t.metric} {t.value}</div>
                  </div>
                </div>
              ))}
            </div>
          </window.Card>
          <window.Card>
            <h3 style={{ fontSize: 'var(--fs-h3)', fontWeight: 900, margin: '0 0 12px' }}>老師的話</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {notes.map((n, i) => (
                <div key={i} style={{ display: 'flex', gap: 12 }}>
                  <window.Avatar tone="grape" name={n.by} size={40} />
                  <div style={{ flex: 1, background: 'var(--sunken)', borderRadius: 14, padding: '12px 14px' }}>
                    <div style={{ fontSize: 'var(--fs-body)', lineHeight: 1.55 }}>{n.text}</div>
                    <div style={{ fontSize: 'var(--fs-small)', color: 'var(--ink-3)', marginTop: 4 }}>{n.by} 老師 · {n.date}</div>
                  </div>
                </div>
              ))}
            </div>
          </window.Card>
        </div>
      </div>

      {/* 鼓勵 */}
      <window.Card style={{ textAlign: 'center', background: 'linear-gradient(180deg,#fff,var(--sunken))', marginTop: 16 }}>
        <p style={{ fontSize: 'var(--fs-lead)', fontWeight: 800, margin: '0 0 14px' }}>幫 {e.callName} 加加油吧！</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <window.BigButton size="md" onClick={() => ping('已送出愛心，老師會轉達給' + e.callName + '！')}>送上鼓勵 ♥</window.BigButton>
          <window.GhostButton onClick={() => ping('已送出，下次來訪會通知您')} style={{ minHeight: 56 }}>預約探視</window.GhostButton>
        </div>
      </window.Card>

      <p style={{ fontSize: 'var(--fs-small)', color: 'var(--ink-3)', textAlign: 'center', marginTop: 20 }}>
        ※ 內容為健康促進與活動參與紀錄，非醫療診斷；心理社會三力為參與行為推估值。
      </p>

      {report && <window.FamilyReport student={s} callName={e.callName} onClose={() => setReport(false)} />}
      <window.WarmToast msg={toast} />
    </window.PortalShell>
  );
}

function FStat({ label, value, unit, tone: t, delta }) {
  const c = window.tone(t);
  return (
    <window.Card pad={16} style={{ flex: 1, textAlign: 'center' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 4 }}>
        <span className="num" style={{ fontSize: 'var(--fs-h1)', fontWeight: 900, color: c.solid, lineHeight: 1 }}>{value}</span>
        <span style={{ fontSize: 'var(--fs-body)', color: 'var(--ink-2)', fontWeight: 800 }}>{unit}</span>
      </div>
      <div style={{ fontSize: 'var(--fs-small)', color: 'var(--ink-2)', fontWeight: 700, marginTop: 6 }}>{label}</div>
      {delta != null && <div className="num" style={{ fontSize: 'var(--fs-small)', fontWeight: 800, color: delta >= 0 ? 'var(--gain)' : 'var(--loss)', marginTop: 2 }}>{delta >= 0 ? '▲ +' + delta : '▼ ' + delta}</div>}
    </window.Card>
  );
}

Object.assign(window, { FamilyApp });