function Inventario() {
  const [libri, setLibri] = React.useState([]);
  const [classi, setClassi] = React.useState([]);
  const [classeId, setClasseId] = React.useState('');
  const [editing, setEditing] = React.useState({});
  const [loading, setLoading] = React.useState(false);
  const [savingId, setSavingId] = React.useState(null);

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

  React.useEffect(() => {
    loadLibri();
  }, [classeId]);

  async function loadLibri() {
    setLoading(true);
    const qs = new URLSearchParams();
    if (classeId) qs.set('classe_id', classeId);
    const data = await api('/libri?' + qs.toString());
    setLibri(data || []);
    setLoading(false);
  }

  function changeCopia(id, value) {
    setEditing(e => ({ ...e, [id]: value }));
  }

  async function saveInventario(id) {
    const value = editing[id];
    const copie = Number(value);
    if (!Number.isFinite(copie) || copie < 0) return toast('Inserisci un numero valido', 'err');
    setSavingId(id);
    const res = await api(`/libri/${id}/inventario`, 'PUT', { copie_inventario: copie });
    setSavingId(null);
    if (res?.errore) return toast(res.errore, 'err');
    toast('Inventario aggiornato', 'ok');
    loadLibri();
  }

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">Inventario libri</h1>
        <div className="page-actions">
          <select value={classeId} onChange={e => setClasseId(e.target.value)}>
            <option value="">Tutte le classi</option>
            {classi.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
          </select>
          <button className="btn btn-ghost" onClick={loadLibri}>↺ Aggiorna</button>
        </div>
      </div>

      <div className="card" style={{ overflowX: 'auto' }}>
        <table className="tbl" style={{ minWidth: 900 }}>
          <thead>
            <tr>
              <th>Libro</th>
              <th>Classe</th>
              <th>Copie inventario</th>
              <th>In prestito</th>
              <th>Disponibili</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr><td colSpan={6} style={{ textAlign: 'center' }}><div className="spinner" /></td></tr>
            ) : libri.length === 0 ? (
              <tr><td colSpan={6} style={{ textAlign: 'center', color: 'var(--ink2)' }}>Nessun libro trovato</td></tr>
            ) : libri.map(libro => {
              const inventario = Number(libro.copie_inventario) || 0;
              const disponibili = Number(libro.copie_disponibili) || 0;
              const inPrestito = Math.max(0, inventario - disponibili);
              const classiText = (libro.classi || []).map(c => c.nome).join(', ') || 'Nessuna classe';
              return (
                <tr key={libro.id}>
                  <td>
                    <div style={{ fontWeight: 700 }}>{libro.titolo}</div>
                    <div style={{ fontSize: '.78rem', color: 'var(--ink2)' }}>{libro.materia} · {libro.codice_interno}</div>
                  </td>
                  <td>{classiText}</td>
                  <td style={{ maxWidth: 120 }}>
                    <input
                      type="number"
                      min="0"
                      value={editing[libro.id] ?? inventario}
                      onChange={e => changeCopia(libro.id, e.target.value)}
                    />
                  </td>
                  <td>{inPrestito}</td>
                  <td>{disponibili}</td>
                  <td>
                    <button className="btn btn-success btn-sm" disabled={savingId === libro.id} onClick={() => saveInventario(libro.id)}>
                      {savingId === libro.id ? 'Salvo…' : 'Salva'}
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}