/* Parent → Forms & Permission Slips: review, e-sign, track status. */
function FormsScreen({ onNav, onBack }) {
  const [forms, setForms] = React.useState([
    { id:1, title:'Museum Field Trip', sub:'Houston Museum of Natural Science · Jun 10', due:'Due Jun 5', icon:'bus', tint:'var(--gold-100)', ic:'var(--gold-600)', status:'action', fee:'$15.00' },
    { id:2, title:'Media Release', sub:'Photos & video for school channels', due:'Due Jun 8', icon:'camera', tint:'var(--info-100)', ic:'var(--info-500)', status:'action', fee:null },
    { id:3, title:'Technology Use Agreement', sub:'Student device & internet policy', due:'Due Jun 12', icon:'laptop', tint:'var(--blue-100)', ic:'var(--blue-500)', status:'action', fee:null },
    { id:4, title:'Emergency Contact Update', sub:'Confirm your contacts for 2026\u201327', due:'Signed May 20', icon:'phone', tint:'var(--success-100)', ic:'var(--success-500)', status:'signed', fee:null },
    { id:5, title:'Photo Consent (Yearbook)', sub:'Include ' + jlChild().first + ' in the yearbook', due:'Signed May 12', icon:'book-image', tint:'var(--success-100)', ic:'var(--success-500)', status:'signed', fee:null },
  ]);
  const [sheet, setSheet] = React.useState(null);
  const [sig, setSig] = React.useState('');
  const [agree, setAgree] = React.useState(false);
  const openForm = (f) => { setSheet(f); setSig(''); setAgree(false); };
  const sign = () => {
    setForms(fs => fs.map(x => x.id===sheet.id ? { ...x, status:'signed', due:'Signed just now' } : x));
    jlToast(sheet.title + ' signed' + (sheet.fee ? ' · ' + sheet.fee + ' charged' : ''), { icon:'check-check' });
    setSheet(null);
  };
  const pending = forms.filter(f=>f.status==='action');
  const signed = forms.filter(f=>f.status==='signed');

  const Card = (f) => (
    <button key={f.id} onClick={()=>f.status==='action' ? openForm(f) : jlToast('Viewing signed ' + f.title, { icon:'file-check' })} style={{ width:'100%', display:'flex', alignItems:'center', gap:12, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'13px 14px', boxShadow:'var(--shadow-sm)', cursor:'pointer', fontFamily:'var(--font-sans)', textAlign:'left' }}>
      <span style={{ width:42, height:42, borderRadius:11, background:f.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={f.icon} size={20} color={f.ic} /></span>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{f.title}</div>
        <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{f.sub}</div>
        <div style={{ fontSize:11.5, color: f.status==='action'?'var(--danger-500)':'var(--gray-400)', fontWeight:600, marginTop:2 }}>{f.due}</div>
      </div>
      {f.status==='action'
        ? <Pill bg="var(--gold-100)" fg="var(--gold-600)">Sign</Pill>
        : <Icon name="circle-check-big" size={20} color="var(--success-500)" />}
    </button>
  );

  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar titleKey="t_forms" onBack={onBack} />
      <div style={{ padding:'14px 18px 40px' }}>
        <div style={{ display:'flex', alignItems:'center', gap:12, background:'var(--color-grad-hero)', borderRadius:16, padding:'16px 18px', color:'#fff', boxShadow:'var(--shadow-navy)' }}>
          <span style={{ width:44, height:44, borderRadius:12, background:'rgba(255,255,255,.16)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="file-signature" size={22} color="var(--gold-400)" /></span>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:19, fontWeight:800 }}>{pending.length} forms need signing</div>
            <div style={{ fontSize:12.5, color:'rgba(255,255,255,.8)' }}>Sign securely — no printing required</div>
          </div>
        </div>

        <SectionLabel>{jlT('l_action_required')}</SectionLabel>
        {pending.length === 0
          ? <div style={{ display:'flex', alignItems:'center', gap:10, background:'var(--success-100)', borderRadius:14, padding:'15px 16px' }}><Icon name="circle-check-big" size={20} color="var(--success-500)" /><span style={{ fontSize:14, fontWeight:700, color:'var(--success-600)' }}>All caught up — nothing to sign.</span></div>
          : <div style={{ display:'flex', flexDirection:'column', gap:11 }}>{pending.map(Card)}</div>}

        <SectionLabel>{jlT('l_completed')}</SectionLabel>
        <div style={{ display:'flex', flexDirection:'column', gap:11 }}>{signed.map(Card)}</div>
      </div>

      {sheet && (
        <div onClick={()=>setSheet(null)} 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', maxHeight:'88%', overflowY:'auto' }}>
            <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:14 }}>
              <span style={{ width:42, height:42, borderRadius:12, background:sheet.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={sheet.icon} size={21} color={sheet.ic} /></span>
              <div>
                <div style={{ fontSize:18, fontWeight:800, color:'var(--ink)' }}>{sheet.title}</div>
                <div style={{ fontSize:13, color:'var(--gray-500)' }}>{sheet.sub}</div>
              </div>
            </div>
            <div style={{ background:'var(--gray-50)', borderRadius:12, padding:'14px 15px', fontSize:13, color:'var(--gray-600)', lineHeight:1.55, marginBottom:14 }}>
              I give permission for my child, <strong style={{ color:'var(--ink)' }}>{jlChild().name}</strong>, to participate as described above. I understand the details, release the school from liability for reasonable risks, and confirm the information on file is accurate.
              {sheet.fee && <div style={{ marginTop:10, paddingTop:10, borderTop:'1px solid var(--gray-200)', display:'flex', justifyContent:'space-between', fontWeight:700, color:'var(--ink)' }}><span>Trip fee</span><span style={{ fontFamily:'var(--font-mono)' }}>{sheet.fee}</span></div>}
            </div>
            <label style={{ display:'flex', alignItems:'flex-start', gap:10, marginBottom:14, cursor:'pointer' }}>
              <button onClick={()=>setAgree(a=>!a)} style={{ width:24, height:24, borderRadius:7, border: agree?'0':'1.5px solid var(--gray-300)', background: agree?'var(--success-500)':'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', flex:'0 0 auto', marginTop:1 }}>{agree && <Icon name="check" size={15} color="#fff" />}</button>
              <span style={{ fontSize:13.5, color:'var(--gray-600)', lineHeight:1.45 }}>I have read and agree to the terms above.</span>
            </label>
            <div style={{ fontSize:12, fontWeight:700, color:'var(--gray-500)', marginBottom:7 }}>Type your full name to sign</div>
            <input value={sig} onChange={e=>setSig(e.target.value)} placeholder="Jermaine Hatten" style={{ width:'100%', boxSizing:'border-box', border:'1.5px solid var(--gray-200)', borderRadius:12, padding:'13px 14px', fontSize:18, fontFamily:'Georgia, serif', fontStyle:'italic', color:'var(--navy-600)', outline:'none', marginBottom:16 }} />
            <button onClick={sign} disabled={!agree || !sig.trim()} style={{ width:'100%', display:'flex', alignItems:'center', justifyContent:'center', gap:8, border:0, borderRadius:12, padding:'15px', fontWeight:800, fontSize:15, cursor: (agree&&sig.trim())?'pointer':'not-allowed', fontFamily:'var(--font-sans)', background:(agree&&sig.trim())?'var(--gold-400)':'var(--gray-200)', color:(agree&&sig.trim())?'var(--on-gold)':'var(--gray-500)', boxShadow:(agree&&sig.trim())?'var(--shadow-gold)':'none' }}>
              <Icon name="pen-line" size={17} color={(agree&&sig.trim())?'var(--on-gold)':'var(--gray-500)'} />Sign{sheet.fee ? ' & Pay ' + sheet.fee : ' Form'}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}
Object.assign(window, { FormsScreen });