// components/admin/Conferme.jsx
function Conferme() {
  const [dati, setDati] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [messaggio, setMessaggio] = React.useState('');

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

  async function carica() {
    setLoading(true);
    const res = await api('/portale/adesione/pending');
    setDati(res || []);
    setLoading(false);
  }

  async function confermaPagamento(utenteId, tipo) {
    setMessaggio('');
    const res = await api(`/portale/adesione/${utenteId}/conferma`, 'PUT', {
      pagato: 1,
      pagamento_tipo: tipo,
    });
    if (res?.ok) {
      setMessaggio('Pagamento confermato.');
      carica();
    } else {
      setMessaggio(res?.errore || 'Errore durante la conferma del pagamento.');
    }
  }

  async function approvaFiglio(alunno) {
    setMessaggio('');
    const res = await api(`/alunni/${alunno.id}`, 'PUT', {
      nome: alunno.nome,
      cognome: alunno.cognome,
      classe_id: alunno.classe_id || null,
      genitore_id: alunno.genitore_id,
      attivo: 1,
      approvazione_stato: 'approvato',
    });
    if (res?.ok) {
      setMessaggio(`Figlio ${alunno.cognome} approvato.`);
      carica();
    } else {
      setMessaggio(res?.errore || 'Errore durante l’approvazione.');
    }
  }

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

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">Conferme amministratore</h1>
      </div>

      {messaggio && (
        <div style={{ background: 'var(--green-bg)', color: 'var(--green)', borderRadius: 10, padding: '1rem', marginBottom: '1rem' }}>
          {messaggio}
        </div>
      )}

      {dati.length === 0 ? (
        <div className="card">Non ci sono adesioni o approvazioni in sospeso.</div>
      ) : dati.map(u => (
        <div key={u.id} className="card" style={{ marginBottom: '1rem' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontWeight: 700, fontSize: '1rem' }}>{u.nome}</div>
              <div style={{ fontSize: '.9rem', color: 'var(--ink2)' }}>{u.email}</div>
            </div>
            <div style={{ display: 'flex', gap: '.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
              <span className={`badge ${u.adesione_pagato ? 'badge-green' : 'badge-red'}`}>
                {u.adesione_pagato ? 'Pagato' : 'Da pagare'}
              </span>
              {u.adesione_pagamento_tipo && (
                <span className="badge badge-gray">{u.adesione_pagamento_tipo}</span>
              )}
            </div>
          </div>

          <div style={{ marginTop: '.85rem', display: 'grid', gap: '.75rem' }}>
            <div><strong>Scelta:</strong> {u.adesione_scelta === 'libri' ? 'Acquisto libri a costo calmierato' : 'Quota associativa annuale'}</div>
            {u.adesione_note && <div><strong>Note:</strong> {u.adesione_note}</div>}
            <div><strong>Data adesione:</strong> {u.adesione_data || '—'}</div>
          </div>

          {u.adesione_pagato === 0 && (
            <div style={{ display: 'flex', gap: '.75rem', flexWrap: 'wrap', marginTop: '1rem' }}>
              <button className="btn btn-success btn-sm" onClick={() => confermaPagamento(u.id, 'bonifico')}>
                Conferma bonifico
              </button>
              <button className="btn btn-success btn-sm" onClick={() => confermaPagamento(u.id, 'contanti')}>
                Conferma contanti
              </button>
            </div>
          )}

          {u.figli.length > 0 && (
            <div style={{ marginTop: '1.25rem' }}>
              <div style={{ fontWeight: 700, marginBottom: '.75rem' }}>Figli</div>
              <div style={{ display: 'grid', gap: '.85rem' }}>
                {u.figli.map(alunno => (
                  <div key={alunno.id} style={{ display: 'grid', gap: '.5rem', padding: '.85rem', border: '1px solid var(--border)', borderRadius: 12 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: '.75rem' }}>
                      <div>
                        <div style={{ fontWeight: 700 }}>{alunno.cognome} {alunno.nome}</div>
                        <div style={{ fontSize: '.85rem', color: 'var(--ink2)' }}>{alunno.classe_nome || 'Classe non assegnata'}</div>
                      </div>
                      <span className={`badge ${alunno.approvazione_stato === 'pending' ? 'badge-orange' : 'badge-green'}`}>
                        {alunno.approvazione_stato === 'pending' ? 'In attesa' : 'Approvato'}
                      </span>
                    </div>
                    {alunno.approvazione_stato === 'pending' && (
                      <button className="btn btn-primary btn-sm" onClick={() => approvaFiglio(alunno)}>
                        Approva figlio
                      </button>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}