/* 首页：学生端（温和引导风）+ 家长端（多子女总览），均由真实数据驱动 */
function greetWord() {
  const h = new Date().getHours();
  return h<11?'早上好':h<14?'中午好':h<18?'下午好':'晚上好';
}
function comboTrend(child) {
  return MONTHS_RAW(child);
}
function MONTHS_RAW(child) {
  return ['2025-12','2026-01','2026-02','2026-03','2026-04','2026-05'].map(ym=>{
    const e = child.exams.find(x=>x.date.slice(0,7)===ym && x.seed);
    return e ? Math.round(Selectors.examRate(e)) : null;
  });
}

function StudentHome() {
  const { state, dispatch, activeChild:c } = useStore();
  const { go } = useNav();
  const [joinModalOpen, setJoinModalOpen] = React.useState(false);
  const [joinCode, setJoinCode] = React.useState('');
  const [joinLoading, setJoinLoading] = React.useState(false);
  const [localToast, setLocalToast] = React.useState(null);
  const showLocalToast = (type, msg) => {
    setLocalToast({ type, msg });
    setTimeout(() => setLocalToast(null), 2600);
  };
  const joinFamily = async () => {
    const code = joinCode.trim().toUpperCase();
    if (!code || code.length !== 6) {
      showLocalToast('error', '请输入完整的6位家庭码');
      return;
    }
    setJoinLoading(true);
    try {
      const resp = await fetch('/api/family/join', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${state.token}` },
        body: JSON.stringify({ code }),
      });
      const result = await resp.json().catch(() => ({}));
      if (!resp.ok || !result.success) {
        showLocalToast('error', result.message || '加入家庭失败，请检查家庭码是否正确');
        return;
      }
      showLocalToast('success', '已成功加入家庭');
      try {
        const meResp = await fetch('/api/auth/me', {
          headers: { Authorization: `Bearer ${state.token}` }
        });
        const meResult = await meResp.json().catch(() => ({}));
        if (meResp.ok && meResult.success && meResult.data) {
          dispatch({
            type: 'AUTH_SUCCESS',
            token: meResult.data.token,
            user: meResult.data.user,
            children: meResult.data.children,
            nextPage: meResult.data.nextPage,
            message: null
          });
        } else {
          window.location.reload();
        }
      } catch (_) {
        window.location.reload();
      }
      setJoinModalOpen(false);
      setJoinCode('');
    } catch (e) {
      showLocalToast('error', '网络异常，加入家庭失败');
    } finally {
      setJoinLoading(false);
    }
  };
  const avg = Selectors.avgRate(c);
  const prog = Selectors.monthProgress(c);
  const subjAvg = Selectors.subjectAvg(c);
  const subs = c.subjectList;
  const quote = QUOTES.student[state.quoteIdx.student];
  const fav = c.favorites.includes(quote.id);
  const thisMonthCount = c.exams.filter(e=>e.date.slice(0,7)==='2026-05').length;
  const profile = state.user && state.user.profile;
  const displayName = profile && profile.nickname ? profile.nickname : c.name;
  const hasExams = c.exams.length > 0;

  const bigActions = [
    { t:'录入成绩', s:'手动 / 批量 / AI 拍照，三种方式任你选', cls:'ba-blue', icon:Icons.edit, go:'entry' },
    { t:'学情分析', s:'自动诊断薄弱学科，给出提升建议', cls:'ba-green', icon:Icons.chart, go:'analysis' },
    { t:'积分中心', s:'完成任务、提升成绩，兑换专属奖励', cls:'ba-orange', icon:Icons.gift, go:'points' },
  ];

  const joinBanner = <Card style={{marginBottom:18,background:'var(--orange-50)',borderColor:'var(--orange-200)',display:'flex',alignItems:'center',gap:14,padding:'14px 20px'}}>
    <div className="bg-orange-soft" style={{width:38,height:38,borderRadius:'50%',display:'grid',placeItems:'center',flexShrink:0}}><Ico d={Icons.users} size={19}/></div>
    <div style={{flex:1}}>
      <div style={{fontWeight:700,fontSize:14,color:'var(--orange-600)',marginBottom:2}}>还没有加入家庭？</div>
      <div style={{fontSize:12.5,color:'var(--ink-2)',lineHeight:1.5}}>输入家长分享的家庭码，即可共享学情数据</div>
    </div>
    <Button variant="warm" size="sm" onClick={()=>setJoinModalOpen(true)}>加入家庭</Button>
  </Card>;

  const localToastNode = localToast ? <div style={{position:'fixed', top:22, left:'50%', transform:'translateX(-50%)', zIndex:999,
    background:'#fff', border:'1px solid var(--line)', borderLeft:`4px solid ${localToast.type === 'error' ? 'var(--coral)' : '#5fcfa0'}`, borderRadius:12,
    padding:'13px 20px', boxShadow:'var(--shadow-lg)', display:'flex', alignItems:'center', gap:10, fontWeight:700, fontSize:13.5, animation:'toastIn .3s'}}>
    <span style={{width:20,height:20,borderRadius:'50%',background:localToast.type === 'error' ? 'var(--coral)' : '#5fcfa0',color:'#fff',display:'grid',placeItems:'center'}}><Ico d={Icons.check} size={13} sw={3.5}/></span>
    {localToast.msg}
  </div> : null;

  return <>
    {state.role === 'student' && !state.user?.hasFamily && joinBanner}
    <div className="b-hero">
      <div className="b-hero-row">
        <div className="greet">
          <Tag tone="green" dot className="mb">连续打卡 {c.streak} 天 · 继续保持</Tag>
          <h2>{greetWord()}，{displayName} 🌿</h2>
          <p>{hasExams ? <>今天也辛苦啦。记录下今天的成绩，让每一次努力都被看见。你已累计录入 {c.exams.length} 场考试，坚持就是了不起。</> : '还没有考试记录。先录入一次成绩，系统会从你的真实数据开始生成趋势、分析和积分。'}</p>
          <div className="cta">
            <Button size="lg" icon={<Ico d={Icons.edit} size={18}/>} onClick={()=>go('entry')}>记录今天的成绩</Button>
            <Button size="lg" variant="ghost" onClick={()=>go('soup')}>看看今日鸡汤</Button>
          </div>
        </div>
        <div className="ring-wrap">
          <div className="ring">
            <EChart option={ChartOpt.ring(Math.round(avg))} height={168} style={{width:168}}/>
            <div className="center"><div><div className="v">{avg.toFixed(0)}<small style={{fontSize:18}}>%</small></div><div className="l">平均得分率</div></div></div>
          </div>
          <div className="b-side">
            <div className="bs"><div className="bi bg-blue-soft"><Ico d={Icons.list} size={19}/></div><div><div className="bv">{c.exams.length}</div><div className="bl">累计考试</div></div></div>
            <div className="bs"><div className="bi bg-green-soft"><Ico d={Icons.chart} size={19}/></div><div><div className="bv">{prog>=0?'+':''}{prog}</div><div className="bl">本月进步</div></div></div>
            <div className="bs"><div className="bi bg-orange-soft"><Ico d={Icons.gift} size={19}/></div><div><div className="bv" style={{color:'var(--orange-500)'}}>{c.points}</div><div className="bl">可用积分</div></div></div>
          </div>
        </div>
      </div>
    </div>

    <div className="big-actions">
      {bigActions.map(a=>(
        <div key={a.t} className={'big-action '+a.cls} onClick={()=>go(a.go)} style={{cursor:'pointer'}}>
          <h3>{a.t}</h3><p>{a.s}</p><div className="ico"><Ico d={a.icon} size={24} style={{color:'#fff'}}/></div>
        </div>
      ))}
    </div>

    <div className="two-col mb">
      <Card>
        <div className="card-head"><h3>近半年成绩趋势</h3><div className="spacer"></div><Tag tone="blue" className="link" onClick={()=>go('analysis')}>详情 ›</Tag></div>
        <EChart option={ChartOpt.trend(MONTH_LABEL, [{name:'综合',color:'#4ea3dd',data:comboTrend(c),area:true}], 60, 100)} height={240}/>
      </Card>
      <Card>
        <div className="card-head"><h3>各科掌握度</h3><div className="spacer"></div><span className="sub">满分 100</span></div>
        <EChart option={ChartOpt.radar(subs.map(s=>({name:s,max:100})), [{name:'掌握度',color:'#4ea3dd',data:subs.map(s=>Math.round(subjAvg[s]||0))}])} height={240}/>
      </Card>
    </div>

    <div className="soup-band">
      <div className="si"><Ico d={Icons.heart} size={26}/></div>
      <div className="q">“ {quote.t}”</div>
      <div style={{marginLeft:'auto',display:'flex',gap:10}}>
        <Button variant="soft" size="sm" onClick={()=>dispatch({type:'NEXT_QUOTE',audience:'student'})}>换一句</Button>
        <Button variant="ghost" size="sm" onClick={()=>dispatch({type:'TOGGLE_FAV',childId:c.id,quoteId:quote.id})}>{fav?'★ 已收藏':'☆ 收藏'}</Button>
      </div>
    </div>

    {localToastNode}

    <Modal open={joinModalOpen} onClose={()=>setJoinModalOpen(false)} title="加入家庭">
      <div className="field"><label>家庭码 <span className="req">*</span></label><input className="input" style={{textTransform:'uppercase',fontFamily:'monospace'}} placeholder="例如：XQ1234" maxLength="6" value={joinCode} onChange={e=>setJoinCode(e.target.value.toUpperCase())}/></div>
      <div style={{fontSize:12,color:'var(--ink-3)',lineHeight:1.6,background:'var(--surface-2)',padding:'10px 12px',borderRadius:8}}>家庭码由家长生成，每次绑定一个学生，学生只能属于一个家庭</div>
      <div style={{display:'flex',gap:12,justifyContent:'flex-end',marginTop:22}}>
        <Button variant="ghost" onClick={()=>setJoinModalOpen(false)}>取消</Button>
        <Button variant="warm" onClick={joinFamily} disabled={joinLoading}>{joinLoading ? '加入中...' : '加入家庭'}</Button>
      </div>
    </Modal>
  </>;
}

function ParentHome() {
  const { state, dispatch } = useStore();
  const { go } = useNav();
  const quote = QUOTES.parent[state.quoteIdx.parent];
  // 前端去重：确保同一个 id 只出现一次
  const seenIds = new Set();
  const kids = state.children.filter(k => {
    if (seenIds.has(k.id)) return false;
    seenIds.add(k.id);
    return true;
  });
  const famAvg = kids.length ? kids.reduce((a,c)=>a+Selectors.avgRate(c),0)/kids.length : 0;
  const monthCount = kids.reduce((a,c)=>a+c.exams.filter(e=>e.date.slice(0,7)==='2026-05').length,0);
  const profile = state.user && state.user.profile;
  const displayName = profile && profile.nickname ? profile.nickname : '家长';

  if (!kids.length) {
    return <Card style={{background:'var(--orange-50)',borderColor:'var(--orange-100)'}}>
      <div className="card-head"><h3 style={{color:'var(--orange-500)'}}>还没有绑定孩子</h3></div>
      <div style={{fontSize:13.5,color:'var(--ink-2)',lineHeight:1.7,marginBottom:16}}>请先添加孩子后查看学情。真实用户不会显示演示测试数据。</div>
      <Button size="lg" icon={<Ico d={Icons.users} size={18}/>} onClick={()=>go('family')}>去家庭管理</Button>
    </Card>;
  }

  return <>
    <div className="p-hero">
      <div className="p-welcome">
        <h2>{displayName}，{greetWord()} 🌟</h2>
        <p>本月 {kids.length} 个孩子共录入 {monthCount} 场考试。点击卡片可切换查看任一子女的完整数据。</p>
        <div className="child-cards">
          {kids.map(c=>{
            const on = c.id===state.activeChildId;
            const prog = Selectors.monthProgress(c);
            return <div key={c.id} className={'cc '+(on?'on':'')} onClick={()=>dispatch({type:'SET_CHILD',childId:c.id})} style={{cursor:'pointer'}}>
              <div className="top"><div className={'avt '+c.avatar}>{c.initial}</div><div><div className="nm">{c.name}</div><div className="gr">{c.grade}</div></div></div>
              <div className="mt"><div><div className="mv">{Selectors.avgRate(c).toFixed(0)}%</div><div className="ml">得分率</div></div><div><div className="mv" style={{color: on?'var(--green-600)':''}}>{prog>=0?'+':''}{prog}</div><div className="ml">本月进步</div></div></div>
            </div>;
          })}
        </div>
      </div>
      <Card className="soup-card" style={{display:'flex',flexDirection:'column'}}>
        <div className="card-head"><Tag tone="orange" dot>今日鸡汤 · 家长</Tag><div className="spacer"></div></div>
        <div className="quote"><span className="mk">“</span>{quote.t}<span className="mk">”</span></div>
        <div style={{marginTop:'auto',display:'flex',gap:10,paddingTop:16}}>
          <Button variant="soft" size="sm" style={{background:'var(--orange-50)',color:'var(--orange-500)'}} onClick={()=>dispatch({type:'NEXT_QUOTE',audience:'parent'})}>换一句</Button>
          <Button variant="ghost" size="sm" onClick={()=>go('soup')}>更多</Button>
        </div>
      </Card>
    </div>

    <div className="stat-strip mb">
      <Stat icon={<Ico d={Icons.users} size={22}/>} iconCls="bg-orange-soft" label="已绑定子女" value={kids.length} unit="名" trend="家庭管理" trendKind="flat"/>
      <Stat icon={<Ico d={Icons.list} size={22}/>} iconCls="bg-blue-soft" label="本月录入考试" value={monthCount} unit="场" trend={kids.map(k=>k.name+' '+k.exams.filter(e=>e.date.slice(0,7)==='2026-05').length).join(' · ')} trendKind="up"/>
      <Stat icon={<Ico d={Icons.chart} size={22}/>} iconCls="bg-green-soft" label="家庭平均得分率" value={famAvg.toFixed(0)} unit="%" trend="▲ 2.1%" trendKind="up"/>
      <Stat icon={<Ico d={Icons.gift} size={22}/>} iconCls="bg-orange-soft" label="家庭总积分" valueColor="var(--orange-500)" value={kids.reduce((a,c)=>a+c.points,0)} trend="可兑换权益" trendKind="flat"/>
    </div>

    <div className="two-col-15 mb">
      <Card>
        <div className="card-head"><h3>子女综合得分率对比</h3><span className="sub">近半年</span><div className="spacer"></div><Tag tone="orange" className="link" onClick={()=>go('family')}>多子女对比 ›</Tag></div>
        <EChart option={ChartOpt.trend(MONTH_LABEL, kids.map((c,i)=>({name:c.name,color:i?'#5fcfa0':'#4ea3dd',data:MONTHS_RAW(c),area:i===0})), 70, 100, true)} height={262}/>
      </Card>
      <Card>
        <div className="section-title"><span className="bar" style={{background:'var(--orange-400)'}}></span>家长快捷入口</div>
        <div className="quick-grid">
          <div className="quick" onClick={()=>go('family')}><div className="qi bg-orange-soft"><Ico d={Icons.users} size={20}/></div><div><div className="qt">家庭管理</div><div className="qs">{kids.length} 名子女</div></div></div>
          <div className="quick" onClick={()=>go('analysis')}><div className="qi bg-purple-soft"><Ico d={Icons.chart} size={20}/></div><div><div className="qt">学情分析</div><div className="qs">当前子女</div></div></div>
          <div className="quick" onClick={()=>go('points')}><div className="qi bg-green-soft"><Ico d={Icons.gift} size={20}/></div><div><div className="qt">自定义权益</div><div className="qs">家庭激励</div></div></div>
          <div className="quick" onClick={()=>go('records')}><div className="qi bg-blue-soft"><Ico d={Icons.list} size={20}/></div><div><div className="qt">成绩记录</div><div className="qs">可导出</div></div></div>
        </div>
        <hr className="hr"/>
        <div style={{background:'var(--orange-50)',borderRadius:'var(--r-sm)',padding:13,fontSize:12.5,color:'var(--orange-500)',lineHeight:1.6}}>💡 切换上方子女卡片，下方图表与全站数据会实时跟随刷新。</div>
      </Card>
    </div>
  </>;
}

function Home() {
  const { state } = useStore();
  return state.role==='parent' ? <ParentHome/> : <StudentHome/>;
}
Object.assign(window, { Home });