// components/admin/Utenti.jsx
function Utenti() {
  const [utenti, setUtenti] = React.useState([]);
  const [childrenByUser, setChildrenByUser] = React.useState({});
  const [expandedUtenti, setExpandedUtenti] = React.useState({});

  React.useEffect(() => {
    api('/utenti').then(d => setUtenti(d || []));
  }, []);

  async function refresh() {
    const d = await api('/utenti');
    setUtenti(d || []);
  }

  async function toggleAlunni(id) {
    setExpandedUtenti(prev => ({ ...prev, [id]: !prev[id] }));
    if (!childrenByUser[id]) {
      const figli = await api(`/utenti/${id}/alunni`);
      setChildrenByUser(prev => ({ ...prev, [id]: figli || [] }));
    }
  }

  async function cambiaRuolo(id, ruolo) {
    await api(`/utenti/${id}/ruolo`, 'PUT', { ruolo });
    toast('Ruolo aggiornato', 'ok');
    refresh();
  }

  async function toggleAttivo(id, attivo) {
    await api(`/utenti/${id}/attivo`, 'PUT', { attivo });
    refresh();
  }


  async function eliminaUtente(id) {
    if (!window.confirm('Sei sicuro di voler eliminare questo utente definitivamente?')) return;
    if (!window.confirm('Questa operazione rimuove l’utente dal database e non può essere annullata. Confermi?')) return;
    await api(`/utenti/${id}`, 'DELETE');
    toast('Utente eliminato', 'ok');
    refresh();
  }

  const RUOLI = ['admin','assistente','genitore'];

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">Utenti</h1>
      </div>
      <div className="card">
        <table className="tbl">
          <thead>
            <tr>
              <th>Email</th>
              <th className="hide-mobile">Nome</th>
              <th>Ruolo</th>
              <th>Attivo</th>
              <th>Alunni</th>
              <th>Adesione</th>
              <th>Azioni</th>
            </tr>
          </thead>
          <tbody>
            {utenti.map(u => (
              <React.Fragment key={u.id}>
                <tr>
                  <td style={{ fontSize:'.85rem' }}>{u.email}</td>
                  <td className="hide-mobile">{u.nome}</td>
                  <td>
                    <span className={`badge ${u.ruolo==='admin'?'badge-red':u.ruolo==='assistente'?'badge-yellow':'badge-green'}`}>
                      {u.ruolo}
                    </span>
                  </td>
                  <td>
                    <button
                      className={`btn btn-sm ${u.attivo ? 'btn-success' : 'btn-danger'}`}
                      onClick={() => toggleAttivo(u.id, !u.attivo)}
                    >
                      {u.attivo ? '✅' : '❌'}
                    </button>
                  </td>
                  <td>
                    <button className="btn btn-ghost btn-sm" onClick={() => toggleAlunni(u.id)}>
                      {u.alunni_count ?? 0} alunno{u.alunni_count === 1 ? '' : 'i'}
                    </button>
                  </td>
                  <td>
                    {u.adesione_accettata ? (
                      <span className="badge badge-green">Online</span>
                    ) : (
                      <span className="badge badge-yellow">Non inviata</span>
                    )}
                  </td>
                  <td style={{ display:'flex', gap:'.4rem', flexWrap:'wrap' }}>
                    <select
                      value={u.ruolo}
                      onChange={e => cambiaRuolo(u.id, e.target.value)}
                      style={{ width:'auto', fontSize:'.82rem', padding:'.3rem .5rem' }}
                    >
                      {RUOLI.map(r => <option key={r} value={r}>{r}</option>)}
                    </select>
                    <button
                      className="btn btn-danger btn-sm"
                      onClick={() => eliminaUtente(u.id)}
                    >
                      Elimina
                    </button>
                  </td>
                </tr>
              {expandedUtenti[u.id] && (
                <tr key={`${u.id}-children`}>
                  <td colSpan={7} style={{ padding: '1rem 1.25rem', background: 'var(--surface)', borderTop: 'none' }}>
                    <div style={{ fontWeight: 700, marginBottom: '.5rem' }}>Alunni assegnati</div>
                    {(childrenByUser[u.id] || []).length === 0 ? (
                      <div style={{ color: 'var(--ink2)' }}>Nessun alunno assegnato a questo genitore.</div>
                    ) : (
                      <div style={{ display:'grid', gap:'.5rem' }}>
                        {childrenByUser[u.id].map(a => (
                          <div key={a.id} style={{ display:'flex', justifyContent:'space-between', gap:'.75rem', padding:'.6rem .8rem', border:'1px solid var(--border)', borderRadius: 10 }}>
                            <div>
                              <div>{a.cognome} {a.nome}</div>
                              <div style={{ fontSize:'.82rem', color:'var(--ink2)' }}>{a.classe_nome || 'Classe non assegnata'}</div>
                            </div>
                            <div style={{ fontSize:'.82rem', color: a.approvazione_stato === 'pending' ? 'var(--orange)' : 'var(--green)', fontWeight: 700 }}>
                              {a.approvazione_stato === 'pending' ? 'In attesa' : 'Approvato'}
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </td>
                </tr>
              )}
            </React.Fragment>
          ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}