// 家庭报告详情页
function FamilyReport() {
  const { state, activeChild: c } = useStore();
  const [report, setReport] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    loadReport();
  }, [c.id]);

  const loadReport = async () => {
    if (!state.token) return;
    try {
      setLoading(true);
      const params = new URLSearchParams();
      if (state.role === 'parent' && c.id !== 'me') {
        params.append('childId', c.id);
      }
      const resp = await fetch(`/api/family/report?${params}`, {
        headers: { Authorization: `Bearer ${state.token}` }
      });
      const result = await resp.json();
      if (result.success) {
        setReport(result.data);
      }
    } catch (e) {
      console.error('加载报告失败:', e);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return <Card style={{ textAlign: 'center', padding: '80px 0' }}>
      <div style={{ color: 'var(--ink-3)' }}>加载中...</div>
    </Card>;
  }

  const avgRate = Selectors.avgRate(c);
  const strongSubj = Object.entries(Selectors.subjectAvg(c)).sort((a,b)=>b[1]-a[1])[0];
  const weakSubj = Object.entries(Selectors.subjectAvg(c)).sort((a,b)=>a[1]-b[1])[0];

  return <>
    <Card style={{ marginBottom: 16 }}>
      <div className="card-head">
        <h3>家庭学情报告</h3>
        <div className="spacer"></div>
        <Tag tone="orange" dot>{c.name} · 最新</Tag>
      </div>
      <div className="row2" style={{ marginTop: 12 }}>
        <div className="stat">
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div className="ico bg-blue-soft" style={{ width: 40, height: 40, borderRadius: 10 }}>
              <Ico d={Icons.chart} size={20} />
            </div>
            <div>
              <div className="t" style={{ fontSize: 12, color: 'var(--ink-4)' }}>综合得分率</div>
              <div className="v" style={{ fontSize: 32, fontFamily: 'Outfit', color: 'var(--blue-6)' }}>
                {avgRate.toFixed(1)}<small style={{ fontSize: 16 }}>%</small>
              </div>
            </div>
          </div>
        </div>
        <div className="stat">
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div className="ico bg-green-soft" style={{ width: 40, height: 40, borderRadius: 10 }}>
              <Ico d={Icons.list} size={20} />
            </div>
            <div>
              <div className="t" style={{ fontSize: 12, color: 'var(--ink-4)' }}>已录入考试</div>
              <div className="v" style={{ fontSize: 32, fontFamily: 'Outfit', color: 'var(--green-6)' }}>
                {c.exams.length}<small style={{ fontSize: 16 }}>场</small>
              </div>
            </div>
          </div>
        </div>
        <div className="stat">
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div className="ico bg-orange-soft" style={{ width: 40, height: 40, borderRadius: 10 }}>
              <Ico d={Icons.gift} size={20} />
            </div>
            <div>
              <div className="t" style={{ fontSize: 12, color: 'var(--ink-4)' }}>累计积分</div>
              <div className="v" style={{ fontSize: 32, fontFamily: 'Outfit', color: 'var(--orange-5)' }}>
                {c.points}<small style={{ fontSize: 16 }}>分</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Card>

    <div className="two-col-15" style={{ marginBottom: 16 }}>
      <Card>
        <div className="card-head">
          <h3>优势学科</h3>
          <Tag tone="green" dot>继续保持</Tag>
        </div>
        {strongSubj && <div style={{ marginTop: 12, textAlign: 'center', padding: '20px 0' }}>
          <div style={{ fontSize: 48, marginBottom: 8 }}>
            <SubjDot name={strongSubj[0]} size={48} />
          </div>
          <div style={{ fontSize: 24, fontWeight: 800 }}>{strongSubj[0]}</div>
          <div style={{ fontSize: 32, fontFamily: 'Outfit', color: 'var(--green-6)', marginTop: 8 }}>
            {strongSubj[1].toFixed(1)}<small style={{ fontSize: 16 }}>%</small>
          </div>
          <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 16, lineHeight: 1.6 }}>
            该学科表现稳定，建议继续保持，可以尝试一些挑战性题目拓展思维
          </div>
        </div>}
      </Card>
      <Card>
        <div className="card-head">
          <h3>待提升学科</h3>
          <Tag tone="orange" dot>重点关注</Tag>
        </div>
        {weakSubj && <div style={{ marginTop: 12, textAlign: 'center', padding: '20px 0' }}>
          <div style={{ fontSize: 48, marginBottom: 8 }}>
            <SubjDot name={weakSubj[0]} size={48} />
          </div>
          <div style={{ fontSize: 24, fontWeight: 800 }}>{weakSubj[0]}</div>
          <div style={{ fontSize: 32, fontFamily: 'Outfit', color: 'var(--orange-5)', marginTop: 8 }}>
            {weakSubj[1].toFixed(1)}<small style={{ fontSize: 16 }}>%</small>
          </div>
          <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 16, lineHeight: 1.6 }}>
            建议从基础题入手，整理错题本，找出高频失分知识点专项练习
          </div>
        </div>}
      </Card>
    </div>

    <Card>
      <div className="card-head">
        <h3>成绩趋势</h3>
        <div className="spacer"></div>
        <Tag tone="blue">近6个月</Tag>
      </div>
      <EChart option={ChartOpt.trend(
        ['2026-01','2026-02','2026-03','2026-04','2026-05','2026-06'],
        [{ name: '综合', color: '#4ea3dd', data: MONTHS_RAW(c), area: true }]
      )} height={260} />
    </Card>

    <div style={{ marginTop: 16, background: 'var(--blue-5)', borderRadius: 'var(--r)', padding: 16, fontSize: 13, color: 'var(--blue-6)', lineHeight: 1.6 }}>
      <Ico d={Icons.lightbulb} size={16} style={{ marginRight: 6 }} />
      建议每月录入至少2次考试成绩，数据越多分析越准确
    </div>
  </>;
}

Object.assign(window, { FamilyReport });