// components/admin/Libri.jsx

function parsaTitoloVolumi(fullTitle) {
  if (!fullTitle) return { titolo: '', volumi: '' };
  const parts = fullTitle.split('+').map(p => p.trim()).filter(Boolean);
  if (parts.length === 0) return { titolo: '', volumi: '' };

  let titoloGenerale = parts[0];
  const tuttiVolumi = [];

  const match = parts[0].match(/\b(volume|vol\.|student's book|workbook|tomo|parte|fascicolo|pack)\b/i);
  if (match && match.index > 0) {
    titoloGenerale = parts[0].substring(0, match.index).trim();
    const primoVol = parts[0].substring(match.index).trim();
    if (primoVol) tuttiVolumi.push(primoVol);
  }

  for (let i = 1; i < parts.length; i++) {
    tuttiVolumi.push(parts[i]);
  }

  titoloGenerale = titoloGenerale.replace(/[\-\+]\s*$/, '').trim();

  return {
    titolo: titoloGenerale || fullTitle,
    volumi: tuttiVolumi.join('\n')
  };
}

function Libri() {
  const [libri, setLibri] = React.useState([]);
  const [classi, setClassi] = React.useState([]);
  const [cerca, setCerca] = React.useState('');
  const [anno, setAnno] = React.useState('');
  const [classeF, setClasseF] = React.useState('');
  const [materiaF, setMateriaF] = React.useState('');
  const [materieEsistenti, setMaterieEsistenti] = React.useState([]);
  const [allLibri, setAllLibri] = React.useState([]);
  const [modale, setModale] = React.useState(null);
  const [tabImport, setTabImport] = React.useState('miur'); // miur | csv | isbn
  const [testoMiur, setTestoMiur] = React.useState('');
  const [csv, setCsv] = React.useState('');
  const [isbns, setIsbns] = React.useState('');
  const [fetching, setFetching] = React.useState(false);
  const [anteprima, setAnteprima] = React.useState(null); // righe parsate da confermare
  const [classeAnno, setClasseAnno] = React.useState(1);
  const [esito, setEsito] = React.useState('');
  const [expandedVolumi, setExpandedVolumi] = React.useState({});

  async function carica() {
    const p = new URLSearchParams();
    if (cerca) p.set('cerca', cerca);
    if (anno) p.set('anno', anno);
    if (classeF) p.set('classe_id', classeF);
    if (materiaF) p.set('materia', materiaF);
    const [l, c, all] = await Promise.all([
      api('/libri?' + p),
      api('/alunni/classi/lista'),
      api('/libri')
    ]);
    setLibri(l || []);
    setClassi(c || []);
    if (all && !all.errore) {
      setAllLibri(all);
      const mats = Array.from(new Set(all.map(x => x.materia).filter(Boolean))).sort();
      setMaterieEsistenti(mats);
    }
  }

  React.useEffect(() => { carica(); }, [cerca, anno, classeF, materiaF]);

  const vuoto = () => ({ codice_interno: '', isbn: '', titolo: '', autore: '', materia: '', classe_anno: 1, durata_anni: 1, numero_pagine: '', prezzo: '', volumi: '', copie_inventario: 0, classi_ids: [] });

  async function salva() {
    const { id, ...body } = modale;
    const r = id ? await api(`/libri/${id}`, 'PUT', body) : await api('/libri', 'POST', body);
    if (r?.errore) return toast(r.errore, 'err');
    toast('Salvato', 'ok');
    setModale(null);
    carica();
  }

  async function elimina(id) {
    if (!confirm('Eliminare questo libro?')) return;
    const r = await api(`/libri/${id}`, 'DELETE');
    if (r?.errore) return toast(r.errore, 'err');
    toast('Eliminato', 'ok');
    carica();
  }

  async function aggiornaInventario(id, copie) {
    const val = Number(copie) || 0;
    const r = await api(`/libri/${id}/inventario`, 'PUT', { copie_inventario: val });
    if (r?.errore) return toast(r.errore, 'err');
    toast('Inventario aggiornato', 'ok');
    setLibri(prev => prev.map(l => l.id === id ? { ...l, copie_inventario: r.copie_inventario } : l));
  }

  // ── Parser testo MIUR ──────────────────────────────────────────
  function parsaMiur() {
    const righe = testoMiur.split('\n').map(r => r.trim()).filter(Boolean);
    const risultati = [];
    let materiaCorrente = '';

    const isbnsEsistenti = new Set(allLibri.map(x => x.isbn).filter(Boolean));
    const codiciEsistenti = new Set(allLibri.map(x => x.codice_interno).filter(Boolean));

    const MATERIE = ['ARTE', 'GEOGRAFIA', 'INGLESE', 'FRANCESE', 'ITALIANO', 'MATEMATICA', 'MUSICA',
      'SCIENZE', 'SPAGNOLO', 'STORIA', 'TECNOLOGIA', 'EDUCAZIONE', 'RELIGIONE',
      'FISICA', 'CHIMICA', 'LATINO', 'GRECO', 'FILOSOFIA', 'DIRITTO'];

    const EDITORI_NOTI = ['EDITORE', 'EDIZIONI', 'SCUOLA', 'MONDADORI', 'ZANICHELLI', 'PEARSON', 'LOESCHER', 'LATTES', 'FABBRI', 'SEI', 'CAPITELLO', 'DE AGOSTINI', 'BOMPIANI', 'LA SCUOLA', 'PARAMOND', 'GIUNTI', 'ELLEDICI', 'ELECTA', 'BULGARINI', 'PARAVIA', 'LE MONNIER', 'MINERVA', 'TRAMONTANA', 'SANSONI', 'OXFORD', 'CAMBRIDGE', 'MACMILLAN', 'CLEUP', 'HOEPLI', 'CEDAM', 'SIMONE', 'ATLAS', "D'ANNA", 'PRINCIPATO', 'GHISETTI', 'TREVISINI', 'PALUMBO', 'EL', 'EMME', 'MURSIA', 'LIGUORI', 'GARZANTI', 'MARIETTI', 'LATERZA', 'MARKES', 'LINX', 'JUVENCE', 'ITALIA'];

    const reISBN = /97[89]\d{10}/;
    const rePrezzo = /€\s*[\d,.]+/;
    const reFlag = /\b([CU])\b/;

    let i = 0;
    while (i < righe.length) {
      const riga = righe[i];

      if (/^(classe|sperimi|materia|sottotitolo|edz\.|vol\.|adoz\.)/i.test(riga) ||
        /^(TEMPO SCUOLA|ORE DI ORARIO|CORSI$|GRAMMATICA$)/i.test(riga)) {
        i++; continue;
      }

      const isMateria = riga === riga.toUpperCase() &&
        riga.length < 50 &&
        !reISBN.test(riga) &&
        /[A-Z]{3,}/.test(riga) &&
        MATERIE.some(m => riga.includes(m));

      if (isMateria) {
        materiaCorrente = MATERIE.find(m => riga.includes(m)) || riga.split(/\s+/)[0];
        i++; continue;
      }

      const isbnMatch = riga.match(reISBN) || (righe[i + 1] || '').match(reISBN);
      if (!isbnMatch) { i++; continue; }

      const isbn = isbnMatch[0];
      const rigaIsbn = reISBN.test(riga) ? riga : righe[i + 1] || '';

      const flagMatch = rigaIsbn.match(reFlag) || riga.match(reFlag);
      const durata_anni = (flagMatch && flagMatch[1] === 'U') ? 3 : 1;

      const prezzoMatch = rigaIsbn.match(rePrezzo);
      const prezzo = prezzoMatch ? prezzoMatch[0].trim() : '';

      let rigaTitolo = '';
      if (reISBN.test(riga)) {
        rigaTitolo = riga.split(isbn)[0].replace(/\d+\s*$/, '').trim();
      } else {
        rigaTitolo = riga.replace(/\s+\d\s*$/, '').trim();
        i++;
      }
      rigaTitolo = rigaTitolo.replace(/\s{2,}/g, ' ').trim();
      if (!rigaTitolo) { i++; continue; }

      const primaIsbn = rigaIsbn.split(isbn)[0].trim();
      const testoPrima = primaIsbn.replace(/\b\d{4}\s*$/, '').trim();

      const words = testoPrima.split(/\s+/);
      let editoreIndex = words.length;
      while (editoreIndex > 0 && EDITORI_NOTI.some(ed => words[editoreIndex - 1].toUpperCase().includes(ed))) {
        editoreIndex--;
      }
      if (editoreIndex === words.length && words.length > 3) {
        editoreIndex = words.length - 2;
      }
      const editore = words.slice(editoreIndex).join(' ');
      const rimasto = words.slice(0, editoreIndex).join(' ').trim();

      let sottoTitolo = '';
      let autore = '';
      const matchSep = rimasto.match(/(.*?\b(?:[UCAPX]|\d)\b)\s+([A-ZÀ-Ù]{2,}.*)/);
      if (matchSep) {
        sottoTitolo = matchSep[1].replace(/\b[UCAPX]\b$/, '').trim();
        autore = matchSep[2].trim();
      } else {
        sottoTitolo = rimasto;
      }

      let titoloUnito = rigaTitolo;
      if (sottoTitolo && sottoTitolo.toUpperCase() !== rigaTitolo.toUpperCase()) {
        titoloUnito = `${rigaTitolo} + ${sottoTitolo}`;
      }

      const { titolo: titoloGen, volumi } = parsaTitoloVolumi(titoloUnito);

      const codice_interno = `ISBN-${isbn}`;
      const giaPresente = isbnsEsistenti.has(isbn) || codiciEsistenti.has(codice_interno);

      risultati.push({
        isbn,
        codice_interno,
        titolo: titoloGen,
        volumi,
        prezzo,
        numero_pagine: '',
        copie_inventario: 0,
        autore: autore || editore,
        materia: materiaCorrente,
        classe_anno: classeAnno,
        durata_anni,
        giaPresente,
      });

      i++;
    }

    if (risultati.length === 0) {
      toast('Nessun libro riconosciuto. Controlla il testo incollato.', 'err');
      return;
    }
    setAnteprima(risultati);
  }

  async function cercaIsbn() {
    const list = isbns.split(/[,\n\s]+/).map(x => x.trim()).filter(x => x.length >= 10);
    if (list.length === 0) return toast('Inserisci almeno un ISBN', 'err');

    setFetching(true);
    const isbnsEsistenti = new Set(allLibri.map(x => x.isbn).filter(Boolean));
    const codiciEsistenti = new Set(allLibri.map(x => x.codice_interno).filter(Boolean));

    const results = [];
    let falliti = 0;
    for (const isbn of list) {
      try {
        const info = await api(`/libri/lookup-isbn/${isbn}`);
        if (info && !info.errore) {
          const giaPresente = isbnsEsistenti.has(info.isbn) || codiciEsistenti.has(isbn);
          results.push({
            ...info,
            codice_interno: isbn,
            durata_anni: 1,
            classe_anno: classeAnno,
            classi_ids: [],
            giaPresente
          });
        } else {
          falliti++;
        }
      } catch (e) {
        console.error(e);
        falliti++;
      }
    }
    setFetching(false);
    if (results.length === 0) return toast('Nessun libro trovato per gli ISBN forniti', 'err');
    if (falliti > 0) toast(`${falliti} ISBN non trovati, caricati gli altri`, 'warn');
    setAnteprima(results);
  }

  function importaCsv() {
    const cleanCsv = csv.replace(/^\uFEFF/, '').trim();
    if (!cleanCsv) return toast('Inserisci il testo CSV', 'err');
    const righe = cleanCsv.split('\n').map(r => r.trim()).filter(Boolean);

    const isbnsEsistenti = new Set(allLibri.map(x => x.isbn).filter(Boolean));
    const codiciEsistenti = new Set(allLibri.map(x => x.codice_interno).filter(Boolean));

    const risultati = [];
    for (const r of righe) {
      const parts = r.split(',').map(s => s.trim());
      const codice_interno = parts[0] || '';
      const isbn = parts[1] || '';
      const titolo = parts[2] || '';
      if (!codice_interno || !titolo) continue;
      const autore = parts[3] || '';
      const materia = parts[4] || '';
      const durata_anni = Number(parts[5]) || 1;
      const classe_anno = Number(parts[6]) || 1;

      const giaPresente = isbnsEsistenti.has(isbn) || codiciEsistenti.has(codice_interno);

      risultati.push({
        codice_interno, isbn, titolo, autore, materia, durata_anni, classe_anno,
        prezzo: '', numero_pagine: '', volumi: '', copie_inventario: 0, classi_ids: [], giaPresente
      });
    }
    if (risultati.length === 0) return toast('Nessun libro valido trovato nel CSV', 'err');
    setAnteprima(risultati);
  }

  async function confermaImport() {
    if (!anteprima || anteprima.length === 0) return toast('Nessun libro da importare', 'warn');
    const r = await api('/libri/importa', 'POST', { righe: anteprima });
    if (r?.errore) return toast(r.errore, 'err');
    toast(`Importati (nuovi): ${r.inseriti} · Aggiornate classi (già presenti): ${r.aggiornati}`, 'ok');
    setAnteprima(null);
    setTestoMiur('');
    setCsv('');
    setIsbns('');
    carica();
  }

  function toggleClasse(cid) {
    const ids = modale.classi_ids || [];
    setModale({ ...modale, classi_ids: ids.includes(cid) ? ids.filter(x => x !== cid) : [...ids, cid] });
  }

  const set = k => e => setModale({ ...modale, [k]: e.target.value });
  const setAnt = (i, k, v) => setAnteprima(prev => prev.map((r, idx) => idx === i ? { ...r, [k]: v } : r));

  // ── Render ──────────────────────────────────────────────────────
  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">Libri</h1>
        <div className="page-actions">
          <button className="btn btn-primary" onClick={() => setModale(vuoto())}>+ Nuovo libro</button>
        </div>
      </div>

      {/* Filtri */}
      <div className="card" style={{ marginBottom: '.75rem' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem' }}>

          {/* Riga 1: Cerca + Filtro Anno */}
          <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
            <input type="search" placeholder="Titolo / codice / ISBN…" value={cerca}
              onChange={e => setCerca(e.target.value)} style={{ width: 240 }} />
            <div style={{ display: 'flex', gap: '.35rem', flexWrap: 'wrap', alignItems: 'center' }}>
              <span style={{ fontSize: '.85rem', fontWeight: 600, color: 'var(--ink2)', marginRight: '.25rem' }}>Anno:</span>
              <button
                className={`btn btn-sm ${anno === '' && classeF === '' ? 'btn-danger' : 'btn-primary'}`}
                onClick={() => { setAnno(''); setClasseF(''); }}
                style={anno === '' && classeF === '' ? { background: 'var(--red)', color: '#fff' } : {}}
              >Tutti</button>
              {[1, 2, 3].map(a => (
                <button
                  key={a}
                  className={`btn btn-sm ${String(anno) === String(a) ? 'btn-danger' : 'btn-primary'}`}
                  onClick={() => { setAnno(String(a)); setClasseF(''); }}
                  style={String(anno) === String(a) ? { background: 'var(--red)', color: '#fff' } : {}}
                >{a}° Anno</button>
              ))}
            </div>
          </div>

          {/* Riga 2: Filtro Sezione / Classe */}
          <div style={{ display: 'flex', gap: '.35rem', flexWrap: 'wrap', alignItems: 'center', borderTop: '1px solid var(--border)', paddingTop: '.5rem' }}>
            <span style={{ fontSize: '.85rem', fontWeight: 600, color: 'var(--ink2)', marginRight: '.25rem' }}>Classe/Sezione:</span>
            <button
              className={`btn btn-sm ${classeF === '' && anno === '' ? 'btn-danger' : 'btn-primary'}`}
              onClick={() => { setClasseF(''); setAnno(''); }}
              style={classeF === '' && anno === '' ? { background: 'var(--red)', color: '#fff' } : {}}
            >Tutte</button>
            {classi.map(c => (
              <button
                key={c.id}
                className={`btn btn-sm ${String(classeF) === String(c.id) ? 'btn-danger' : 'btn-primary'}`}
                onClick={() => { setClasseF(c.id); setAnno(''); }}
                style={String(classeF) === String(c.id) ? { background: 'var(--red)', color: '#fff' } : {}}
              >{c.nome}</button>
            ))}
          </div>

          {/* Riga 3: Filtro Materia */}
          <div style={{ display: 'flex', gap: '.35rem', flexWrap: 'wrap', alignItems: 'center', borderTop: '1px solid var(--border)', paddingTop: '.5rem' }}>
            <span style={{ fontSize: '.85rem', fontWeight: 600, color: 'var(--ink2)', marginRight: '.25rem' }}>Materia:</span>
            <button
              className={`btn btn-sm ${materiaF === '' ? 'btn-danger' : 'btn-primary'}`}
              onClick={() => setMateriaF('')}
              style={materiaF === '' ? { background: 'var(--red)', color: '#fff' } : {}}
            >Tutte</button>
            {materieEsistenti.map(m => (
              <button
                key={m}
                className={`btn btn-sm ${materiaF === m ? 'btn-danger' : 'btn-primary'}`}
                onClick={() => setMateriaF(m)}
                style={materiaF === m ? { background: 'var(--red)', color: '#fff' } : {}}
              >{m}</button>
            ))}
          </div>

        </div>
      </div>

      {/* Tabella libri */}
      <div className="card" style={{ overflowX: 'auto' }}>
        <table className="tbl" style={{ minWidth: 800 }}>
          <thead>
            <tr>
              <th>Codice</th>
              <th>Titolo & Info</th>
              <th className="hide-mobile">Materia</th>
              <th>Anno</th>
              <th>Durata</th>
              <th className="hide-mobile">Classi</th>
              <th>Inventario (Copie)</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {libri.map(l => {
              const volumiList = (l.volumi || '').split('\n').filter(Boolean);
              const isExpanded = expandedVolumi[l.id];
              return (
                <React.Fragment key={l.id}>
                  <tr>
                    <td className="mono" style={{ fontWeight: 600, fontSize: '.8rem' }}>{l.codice_interno}</td>
                    <td>
                      <div style={{ fontWeight: 600, color: 'var(--ink)', marginBottom: '.2rem' }}>{l.titolo}</div>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '.5rem', alignItems: 'center', fontSize: '.78rem', color: 'var(--ink2)' }}>
                        {l.isbn && <span><strong>ISBN:</strong> <span className="mono">{l.isbn}</span></span>}
                        {l.prezzo && <span><strong>Prezzo:</strong> {l.prezzo}</span>}
                        {l.numero_pagine && <span><strong>Pagine:</strong> {l.numero_pagine}</span>}
                        {volumiList.length > 0 && (
                          <button
                            type="button"
                            className="btn btn-ghost btn-sm"
                            style={{ padding: '2px 6px', fontSize: '.72rem', borderRadius: '4px', background: isExpanded ? 'var(--bg)' : 'transparent' }}
                            onClick={() => setExpandedVolumi({ ...expandedVolumi, [l.id]: !isExpanded })}
                          >
                            📚 {volumiList.length} {volumiList.length === 1 ? 'Volume' : 'Volumi'} {isExpanded ? '▴' : '▾'}
                          </button>
                        )}
                      </div>
                    </td>
                    <td className="hide-mobile" style={{ color: 'var(--ink2)' }}>{l.materia || '—'}</td>
                    <td>{l.classe_anno}°</td>
                    <td>{l.durata_anni === 3 ? <span className="badge badge-yellow">3 anni</span> : '1 anno'}</td>
                    <td className="hide-mobile">
                      {(l.classi || []).map(c => (
                        <span key={c.id} className="badge badge-gray" style={{ marginRight: '.2rem' }}>{c.nome}</span>
                      ))}
                    </td>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: '.25rem' }}>
                        <button
                          type="button"
                          className="btn btn-ghost btn-sm"
                          style={{ padding: '2px 6px' }}
                          onClick={() => aggiornaInventario(l.id, Math.max(0, (l.copie_inventario || 0) - 1))}
                        >-</button>
                        <input
                          type="number"
                          value={l.copie_inventario || 0}
                          onChange={e => {
                            const val = Number(e.target.value);
                            setLibri(prev => prev.map(item => item.id === l.id ? { ...item, copie_inventario: val } : item));
                          }}
                          onBlur={e => aggiornaInventario(l.id, Number(e.target.value))}
                          style={{ width: '60px', textAlign: 'center', fontSize: '.85rem', padding: '.2rem' }}
                        />
                        <button
                          type="button"
                          className="btn btn-ghost btn-sm"
                          style={{ padding: '2px 6px' }}
                          onClick={() => aggiornaInventario(l.id, (l.copie_inventario || 0) + 1)}
                        >+</button>
                      </div>
                    </td>
                    <td style={{ display: 'flex', gap: '.35rem' }}>
                      <button className="btn btn-ghost btn-sm" onClick={() => setModale({ id: l.id, ...l, classi_ids: (l.classi || []).map(c => c.id) })}>✏️</button>
                      <button className="btn btn-danger btn-sm" onClick={() => elimina(l.id)}>🗑</button>
                    </td>
                  </tr>
                  {isExpanded && (
                    <tr style={{ background: 'var(--bg-surface)' }}>
                      <td colSpan={8} style={{ padding: '1rem 1.5rem', borderBottom: '2px solid var(--border)' }}>
                        <div style={{ background: '#fff', padding: '1rem', borderRadius: '8px', border: '1px solid var(--border)', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}>
                          <h4 style={{ marginTop: 0, marginBottom: '.5rem', fontSize: '.85rem', color: 'var(--ink)' }}>Dettaglio Volumi ({l.isbn || l.codice_interno}):</h4>
                          <ul style={{ margin: 0, paddingLeft: '1.2rem', fontSize: '.85rem', color: 'var(--ink2)' }}>
                            {volumiList.map((v, idx) => (
                              <li key={idx} style={{ marginBottom: '.25rem' }}>{v}</li>
                            ))}
                          </ul>
                          <div style={{ marginTop: '.75rem', display: 'flex', gap: '1.5rem', fontSize: '.8rem', color: 'var(--ink2)', borderTop: '1px solid var(--border)', paddingTop: '.5rem' }}>
                            <div><strong style={{ color: 'var(--ink)' }}>ISBN:</strong> <span className="mono">{l.isbn || '—'}</span></div>
                            <div><strong style={{ color: 'var(--ink)' }}>Pagine:</strong> {l.numero_pagine || '—'}</div>
                            <div><strong style={{ color: 'var(--ink)' }}>Prezzo:</strong> {l.prezzo || '—'}</div>
                            <div><strong style={{ color: 'var(--ink)' }}>Copie disponibili:</strong> {l.copie_inventario || 0}</div>
                          </div>
                        </div>
                      </td>
                    </tr>
                  )}
                </React.Fragment>
              );
            })}
            {libri.length === 0 && (
              <tr><td colSpan={8} style={{ color: 'var(--ink2)', textAlign: 'center', padding: '1.5rem' }}>Nessun libro trovato</td></tr>
            )}
          </tbody>
        </table>
      </div>

      {/* Importazione */}
      <div className="card" style={{ marginTop: '1rem' }}>
        <div style={{ display: 'flex', gap: '.5rem', marginBottom: '1rem', borderBottom: '1px solid var(--border)', paddingBottom: '.75rem' }}>
          <button
            className={`btn btn-sm ${tabImport === 'miur' ? 'btn-primary' : 'btn-ghost'}`}
            onClick={() => { setTabImport('miur'); setEsito(''); setAnteprima(null); }}
          >📋 Incolla da sito Ministero</button>
          <button
            className={`btn btn-sm ${tabImport === 'isbn' ? 'btn-primary' : 'btn-ghost'}`}
            onClick={() => { setTabImport('isbn'); setEsito(''); setAnteprima(null); }}
          >🔍 Solo ISBN (Online)</button>
          <button
            className={`btn btn-sm ${tabImport === 'csv' ? 'btn-primary' : 'btn-ghost'}`}
            onClick={() => { setTabImport('csv'); setEsito(''); setAnteprima(null); }}
          >📄 CSV manuale</button>
        </div>

        {tabImport === 'isbn' && !anteprima && (
          <>
            <p style={{ fontSize: '.85rem', color: 'var(--ink2)', marginBottom: '.75rem' }}>
              Inserisci gli ISBN (uno per riga). Recupereremo titolo e autore online.
            </p>
            <div className="field" style={{ maxWidth: 160, marginBottom: '.75rem' }}>
              <label>Anno classe dei libri</label>
              <select value={classeAnno} onChange={e => setClasseAnno(Number(e.target.value))}>
                <option value={1}>1° Media</option>
                <option value={2}>2° Media</option>
                <option value={3}>3° Media</option>
              </select>
            </div>
            <textarea
              rows={5}
              value={isbns}
              onChange={e => setIsbns(e.target.value)}
              placeholder={"9788801234567\n9788807654321"}
              style={{ fontFamily: 'monospace', fontSize: '.8rem' }}
            />
            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginTop: '.75rem' }}>
              <button className="btn btn-primary" onClick={cercaIsbn} disabled={fetching || !isbns.trim()}>
                {fetching ? '🔍 Ricerca in corso...' : '🔍 Recupera info e anteprima'}
              </button>
              {esito && <span style={{ fontSize: '.85rem', color: 'var(--green)' }}>{esito}</span>}
            </div>
          </>
        )}

        {tabImport === 'miur' && !anteprima && (
          <>
            <p style={{ fontSize: '.85rem', color: 'var(--ink2)', marginBottom: '.75rem' }}>
              Copia il testo dalla pagina adozioni del sito Ministero e incollalo qui sotto.
              Il sistema estrarrà automaticamente ISBN, titolo, materia e autore.
            </p>
            <div className="field" style={{ maxWidth: 160, marginBottom: '.75rem' }}>
              <label>Anno classe dei libri</label>
              <select value={classeAnno} onChange={e => setClasseAnno(Number(e.target.value))}>
                <option value={1}>1° Media</option>
                <option value={2}>2° Media</option>
                <option value={3}>3° Media</option>
              </select>
            </div>
            <textarea
              rows={10}
              value={testoMiur}
              onChange={e => setTestoMiur(e.target.value)}
              placeholder={"Incolla qui il testo della lista adozioni…\n\nARTE E IMMAGINE\nCON I VOSTRI OCCHI\nVOLUME A + VOLUME B U BRAGA MILENA ... 9788863084269 € 31.00 ..."}
              style={{ fontFamily: 'monospace', fontSize: '.8rem' }}
            />
            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginTop: '.75rem' }}>
              <button className="btn btn-primary" onClick={parsaMiur} disabled={!testoMiur.trim()}>
                🔍 Analizza testo
              </button>
              {esito && <span style={{ fontSize: '.85rem', color: 'var(--green)' }}>{esito}</span>}
            </div>
          </>
        )}

        {/* Anteprima libri parsati — modificabili prima di importare */}
        {(tabImport === 'miur' || tabImport === 'isbn') && anteprima && (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '.75rem', flexWrap: 'wrap' }}>
              <span style={{ fontWeight: 700 }}>📋 {anteprima.length} libri riconosciuti — verifica e correggi prima di importare</span>
              <div style={{ display: 'flex', gap: '.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
                <button className="btn btn-ghost btn-sm" onClick={() => setAnteprima(prev => prev.map(x => ({ ...x, durata_anni: 3 })))}>⚡ Tutti 3 anni</button>
                <button className="btn btn-ghost btn-sm" onClick={() => setAnteprima(prev => prev.map(x => ({ ...x, durata_anni: 1 })))}>⚡ Tutti 1 anno</button>
                <span style={{ fontSize: '.8rem', color: 'var(--ink2)', marginLeft: '.5rem' }}>⚡ Assegna classe a tutti:</span>
                <select
                  onChange={e => {
                    const cid = Number(e.target.value);
                    if (!cid) return;
                    setAnteprima(prev => prev.map(x => {
                      const ids = x.classi_ids || [];
                      return { ...x, classi_ids: ids.includes(cid) ? ids : [...ids, cid] };
                    }));
                    e.target.value = '';
                  }}
                  style={{ fontSize: '.8rem', padding: '.15rem .4rem', width: 'auto' }}
                >
                  <option value="">-- Scegli classe --</option>
                  {classi.map(c => (
                    <option key={c.id} value={c.id}>{c.nome}</option>
                  ))}
                </select>
              </div>
              <button className="btn btn-ghost btn-sm" style={{ marginLeft: 'auto' }} onClick={() => setAnteprima(null)}>← Torna al testo</button>
            </div>
            <div style={{ overflowX: 'auto' }}>
              <table className="tbl" style={{ minWidth: 1000 }}>
                <thead>
                  <tr>
                    <th>#</th>
                    <th>ISBN</th>
                    <th>Titolo & Volumi</th>
                    <th>Materia</th>
                    <th>Autore</th>
                    <th>Pagine</th>
                    <th>Prezzo</th>
                    <th>Copie</th>
                    <th>Anno cl.</th>
                    <th>Durata</th>
                    <th>Cod. interno</th>
                    <th>Classi</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {anteprima.map((r, i) => (
                    <tr key={i} style={r.giaPresente ? { background: '#fee2e2', opacity: 0.85 } : {}}>
                      <td style={{ color: 'var(--ink2)', fontSize: '.8rem' }}>
                        {i + 1}
                        {r.giaPresente && <div style={{ color: 'var(--red)', fontWeight: 700, fontSize: '.7rem', marginTop: '.2rem' }}>GIÀ PRESENTE</div>}
                      </td>
                      <td><input value={r.isbn || ''} onChange={e => setAnt(i, 'isbn', e.target.value)} disabled={r.giaPresente} style={{ width: 110, fontSize: '.8rem', padding: '.25rem .4rem' }} /></td>
                      <td>
                        <input value={r.titolo} onChange={e => setAnt(i, 'titolo', e.target.value)} disabled={r.giaPresente} placeholder="Titolo generale" style={{ minWidth: 160, fontSize: '.8rem', padding: '.25rem .4rem', marginBottom: '.2rem' }} />
                        <textarea rows={2} value={r.volumi || ''} onChange={e => setAnt(i, 'volumi', e.target.value)} disabled={r.giaPresente} placeholder={"Elenco volumi (uno per riga)"} style={{ minWidth: 160, fontSize: '.75rem', padding: '.25rem .4rem' }} />
                      </td>
                      <td><input value={r.materia || ''} onChange={e => setAnt(i, 'materia', e.target.value)} disabled={r.giaPresente} style={{ width: 90, fontSize: '.8rem', padding: '.25rem .4rem' }} /></td>
                      <td><input value={r.autore || ''} onChange={e => setAnt(i, 'autore', e.target.value)} disabled={r.giaPresente} style={{ minWidth: 110, fontSize: '.8rem', padding: '.25rem .4rem' }} /></td>
                      <td><input value={r.numero_pagine || ''} onChange={e => setAnt(i, 'numero_pagine', e.target.value)} disabled={r.giaPresente} placeholder="es. 288+144" style={{ width: 80, fontSize: '.8rem', padding: '.25rem .4rem' }} /></td>
                      <td><input value={r.prezzo || ''} onChange={e => setAnt(i, 'prezzo', e.target.value)} disabled={r.giaPresente} placeholder="es. 29,35 €" style={{ width: 80, fontSize: '.8rem', padding: '.25rem .4rem' }} /></td>
                      <td><input type="number" value={r.copie_inventario || 0} onChange={e => setAnt(i, 'copie_inventario', Number(e.target.value))} disabled={r.giaPresente} style={{ width: 60, fontSize: '.8rem', padding: '.25rem .4rem' }} /></td>
                      <td>
                        <select value={r.classe_anno} onChange={e => setAnt(i, 'classe_anno', Number(e.target.value))} disabled={r.giaPresente} style={{ width: 60, fontSize: '.8rem', padding: '.25rem .4rem' }}>
                          <option value={1}>1°</option><option value={2}>2°</option><option value={3}>3°</option>
                        </select>
                      </td>
                      <td>
                        <button
                          type="button"
                          className={`btn btn-sm ${r.durata_anni === 3 ? 'btn-yellow' : 'btn-ghost'}`}
                          style={{ padding: '2px 6px', fontSize: '.75rem', fontWeight: 600, border: r.durata_anni === 3 ? '1px solid #eab308' : '1px solid var(--border)' }}
                          onClick={() => !r.giaPresente && setAnt(i, 'durata_anni', r.durata_anni === 3 ? 1 : 3)}
                          disabled={r.giaPresente}
                        >
                          {r.durata_anni === 3 ? '⭐ 3 anni' : '1 anno'}
                        </button>
                      </td>
                      <td><input value={r.codice_interno} onChange={e => setAnt(i, 'codice_interno', e.target.value)} disabled={r.giaPresente} style={{ width: 110, fontSize: '.8rem', padding: '.25rem .4rem' }} /></td>
                      <td>
                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '.15rem', maxWidth: 150 }}>
                          {classi.filter(c => c.anno === r.classe_anno).map(c => {
                            const sel = (r.classi_ids || []).includes(c.id);
                            return (
                              <button key={c.id} type="button"
                                className={`btn btn-sm ${sel ? 'btn-primary' : 'btn-ghost'}`}
                                style={{ fontSize: '.65rem', padding: '2px 4px' }}
                                onClick={() => {
                                  const ids = r.classi_ids || [];
                                  setAnt(i, 'classi_ids', ids.includes(c.id) ? ids.filter(x => x !== c.id) : [...ids, c.id]);
                                }}
                              >{c.nome}</button>
                            );
                          })}
                        </div>
                      </td>
                      <td><button className="btn btn-danger btn-sm" onClick={() => setAnteprima(prev => prev.filter((_, idx) => idx !== i))}>✕</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginTop: '1rem' }}>
              <button className="btn btn-primary btn-lg" onClick={confermaImport}>
                ⬆ Importa {anteprima.filter(x => !x.giaPresente).length} libri nuovi ed associa classi a {anteprima.filter(x => x.giaPresente).length} libri già presenti
              </button>
              {esito && <span style={{ fontSize: '.85rem', color: 'var(--green)' }}>{esito}</span>}
            </div>
          </>
        )}

        {tabImport === 'csv' && (
          <>
            <p style={{ fontSize: '.8rem', color: 'var(--ink2)', marginBottom: '.5rem' }}>
              Formato: <code>codice,isbn,titolo,autore,materia,durata_anni,classe_anno</code>
            </p>
            <textarea rows={6} value={csv} onChange={e => setCsv(e.target.value)} style={{ fontFamily: 'monospace', fontSize: '.8rem' }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginTop: '.5rem' }}>
              <button className="btn btn-primary" onClick={importaCsv}>⬆ Importa</button>
              {esito && <span style={{ fontSize: '.85rem', color: 'var(--green)' }}>{esito}</span>}
            </div>
          </>
        )}
      </div>

      {/* Modale nuovo/modifica libro */}
      {modale && (
        <div className="modal-backdrop" onClick={() => setModale(null)}>
          <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 540 }}>
            <div className="modal-title">{modale.id ? 'Modifica libro' : 'Nuovo libro'}</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '.5rem' }}>
              <div className="field"><label>Codice interno *</label><input value={modale.codice_interno} onChange={set('codice_interno')} /></div>
              <div className="field"><label>ISBN</label><input value={modale.isbn || ''} onChange={set('isbn')} /></div>
            </div>
            <div className="field"><label>Titolo generale *</label><input value={modale.titolo} onChange={set('titolo')} /></div>
            <div className="field">
              <label>Volumi del libro (uno per riga)</label>
              <textarea rows={3} value={modale.volumi || ''} onChange={set('volumi')} placeholder={"Student's Book & Workbook 1\nGrammar for all\nPercorsi di inglese"} style={{ fontSize: '.85rem' }} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '.5rem' }}>
              <div className="field"><label>Autore</label><input value={modale.autore || ''} onChange={set('autore')} /></div>
              <div className="field"><label>Materia</label><input value={modale.materia || ''} onChange={set('materia')} /></div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '.5rem' }}>
              <div className="field"><label>Prezzo</label><input value={modale.prezzo || ''} onChange={set('prezzo')} placeholder="es. 29,35 €" /></div>
              <div className="field"><label>Numero Pagine</label><input value={modale.numero_pagine || ''} onChange={set('numero_pagine')} placeholder="es. 288 + 144" /></div>
              <div className="field"><label>Copie Inventario</label><input type="number" value={modale.copie_inventario || 0} onChange={e => setModale({ ...modale, copie_inventario: Number(e.target.value) })} /></div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '.5rem' }}>
              <div className="field">
                <label>Anno classe</label>
                <select value={modale.classe_anno} onChange={set('classe_anno')}>
                  <option value={1}>1° Media</option>
                  <option value={2}>2° Media</option>
                  <option value={3}>3° Media</option>
                </select>
              </div>
              <div className="field">
                <label>Durata</label>
                <select value={modale.durata_anni} onChange={set('durata_anni')}>
                  <option value={1}>1 anno</option>
                  <option value={3}>3 anni</option>
                </select>
              </div>
            </div>
            <div className="field">
              <label>Classi che usano questo libro</label>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '.4rem', marginTop: '.25rem' }}>
                {[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={{ width: '100%' }}>
                      <div style={{ fontSize: '.72rem', fontWeight: 700, color: 'var(--ink2)', marginBottom: '.2rem' }}>{a}° Anno</div>
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '.3rem' }}>
                        {cl.map(c => {
                          const sel = (modale.classi_ids || []).includes(c.id);
                          return (
                            <button key={c.id} type="button"
                              className={`btn btn-sm ${sel ? 'btn-primary' : 'btn-ghost'}`}
                              onClick={() => toggleClasse(c.id)}
                            >{c.nome}</button>
                          );
                        })}
                      </div>
                    </div>
                  );
                })}
                {classi.length === 0 && <span style={{ fontSize: '.8rem', color: 'var(--ink2)' }}>Nessuna classe configurata — vai in Classi per aggiungerle</span>}
              </div>
            </div>
            <button className="btn btn-ghost" onClick={() => setModale(null)}>Annulla</button>
            <button className="btn btn-primary" onClick={salva}>💾 Salva</button>
          </div>
        </div>
      )}
    </div>
  );
}