/* Admin → Reports: attendance, transport, finance */
function ReportsScreen() {
  const week = [
    { d:'Mon', a:96 }, { d:'Tue', a:94 }, { d:'Wed', a:97 }, { d:'Thu', a:91 }, { d:'Fri', a:89 },
  ];
  const cards = [
    { title:'Attendance Summary', sub:'Daily & by grade', icon:'user-check', tint:'var(--blue-100)', ic:'var(--blue-500)' },
    { title:'Transport Utilization', sub:'Riders per route', icon:'bus', tint:'var(--gold-100)', ic:'var(--gold-600)' },
    { title:'Financial Statement', sub:'Collections & dues', icon:'banknote', tint:'var(--success-100)', ic:'var(--success-600)' },
    { title:'Incident Log', sub:'Safety & behavior', icon:'shield-alert', tint:'var(--danger-100)', ic:'var(--danger-500)' },
  ];
  return (
    <div style={{ padding:'22px 28px 40px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:16, marginBottom:16 }}>
        <Panel title="Attendance — This Week" action={<Pill bg="var(--success-100)" fg="var(--success-600)">Avg 93.4%</Pill>}>
          <div style={{ padding:'10px 4px 2px' }}>
            <BarChart data={[96,94,97,91,89]} labels={['Mon','Tue','Wed','Thu','Fri']} color="var(--navy-600)" height={172} max={100} valueFmt={v=>v+'%'} />
          </div>
        </Panel>
        <Panel title="On-Time Performance">
          {[['Buses on time','91%','var(--success-500)'],['Pickups verified','99%','var(--success-500)'],['Messages opened','78%','var(--warning-500)']].map(([l,p,col],i)=>(
            <div key={i} style={{ padding:'11px 0', borderBottom: i<2?'1px solid var(--gray-100)':'0' }}>
              <div style={{ display:'flex', justifyContent:'space-between', fontSize:13, marginBottom:6 }}><span style={{ fontWeight:700, color:'var(--ink)' }}>{l}</span><span style={{ color:col, fontWeight:700 }}>{p}</span></div>
              <div style={{ height:7, background:'var(--gray-200)', borderRadius:'999px', overflow:'hidden' }}><div style={{ width:p, height:'100%', background:col, borderRadius:'999px' }} /></div>
            </div>
          ))}
        </Panel>
      </div>

      <Panel title="Generate a Report" action={<span style={{ fontSize:12.5, color:'var(--gray-500)' }}>PDF or CSV</span>}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, padding:'6px 0 4px' }}>
          {cards.map((c,i)=>(
            <button key={i} onClick={()=>jlToast('Generating: '+c.title, { icon:c.icon })} style={{ textAlign:'left', background:'#fff', border:'1px solid var(--gray-200)', borderRadius:12, padding:'16px', cursor:'pointer', fontFamily:'var(--font-sans)', boxShadow:'var(--shadow-xs)' }}>
              <span style={{ width:38, height:38, borderRadius:10, background:c.tint, display:'flex', alignItems:'center', justifyContent:'center', marginBottom:12 }}><Icon name={c.icon} size={18} color={c.ic} /></span>
              <div style={{ fontSize:14, fontWeight:700, color:'var(--ink)' }}>{c.title}</div>
              <div style={{ fontSize:12.5, color:'var(--gray-500)', marginTop:2 }}>{c.sub}</div>
            </button>
          ))}
        </div>
      </Panel>
    </div>
  );
}
Object.assign(window, { ReportsScreen });