/* Admin → Attendance Inbox: receives parent absence reports, approve/excuse.
   Consumes what parents submit from the parent-app Attendance screen. */
function AttendanceInboxScreen() {
  const REASONS = {
    sick:   { label:'Illness',     icon:'thermometer',      tint:'var(--danger-100)',  ic:'var(--danger-500)' },
    appt:   { label:'Appointment', icon:'stethoscope',      tint:'var(--info-100)',    ic:'var(--info-500)' },
    family: { label:'Family',      icon:'users',            tint:'var(--gold-100)',    ic:'var(--gold-600)' },
    other:  { label:'Other',       icon:'circle-ellipsis',  tint:'var(--gray-100)',    ic:'var(--gray-500)' },
  };
  const [tab, setTab] = React.useState('pending');
  const [rows, setRows] = React.useState([
    { id:1, n:'EJ Hatten',    grade:'Gr 6 · Rm 214', c:'green', when:'Today',    reason:'sick',   note:'Fever overnight, keeping him home to rest.', by:'Jermaine Hatten', flag:false, status:'pending' },
    { id:2, n:'Liam Carter',  grade:'Gr 6 · Rm 214', c:'blue',  when:'Today',    reason:'appt',   note:'Orthodontist at 10 AM, back by lunch.',       by:'Dana Carter',    flag:false, status:'pending' },
    { id:3, n:'Ava Mitchell', grade:'Gr 7 · Rm 118', c:'red',   when:'Tomorrow', reason:'family', note:'Out of town for a family funeral.',            by:'Rose Mitchell',  flag:false, status:'pending' },
    { id:4, n:'Noah Bennett', grade:'Gr 6 · Rm 214', c:'cyan',  when:'Today',    reason:'other',  note:'', by:'K. Bennett', flag:true,  status:'pending' },
    { id:5, n:'Sophia Perez', grade:'Gr 7 · Rm 118', c:'gold',  when:'Yesterday',reason:'sick',   note:'Stomach bug.', by:'M. Perez', flag:false, status:'excused' },
  ]);
  const act = (id, status) => {
    setRows(rs => rs.map(r => r.id===id ? { ...r, status } : r));
    const r = rows.find(x=>x.id===id);
    jlToast(r.n + ' marked ' + status + ' · parent notified', { icon: status==='excused'?'check-check':'flag', color: status==='excused'?'#1F9D57':'#F0B540' });
  };
  const pending = rows.filter(r=>r.status==='pending');
  const list = tab==='pending' ? pending : rows.filter(r=>r.status!=='pending');
  const flagged = rows.filter(r=>r.flag && r.status==='pending').length;

  return (
    <div style={{ padding:'22px 28px 40px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:16 }}>
        <StatTile icon="inbox" tint="var(--gold-100)" ic="var(--gold-600)" value={pending.length} label="Awaiting review" />
        <StatTile icon="user-x" tint="var(--danger-100)" ic="var(--danger-500)" value="38" label="Absent today" delta="3.1%" />
        <StatTile icon="clock" tint="var(--warning-100)" ic="var(--warning-600)" value="12" label="Tardy today" />
        <StatTile icon="triangle-alert" tint="var(--danger-100)" ic="var(--danger-500)" value={flagged} label="Needs follow-up" />
      </div>

      <Panel
        title="Absence Reports"
        pad={false}
        action={
          <div style={{ display:'flex', gap:6, background:'var(--gray-100)', borderRadius:9, padding:3 }}>
            {[['pending','Pending'],['reviewed','Reviewed']].map(([id,l]) => (
              <button key={id} onClick={()=>setTab(id)} style={{ border:0, borderRadius:7, padding:'6px 14px', fontSize:12.5, fontWeight:700, cursor:'pointer', fontFamily:'var(--font-sans)', background: tab===id?'#fff':'transparent', color: tab===id?'var(--navy-600)':'var(--gray-500)', boxShadow: tab===id?'var(--shadow-xs)':'none' }}>{l}</button>
            ))}
          </div>
        }>
        {list.length===0 ? (
          <div style={{ display:'flex', alignItems:'center', gap:10, padding:'22px', color:'var(--success-600)' }}>
            <Icon name="circle-check-big" size={19} color="var(--success-500)" /><span style={{ fontSize:13.5, fontWeight:700 }}>Inbox zero — every report has been reviewed.</span>
          </div>
        ) : list.map((r,i) => {
          const rsn = REASONS[r.reason];
          return (
            <div key={r.id} style={{ display:'flex', alignItems:'center', gap:14, padding:'14px 18px', borderTop: i>0?'1px solid var(--gray-100)':'0' }}>
              <Avatar initials={r.n.split(' ').map(w=>w[0]).join('')} color={r.c} size={38} />
              <div style={{ width:150, flex:'0 0 auto', minWidth:0 }}>
                <div style={{ fontSize:14, fontWeight:700, color:'var(--ink)', display:'flex', alignItems:'center', gap:6 }}>{r.n}{r.flag && <Icon name="triangle-alert" size={13} color="var(--danger-500)" />}</div>
                <div style={{ fontSize:12, color:'var(--gray-500)' }}>{r.grade}</div>
              </div>
              <span style={{ flex:'0 0 auto' }}><Pill bg={rsn.tint} fg={rsn.ic}><Icon name={rsn.icon} size={12} color={rsn.ic} />{rsn.label}</Pill></span>
              <div style={{ width:66, flex:'0 0 auto', fontSize:12.5, fontWeight:600, color:'var(--gray-600)' }}>{r.when}</div>
              <div style={{ flex:1, minWidth:0, fontSize:13, color:'var(--gray-600)', fontStyle: r.note?'normal':'italic', lineHeight:1.4 }}>
                {r.note ? '“' + r.note + '”' : 'No note provided'}<span style={{ display:'block', fontSize:11.5, color:'var(--gray-400)', fontStyle:'normal', marginTop:2 }}>Reported by {r.by}</span>
              </div>
              {r.status==='pending' ? (
                <div style={{ display:'flex', gap:7, flex:'0 0 auto' }}>
                  <button onClick={()=>act(r.id,'excused')} style={{ display:'flex', alignItems:'center', gap:6, background:'var(--success-500)', color:'#fff', border:0, borderRadius:9, padding:'8px 13px', fontWeight:700, fontSize:13, cursor:'pointer', fontFamily:'var(--font-sans)' }}><Icon name="check" size={15} color="#fff" />Excuse</button>
                  <button onClick={()=>act(r.id,'flagged')} title="Flag for follow-up" style={{ width:34, height:34, borderRadius:9, border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}><Icon name="flag" size={15} color="var(--warning-600)" /></button>
                  <button onClick={()=>jlToast('Message '+r.by, { icon:'message-circle' })} style={{ width:34, height:34, borderRadius:9, border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}><Icon name="message-circle" size={15} color="var(--blue-500)" /></button>
                </div>
              ) : (
                <span style={{ flex:'0 0 auto' }}><Pill bg={r.status==='excused'?'var(--success-100)':'var(--warning-100)'} fg={r.status==='excused'?'var(--success-600)':'var(--warning-600)'}>{r.status==='excused'?'Excused':'Flagged'}</Pill></span>
              )}
            </div>
          );
        })}
      </Panel>
    </div>
  );
}
Object.assign(window, { AttendanceInboxScreen });