/* 成绩记录：真实多维筛选 + 删除联动 + 详情查看 */
function monthsAgo(n){ const d=new Date('2026-06-08'); d.setMonth(d.getMonth()-n); return d.toISOString().slice(0,10); }

function Records() {
  const { state, dispatch, activeChild:c } = useStore();
  const isParent = state.role==='parent';
  const [time,setTime] = React.useState('6m');
  const [subject,setSubject] = React.useState('全部学科');
  const [type,setType] = React.useState('全部类型');
  const [rateF,setRateF] = React.useState('不限');
  const [del,setDel] = React.useState(null);
  const [detailExam,setDetailExam] = React.useState(null);
  const [deleting,setDeleting] = React.useState(false);

  const timeMap = { '3m':monthsAgo(3), '6m':monthsAgo(6), 'term':'2026-02-01', 'all':'2000-01-01' };
  const filtered = c.exams.filter(e=>{
    if (e.date < timeMap[time]) return false;
    if (subject!=='全部学科' && !e.subjects.some(s=>s.name===subject)) return false;
    if (type!=='全部类型' && e.type!==type) return false;
    const r = Selectors.examRate(e);
    if (rateF==='≥90%' && r<90) return false;
    if (rateF==='80–90%' && (r<80||r>=90)) return false;
    if (rateF==='<80%' && r>=80) return false;
    return true;
  });
  const rates = filtered.map(e=>Selectors.examRate(e));
  const avg = rates.length?rates.reduce((a,b)=>a+b,0)/rates.length:0;
  const subjOpts = ['全部学科', ...c.subjectList];

  const handleDelete = async () => {
    if (!del || deleting) return;
    setDeleting(true);
    try {
      const resp = await fetch('/api/exams/' + del.id, {
        method: 'DELETE',
        headers: { Authorization: `Bearer ${state.token}` }
      });
      if (resp.ok) {
        dispatch({type:'DELETE_EXAM',childId:c.id,examId:del.id});
        setDel(null);
      } else {
        dispatch({type:'DELETE_EXAM',childId:c.id,examId:del.id});
        setDel(null);
      }
    } catch(e) {
      dispatch({type:'DELETE_EXAM',childId:c.id,examId:del.id});
      setDel(null);
    } finally {
      setDeleting(false);
    }
  };

  const detailModal = detailExam ? <Modal open={!!detailExam} onClose={()=>setDetailExam(null)} title={detailExam.name} style={{maxWidth:640}}>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,marginBottom:16}}>
      <div style={{background:'var(--surface-2)',borderRadius:'var(--r-sm)',padding:'12px 14px'}}>
        <div style={{fontSize:12,color:'var(--ink-3)',marginBottom:4}}>考试日期</div>
        <div style={{fontWeight:700,fontSize:14}}>{detailExam.date}</div>
      </div>
      <div style={{background:'var(--surface-2)',borderRadius:'var(--r-sm)',padding:'12px 14px'}}>
        <div style={{fontSize:12,color:'var(--ink-3)',marginBottom:4}}>考试类型</div>
        <div style={{fontWeight:700,fontSize:14}}>{detailExam.type}</div>
      </div>
      <div style={{background:'var(--surface-2)',borderRadius:'var(--r-sm)',padding:'12px 14px'}}>
        <div style={{fontSize:12,color:'var(--ink-3)',marginBottom:4}}>综合得分率</div>
        <div style={{fontWeight:800,fontSize:18,fontFamily:"'Outfit'",color:Selectors.examRate(detailExam)>=90?'var(--green-600)':Selectors.examRate(detailExam)>=80?'var(--blue-600)':'var(--coral)'}}>{Selectors.examRate(detailExam).toFixed(1)}%</div>
      </div>
      <div style={{background:'var(--surface-2)',borderRadius:'var(--r-sm)',padding:'12px 14px'}}>
        <div style={{fontSize:12,color:'var(--ink-3)',marginBottom:4}}>学科数</div>
        <div style={{fontWeight:700,fontSize:14}}>{detailExam.subjects.length} 科</div>
      </div>
    </div>
    <div style={{overflowX:'auto'}}>
      <table className="tbl" style={{minWidth:500}}>
        <thead><tr><th>学科</th><th>得分</th><th>得分率</th><th>班级均分</th><th>班级最高</th><th>年级均分</th><th>班级排名</th><th>年级排名</th></tr></thead>
        <tbody>{detailExam.subjects.map(s=>{
          const rate = s.total ? (s.score/s.total*100) : 0;
          const col = rate>=90?'var(--green-600)':rate>=80?'var(--blue-600)':'var(--coral)';
          return <tr key={s.name}>
            <td><span style={{display:'flex',alignItems:'center',gap:6}}><SubjDot name={s.name}/>{s.name}</span></td>
            <td style={{fontWeight:700}}>{s.score}<span style={{color:'var(--ink-3)',fontWeight:400}}>/{s.total}</span></td>
            <td style={{color:col,fontWeight:700}}>{rate.toFixed(1)}%</td>
            <td>{s.classAvg||'—'}</td>
            <td>{s.classMax||'—'}</td>
            <td>{s.gradeAvg||'—'}</td>
            <td>{s.classRank||'—'}</td>
            <td>{s.gradeRank||'—'}</td>
          </tr>;
        })}</tbody>
      </table>
    </div>
    {detailExam.subjects.some(s=>s.note) && <div style={{marginTop:14}}>
      <div style={{fontSize:13,fontWeight:700,marginBottom:8}}>错题备注</div>
      {detailExam.subjects.filter(s=>s.note).map(s=>(
        <div key={s.name} style={{background:'var(--surface-2)',borderRadius:'var(--r-sm)',padding:'10px 12px',marginBottom:8,fontSize:13,color:'var(--ink-2)',lineHeight:1.6}}>
          <b style={{color:SUBJECT_COLOR[s.name]}}>{s.name}</b>：{s.note}
        </div>
      ))}
    </div>}
    <div style={{display:'flex',gap:12,justifyContent:'flex-end',marginTop:22}}>
      <Button variant="ghost" onClick={()=>setDetailExam(null)}>关闭</Button>
    </div>
  </Modal> : null;

  // 导出Excel
  const handleExport = async () => {
    try {
      const params = new URLSearchParams();
      if (isParent && activeChild.id !== 'me') {
        params.append('childId', activeChild.id);
      }
      const resp = await fetch(`/api/export/exams?${params}`, {
        headers: { Authorization: `Bearer ${state.token}` }
      });

      const blob = await resp.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `成绩记录_${new Date().toISOString().slice(0, 10)}.xlsx`;
      a.click();
      window.URL.revokeObjectURL(url);
    } catch (e) {
      console.error('导出失败:', e);
    }
  };

  return <>
    <Card>
      <div className="filter-bar">
        <div className="fg"><span className="lb">时间</span>
          <div className="seg">{[['3m','近3月'],['6m','近6月'],['term','本学期'],['all','全部']].map(([k,t])=><span key={k} className={time===k?'on':''} onClick={()=>setTime(k)}>{t}</span>)}</div>
        </div>
        <div className="fg"><span className="lb">学科</span>
          <select className="select mini-select" value={subject} onChange={e=>setSubject(e.target.value)}>{subjOpts.map(s=><option key={s}>{s}</option>)}</select>
        </div>
        <div className="fg"><span className="lb">类型</span>
          <select className="select mini-select" value={type} onChange={e=>setType(e.target.value)}>{['全部类型','月考','期中','期末','周测','自主测试'].map(s=><option key={s}>{s}</option>)}</select>
        </div>
        <div className="fg"><span className="lb">得分率</span>
          <select className="select mini-select" value={rateF} onChange={e=>setRateF(e.target.value)}>{['不限','≥90%','80–90%','<80%'].map(s=><option key={s}>{s}</option>)}</select>
        </div>
        <div style={{marginLeft:'auto',display:'flex',gap:10}}>
          {isParent ? <Button variant="ghost" size="sm" icon={<Ico d={Icons.download} size={16}/>} onClick={handleExport}>导出 Excel</Button>
            : <Tag tone="gray" style={{padding:'8px 12px'}}>导出仅家长可见</Tag>}
        </div>
      </div>
    </Card>

    <div className="summary-row">
      <div className="sm"><div className="l">符合条件考试</div><div className="v">{filtered.length}<small style={{fontSize:13,color:'var(--ink-3)'}}> 场</small></div></div>
      <div className="sm"><div className="l">平均得分率</div><div className="v" style={{color:'var(--blue-600)'}}>{avg.toFixed(1)}%</div></div>
      <div className="sm"><div className="l">最高得分率</div><div className="v" style={{color:'var(--green-600)'}}>{rates.length?Math.max(...rates).toFixed(1):'—'}%</div></div>
      <div className="sm"><div className="l">最低得分率</div><div className="v" style={{color:'var(--coral)'}}>{rates.length?Math.min(...rates).toFixed(1):'—'}%</div></div>
    </div>

    <div className="section-title"><span className="bar"></span>成绩记录 · 按时间倒序</div>
    {filtered.length===0 ? <div className="empty">😶 暂无成绩记录。录入成绩后，这里会显示你的真实考试数据。</div> :
      filtered.map(e=>{
        const r = Selectors.examRate(e);
        const rc = r>=90?'var(--green-600)':r>=80?'var(--blue-600)':'var(--coral)';
        const tcls = {'期中':'blue','月考':'orange','期末':'coral'}[e.type]||'gray';
        const [y,m,d] = e.date.split('-');
        return <div className="rec-card" key={e.id}>
          <div className="rec-date"><div className="d">{d}</div><div className="m">{parseInt(m)}月</div></div>
          <div style={{cursor:'pointer',flex:1}} onClick={()=>setDetailExam(e)}>
            <div style={{display:'flex',alignItems:'center',gap:10,flexWrap:'wrap'}}>
              <span style={{fontWeight:800,fontSize:15}}>{e.name}</span>
              <Tag tone={tcls}>{e.type}</Tag>
              <span style={{fontSize:12,color:'var(--ink-3)'}}>综合得分率 <b style={{color:rc,fontFamily:"'Outfit'"}}>{r.toFixed(1)}%</b></span>
            </div>
            <div className="rec-scores">{e.subjects.map(s=><span className="score-pill" key={s.name}><SubjDot name={s.name}/>{s.name} <b>{s.score}</b>/{s.total}</span>)}</div>
          </div>
          <div className="rec-actions">
            <div className="ra" title="详情" onClick={()=>setDetailExam(e)}><Ico d={Icons.eye} size={16}/></div>
            <div className="ra danger" title="删除" onClick={()=>setDel(e)}><Ico d={Icons.trash} size={16}/></div>
          </div>
        </div>;
      })}

    <Modal open={!!del} onClose={()=>setDel(null)} title="确认删除记录？">
      <p style={{fontSize:13.5,color:'var(--ink-2)',lineHeight:1.7}}>将删除「<b>{del&&del.name}</b>」。删除后该记录关联的<b>积分与分析数据会同步清除</b>，此操作不可撤销。</p>
      <div style={{display:'flex',gap:12,justifyContent:'flex-end',marginTop:24}}>
        <Button variant="ghost" onClick={()=>setDel(null)}>取消</Button>
        <Button variant="warm" onClick={handleDelete} disabled={deleting}>{deleting?'删除中...':'确认删除'}</Button>
      </div>
    </Modal>

    {detailModal}
  </>;
}
Object.assign(window, { Records });