function ListeClasse() {
  const [classi, setClassi] = React.useState([]);
  const [classeSel, setClasseSel] = React.useState(null);
  const [alunni, setAlunni] = React.useState([]);
  const [filtro, setFiltro] = React.useState('non_consegnati');
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    api('/alunni/classi/lista').then(c => setClassi(c || []));
  }, []);

  async function loadAlunni(classe) {
    if (!classe) return;
    setLoading(true);
    const data = await api(`/alunni/classi/${classe.id}/estrazioni`);
    setAlunni(data || []);
    setLoading(false);
  }

  React.useEffect(() => {
    if (classeSel) loadAlunni(classeSel);
    else setAlunni([]);
  }, [classeSel]);

  const filtered = alunni.filter(a => {
    const consegnati = Number(a.prestiti_consegnati || 0);
    const totali = Number(a.prestiti_totali || 0);
    if (filtro === 'non_consegnati') return totali > 0 && consegnati === 0;
    if (filtro === 'parziale') return totali > 0 && consegnati > 0 && consegnati < totali;
    if (filtro === 'completati') return totali > 0 && consegnati === totali;
    return true;
  });

  function renderStato(a) {
    const consegnati = Number(a.prestiti_consegnati || 0);
    const totali = Number(a.prestiti_totali || 0);
    if (totali === 0) return <span className="badge badge-gray">Nessun libro</span>;
    if (consegnati === 0) return <span className="badge badge-red">Non consegnato</span>;
    if (consegnati < totali) return <span className="badge badge-orange">Parziale</span>;
    return <span className="badge badge-green">Completato</span>;
  }

  function stampaElenco() {
    window.print();
  }

  async function copiaElenco() {
    const righe = filtered.map(a => {
      const consegnati = Number(a.prestiti_consegnati || 0);
      const totali = Number(a.prestiti_totali || 0);
      return `${a.cognome} ${a.nome} — ${consegnati}/${totali} — ${a.ultima_consegna || 'nessuna consegna'}`;
    }).join('\n');
    try {
      await navigator.clipboard.writeText(righe);
      toast('Elenco copiato negli appunti', 'ok');
    } catch (err) {
      toast('Impossibile copiare negli appunti', 'err');
    }
  }

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">Liste classe</h1>
        <div className="page-actions">
          <select value={classeSel?.id || ''} onChange={e => setClasseSel(classi.find(c => String(c.id) === e.target.value) || null)}>
            <option value="">Seleziona classe</option>
            {classi.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
          </select>
          <select value={filtro} onChange={e => setFiltro(e.target.value)}>
            <option value="non_consegnati">Solo non consegnati</option>
            <option value="parziale">Solo parziali</option>
            <option value="completati">Solo completati</option>
            <option value="tutti">Tutti</option>
          </select>
          <button className="btn btn-success" onClick={stampaElenco}>Stampa / PDF</button>
          <button className="btn btn-ghost" onClick={copiaElenco}>Copia elenco</button>
        </div>
      </div>

      {!classeSel ? (
        <div className="card">Seleziona una classe per vedere gli estratti.</div>
      ) : (
        <div className="card" style={{ overflowX: 'auto' }}>
          <div style={{ marginBottom: '1rem', color: 'var(--ink2)' }}>
            Visualizzazione: <strong>{filtered.length}</strong> alunni su <strong>{alunni.length}</strong>.
          </div>
          <table className="tbl" style={{ minWidth: 860 }}>
            <thead>
              <tr>
                <th>Alunno</th>
                <th>Libri totali</th>
                <th>Consegnati</th>
                <th>Stato</th>
                <th>Ultima consegna</th>
              </tr>
            </thead>
            <tbody>
              {loading ? (
                <tr><td colSpan={5} style={{ textAlign: 'center' }}><div className="spinner" /></td></tr>
              ) : filtered.length === 0 ? (
                <tr><td colSpan={5} style={{ textAlign: 'center', color: 'var(--ink2)' }}>Nessun alunno trovato per questo filtro.</td></tr>
              ) : filtered.map(a => (
                <tr key={a.id}>
                  <td>{a.cognome} {a.nome}</td>
                  <td>{a.prestiti_totali || 0}</td>
                  <td>{a.prestiti_consegnati || 0}</td>
                  <td>{renderStato(a)}</td>
                  <td>{a.ultima_consegna || '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}