/* Admin → Documents: shared file library (policies, handbooks, newsletters). */
function DocumentsScreen() {
  const [docs, setDocs] = React.useState([
    { id:1, name:'Family Handbook 2026–27', cat:'Policies', type:'PDF', size:'2.4 MB', when:'Jun 1', by:'District Office', dl:412, icon:'book-open', tint:'var(--blue-100)', ic:'var(--blue-500)' },
    { id:2, name:'Bus Route Map — Fall', cat:'Transportation', type:'PDF', size:'1.1 MB', when:'May 28', by:'Transportation', dl:288, icon:'map', tint:'var(--gold-100)', ic:'var(--gold-600)' },
    { id:3, name:'June Newsletter', cat:'Newsletters', type:'PDF', size:'860 KB', when:'May 30', by:'Front Office', dl:531, icon:'newspaper', tint:'var(--success-100)', ic:'var(--success-500)' },
    { id:4, name:'Free & Reduced Lunch Form', cat:'Forms', type:'PDF', size:'220 KB', when:'May 20', by:'Nutrition Svcs', dl:174, icon:'utensils', tint:'var(--danger-100)', ic:'var(--danger-500)' },
    { id:5, name:'Immunization Requirements', cat:'Health', type:'PDF', size:'340 KB', when:'May 12', by:'Nurse Adams', dl:96, icon:'heart-pulse', tint:'var(--info-100)', ic:'var(--info-500)' },
    { id:6, name:'Code of Conduct', cat:'Policies', type:'PDF', size:'1.8 MB', when:'Aug 2025', by:'District Office', dl:640, icon:'shield-check', tint:'var(--blue-100)', ic:'var(--blue-500)' },
  ]);
  const CATS = ['All', 'Policies', 'Transportation', 'Newsletters', 'Forms', 'Health'];
  const [cat, setCat] = React.useState('All');
  const shown = cat==='All' ? docs : docs.filter(d=>d.cat===cat);
  const remove = (id) => { setDocs(d => d.filter(x=>x.id!==id)); jlToast('Document removed', { icon:'trash-2', color:'#E5484D' }); };

  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="folder" tint="var(--blue-100)" ic="var(--blue-500)" value={docs.length} label="Documents" />
        <StatTile icon="download" tint="var(--success-100)" ic="var(--success-600)" value="2,141" label="Total downloads" delta="+124" trend="up" />
        <StatTile icon="clock" tint="var(--gold-100)" ic="var(--gold-600)" value="June Newsletter" label="Most recent" />
        <StatTile icon="star" tint="var(--warning-100)" ic="var(--warning-600)" value="Code of Conduct" label="Most downloaded" />
      </div>

      <Panel
        title="Document Library"
        action={<button onClick={()=>jlToast('Upload dialog opened', { icon:'upload' })} 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="upload" size={14} color="var(--on-gold)" />Upload</button>}
        pad={false}>
        <div style={{ display:'flex', gap:8, padding:'12px 18px', borderBottom:'1px solid var(--gray-100)', flexWrap:'wrap' }}>
          {CATS.map(c => { const on = cat===c; return (
            <button key={c} onClick={()=>setCat(c)} style={{ padding:'7px 14px', borderRadius:'999px', cursor:'pointer', fontFamily:'var(--font-sans)', fontWeight:700, fontSize:12.5, border: on?'0':'1px solid var(--gray-200)', background: on?'var(--navy-600)':'#fff', color: on?'#fff':'var(--gray-600)' }}>{c}</button>
          ); })}
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'2.2fr 1fr 1fr 1.1fr 1fr', padding:'11px 18px', background:'var(--gray-50)', fontSize:11, fontWeight:800, letterSpacing:'.05em', textTransform:'uppercase', color:'var(--gray-500)' }}>
          <span>Document</span><span>Category</span><span>Size</span><span>Updated</span><span style={{ textAlign:'right' }}>Actions</span>
        </div>
        {shown.map((d,i) => (
          <div key={d.id} style={{ display:'grid', gridTemplateColumns:'2.2fr 1fr 1fr 1.1fr 1fr', alignItems:'center', padding:'12px 18px', borderTop:'1px solid var(--gray-100)', fontSize:13.5 }}>
            <span style={{ display:'flex', alignItems:'center', gap:11, minWidth:0 }}>
              <span style={{ width:38, height:38, borderRadius:10, background:d.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={d.icon} size={18} color={d.ic} /></span>
              <span style={{ minWidth:0 }}><span style={{ display:'block', fontWeight:700, color:'var(--ink)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{d.name}</span><span style={{ fontSize:11.5, color:'var(--gray-400)' }}>{d.type} · {d.dl} downloads · {d.by}</span></span>
            </span>
            <span><Pill bg="var(--gray-100)" fg="var(--gray-600)">{d.cat}</Pill></span>
            <span style={{ color:'var(--gray-600)', fontFamily:'var(--font-mono)', fontSize:12.5 }}>{d.size}</span>
            <span style={{ color:'var(--gray-600)' }}>{d.when}</span>
            <span style={{ justifySelf:'end', display:'flex', gap:6 }}>
              <button onClick={()=>jlToast('Downloading ' + d.name, { icon:'download' })} title="Download" style={{ width:30, height:30, borderRadius:8, border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}><Icon name="download" size={14} color="var(--blue-500)" /></button>
              <button onClick={()=>{ JLBackend.update('docs', prev => { const list = prev||[]; if (list.some(x=>x.name===d.name)) return list; return [{ name:d.name, cat:d.cat, type:d.type, size:d.size, when:'Just now', icon:d.icon, tint:d.tint, ic:d.ic }, ...list]; }, []); jlToast('Shared “' + d.name + '” to families', { icon:'send', color:'#1F9D57' }); }} title="Share to families" style={{ width:30, height:30, borderRadius:8, border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}><Icon name="send" size={14} color="var(--navy-600)" /></button>
              <button onClick={()=>remove(d.id)} title="Remove" style={{ width:30, height:30, borderRadius:8, border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}><Icon name="trash-2" size={14} color="var(--danger-500)" /></button>
            </span>
          </div>
        ))}
        {shown.length===0 && <div style={{ padding:'22px', textAlign:'center', color:'var(--gray-400)', fontSize:13.5 }}>No documents in this category.</div>}
      </Panel>
    </div>
  );
}
Object.assign(window, { DocumentsScreen });