// components/admin/Report.jsx
function Report() {
  const [sommario, setSommario]   = React.useState(null);
  const [perClasse, setPerClasse] = React.useState([]);
  const [danni, setDanni]         = React.useState([]);

  React.useEffect(() => {
    Promise.all([
      api('/report/sommario'),
      api('/report/per-classe'),
      api('/report/libri-danneggiati'),
    ]).then(([s, p, d]) => { setSommario(s); setPerClasse(p||[]); setDanni(d||[]); });
  }, []);

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

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">Report</h1>
        {sommario && <span style={{ fontSize:'.85rem', color:'var(--ink2)' }}>Anno {sommario.anno}</span>}
      </div>

      {sommario && (
        <div className="stat-grid" style={{ marginBottom:'1rem' }}>
          {[
            { label:'Alunni',      value: sommario.alunni },
            { label:'Prestiti',    value: sommario.prestiti },
            { label:'Consegnati',  value: sommario.consegnati },
            { label:'Restituiti',  value: sommario.restituiti },
            { label:'Quote pag.',  value: `${sommario.quote_pagate}/${sommario.quote_totali}` },
          ].map(c => (
            <div className="stat-card" key={c.label}>
              <div className="label">{c.label}</div>
              <div className="value">{c.value}</div>
            </div>
          ))}
        </div>
      )}

      <div className="card" style={{ marginBottom:'1rem' }}>
        <div style={{ fontWeight:700, marginBottom:'.75rem' }}>Per classe</div>
        <table className="tbl">
          <thead><tr><th>Classe</th><th>Anno</th><th>Assegnati</th><th>Consegnati</th><th>Restituiti</th></tr></thead>
          <tbody>
            {perClasse.map(r => (
              <tr key={r.classe}>
                <td style={{ fontWeight:600 }}>{r.classe}</td>
                <td>{r.anno_classe}°</td>
                <td>{r.tot_prestiti}</td>
                <td>{r.consegnati}</td>
                <td>{r.restituiti}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="card">
        <div style={{ fontWeight:700, marginBottom:'.75rem' }}>Libri con danni</div>
        {danni.length === 0
          ? <p style={{ color:'var(--green)', fontWeight:500 }}>✅ Nessun danno registrato</p>
          : (
            <table className="tbl">
              <thead><tr><th>Alunno</th><th>Libro</th><th className="hide-mobile">Codice</th><th>Stato</th></tr></thead>
              <tbody>
                {danni.map(d => (
                  <tr key={d.id}>
                    <td>{d.alunno}</td>
                    <td>{d.titolo}</td>
                    <td className="hide-mobile mono">{d.codice_interno}</td>
                    <td>{badgeStato(d.stato_restituzione)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
      </div>
    </div>
  );
}