// components/portale/Portale.jsx
function Portale() {
  const [dati, setDati] = React.useState(null);
  const [risparmio, setRisparmio] = React.useState([]);
  const [classi, setClassi] = React.useState([]);
  const [form, setForm] = React.useState({
    scelta: 'quota',
    note: '',
    figli: [{ nome: '', cognome: '', anno: 1, sezione: '' }],
  });
  const [usaAlunnoEsistente, setUsaAlunnoEsistente] = React.useState('nuovo');
  const [loading, setLoading] = React.useState(false);
  const [errore, setErrore] = React.useState('');
  const [successo, setSuccesso] = React.useState('');

  React.useEffect(() => {
    api('/alunni/classi/lista').then(c => setClassi(c || []));
    Promise.all([api('/portale/mio'), api('/portale/risparmio')])
      .then(([d, r]) => { setDati(d); setRisparmio(r || []); });
  }, []);

  React.useEffect(() => {
    if (dati?.alunni?.length > 0) {
      setUsaAlunnoEsistente('esistente');
    }
  }, [dati]);

  function sezioniPerAnno(anno) {
    return [...new Set(classi
      .filter(c => Number(c.anno) === Number(anno) && c.sezione)
      .map(c => c.sezione))].sort();
  }

  function classeIdFor(figlio) {
    const found = classi.find(c => Number(c.anno) === Number(figlio.anno) && c.sezione === figlio.sezione);
    return found ? found.id : null;
  }

  function updateFiglio(index, key, value) {
    setForm(prev => {
      const figli = [...prev.figli];
      figli[index] = { ...figli[index], [key]: value };
      return { ...prev, figli };
    });
  }

  function selectAnno(index, anno) {
    const sezioni = sezioniPerAnno(anno);
    setForm(prev => {
      const figli = [...prev.figli];
      figli[index] = { ...figli[index], anno, sezione: sezioni[0] || '' };
      return { ...prev, figli };
    });
  }

  function selectSezione(index, sezione) {
    setForm(prev => {
      const figli = [...prev.figli];
      figli[index] = { ...figli[index], sezione };
      return { ...prev, figli };
    });
  }

  function addFiglio() {
    const sezioni = sezioniPerAnno(1);
    setForm(prev => ({ ...prev, figli: [...prev.figli, { nome: '', cognome: '', anno: 1, sezione: sezioni[0] || '' }] }));
  }

  function removeFiglio(index) {
    setForm(prev => ({ ...prev, figli: prev.figli.filter((_, i) => i !== index) }));
  }

  async function submitAdesione(e) {
    e.preventDefault();
    setErrore('');
    setSuccesso('');
    setLoading(true);

    const figliValidi = usaAlunnoEsistente === 'esistente'
      ? []
      : form.figli
        .map(figlio => ({
          nome: (figlio.nome || '').trim(),
          cognome: (figlio.cognome || '').trim(),
          anno: Number(figlio.anno) || 1,
          sezione: figlio.sezione || '',
          classe_id: classeIdFor(figlio),
        }))
        .filter(figlio => figlio.nome && figlio.cognome);

    if (usaAlunnoEsistente === 'nuovo' && figliValidi.length === 0) {
      setErrore('Aggiungi almeno un figlio con nome e cognome.');
      setLoading(false);
      return;
    }

    try {
      const res = await api('/portale/adesione', 'POST', {
        scelta: form.scelta,
        note: form.note,
        figli: figliValidi,
      });
      if (res?.ok) {
        setSuccesso('Modulo inviato. Attendiamo conferma dal personale.');
        const nuovoDati = await api('/portale/mio');
        setDati(nuovoDati);
      } else {
        setErrore(res?.errore || 'Impossibile inviare il modulo.');
      }
    } catch (err) {
      setErrore('Errore di rete. Riprova.');
    } finally {
      setLoading(false);
    }
  }

  if (!dati) return <div className="spinner" />;

  const totRisparmio = risparmio.reduce((s, a) => s + (a.risparmio || 0), 0);
  const adesione = dati.adesione || {};
  const sceltaLabel = adesione.adesione_scelta === 'libri'
    ? 'Acquisto libri presso l’associazione (costo calmierato)'
    : 'Quota associativa annuale';
  const statoPagato = adesione.adesione_pagato === 1;
  const pagamentoTipo = adesione.adesione_pagamento_tipo;
  const cartacea = Boolean(dati.cartacea);

  if (!adesione.adesione_accettata && !cartacea) {
    return (
      <div>
        <div className="page-header"><h1 className="page-title">Adesione e condizioni</h1></div>

        <div className="card" style={{ marginBottom: '1rem' }}>
          <div style={{ fontWeight: 700, marginBottom: '.75rem' }}>Base per l’accettazione</div>
          <p>Per accedere al servizio di prestito libri, è necessario confermare le seguenti condizioni.</p>
          <ul>
            <li>Accetto le condizioni di prestito e riconosco il regolamento dell’associazione.</li>
            <li>Posso scegliere se acquistare i libri a costo calmierato oppure pagare la quota associativa annuale.</li>
            <li>I pagamenti saranno confermati dagli assistenti o dall’amministratore tramite bonifico o contanti.</li>
            <li>Il primo figlio viene registrato automaticamente. Eventuale secondo figlio sarà approvato dall’amministratore con notifica del prezzo della seconda quota.</li>
            <li>Posso aggiungere più figli in questa fase prima di accedere alla dashboard.</li>
          </ul>
        </div>

          {(dati?.alunni?.length || 0) > 0 && (
            <div className="card" style={{ marginBottom: '1rem' }}>
              <div style={{ fontWeight: 700, marginBottom: '.75rem' }}>Figlio già presente o nuovo</div>
              <label style={{ display: 'block', marginBottom: '.5rem' }}>
                <input
                  type="radio"
                  name="figlio-mode"
                  value="esistente"
                  checked={usaAlunnoEsistente === 'esistente'}
                  onChange={() => setUsaAlunnoEsistente('esistente')}
                />
                <span style={{ marginLeft: '.5rem' }}>Alunno già presente</span>
              </label>
              <label style={{ display: 'block' }}>
                <input
                  type="radio"
                  name="figlio-mode"
                  value="nuovo"
                  checked={usaAlunnoEsistente === 'nuovo'}
                  onChange={() => setUsaAlunnoEsistente('nuovo')}
                />
                <span style={{ marginLeft: '.5rem' }}>Aggiungi un alunno mancante</span>
              </label>
              {usaAlunnoEsistente === 'esistente' && (
                <div style={{ marginTop: '.85rem', padding: '.85rem', border: '1px solid var(--border)', borderRadius: 12, background: 'var(--surface)' }}>
                  <div style={{ fontWeight: 700, marginBottom: '.5rem' }}>Alunni già registrati</div>
                  {dati.alunni.map(alunno => (
                    <div key={alunno.id} style={{ display:'flex', justifyContent:'space-between', gap:'.75rem', alignItems:'center', marginBottom:'.5rem' }}>
                      <div>
                        <div>{alunno.cognome} {alunno.nome}</div>
                        <div style={{ color:'var(--ink2)', fontSize:'.85rem' }}>{alunno.classe || 'Classe non specificata'}</div>
                      </div>
                      <div style={{ fontSize:'.85rem', color: alunno.approvazione_stato === 'pending' ? 'var(--orange)' : 'var(--green)', fontWeight: 700 }}>
                        {alunno.approvazione_stato === 'pending' ? 'In attesa' : 'Approvato'}
                      </div>
                    </div>
                  ))}
                  <div style={{ fontSize: '.85rem', color: 'var(--ink2)' }}>
                    Invia l’adesione usando uno degli alunni già presenti; il personale può completare l’approvazione.
                  </div>
                </div>
              )}
            </div>
          )}

        <form onSubmit={submitAdesione} className="card" style={{ maxWidth: 720 }}>
          {errore && <div style={{ background: 'var(--red-bg)', color: 'var(--red)', borderRadius: 8, padding: '.8rem', marginBottom: '1rem' }}>{errore}</div>}
          {successo && <div style={{ background: 'var(--green-bg)', color: 'var(--green)', borderRadius: 8, padding: '.8rem', marginBottom: '1rem' }}>{successo}</div>}

          <div style={{ marginBottom: '1.25rem' }}>
            <div style={{ fontWeight: 700, marginBottom: '.5rem' }}>Scegli il tipo di adesione</div>
            <label style={{ display: 'block', marginBottom: '.5rem' }}>
              <input type="radio" name="scelta" value="quota" checked={form.scelta === 'quota'}
                onChange={() => setForm(prev => ({ ...prev, scelta: 'quota' }))} />
              <span style={{ marginLeft: '.5rem' }}>Quota associativa annuale</span>
            </label>
            <label style={{ display: 'block' }}>
              <input type="radio" name="scelta" value="libri" checked={form.scelta === 'libri'}
                onChange={() => setForm(prev => ({ ...prev, scelta: 'libri' }))} />
              <span style={{ marginLeft: '.5rem' }}>Acquisto libri presso l’associazione (costo calmierato)</span>
            </label>
          </div>

          {usaAlunnoEsistente === 'nuovo' && (
            <div style={{ marginBottom: '1rem' }}>
              <div style={{ fontWeight: 700, marginBottom: '.5rem' }}>Dati figlio/figli</div>
              {form.figli.map((figlio, index) => {
                const sezioni = sezioniPerAnno(figlio.anno);
                const classId = classeIdFor(figlio);
                return (
                  <div key={index} style={{ marginBottom: '1rem', padding: '.85rem', border: '1px solid var(--border)', borderRadius: 10 }}>
                    <div style={{ display: 'grid', gap: '.85rem' }}>
                      <div style={{ display: 'flex', gap: '.75rem', flexWrap: 'wrap' }}>
                        <div className="field" style={{ flex: 1, minWidth: 160 }}>
                          <label>Nome</label>
                          <input type="text" value={figlio.nome} onChange={e => updateFiglio(index, 'nome', e.target.value)} required />
                        </div>
                        <div className="field" style={{ flex: 1, minWidth: 160 }}>
                          <label>Cognome</label>
                          <input type="text" value={figlio.cognome} onChange={e => updateFiglio(index, 'cognome', e.target.value)} required />
                        </div>
                        {form.figli.length > 1 && (
                          <button type="button" className="btn btn-secondary btn-sm" style={{ minWidth: 110 }} onClick={() => removeFiglio(index)}>
                            Rimuovi
                          </button>
                        )}
                      </div>

                      <div>
                        <div style={{ fontSize: '.85rem', fontWeight: 700, marginBottom: '.5rem' }}>Anno</div>
                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '.5rem' }}>
                          {[1, 2, 3].map(a => (
                            <button
                              key={a}
                              type="button"
                              className={`btn btn-sm ${figlio.anno === a ? 'btn-primary' : 'btn-ghost'}`}
                              onClick={() => selectAnno(index, a)}
                            >
                              {a}° anno
                            </button>
                          ))}
                        </div>
                      </div>

                      <div>
                        <div style={{ fontSize: '.85rem', fontWeight: 700, marginBottom: '.5rem' }}>Sezione</div>
                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: '.5rem' }}>
                          {(sezioni.length > 0 ? sezioni : ['A', 'B', 'C', 'D']).map(s => (
                            <button
                              key={s}
                              type="button"
                              className={`btn btn-sm ${figlio.sezione === s ? 'btn-primary' : 'btn-ghost'}`}
                              onClick={() => selectSezione(index, s)}
                            >
                              {s}
                            </button>
                          ))}
                        </div>
                      </div>

                      <div style={{ display: 'flex', gap: '.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
                        <span className={`badge ${classId ? 'badge-green' : 'badge-orange'}`}>
                          {classId ? 'Classe trovata' : 'Classe da verificare'}
                        </span>
                        {!classId && (
                          <span style={{ fontSize: '.8rem', color: 'var(--ink2)' }}>
                            Sezione/anno non presente nella lista classi.
                          </span>
                        )}
                      </div>
                      {figlio.anno !== 1 && (
                        <div style={{ marginTop: '.5rem', color: 'var(--orange)', fontSize: '.85rem' }}>
                          Attenzione: alunno entrato in corso o da altra scuola; richiede verifica amministrativa.
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
              <button type="button" className="btn btn-outline" onClick={addFiglio}>Aggiungi un altro figlio</button>
            </div>
          )}

          <div className="field" style={{ marginBottom: '1.25rem' }}>
            <label>Note aggiuntive</label>
            <textarea rows="4" value={form.note} onChange={e => setForm(prev => ({ ...prev, note: e.target.value }))} placeholder="Es. informazioni su classe o situazione particolare" />
          </div>

          <button type="submit" className="btn btn-primary btn-lg" disabled={loading}>
            {loading ? 'Invio in corso…' : 'Conferma adesione e invia figli'}
          </button>
        </form>
      </div>
    );
  }

  return (
    <div>
      <div className="page-header"><h1 className="page-title">I miei libri</h1></div>

      {cartacea && (
        <div className="card" style={{ marginBottom: '1rem' }}>
          <div style={{ fontWeight: 700, marginBottom: '.75rem' }}>Documentazione cartacea già ricevuta</div>
          <p>Hai già consegnato la documentazione cartacea per almeno un alunno. Non è necessario compilare l’adesione online.</p>
        </div>
      )}

      <div className="risparmio-hero">
        <div style={{ fontSize: '.85rem', opacity: .7 }}>Risparmio stimato totale</div>
        <div className="cifra">€{totRisparmio}</div>
        <div className="sub">grazie al prestito libri 📚</div>
      </div>

      {(adesione.adesione_accettata || !cartacea) && (
        <div className="card" style={{ marginBottom: '1rem' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '1rem' }}>
            <div>
              <div style={{ fontWeight: 700, marginBottom: '.5rem' }}>Stato adesione</div>
              <div style={{ marginBottom: '.5rem' }}>{sceltaLabel}</div>
              <div style={{ fontSize: '.9rem', color: 'var(--ink2)' }}>
                {adesione.adesione_data ? `Modulo inviato il ${adesione.adesione_data}` : 'Modulo inviato' }
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ color: statoPagato ? 'var(--green)' : 'var(--red)', fontWeight: 700, fontSize: '1rem' }}>
                {statoPagato ? 'Pagato' : 'Da pagare'}
              </div>
              <div style={{ fontSize: '.9rem', color: statoPagato ? 'var(--green)' : 'var(--red)' }}>
                {statoPagato ? 'Conferma pagamento ricevuta' : 'In attesa di conferma amministratore'}
              </div>
            </div>
          </div>
          {pagamentoTipo && (
            <div style={{ marginTop: '.85rem', fontSize: '.95rem', color: 'var(--ink2)' }}>
              Metodo paymento confermato: {pagamentoTipo === 'bonifico' ? 'Bonifico' : 'Contanti'}
            </div>
          )}
        </div>
      )}

      <div className="card" style={{ marginBottom: '1rem' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontWeight: 700 }}>Quota associativa</div>
            <div style={{ color: 'var(--ink2)', marginTop: '.35rem' }}>Importo annuo consigliato</div>
          </div>
          <div style={{ fontSize: '1.6rem', fontWeight: 700 }}>€{dati.quota_annua}</div>
        </div>
        <div style={{ marginTop: '.75rem', fontSize: '.9rem', color: 'var(--ink2)' }}>
          Se hai scelto la quota associativa, questo è l’importo annuo indicativo. Se hai scelto l’acquisto libri, il costo sarà comunicato separatamente.
        </div>
      </div>

      <div className="card" style={{ marginBottom: '1rem' }}>
        <div style={{ fontWeight: 700, marginBottom: '.75rem' }}>Alunni registrati</div>
        {(dati.alunni || []).length === 0 ? (
          <p style={{ color: 'var(--ink2)' }}>Non ci sono ancora alunni associati. Contatta un assistente se necessario.</p>
        ) : (
          dati.alunni.map(alunno => (
            <div key={alunno.id} style={{ marginBottom: '1rem', padding: '.85rem', border: '1px solid var(--border)', borderRadius: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: '.75rem', alignItems: 'center' }}>
                <div>
                  <div style={{ fontWeight: 700 }}>{alunno.cognome} {alunno.nome}</div>
                  <div style={{ color: 'var(--ink2)', fontSize: '.9rem' }}>{alunno.classe || 'Classe non specificata'}</div>
                </div>
                <div style={{ color: alunno.approvazione_stato === 'pending' ? 'var(--orange)' : 'var(--green)', fontWeight: 700 }}>
                  {alunno.approvazione_stato === 'pending' ? 'In attesa di approvazione' : 'Approvato'}
                </div>
              </div>
            </div>
          ))
        )}
      </div>

      {/* Alunni e prestiti */}
      {(dati.alunni || []).map(alunno => {
        const ris = risparmio.find(r => r.id === alunno.id);
        return (
          <div className="card" key={alunno.id} style={{ marginBottom:'1rem' }}>
            <div style={{ display:'flex', alignItems:'center', gap:'.75rem', marginBottom:'1rem' }}>
              <span style={{ fontSize:'2.2rem' }}>{alunno.emoji_totale || '⚪'}</span>
              <div>
                <div style={{ fontWeight:700, fontSize:'1.05rem' }}>{alunno.cognome} {alunno.nome}</div>
                <div style={{ fontSize:'.8rem', color:'var(--ink2)' }}>{alunno.classe || '—'}</div>
              </div>
            </div>

            {alunno.prestiti.length === 0
              ? <p style={{ color:'var(--ink2)', fontSize:'.875rem' }}>Nessun libro assegnato</p>
              : alunno.prestiti.map(p => (
                <div key={p.id} className="libro-row">
                  <span style={{ fontSize:'1.2rem' }}>{p.emoji || '⚪'}</span>
                  <div className="libro-info">
                    <div className="titolo">{p.titolo}</div>
                    <div className="sub">{p.materia} · {p.codice_interno}</div>
                  </div>
                  <div style={{ fontSize:'.78rem', color:'var(--ink2)', textAlign:'right', minWidth:80 }}>
                    {p.data_consegna ? `📦 ${p.data_consegna}` : '🕐 In attesa'}
                    {p.data_restituzione && <div>↩ {p.data_restituzione}</div>}
                  </div>
                </div>
              ))
            }

            {ris && (
              <div style={{ marginTop:'.75rem', textAlign:'right', fontSize:'.85rem', color:'var(--green)', fontWeight:600 }}>
                💰 Risparmio: €{ris.risparmio} ({ris.totale_libri} libri)
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}