// components/admin/Riunioni.jsx
function Riunioni() {
  const [lista, setLista]       = React.useState([]);
  const [attiva, setAttiva]     = React.useState(null);
  const [note, setNote]         = React.useState('');
  const [durata, setDurata]     = React.useState(4);
  const [loading, setLoading]   = React.useState(false);
  const [serverTime, setServerTime] = React.useState(null);
  const attivaRef = React.useRef(null);

  async function carica() {
    const [a, l] = await Promise.all([api('/riunioni/attiva'), api('/riunioni')]);
    setAttiva(a);
    setLista(l || []);
  }

  async function fetchServerTime() {
    const res = await api('/riunioni/server-time');
    if (!res || !res.server_time) return;
    setServerTime(res.server_time);
    const currentAttiva = attivaRef.current;
    if (currentAttiva && new Date(res.server_time) >= new Date(currentAttiva.scade_il)) {
      carica();
    }
  }

  React.useEffect(() => {
    attivaRef.current = attiva;
  }, [attiva]);

  React.useEffect(() => {
    carica();
    fetchServerTime();
    const timer = setInterval(fetchServerTime, 5000);
    return () => clearInterval(timer);
  }, []);

  async function crea() {
    setLoading(true);
    const r = await api('/riunioni', 'POST', { note, durata_ore: durata });
    setLoading(false);
    if (r?.errore) return toast(r.errore, 'err');
    toast(`Riunione avviata — ${r.codice}`, 'ok');
    setNote('');
    carica();
  }

  async function chiudi(id) {
    if (!confirm('Chiudere la riunione? I partecipanti verranno sloggati al prossimo accesso.')) return;
    await api(`/riunioni/${id}/chiudi`, 'POST');
    toast('Riunione chiusa', 'ok');
    carica();
  }

  async function elimina(id) {
    if (!confirm('Eliminare definitivamente questa riunione?')) return;
    const r = await api(`/riunioni/${id}`, 'DELETE');
    if (r?.errore) return toast(r.errore, 'err');
    toast('Riunione eliminata', 'ok');
    carica();
  }

  const fmt = d => new Date(d).toLocaleString('it');

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">Riunioni</h1>
      </div>
      <div style={{ color:'var(--ink2)', fontSize:'.9rem', marginBottom:'1rem' }}>
        Ora server: {serverTime ? fmt(serverTime) : 'caricamento...'}
      </div>

      {/* Riunione attiva in evidenza */}
      {attiva && (
        <div className="card" style={{ border:'2px solid var(--green)', marginBottom:'1rem' }}>
          <div style={{ display:'flex', alignItems:'center', gap:'.75rem', marginBottom:'.75rem' }}>
            <span style={{ color:'var(--green)', fontWeight:700 }}>🟢 Riunione in corso</span>
            <span style={{ fontSize:'.8rem', color:'var(--ink2)' }}>Scade: {fmt(attiva.scade_il)}</span>
          </div>
          <div className="codice-riunione">{attiva.codice}</div>
          {attiva.note && <p style={{ marginTop:'.75rem', color:'var(--ink2)', fontSize:'.875rem' }}>{attiva.note}</p>}
          <div style={{ marginTop:'1rem' }}>
            <button className="btn btn-danger" onClick={() => chiudi(attiva.id)}>⏹ Chiudi riunione</button>
          </div>
        </div>
      )}

      {/* Nuova riunione */}
      {!attiva && (
        <div className="card" style={{ marginBottom:'1rem' }}>
          <div style={{ fontWeight:700, marginBottom:'1rem' }}>Avvia nuova riunione</div>
          <div className="field">
            <label>Note (opzionale)</label>
            <input type="text" value={note} onChange={e => setNote(e.target.value)} placeholder="es. Riunione fine anno 1A" />
          </div>
          <div className="field">
            <label>Durata</label>
            <select value={durata} onChange={e => setDurata(Number(e.target.value))}>
              {[2,3,4,6,8].map(h => <option key={h} value={h}>{h} ore</option>)}
            </select>
          </div>
          <button className="btn btn-primary" onClick={crea} disabled={loading}>
            {loading ? '…' : '▶ Avvia riunione'}
          </button>
        </div>
      )}

      {/* Storico */}
      <div className="card">
        <div style={{ fontWeight:700, marginBottom:'.75rem' }}>Storico riunioni</div>
        {lista.length === 0 ? <p style={{ color:'var(--ink2)' }}>Nessuna riunione ancora.</p> : (
          <table className="tbl">
            <thead>
              <tr>
                <th>Codice</th>
                <th>Note</th>
                <th className="hide-mobile">Creata</th>
                <th>Scade</th>
                <th>Part.</th>
                <th>Stato</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {lista.map(r => (
                <tr key={r.id}>
                  <td className="mono" style={{ fontWeight:700 }}>{r.codice}</td>
                  <td>{r.note || '—'}</td>
                  <td className="hide-mobile" style={{ fontSize:'.8rem', color:'var(--ink2)' }}>{fmt(r.creata_il)}</td>
                  <td style={{ fontSize:'.8rem', color:'var(--ink2)' }}>{fmt(r.scade_il)}</td>
                  <td>{r.partecipanti}</td>
                  <td>
                    {r.chiusa
                      ? <span className="badge badge-gray">Chiusa</span>
                      : <span className="badge badge-green">Attiva</span>}
                  </td>
                  <td style={{ display:'flex', gap:'.5rem', justifyContent:'flex-end' }}>
                    {!r.chiusa && (
                      <button className="btn btn-danger btn-sm" onClick={() => chiudi(r.id)}>Chiudi</button>
                    )}
                    <button className="btn btn-ghost btn-sm" onClick={() => elimina(r.id)} title="Elimina riunione">🗑️</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}