// components/admin/Prestiti.jsx
function Prestiti() {
  const [prestiti, setPrestiti] = React.useState([]);
  const [classi, setClassi]     = React.useState([]);
  const [classeF, setClasseF]   = React.useState('');

  async function carica() {
    const p = new URLSearchParams({ aperto: '1' });
    const [pr, cl] = await Promise.all([api('/prestiti?' + p), api('/alunni/classi/lista')]);
    setPrestiti(pr || []);
    setClassi(cl || []);
  }

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

  const filtered = classeF ? prestiti.filter(p => String(p.classe_id) === classeF) : prestiti;

  const STATI = ['nuovo', 'buono', 'discreto', 'danneggiato', 'parziale'];
  const badgeStato = s => {
    const map = { nuovo: 'badge-green', buono: 'badge-yellow', discreto: 'badge-orange', danneggiato: 'badge-red', parziale: 'badge-orange' };
    const emoji = { nuovo: '🟢', buono: '🟡', discreto: '🟠', danneggiato: '🔴', parziale: '⚠️' };
    return <span className={`badge ${map[s] || 'badge-gray'}`}>{emoji[s] || '⚪'} {s || '—'}</span>;
  };

  async function ritira(p) {
    const stato = prompt('Stato al ritiro:\nnuovo / buono / discreto / danneggiato / parziale', 'buono');
    if (!stato || !STATI.includes(stato.trim().toLowerCase())) return;
    const statoClean = stato.trim().toLowerCase();
    let parti = '';
    if (statoClean === 'parziale') {
      parti = prompt(`Specifica quale fascicolo o parte manca per il libro:\n"${p.titolo}"\n\nVolumi previsti:\n${p.volumi || 'Nessun dettaglio volumi'}`, 'Manca fascicolo ');
      if (!parti) return;
    }
    await api(`/prestiti/${p.id}/restituzione`, 'PUT', { stato_restituzione: statoClean, parti_mancanti: parti });
    toast('Restituzione registrata', 'ok');
    carica();
  }

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">Prestiti aperti</h1>
        <div className="page-actions">
          <select value={classeF} onChange={e => setClasseF(e.target.value)} style={{ width: 'auto' }}>
            <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={carica}>↺ Aggiorna</button>
        </div>
      </div>

      <div className="card" style={{ overflowX: 'auto' }}>
        <table className="tbl" style={{ minWidth: 700 }}>
          <thead>
            <tr>
              <th>Alunno</th>
              <th className="hide-mobile">Classe</th>
              <th>Libro</th>
              <th className="hide-mobile">Materia</th>
              <th>Stato consegna</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(p => (
              <tr key={p.id}>
                <td style={{ fontWeight: 600 }}>{p.alunno}</td>
                <td className="hide-mobile" style={{ color: 'var(--ink2)' }}>{p.classe || '—'}</td>
                <td>
                  <div style={{ fontWeight: 600, color: 'var(--ink)' }}>{p.titolo}</div>
                  {p.isbn && <div style={{ fontSize: '.75rem', color: 'var(--ink2)', fontFamily: 'monospace' }}>ISBN: {p.isbn}</div>}
                </td>
                <td className="hide-mobile" style={{ color: 'var(--ink2)' }}>{p.materia || '—'}</td>
                <td>{badgeStato(p.stato_consegna)}</td>
                <td>
                  <button className="btn btn-success btn-sm" onClick={() => ritira(p)}>↩ Ritira</button>
                </td>
              </tr>
            ))}
            {filtered.length === 0 && (
              <tr><td colSpan={6} style={{ textAlign: 'center', color: 'var(--ink2)', padding: '1.5rem' }}>Nessun prestito aperto</td></tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}