/* Attendance & Truancy Prevention — rate, one-tap absence report, pattern alert */
function AttendanceScreen({ onNav, onBack }) {
  const [sheet, setSheet] = React.useState(false);
  const [date, setDate] = React.useState('Today');
  const [reason, setReason] = React.useState(null);
  const [note, setNote] = React.useState('');
  const DATES = ['Today','Tomorrow','Pick a date'];
  const REASONS = [
    { id:'sick',  label:'Illness',     icon:'thermometer' },
    { id:'appt',  label:'Appointment', icon:'stethoscope' },
    { id:'family',label:'Family',      icon:'users' },
    { id:'other', label:'Other',       icon:'circle-ellipsis' },
  ];
  const recent = [
    { day:'Fri, May 29', status:'Present', bg:'var(--success-100)', fg:'var(--success-600)', icon:'check' },
    { day:'Thu, May 28', status:'Present', bg:'var(--success-100)', fg:'var(--success-600)', icon:'check' },
    { day:'Wed, May 27', status:'Tardy',   bg:'var(--warning-100)', fg:'var(--warning-600)', icon:'clock' },
    { day:'Tue, May 26', status:'Present', bg:'var(--success-100)', fg:'var(--success-600)', icon:'check' },
    { day:'Mon, May 25', status:'Excused', bg:'var(--info-100)',    fg:'var(--info-500)',    icon:'shield-check' },
  ];
  const reset = () => { setSheet(false); setReason(null); setNote(''); setDate('Today'); };
  const submit = () => {
    const r = REASONS.find(x=>x.id===reason);
    jlToast('Absence reported · ' + date + (r ? ' · ' + r.label : ''), { icon:'calendar-check' });
    reset();
  };

  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar title="Attendance" onBack={onBack} />
      <div style={{ padding:'14px 18px 40px' }}>

        {/* rate hero */}
        <div style={{ background:'#fff', border:'1px solid var(--gray-200)', borderRadius:16, padding:'18px', boxShadow:'var(--shadow-sm)' }}>
          <div style={{ fontSize:11, fontWeight:800, letterSpacing:'.09em', color:'var(--gray-500)' }}>THIS SCHOOL YEAR</div>
          <div style={{ display:'flex', alignItems:'baseline', gap:8, margin:'6px 0 2px' }}>
            <div style={{ fontSize:42, fontWeight:800, letterSpacing:'-.02em', color:'var(--ink)', fontFamily:'var(--font-mono)' }}>96%</div>
            <Pill bg="var(--success-100)" fg="var(--success-600)"><Icon name="trending-up" size={13} color="var(--success-600)" />On track</Pill>
          </div>
          <div style={{ fontSize:13, color:'var(--gray-500)' }}>172 of 180 school days present</div>
          <div style={{ display:'flex', gap:10, marginTop:15 }}>
            {[
              { n:'172', l:'Present', c:'var(--success-500)' },
              { n:'5',   l:'Absent',  c:'var(--danger-500)' },
              { n:'3',   l:'Tardy',   c:'var(--warning-600)' },
            ].map(s => (
              <div key={s.l} style={{ flex:1, background:'var(--gray-50)', borderRadius:12, padding:'11px 8px', textAlign:'center' }}>
                <div style={{ fontSize:20, fontWeight:800, color:s.c, fontFamily:'var(--font-mono)' }}>{s.n}</div>
                <div style={{ fontSize:11.5, fontWeight:600, color:'var(--gray-500)', marginTop:1 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* report absence CTA */}
        <button onClick={()=>setSheet(true)} style={{ width:'100%', marginTop:14, display:'flex', alignItems:'center', justifyContent:'center', gap:9, background:'var(--gold-400)', color:'var(--on-gold)', border:0, borderRadius:13, padding:'15px', fontWeight:800, fontSize:15, cursor:'pointer', fontFamily:'var(--font-sans)', boxShadow:'var(--shadow-gold)' }}>
          <Icon name="calendar-plus" size={19} color="var(--on-gold)" />Report an Absence
        </button>

        {/* pattern alert */}
        <div style={{ display:'flex', alignItems:'flex-start', gap:12, marginTop:16, background:'var(--warning-100)', borderRadius:14, padding:'14px 15px' }}>
          <span style={{ width:36, height:36, borderRadius:'999px', background:'var(--warning-500)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="alert-triangle" size={18} color="#fff" /></span>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:14, fontWeight:700, color:'var(--warning-600)' }}>Attendance pattern noticed</div>
            <div style={{ fontSize:12.5, color:'var(--warning-600)', opacity:.9, marginTop:2, lineHeight:1.45 }}>EJ has been absent or tardy on 3 Mondays this term. Catching this early helps avoid chronic absence.</div>
            <button onClick={()=>jlToast('Opening attendance details…', { icon:'bar-chart-3' })} style={{ marginTop:9, background:'transparent', border:0, padding:0, color:'var(--warning-600)', fontWeight:800, fontSize:13, cursor:'pointer', fontFamily:'var(--font-sans)', display:'inline-flex', alignItems:'center', gap:5 }}>
              See details<Icon name="arrow-right" size={14} color="var(--warning-600)" />
            </button>
          </div>
        </div>

        {/* recent days */}
        <SectionLabel>Recent Days</SectionLabel>
        <div style={cardWrap}>
          {recent.map((r,i) => (
            <React.Fragment key={r.day}>
              {i>0 && <Divider />}
              <div style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 14px' }}>
                <span style={{ width:34, height:34, borderRadius:9, background:r.bg, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
                  <Icon name={r.icon} size={17} color={r.fg} />
                </span>
                <div style={{ flex:1, fontSize:14.5, fontWeight:600, color:'var(--ink)' }}>{r.day}</div>
                <Pill bg={r.bg} fg={r.fg}>{r.status}</Pill>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* report-absence sheet */}
      {sheet && (
        <div onClick={reset} style={{ position:'absolute', inset:0, zIndex:60, background:'rgba(10,20,40,.4)', display:'flex', alignItems:'flex-end' }}>
          <div onClick={e=>e.stopPropagation()} style={{ width:'100%', background:'#fff', borderRadius:'22px 22px 0 0', padding:'10px 18px 30px' }}>
            <div style={{ width:40, height:4, borderRadius:'999px', background:'var(--gray-300)', margin:'0 auto 16px' }} />
            <div style={{ display:'flex', alignItems:'center', gap:11, marginBottom:16 }}>
              <span style={{ width:42, height:42, borderRadius:12, background:'var(--gold-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="calendar-plus" size={21} color="var(--gold-600)" /></span>
              <div>
                <div style={{ fontSize:18, fontWeight:800, color:'var(--ink)' }}>Report an Absence</div>
                <div style={{ fontSize:13, color:'var(--gray-500)' }}>For EJ Hatten · Katy Middle School</div>
              </div>
            </div>

            <div style={{ fontSize:12, fontWeight:700, color:'var(--gray-500)', marginBottom:7 }}>Which day?</div>
            <div style={{ display:'flex', gap:8, marginBottom:15 }}>
              {DATES.map(d => {
                const on = date===d;
                return (
                  <button key={d} onClick={()=>setDate(d)} style={{
                    flex:1, padding:'11px 4px', borderRadius:11, cursor:'pointer', fontFamily:'var(--font-sans)',
                    fontWeight:700, fontSize:13, border: on?'1.5px solid var(--navy-600)':'1px solid var(--gray-200)',
                    background: on?'var(--navy-600)':'#fff', color: on?'#fff':'var(--gray-600)',
                  }}>{d}</button>
                );
              })}
            </div>

            <div style={{ fontSize:12, fontWeight:700, color:'var(--gray-500)', marginBottom:7 }}>Reason</div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:9, marginBottom:15 }}>
              {REASONS.map(r => {
                const on = reason===r.id;
                return (
                  <button key={r.id} onClick={()=>setReason(r.id)} style={{
                    display:'flex', alignItems:'center', gap:10, padding:'12px 13px', borderRadius:12, cursor:'pointer',
                    fontFamily:'var(--font-sans)', textAlign:'left',
                    border: on?'1.5px solid var(--blue-500)':'1px solid var(--gray-200)',
                    background: on?'var(--blue-100)':'#fff',
                  }}>
                    <Icon name={r.icon} size={18} color={on?'var(--blue-600)':'var(--gray-500)'} />
                    <span style={{ fontSize:13.5, fontWeight:700, color: on?'var(--blue-700)':'var(--ink)' }}>{r.label}</span>
                  </button>
                );
              })}
            </div>

            <div style={{ fontSize:12, fontWeight:700, color:'var(--gray-500)', marginBottom:7 }}>Note to school (optional)</div>
            <div style={{ display:'flex', alignItems:'flex-start', gap:10, background:'var(--gray-100)', border:'1.5px solid var(--gray-200)', borderRadius:12, padding:'12px 13px', marginBottom:16 }}>
              <Icon name="pencil" size={17} color="var(--gray-500)" style={{ marginTop:2 }} />
              <textarea value={note} onChange={e=>setNote(e.target.value)} placeholder="e.g. Doctor's appointment at 10 AM" rows={2} style={{ flex:1, border:0, background:'transparent', outline:'none', resize:'none', fontSize:14, fontFamily:'var(--font-sans)', color:'var(--ink)' }} />
            </div>

            <button onClick={submit} disabled={!reason} style={{ width:'100%', display:'flex', alignItems:'center', justifyContent:'center', gap:8, background: reason?'var(--gold-400)':'var(--gray-200)', color: reason?'var(--on-gold)':'var(--gray-500)', border:0, borderRadius:12, padding:'15px', fontWeight:800, fontSize:15, cursor: reason?'pointer':'not-allowed', fontFamily:'var(--font-sans)', boxShadow: reason?'var(--shadow-gold)':'none' }}>
              <Icon name="check" size={17} color={reason?'var(--on-gold)':'var(--gray-500)'} />Submit Report
            </button>
            <button onClick={reset} style={{ width:'100%', marginTop:9, background:'transparent', color:'var(--gray-500)', border:0, padding:'10px', fontWeight:700, fontSize:14, cursor:'pointer', fontFamily:'var(--font-sans)' }}>Cancel</button>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { AttendanceScreen });