/* Admin → Forms & Permissions: create e-sign forms, track completion. */
function FormsAdminScreen() {
  const [forms, setForms] = React.useState([
    { id:1, title:'Museum Field Trip', type:'Trip', icon:'bus', tint:'var(--gold-100)', ic:'var(--gold-600)', signed:842, total:1248, due:'Jun 5', fee:'$15.00' },
    { id:2, title:'Media Release', type:'Consent', icon:'camera', tint:'var(--info-100)', ic:'var(--info-500)', signed:1103, total:1248, due:'Jun 8', fee:null },
    { id:3, title:'Technology Use Agreement', type:'Policy', icon:'laptop', tint:'var(--blue-100)', ic:'var(--blue-500)', signed:611, total:1248, due:'Jun 12', fee:null },
    { id:4, title:'Emergency Contact Update', type:'Annual', icon:'phone', tint:'var(--success-100)', ic:'var(--success-500)', signed:1248, total:1248, due:'Closed', fee:null },
  ]);
  const pct = (f) => Math.round((f.signed / f.total) * 100);
  const remind = (f) => jlToast('Reminder sent to ' + (f.total - f.signed) + ' families', { icon:'send' });
  const totalSigned = forms.reduce((s,f)=>s+f.signed,0);
  const totalPossible = forms.reduce((s,f)=>s+f.total,0);
  const avg = Math.round((totalSigned/totalPossible)*100);
  const outstanding = forms.reduce((s,f)=>s+(f.total-f.signed),0);

  return (
    <div style={{ padding:'26px 32px 48px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:20, marginBottom:22 }}>
        <StatTile icon="file-signature" tint="var(--blue-100)" ic="var(--blue-500)" value={forms.length} label="Active forms" />
        <StatTile icon="check-check" tint="var(--success-100)" ic="var(--success-600)" value={avg + '%'} label="Avg completion" delta="+5%" trend="up" />
        <StatTile icon="clock" tint="var(--warning-100)" ic="var(--warning-600)" value={outstanding.toLocaleString()} label="Signatures outstanding" />
        <StatTile icon="banknote" tint="var(--gold-100)" ic="var(--gold-600)" value="$12,630" label="Fees collected via forms" delta="+8%" trend="up" />
      </div>

      <Panel title="Active Forms" action={<button onClick={()=>jlToast('New form builder opened', { icon:'plus' })} style={{ display:'flex', alignItems:'center', gap:6, background:'var(--gold-400)', color:'var(--on-gold)', border:0, borderRadius:9, padding:'8px 13px', fontWeight:700, fontSize:12.5, cursor:'pointer', fontFamily:'var(--font-sans)', boxShadow:'var(--shadow-gold)' }}><Icon name="plus" size={14} color="var(--on-gold)" />New Form</button>} pad={false}>
        <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 2fr 1fr 1.2fr', padding:'11px 18px', background:'var(--gray-50)', fontSize:11, fontWeight:800, letterSpacing:'.05em', textTransform:'uppercase', color:'var(--gray-500)' }}>
          <span>Form</span><span>Type</span><span>Completion</span><span>Due</span><span style={{ textAlign:'right' }}>Action</span>
        </div>
        {forms.map((f,i) => {
          const p = pct(f), done = p >= 100;
          return (
            <div key={f.id} style={{ display:'grid', gridTemplateColumns:'2fr 1fr 2fr 1fr 1.2fr', alignItems:'center', padding:'13px 18px', borderTop:'1px solid var(--gray-100)', fontSize:13.5 }}>
              <span style={{ display:'flex', alignItems:'center', gap:11, minWidth:0 }}>
                <span style={{ width:36, height:36, borderRadius:10, background:f.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={f.icon} size={18} color={f.ic} /></span>
                <span style={{ minWidth:0 }}><span style={{ display:'block', fontWeight:700, color:'var(--ink)' }}>{f.title}</span>{f.fee && <span style={{ fontSize:11.5, color:'var(--gray-400)' }}>Fee {f.fee}</span>}</span>
              </span>
              <span><Pill bg="var(--gray-100)" fg="var(--gray-600)">{f.type}</Pill></span>
              <span style={{ paddingRight:16 }}>
                <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                  <div style={{ flex:1, height:7, borderRadius:'999px', background:'var(--gray-100)', overflow:'hidden' }}><div style={{ width:p+'%', height:'100%', borderRadius:'999px', background: done?'var(--success-500)':'var(--blue-500)' }} /></div>
                  <span style={{ fontSize:12, fontWeight:700, color:'var(--gray-600)', fontFamily:'var(--font-mono)', width:34, textAlign:'right' }}>{p}%</span>
                </div>
                <div style={{ fontSize:11, color:'var(--gray-400)', marginTop:3 }}>{f.signed.toLocaleString()} of {f.total.toLocaleString()} signed</div>
              </span>
              <span style={{ color: f.due==='Closed'?'var(--gray-400)':'var(--gray-600)', fontWeight:600 }}>{f.due}</span>
              <span style={{ justifySelf:'end' }}>
                {done
                  ? <Pill bg="var(--success-100)" fg="var(--success-600)"><Icon name="check" size={12} color="var(--success-600)" stroke={2.5} />Complete</Pill>
                  : <button onClick={()=>remind(f)} style={{ display:'inline-flex', alignItems:'center', gap:6, background:'var(--navy-600)', color:'#fff', border:0, borderRadius:8, padding:'7px 12px', fontWeight:700, fontSize:12, cursor:'pointer', fontFamily:'var(--font-sans)' }}><Icon name="send" size={13} color="#fff" />Remind</button>}
              </span>
            </div>
          );
        })}
      </Panel>
    </div>
  );
}
Object.assign(window, { FormsAdminScreen });