// components/assistente/Assistente.jsx
// Step 1 → Classe, Step 2 → Alunno, Step 3 → Libri (consegna/restituzione/storico)
function Assistente() {
  const [step, setStep] = React.useState('classi'); // classi | alunni | libri
  const [classi, setClassi] = React.useState([]);
  const [alunni, setAlunni] = React.useState([]);
  const [classeSel, setClasseSel] = React.useState(null);
  const [alunnoSel, setAlunnoSel] = React.useState(null);
  const [prestiti, setPrestiti] = React.useState([]);
  const [emojiTot, setEmojiTot] = React.useState('⚪');
  const [tab, setTab] = React.useState('consegna');
  const [pendenti, setPendenti] = React.useState(false);
  const [cerca, setCerca] = React.useState('');
  const [stati, setStati] = React.useState({}); // prestito_id → stato scelto
  const [partiMancanti, setPartiMancanti] = React.useState({}); // prestito_id → testo fascicoli mancanti
  const [modalConsegna, setModalConsegna] = React.useState(null);
  const [nonConsegnatiParziali, setNonConsegnatiParziali] = React.useState({});
  const [forceConsegna, setForceConsegna] = React.useState(false);
  const [showForceModal, setShowForceModal] = React.useState(false);
  const [pendingAction, setPendingAction] = React.useState(null); // {type:'singolo'|'classe', payload:...}
  const [modalConsegnaMultipla, setModalConsegnaMultipla] = React.useState(null);
  const [selectedAlunniMultipli, setSelectedAlunniMultipli] = React.useState({});
  const [selectedLibriMultipli, setSelectedLibriMultipli] = React.useState({});

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

  async function selClasse(c) {
    setClasseSel(c);
    setAlunni(await api(`/alunni?classe_id=${c.id}`) || []);
    setCerca('');
    setStep('alunni');
  }

  async function selAlunno(a) {
    setAlunnoSel(a);
    const r = await api(`/prestiti/riepilogo/${a.id}`);
    setPrestiti(r?.prestiti || []);
    setEmojiTot(r?.emoji_totale || '⚪');
    setStati({});
    setPartiMancanti({});
    setPendenti(false);
    setTab('consegna');
    setStep('libri');
  }

  function aggiornaStato(id, val) {
    setStati(s => ({ ...s, [id]: val }));
    setPendenti(true);
  }

  async function refreshAlunni() {
    if (!classeSel) return;
    setAlunni(await api(`/alunni?classe_id=${classeSel.id}`) || []);
  }

  async function segnaQuotaPagata(alunno, tipo) {
    const utenteId = alunno.genitore_id;
    if (!utenteId) {
      // Fallback: crea una riga in `quote` e segna pagata, così resta tracciato anche senza genitore
      try {
        const created = await api('/quote', 'POST', {
          alunno_id: alunno.id,
          importo: Number(alunno.quota_importo) || 0
        });
        const qid = created?.id;
        if (qid) {
          await api(`/quote/${qid}/paga`, 'PUT');
          toast('Pagamento registrato localmente (nessun genitore).', 'ok');
          await refreshAlunni();
          return;
        }
      } catch (err) {
        toast(err?.message || 'Errore durante la segnalazione');
        return;
      }
    }

    try {
      await api(`/portale/adesione/${utenteId}/conferma`, 'PUT', {
        pagato: 1,
        pagamento_tipo: tipo || 'contanti',
        note: `Segnalato da assistente per ${alunno.cognome} ${alunno.nome} (${tipo || 'contanti'})`
      });
      toast('Pagamento segnalato all’amministratore ✅', 'ok');
      await refreshAlunni();
    } catch (err) {
      toast(err?.message || 'Errore durante la segnalazione');
    }
  }

  async function apriConsegnaClasse(alunno, tipo) {
    setModalConsegna({ loading: true, alunno, tipo, libri: [], force: false });
    const [libriClasse, riepilogo] = await Promise.all([
      api(`/libri?classe_id=${classeSel?.id}`),
      api(`/prestiti/riepilogo/${alunno.id}`)
    ]);

    const consegnati = new Set((riepilogo?.prestiti || []).filter(p => p.data_consegna).map(p => p.libro_id));
    const libri = (libriClasse || []).map(l => ({ ...l, consegnato: consegnati.has(l.id) }));
    const selezioneIniziale = {};
    libri.forEach(l => {
      if (!l.consegnato) selezioneIniziale[l.id] = false;
    });

    setModalConsegna({ loading: false, alunno, tipo, libri, force: false });
    setNonConsegnatiParziali(selezioneIniziale);
  }

  // --- Consegna multipla: apri modal con lista alunni della classe e libri della classe
  async function apriConsegnaMultipla() {
    setModalConsegnaMultipla({ loading: true, libri: [], force: false });
    // assicurati di avere gli alunni caricati
    const [libriClasse] = await Promise.all([
      api(`/libri?classe_id=${classeSel?.id}`)
    ]);
    const libri = (libriClasse || []).map(l => ({ ...l, selected: false }));
    const selAl = {};
    (alunni || []).forEach(a => { selAl[a.id] = false; });
    const selLib = {};
    libri.forEach(l => { selLib[l.id] = false; });
    setSelectedAlunniMultipli(selAl);
    setSelectedLibriMultipli(selLib);
    setModalConsegnaMultipla({ loading: false, libri, force: false });
  }

  function toggleSelectAlunno(id) {
    setSelectedAlunniMultipli(s => ({ ...s, [id]: !s[id] }));
  }

  function toggleSelectLibro(id) {
    setSelectedLibriMultipli(s => ({ ...s, [id]: !s[id] }));
  }

  async function confermaConsegnaMultipla() {
    if (!modalConsegnaMultipla || !modalConsegnaMultipla.libri) return;
    const alunni_ids = Object.keys(selectedAlunniMultipli).filter(k => selectedAlunniMultipli[k]).map(Number);
    const libri = Object.keys(selectedLibriMultipli).filter(k => selectedLibriMultipli[k]).map(id => ({ libro_id: Number(id), stato_consegna: 'nuovo' }));
    if (!alunni_ids.length) return toast('Seleziona almeno un alunno');
    if (!libri.length) return toast('Seleziona almeno un libro');

    if (modalConsegnaMultipla.force) {
      // chiedo conferma via modal forzatura già presente
      setPendingAction({ type: 'multipla', payload: { alunni_ids, libri } });
      setShowForceModal(true);
      return;
    }

    const res = await api('/prestiti/consegna-multipla', 'POST', { alunni_ids, libri, force: !!modalConsegnaMultipla.force });
    toast(res?.errori > 0 ? `Salvato con ${res.errori} errori` : 'Consegna multipla registrata ✅', res?.errori > 0 ? 'err' : 'ok');
    setModalConsegnaMultipla(null);
    // refresh lista alunni per riflettere nuovi stati
    await refreshAlunni();
  }


  function toggleMancante(libroId) {
    setNonConsegnatiParziali(s => ({ ...s, [libroId]: !s[libroId] }));
  }

  async function confermaConsegnaClasse() {
    if (!modalConsegna?.alunno) return;
    const libri = modalConsegna.libri.filter(l => {
      if (modalConsegna.tipo === 'totale') return true;
      return l.consegnato || !nonConsegnatiParziali[l.id];
    }).map(l => ({ libro_id: l.id, stato_consegna: 'nuovo' }));

    if (libri.length === 0) {
      toast('Non ci sono libri da segnare come consegnati');
      return;
    }

    if (modalConsegna.force) {
      setPendingAction({ type: 'classe', payload: { alunno_id: modalConsegna.alunno.id, libri } });
      setShowForceModal(true);
      return;
    }

    const res = await api('/prestiti/consegna-bulk', 'POST', {
      alunno_id: modalConsegna.alunno.id,
      libri,
      force: !!modalConsegna.force
    });

    toast(res?.errori > 0 ? `Salvato con ${res.errori} errori` : 'Consegna registrata ✅', res?.errori > 0 ? 'err' : 'ok');
    setModalConsegna(null);
    setNonConsegnatiParziali({});
    await refreshAlunni();
    if (alunnoSel?.id === modalConsegna.alunno.id) {
      const rr = await api(`/prestiti/riepilogo/${alunnoSel.id}`);
      setPrestiti(rr?.prestiti || []);
      setEmojiTot(rr?.emoji_totale || '⚪');
    }
  }

  async function consegnaBulk() {
    const nonConsegnati = prestiti.filter(p => !p.data_consegna);
    if (!nonConsegnati.length) return toast('Nessun libro da consegnare');
    const libri = nonConsegnati.map(p => ({
      libro_id: p.libro_id,
      stato_consegna: stati[p.id] || 'nuovo',
    }));
    if (forceConsegna) {
      setPendingAction({ type: 'singolo', payload: { libri } });
      setShowForceModal(true);
      return;
    }
    const r = await api('/prestiti/consegna-bulk', 'POST', { alunno_id: alunnoSel.id, libri, force: !!forceConsegna });
    toast(r?.errori > 0 ? `Salvato con ${r.errori} errori` : 'Consegna registrata ✅', r?.errori > 0 ? 'err' : 'ok');
    setPendenti(false);
    const rr = await api(`/prestiti/riepilogo/${alunnoSel.id}`);
    setPrestiti(rr?.prestiti || []);
    setEmojiTot(rr?.emoji_totale || '⚪');
  }

  async function restituisciBulk() {
    const daRitirare = prestiti.filter(p => p.data_consegna && !p.data_restituzione);
    if (!daRitirare.length) return toast('Nessun libro da ritirare');
    for (const p of daRitirare) {
      await api(`/prestiti/${p.id}/restituzione`, 'PUT', { 
        stato_restituzione: stati[p.id] || 'buono',
        parti_mancanti: partiMancanti[p.id] || ''
      });
    }
    toast('Restituzione registrata ✅', 'ok');
    setPendenti(false);
    const rr = await api(`/prestiti/riepilogo/${alunnoSel.id}`);
    setPrestiti(rr?.prestiti || []);
    setEmojiTot(rr?.emoji_totale || '⚪');
  }

  async function executePendingAction(doForce = true) {
    if (!pendingAction) return;
    const p = pendingAction;
    setShowForceModal(false);
    setPendingAction(null);

    if (p.type === 'singolo') {
      const r = await api('/prestiti/consegna-bulk', 'POST', { alunno_id: alunnoSel.id, libri: p.payload.libri, force: !!doForce });
      toast(r?.errori > 0 ? `Salvato con ${r.errori} errori` : 'Consegna registrata ✅', r?.errori > 0 ? 'err' : 'ok');
      setPendenti(false);
      const rr = await api(`/prestiti/riepilogo/${alunnoSel.id}`);
      setPrestiti(rr?.prestiti || []);
      setEmojiTot(rr?.emoji_totale || '⚪');
      setForceConsegna(false);
    }

    if (p.type === 'classe') {
      const res = await api('/prestiti/consegna-bulk', 'POST', { alunno_id: p.payload.alunno_id, libri: p.payload.libri, force: !!doForce });
      toast(res?.errori > 0 ? `Salvato con ${res.errori} errori` : 'Consegna registrata ✅', res?.errori > 0 ? 'err' : 'ok');
      setModalConsegna(null);
      setNonConsegnatiParziali({});
      await refreshAlunni();
      if (alunnoSel?.id === p.payload.alunno_id) {
        const rr = await api(`/prestiti/riepilogo/${alunnoSel.id}`);
        setPrestiti(rr?.prestiti || []);
        setEmojiTot(rr?.emoji_totale || '⚪');
      }
    }
    if (p.type === 'multipla') {
      const res = await api('/prestiti/consegna-multipla', 'POST', { alunni_ids: p.payload.alunni_ids, libri: p.payload.libri, force: !!doForce });
      toast(res?.errori > 0 ? `Salvato con ${res.errori} errori` : 'Consegna multipla registrata ✅', res?.errori > 0 ? 'err' : 'ok');
      setModalConsegnaMultipla(null);
      await refreshAlunni();
    }
  }

  async function tornaConVerifica(dest) {
    if (pendenti && !confirm('Hai modifiche non salvate. Uscire?')) return;
    setPendenti(false);
    if (dest === 'alunni') await refreshAlunni();
    setStep(dest);
  }

  const alunniFiltrati = alunni
    .filter(a => (a.nome + ' ' + a.cognome).toLowerCase().includes(cerca.toLowerCase()))
    .sort((a, b) => {
      const cognome = a.cognome.localeCompare(b.cognome, 'it');
      if (cognome !== 0) return cognome;
      return a.nome.localeCompare(b.nome, 'it');
    });

  const STATI_OPTS = [
    { value: 'nuovo', label: '🟢 Nuovo' },
    { value: 'buono', label: '🟡 Buono' },
    { value: 'discreto', label: '🟠 Discreto' },
    { value: 'danneggiato', label: '🔴 Danneggiato' },
    { value: 'parziale', label: '⚠️ Parziale (manca fascicolo)' },
  ];

  // ── Render ──
  if (step === 'classi') return (
    <div>
      <div className="page-header"><h1 className="page-title">Seleziona classe</h1></div>
      {[1, 2, 3].map(a => {
        const cl = classi.filter(c => c.anno == a || c.anno === a);
        if (!cl.length) return null;
        return (
          <div key={a} style={{ marginBottom: '1.25rem' }}>
            <div style={{ fontSize: '.78rem', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--ink2)', marginBottom: '.5rem' }}>
              {a}° Anno
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '.6rem' }}>
              {cl.map(c => (
                <button key={c.id} className="alunno-tile" style={{ width: 'auto', minWidth: 90, textAlign: 'center', padding: '1rem 1.25rem' }}
                  onClick={() => selClasse(c)}>
                  <div style={{ fontSize: '1.6rem', fontWeight: 700 }}>{c.nome}</div>
                  {c.sezione && <div style={{ fontSize: '.78rem', color: 'var(--ink2)' }}>Sez. {c.sezione}</div>}
                </button>
              ))}
            </div>
          </div>
        );
      })}
      {classi.length === 0 && <p style={{ color: 'var(--ink2)' }}>Nessuna classe configurata.</p>}
    </div>
  );

  if (step === 'alunni') return (
    <div>
      <div className="page-header">
        <button className="btn btn-ghost btn-sm" onClick={() => setStep('classi')}>← Classi</button>
        <h1 className="page-title">{classeSel?.nome}</h1>
        <div className="page-actions">
          <button className="btn btn-primary btn-sm" onClick={apriConsegnaMultipla}>Consegna a più alunni</button>
        </div>
      </div>
      <div style={{ marginBottom: '.75rem' }}>
        <input type="search" placeholder="Cerca alunno…" value={cerca} onChange={e => setCerca(e.target.value)} />
      </div>
      <div style={{ display: 'grid', gap: '.75rem' }}>
        {alunniFiltrati.map(a => {
          const consegnati = Number(a.prestiti_consegnati || 0);
          const totali = Number(a.prestiti_totali || 0);
          const statoConsegna = totali > 0
            ? (consegnati === 0 ? 'none' : (consegnati < totali ? 'partial' : 'complete'))
            : 'none';
          const bg = statoConsegna === 'complete' ? '#ecf8ef' : statoConsegna === 'partial' ? '#fffbeb' : '#ffffff';
          const border = statoConsegna === 'complete' ? '1px solid #b8e4bc' : statoConsegna === 'partial' ? '1px solid #f6d58d' : '1px solid var(--border)';

          return (
            <div key={a.id} className="alunno-tile" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '.75rem', background: bg, border, padding: '1rem', borderRadius: '16px' }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
                    <div className="cognome">{a.cognome}</div>
                    <div style={{ fontSize: '.9rem', color: a.genitore_id ? 'var(--green)' : 'var(--red)', fontWeight: 700 }}>
                      {a.genitore_id ? '✓' : '✕'}
                    </div>
                    <div style={{ fontSize: '.8rem', color: a.documentazione_cartacea ? 'var(--green)' : 'var(--ink2)', marginLeft: '.5rem' }}>
                      {a.documentazione_cartacea ? 'Cartacea' : 'No cartacea'}
                    </div>
                  </div>
                  <div className="nome">{a.nome}</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '.5rem', marginTop: '.35rem', alignItems: 'center' }}>
                    <span className={`badge ${a.quota_pagata ? 'badge-green' : 'badge-yellow'}`}>
                      {a.quota_pagata ? 'Quota pagata' : 'Quota da pagare'}
                    </span>
                    <span style={{ fontSize: '.82rem', color: 'var(--ink2)' }}>
                      {a.quota_importo ? `${Number(a.quota_importo).toFixed(2)}€` : 'Quota non impostata'}
                    </span>
                    {totali > 0 && (
                      <span style={{ fontSize: '.82rem', color: 'var(--ink2)' }}>
                        {consegnati}/{totali} consegnati
                      </span>
                    )}
                  </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '.5rem', alignItems: 'flex-end' }}>
                  <div style={{ display: 'flex', gap: '.5rem', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
                    <button className="btn btn-primary btn-sm" onClick={() => apriConsegnaClasse(a, 'totale')}>
                      Totale
                    </button>
                    <button className="btn btn-ghost btn-sm" onClick={() => apriConsegnaClasse(a, 'parziale')}>
                      Parziale
                    </button>
                  </div>
                  {!a.quota_pagata && (
                    <div style={{ display: 'flex', gap: '.5rem', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
                      <button className="btn btn-success btn-sm" onClick={() => segnaQuotaPagata(a, 'contanti')}>
                        Pagato contanti
                      </button>
                      <button className="btn btn-success btn-sm" onClick={() => segnaQuotaPagata(a, 'bonifico')}>
                        Pagato bonifico
                      </button>
                    </div>
                  )}
                </div>
            </div>
          );
        })}
        {alunniFiltrati.length === 0 && <p style={{ color: 'var(--ink2)' }}>Nessun alunno trovato</p>}
      </div>

      {modalConsegna && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 30, background: 'rgba(0,0,0,.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1.5rem' }}>
          <div style={{ width: 'min(100%,760px)', maxHeight: '90vh', overflow: 'auto', background: 'var(--surface)', borderRadius: '18px', padding: '1.25rem', boxShadow: '0 18px 65px rgba(0,0,0,.2)' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '.75rem', marginBottom: '1rem' }}>
              <div>
                <div style={{ fontSize: '1.1rem', fontWeight: 700 }}>{modalConsegna.tipo === 'totale' ? 'Consegna totale' : 'Consegna parziale'}</div>
                <div style={{ color: 'var(--ink2)', marginTop: '.25rem' }}>{modalConsegna.alunno.cognome} {modalConsegna.alunno.nome} · {classeSel?.nome}</div>
              </div>
              <button className="btn btn-ghost btn-sm" onClick={() => setModalConsegna(null)}>Chiudi</button>
            </div>
            {modalConsegna.loading ? (
              <p style={{ color: 'var(--ink2)' }}>Caricamento in corso…</p>
            ) : (
              <>
                        <p style={{ marginBottom: '1rem', color: 'var(--ink2)' }}>
                          {modalConsegna.tipo === 'totale'
                            ? 'Segnerà tutti i libri di questa classe come consegnati.'
                            : 'Spunta solo i libri che NON sono stati consegnati; gli altri verranno confermati come consegnati.'}
                        </p>
                        <div style={{ marginBottom: '.75rem', display: 'flex', alignItems: 'center', gap: '.5rem' }}>
                          <label style={{ display: 'flex', alignItems: 'center', gap: '.4rem' }}>
                            <input type="checkbox" checked={!!modalConsegna.force} onChange={() => setModalConsegna(m => ({ ...m, force: !m.force }))} />
                            <span style={{ fontSize: '.85rem' }}>Forza consegna (se il libro risulta già in prestito)</span>
                          </label>
                        </div>
                <div style={{ display: 'grid', gap: '.65rem' }}>
                  {modalConsegna.libri.map(libro => (
                    <div key={libro.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '.75rem', padding: '.85rem 1rem', borderRadius: '12px', background: 'var(--bg-surface)', border: '1px solid var(--border)' }}>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontWeight: 700 }}>{libro.titolo}</div>
                                <div style={{ fontSize: '.82rem', color: 'var(--ink2)' }}>{libro.materia} · {libro.codice_interno} · <strong>{libro.copie_disponibili ?? libro.copie_inventario} copie disponibili</strong></div>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
                        {libro.consegnato ? (
                          <span style={{ color: 'var(--green)', fontWeight: 700 }}>✅ già consegnato</span>
                        ) : modalConsegna.tipo === 'parziale' ? (
                          <label style={{ display: 'flex', alignItems: 'center', gap: '.4rem' }}>
                            <input type="checkbox" checked={!!nonConsegnatiParziali[libro.id]} onChange={() => toggleMancante(libro.id)} />
                            <span style={{ fontSize: '.85rem' }}>Non consegnato</span>
                          </label>
                        ) : (
                          <span style={{ color: 'var(--ink2)', fontWeight: 700 }}>Da consegnare</span>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: '1rem', display: 'flex', gap: '.75rem', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
                  <button className="btn btn-ghost" onClick={() => setModalConsegna(null)}>Annulla</button>
                  <button className="btn btn-success" onClick={confermaConsegnaClasse}>
                    Conferma {modalConsegna.tipo === 'totale' ? 'totale' : 'parziale'}
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      )}

      {modalConsegnaMultipla && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 35, background: 'rgba(0,0,0,.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1.5rem' }}>
          <div style={{ width: 'min(100%,900px)', maxHeight: '90vh', overflow: 'auto', background: 'var(--surface)', borderRadius: '12px', padding: '1rem' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '.75rem' }}>
              <div>
                <div style={{ fontSize: '1.05rem', fontWeight: 700 }}>Consegna multipla — {classeSel?.nome}</div>
                <div style={{ color: 'var(--ink2)', marginTop: '.25rem' }}>Seleziona gli alunni e i libri da consegnare a tutti i selezionati.</div>
              </div>
              <button className="btn btn-ghost btn-sm" onClick={() => setModalConsegnaMultipla(null)}>Chiudi</button>
            </div>
            {modalConsegnaMultipla.loading ? (
              <p style={{ color: 'var(--ink2)' }}>Caricamento…</p>
            ) : (
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
                <div>
                  <div style={{ fontWeight: 700, marginBottom: '.5rem' }}>Alunni</div>
                  <div style={{ display: 'grid', gap: '.35rem' }}>
                    {alunni.map(a => (
                      <label key={a.id} style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
                        <input type="checkbox" checked={!!selectedAlunniMultipli[a.id]} onChange={() => toggleSelectAlunno(a.id)} />
                        <span>{a.cognome} {a.nome}</span>
                      </label>
                    ))}
                  </div>
                </div>
                <div>
                  <div style={{ fontWeight: 700, marginBottom: '.5rem' }}>Libri</div>
                  <div style={{ display: 'grid', gap: '.5rem' }}>
                    {modalConsegnaMultipla.libri.map(l => (
                      <label key={l.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '.5rem', padding: '.5rem', border: '1px solid var(--border)', borderRadius: '8px' }}>
                        <div style={{ minWidth: 0 }}>
                          <div style={{ fontWeight: 700 }}>{l.titolo}</div>
                          <div style={{ fontSize: '.8rem', color: 'var(--ink2)' }}>{l.materia} · {l.codice_interno}</div>
                        </div>
                        <input type="checkbox" checked={!!selectedLibriMultipli[l.id]} onChange={() => toggleSelectLibro(l.id)} />
                      </label>
                    ))}
                  </div>
                </div>
              </div>
            )}
            <div style={{ marginTop: '1rem', display: 'flex', justifyContent: 'flex-end', gap: '.5rem' }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: '.4rem' }}>
                <input type="checkbox" checked={!!modalConsegnaMultipla.force} onChange={() => setModalConsegnaMultipla(m => ({ ...m, force: !m.force }))} />
                <span style={{ fontSize: '.85rem' }}>Forza consegna (se il libro risulta già in prestito)</span>
              </label>
              <button className="btn btn-ghost" onClick={() => setModalConsegnaMultipla(null)}>Annulla</button>
              <button className="btn btn-success" onClick={confermaConsegnaMultipla}>Conferma consegna multipla</button>
            </div>
          </div>
        </div>
      )}

      {showForceModal && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 40, background: 'rgba(0,0,0,.45)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1.5rem' }}>
          <div style={{ width: 'min(100%,560px)', background: 'var(--surface)', borderRadius: '12px', padding: '1rem 1.25rem', boxShadow: '0 12px 40px rgba(0,0,0,.25)' }}>
            <div style={{ fontSize: '1.05rem', fontWeight: 700, marginBottom: '.5rem' }}>Conferma forzatura consegna</div>
            <div style={{ color: 'var(--ink2)', marginBottom: '1rem' }}>
              Stai per forzare la consegna: eventuali prestiti aperti verranno trasferiti adesso al beneficiario selezionato. Questa azione modifica chi risulta titolare del prestito.
            </div>
            <div style={{ display: 'flex', gap: '.5rem', justifyContent: 'flex-end' }}>
              <button className="btn btn-ghost" onClick={() => { setShowForceModal(false); setPendingAction(null); }}>Annulla</button>
              <button className="btn btn-danger" onClick={() => executePendingAction(true)}>Conferma e Forza</button>
            </div>
          </div>
        </div>
      )}

    </div>
  );

  // Step libri
  const nonConsegnati = prestiti.filter(p => !p.data_consegna);
  const daRitirare = prestiti.filter(p => p.data_consegna && !p.data_restituzione);
  const restituiti = prestiti.filter(p => p.data_restituzione);

  return (
    <div>
      {pendenti && (
        <div className="banner-warning">
          ⚠️ Modifiche non salvate — premi CONFERMA per salvare
        </div>
      )}

      <div className="page-header">
        <button className="btn btn-ghost btn-sm" onClick={() => tornaConVerifica('alunni')}>← Alunni</button>
        <h1 className="page-title">{alunnoSel?.cognome} {alunnoSel?.nome}</h1>
        <span style={{ fontSize: '2rem' }}>{emojiTot}</span>
      </div>

      {/* Tab */}
      <div style={{ display: 'flex', gap: '.5rem', marginBottom: '1rem' }}>
        <button
          className={`btn ${tab === 'consegna' ? 'btn-primary' : 'btn-ghost'}`}
          onClick={() => { if (pendenti && !confirm('Modifiche non salvate. Cambiare scheda?')) return; setPendenti(false); setStati({}); setTab('consegna'); }}
        >📦 Consegna</button>
        <button
          className={`btn ${tab === 'restituzione' ? 'btn-primary' : 'btn-ghost'}`}
          onClick={() => { if (pendenti && !confirm('Modifiche non salvate. Cambiare scheda?')) return; setPendenti(false); setStati({}); setTab('restituzione'); }}
        >↩ Restituzione</button>
        <button
          className={`btn ${tab === 'storico' ? 'btn-primary' : 'btn-ghost'}`}
          onClick={() => { if (pendenti && !confirm('Modifiche non salvate. Cambiare scheda?')) return; setPendenti(false); setStati({}); setTab('storico'); }}
        >📜 Storico ({restituiti.length})</button>
      </div>

      <div className="card">
        {tab === 'consegna' && (
          <>
            {nonConsegnati.length === 0
              ? <p style={{ color: 'var(--green)', fontWeight: 500 }}>✅ Tutti i libri sono stati consegnati</p>
              : nonConsegnati.map(p => (
                <div key={p.id} className="libro-row">
                  <span style={{ fontSize: '1.3rem' }}>📗</span>
                  <div className="libro-info">
                    <div className="titolo">{p.titolo}</div>
                    <div className="sub">{p.materia} · {p.codice_interno}</div>
                  </div>
                  <select value={stati[p.id] || 'nuovo'} onChange={e => aggiornaStato(p.id, e.target.value)}>
                    {STATI_OPTS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
                  </select>
                </div>
              ))
            }
            {nonConsegnati.length > 0 && (
              <>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '.5rem', marginTop: '.75rem' }}>
                  <label style={{ display: 'flex', alignItems: 'center', gap: '.5rem' }}>
                    <input type="checkbox" checked={forceConsegna} onChange={e => setForceConsegna(e.target.checked)} />
                    <span style={{ fontSize: '.9rem' }}>Forza consegna (trasferisce eventuali prestiti)</span>
                  </label>
                </div>
                <button className="btn btn-success" style={{ width: '100%', marginTop: '1rem', padding: '.75rem', fontSize: '1rem' }} onClick={consegnaBulk}>
                  ✅ CONFERMA CONSEGNA
                </button>
              </>
            )}
          </>
        )}

        {tab === 'restituzione' && (
          <>
            {daRitirare.length === 0
              ? <p style={{ color: 'var(--ink2)' }}>Nessun libro da ritirare</p>
              : daRitirare.map(p => (
                <div key={p.id} style={{ padding: '.75rem 0', borderBottom: '1px solid var(--border)' }}>
                  <div className="libro-row" style={{ borderBottom: 'none', padding: 0 }}>
                    <span style={{ fontSize: '1.3rem' }}>{p.emoji || '📗'}</span>
                    <div className="libro-info">
                      <div className="titolo">{p.titolo}</div>
                      <div className="sub">{p.materia} · consegnato: {p.stato_consegna}</div>
                    </div>
                    <select value={stati[p.id] || 'buono'} onChange={e => aggiornaStato(p.id, e.target.value)}>
                      {STATI_OPTS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
                    </select>
                  </div>
                  {stati[p.id] === 'parziale' && (
                    <div style={{ marginTop: '.5rem', padding: '.75rem', background: 'var(--orange-bg)', borderRadius: '8px', border: '1px solid #f59e0b' }}>
                      <label style={{ fontSize: '.78rem', color: 'var(--orange)', fontWeight: 700 }}>Specifica cosa manca / fascicolo smarrito:</label>
                      <input 
                        value={partiMancanti[p.id] || ''} 
                        onChange={e => { setPartiMancanti({ ...partiMancanti, [p.id]: e.target.value }); setPendenti(true); }}
                        placeholder="es. Manca Grammar for all, fascicolo narrativa..."
                        style={{ marginTop: '.25rem', borderColor: '#f59e0b', width: '100%' }}
                      />
                      {p.volumi && (
                        <div style={{ marginTop: '.5rem', display: 'flex', flexWrap: 'wrap', gap: '.3rem', alignItems: 'center' }}>
                          <span style={{ fontSize: '.72rem', color: 'var(--ink2)', fontWeight: 600 }}>Selezione rapida volumi:</span>
                          {p.volumi.split('\n').filter(Boolean).map((v, idx) => (
                            <button 
                              key={idx} 
                              type="button" 
                              className="btn btn-ghost btn-sm" 
                              style={{ fontSize: '.7rem', padding: '2px 6px', background: 'var(--surface)', border: '1px solid #f59e0b', color: 'var(--orange)' }}
                              onClick={() => {
                                const att = partiMancanti[p.id] || '';
                                const newV = att ? `${att}, manca ${v}` : `Manca ${v}`;
                                setPartiMancanti({ ...partiMancanti, [p.id]: newV });
                                setPendenti(true);
                              }}
                            >
                              + {v}
                            </button>
                          ))}
                        </div>
                      )}
                    </div>
                  )}
                </div>
              ))
            }
            {daRitirare.length > 0 && (
              <button className="btn btn-success" style={{ width: '100%', marginTop: '1rem', padding: '.75rem', fontSize: '1rem' }} onClick={restituisciBulk}>
                ✅ CONFERMA RESTITUZIONE
              </button>
            )}
          </>
        )}

        {tab === 'storico' && (
          <>
            {restituiti.length === 0
              ? <p style={{ color: 'var(--ink2)' }}>Nessun libro restituito finora</p>
              : restituiti.map(p => (
                <div key={p.id} className="libro-row" style={{ alignItems: 'flex-start', padding: '.75rem 0', borderBottom: '1px solid var(--border)' }}>
                  <span style={{ fontSize: '1.3rem' }}>{p.stato_restituzione === 'parziale' ? '⚠️' : (p.emoji || '📗')}</span>
                  <div className="libro-info" style={{ width: '100%' }}>
                    <div className="titolo">{p.titolo}</div>
                    <div className="sub">{p.materia} · {p.codice_interno}</div>
                    <div style={{ marginTop: '.35rem', fontSize: '.8rem', color: 'var(--ink2)', background: 'var(--bg-surface)', padding: '.5rem', borderRadius: '6px' }}>
                      <div><strong>Restituito il:</strong> {p.data_restituzione} · <strong>Stato:</strong> <span style={{ textTransform: 'capitalize', fontWeight: 600, color: p.stato_restituzione === 'parziale' ? 'var(--orange)' : 'var(--ink)' }}>{p.stato_restituzione}</span></div>
                      {p.parti_mancanti && <div style={{ color: 'var(--orange)', fontWeight: 600, marginTop: '.2rem' }}>Mancanti / Smarriti: {p.parti_mancanti}</div>}
                      {p.note && <div style={{ marginTop: '.2rem' }}>Note: {p.note}</div>}
                    </div>
                  </div>
                </div>
              ))
            }
          </>
        )}
      </div>
    </div>
  );
}