// components/Login.jsx
function Login({ onLogin }) {
  const [mode, setMode] = React.useState('genitore'); // genitore | admin
  const [loading, setLoading] = React.useState(false);
  const [errore, setErrore] = React.useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);
    setErrore('');
    const fd = new FormData(e.target);
    const body = Object.fromEntries(fd);

    try {
      const res = await fetch('/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      const data = await res.json();
      if (!res.ok || data.errore) {
        setErrore(data.errore || 'Credenziali non valide.');
      } else {
        onLogin(data.user);
      }
    } catch {
      setErrore('Errore di rete. Riprova.');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="login-page">
      <div className="login-card">
        <div className="login-logo">📚</div>
        <div className="login-title">LibriAssociazione</div>
        <div className="login-sub">Gestione prestito libri scolastici</div>

        {errore && (
          <div style={{ background:'var(--red-bg)', color:'var(--red)', borderRadius:8, padding:'.6rem .9rem', marginBottom:'1rem', fontSize:'.875rem', fontWeight:500 }}>
            ⚠ {errore}
          </div>
        )}

        {mode === 'genitore' ? (
          <form onSubmit={handleSubmit}>
            <input type="hidden" name="mode" value="genitore" />
            <div className="field">
              <label>Email</label>
              <input type="email" name="email" required placeholder="tua@email.it" autoComplete="email" />
            </div>
            <div className="field">
              <label>Codice riunione</label>
              <input
                type="text" name="codice" required placeholder="ASGD-XXXXXX"
                style={{ textTransform:'uppercase', letterSpacing:'.1em', fontFamily:'DM Mono, monospace', fontSize:'1.1rem' }}
                onChange={e => e.target.value = e.target.value.toUpperCase()}
              />
            </div>
            <button type="submit" className="btn btn-primary btn-lg" style={{ width:'100%' }} disabled={loading}>
              {loading ? '…' : 'Accedi alla riunione'}
            </button>
            <div className="login-link" onClick={() => { setMode('admin'); setErrore(''); }}>
              Accesso con grado più alto? <span>Clicca qui</span>
            </div>
          </form>
        ) : (
          <form onSubmit={handleSubmit}>
            <input type="hidden" name="mode" value="admin" />
            <div className="field">
              <label>Email</label>
              <input type="email" name="email" required placeholder="admin@locale" autoComplete="username" />
            </div>
            <div className="field">
              <label>Password</label>
              <input type="password" name="password" required autoComplete="current-password" />
            </div>
            <button type="submit" className="btn btn-primary btn-lg" style={{ width:'100%' }} disabled={loading}>
              {loading ? '…' : 'Accedi'}
            </button>
            <div className="login-link" onClick={() => { setMode('genitore'); setErrore(''); }}>
              ← Torna all'accesso riunione
            </div>
          </form>
        )}
      </div>
    </div>
  );
}