// components/admin/Alunni.jsx
function Alunni() {
  const [alunni, setAlunni]   = React.useState([]);
  const [classi, setClassi]   = React.useState([]);
  const [genitori, setGenitori] = React.useState([]);
  const [cerca, setCerca]     = React.useState('');
  const [classeF, setClasseF] = React.useState('');
  const [modale, setModale]   = React.useState(null); // null | { id?, cognome, nome, classe_id, genitore_id, documentazione_cartacea }
  const [csv, setCsv]         = React.useState('');
  const [esito, setEsito]     = React.useState('');
  const [selected, setSelected] = React.useState([]);
  const [expanded, setExpanded] = React.useState({});
  const [bulkAction, setBulkAction] = React.useState(null); // null | 'sposta'

  async function carica() {
    const p = new URLSearchParams();
    if (cerca)   p.set('cerca', cerca);
    if (classeF) p.set('classe_id', classeF);
    const [a, c] = await Promise.all([api('/alunni?' + p), api('/alunni/classi/lista')]);
    setAlunni(a || []);
    setClassi(c || []);
    setSelected([]);
  }

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

  React.useEffect(() => {
    api('/utenti').then(d => {
      setGenitori((d || []).filter(u => u.ruolo === 'genitore'));
    });
  }, []);

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

  async function elimina(id) {
    if (!confirm('Disattivare questo alunno?')) return;
    await api(`/alunni/${id}`, 'DELETE');
    toast('Alunno disattivato', 'ok');
    carica();
  }

  async function eseguiBulk(azione, target_classe_id = null) {
    if (azione === 'disattiva' && !confirm(`Disattivare ${selected.length} alunni?`)) return;
    const r = await api('/alunni/bulk-action', 'POST', { ids: selected, azione, target_classe_id });
    if (r?.errore) return toast(r.errore, 'err');
    toast('Operazione completata', 'ok');
    setBulkAction(null);
    carica();
  }

  async function importa() {
    try {
      const cleanCsv = csv.replace(/^\uFEFF/, '').trim();
      if (!cleanCsv) return;
      const righe = cleanCsv.split('\n').map(r => {
        const [cognome, nome, classe_txt] = r.split(',').map(s => s.trim());
        return { cognome, nome, classe_txt };
      }).filter(r => r.cognome || r.nome);
      const r = await api('/alunni/importa', 'POST', { righe });
      if (r?.errore) return toast(r.errore, 'err');
      setEsito(`✅ Inseriti: ${r.inseriti ?? 0} · Saltati: ${r.saltati ?? 0}`);
      carica();
    } catch (err) {
      console.error(err);
      toast('Errore durante l\'importazione', 'err');
    }
  }

  const toggleSelect = (id) => {
    setSelected(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  };

  const toggleDetails = (id) => {
    setExpanded(prev => ({ ...prev, [id]: !prev[id] }));
  };

  const toggleAll = () => {
    if (selected.length === alunni.length) setSelected([]);
    else setSelected(alunni.map(a => a.id));
  };

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">Alunni</h1>
        <div className="page-actions">
          <button className="btn btn-primary" onClick={() => setModale({ cognome:'', nome:'', classe_id:'', genitore_id:'', documentazione_cartacea:false })}>
            + Nuovo alunno
          </button>
        </div>
      </div>

      {/* Filtri */}
      <div className="card" style={{ marginBottom:'.75rem' }}>
        <div style={{ display:'flex', gap:'.75rem', alignItems:'center', flexWrap:'wrap' }}>
          <input type="search" placeholder="Cerca nome / cognome…" value={cerca}
            onChange={e => setCerca(e.target.value)} style={{ maxWidth:220 }} />
          
          <div style={{ display:'flex', gap:'.35rem', flexWrap:'wrap', alignItems:'center' }}>
            <span style={{ fontSize:'.85rem', fontWeight:600, color:'var(--ink2)', marginRight:'.25rem' }}>Classe:</span>
            <button 
              className={`btn btn-sm ${classeF === '' ? 'btn-danger' : 'btn-primary'}`}
              onClick={() => setClasseF('')}
              style={classeF === '' ? { 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)}
                style={String(classeF) === String(c.id) ? { background:'var(--red)', color:'#fff' } : {}}
              >{c.nome}</button>
            ))}
          </div>
        </div>
      </div>

      {/* Tabella */}
      <div className="card" style={{ position:'relative' }}>
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width:40 }}><input type="checkbox" checked={selected.length > 0 && selected.length === alunni.length} onChange={toggleAll} /></th>
              <th>Alunno</th><th>Classe</th><th>Genitore</th><th>Quota</th><th></th>
            </tr>
          </thead>
          <tbody>
            {alunni.map(a => (
              <React.Fragment key={a.id}>
                <tr className={selected.includes(a.id) ? 'selected' : ''} style={selected.includes(a.id) ? { background:'var(--bg)' } : {}}>
                  <td><input type="checkbox" checked={selected.includes(a.id)} onChange={() => toggleSelect(a.id)} /></td>
                  <td style={{ fontWeight:600 }}>{a.cognome} {a.nome}</td>
                  <td>{a.classe_nome || '—'}</td>
                  <td>{a.genitore_nome || '—'}</td>
                  <td>
                    {a.quota_importo ? (
                      <span style={{ display:'inline-flex', gap:'.35rem', alignItems:'center' }}>
                        <span>{Number(a.quota_importo).toFixed(2)}€</span>
                        <span className={`badge ${a.quota_pagata ? 'badge-green' : 'badge-yellow'}`}>
                          {a.quota_pagata ? 'Pagata' : 'Da pagare'}
                        </span>
                      </span>
                    ) : 'Nessuna'}
                  </td>
                  <td style={{ display:'flex', gap:'.35rem', justifyContent:'flex-end' }}>
                    <button className="btn btn-ghost btn-sm" onClick={() => toggleDetails(a.id)}>
                      {expanded[a.id] ? '▼' : '▶'}
                    </button>
                    <button className="btn btn-ghost btn-sm" onClick={() => setModale({ id:a.id, cognome:a.cognome, nome:a.nome, classe_id:a.classe_id||'', genitore_id:a.genitore_id||'', documentazione_cartacea: !!a.documentazione_cartacea })}>✏️</button>
                    <button className="btn btn-danger btn-sm" onClick={() => elimina(a.id)}>🗑</button>
                  </td>
                </tr>
                {expanded[a.id] && (
                  <tr>
                    <td colSpan={6} style={{ padding:'1rem 1.25rem', background:'var(--surface)', borderTop:'none' }}>
                      <div style={{ display:'grid', gap:'.75rem', gridTemplateColumns:'repeat(auto-fit,minmax(180px,1fr))' }}>
                        <div><strong>Genitore</strong><br />{a.genitore_nome || '—'}</div>
                        <div><strong>Email</strong><br />{a.genitore_email || '—'}</div>
                        <div><strong>Cartacea</strong><br />{a.documentazione_cartacea ? 'Sì' : 'No'}</div>
                        <div><strong>Quota corrente</strong><br />{a.quota_importo ? `${Number(a.quota_importo).toFixed(2)}€` : 'Nessuna'}</div>
                        <div><strong>Pagata</strong><br />{a.quota_pagata ? 'Sì' : 'No'}</div>
                        <div><strong>Data pagamento</strong><br />{a.quota_data_pagamento || '—'}</div>
                        <div><strong>Quote precedenti</strong><br />{a.quote_storiche || 0}</div>
                      </div>
                    </td>
                  </tr>
                )}
              </React.Fragment>
            ))}
            {alunni.length === 0 && <tr><td colSpan={7} style={{ color:'var(--ink2)', textAlign:'center', padding:'1.5rem' }}>Nessun alunno trovato</td></tr>}
          </tbody>
        </table>

        {/* Azioni di massa */}
        {selected.length > 0 && (
          <div style={{ 
            position:'sticky', bottom:0, background:'var(--ink)', color:'#fff', 
            margin:'0 -1.25rem -1.25rem', padding:'.75rem 1.25rem', 
            display:'flex', alignItems:'center', gap:'1rem', borderBottomLeftRadius:'var(--r)', borderBottomRightRadius:'var(--r)',
            zIndex: 10
          }}>
            <div style={{ fontWeight:700, fontSize:'.9rem' }}>{selected.length} selezionati</div>
            <div style={{ flex:1, display:'flex', gap:'.5rem' }}>
              <button className="btn btn-sm btn-ghost" style={{ color:'#fff', borderColor:'rgba(255,255,255,.3)' }} onClick={() => setBulkAction('sposta')}>📦 Cambia classe</button>
              <button className="btn btn-sm btn-danger" onClick={() => eseguiBulk('disattiva')}>🗑 Disattiva</button>
            </div>
            <button className="btn btn-sm btn-ghost" style={{ color:'rgba(255,255,255,.6)' }} onClick={() => setSelected([])}>Annulla</button>
          </div>
        )}
      </div>

      {/* Import CSV */}
      <div className="card" style={{ marginTop:'1rem' }}>
        <div style={{ fontWeight:700, marginBottom:'.5rem' }}>Importa alunni (CSV)</div>
        <p style={{ fontSize:'.8rem', color:'var(--ink2)', marginBottom:'.5rem' }}>Formato: <code>cognome,nome,classe</code> (es. Rossi,Marco,3A)</p>
        <textarea rows={5} value={csv} onChange={e => setCsv(e.target.value)} placeholder={"Rossi,Marco,3A\nBianchi,Laura,1B"} />
        <div style={{ display:'flex', alignItems:'center', gap:'1rem', marginTop:'.5rem' }}>
          <button className="btn btn-primary" onClick={importa}>⬆ Importa</button>
          {esito && <span style={{ fontSize:'.85rem', color:'var(--green)' }}>{esito}</span>}
        </div>
      </div>

      {/* Modale Singolo */}
      {modale && (
        <div className="modal-backdrop" onClick={() => setModale(null)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div className="modal-title">{modale.id ? 'Modifica alunno' : 'Nuovo alunno'}</div>
            <div className="field"><label>Cognome</label><input value={modale.cognome} onChange={e => setModale({...modale, cognome:e.target.value})} autoFocus /></div>
            <div className="field"><label>Nome</label><input value={modale.nome} onChange={e => setModale({...modale, nome:e.target.value})} /></div>
            <div className="field">
              <label>Classe</label>
              <select value={modale.classe_id} onChange={e => setModale({...modale, classe_id:e.target.value})}>
                <option value="">— Nessuna —</option>
                {classi.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Genitore</label>
              <select value={modale.genitore_id} onChange={e => setModale({...modale, genitore_id:e.target.value})}>
                <option value="">— Nessuno —</option>
                {genitori.map(g => (
                  <option key={g.id} value={g.id}>{g.nome} {g.email ? `(${g.email})` : ''}</option>
                ))}
              </select>
            </div>
            <div className="field" style={{ display:'flex', alignItems:'center', gap:'.5rem' }}>
              <label style={{ display:'flex', alignItems:'center', gap:'.5rem', cursor:'pointer' }}>
                <input
                  type="checkbox"
                  checked={!!modale.documentazione_cartacea}
                  onChange={e => setModale({...modale, documentazione_cartacea: e.target.checked})}
                />
                Documentazione cartacea consegnata
              </label>
            </div>
            <div className="modal-footer">
              <button className="btn btn-ghost" onClick={() => setModale(null)}>Annulla</button>
              <button className="btn btn-primary" onClick={salva}>💾 Salva</button>
            </div>
          </div>
        </div>
      )}

      {/* Modale Bulk Sposta */}
      {bulkAction === 'sposta' && (
        <div className="modal-backdrop" onClick={() => setBulkAction(null)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div className="modal-title">Sposta {selected.length} alunni in...</div>
            <div className="field">
              <label>Nuova Classe</label>
              <select id="bulk-target-class">
                <option value="">— Nessuna —</option>
                {classi.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)}
              </select>
            </div>
            <div className="modal-footer">
              <button className="btn btn-ghost" onClick={() => setBulkAction(null)}>Annulla</button>
              <button className="btn btn-primary" onClick={() => eseguiBulk('sposta', document.getElementById('bulk-target-class').value)}>💾 Applica</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}