// Écran de connexion — Dashboard psychologue Livana

const { useState: useStateL } = React;

function Login({ onLogin }) {
  const [email, setEmail] = useStateL('');
  const [pwd, setPwd] = useStateL('');
  const [show, setShow] = useStateL(false);
  const [busy, setBusy] = useStateL(false);
  const [error, setError] = useStateL('');
  const [rester, setRester] = useStateL(true); // « Rester connectée »

  // Connexion : Firebase Auth, puis chargement des données de l'établissement
  // rattaché à cet email (loadAndApply installe aussi le temps réel).
  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    const api = window.LivanaAPI;
    if (!api || !api.available()) {
      setError('Le service est momentanément indisponible. Vérifiez votre connexion internet puis rechargez la page.');
      return;
    }
    setBusy(true); setError('');
    try {
      await api.signIn(email, pwd, rester);
      await api.loadAndApply(email);
      onLogin();
    } catch (err) {
      console.warn('Connexion échouée :', err && err.code);
      setError(api.frError(err));
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="login-page">
      <aside className="login-aside">
        <img src="assets/psychologue-residente.png" alt="Psychologue auprès d'une résidente" />
        <div className="login-aside-overlay">
          <div className="login-aside-brand">Livana</div>
          <div className="login-aside-tag">Suivez l'évolution émotionnelle des résidents accompagnés par Livana.</div>
          <div className="login-aside-foot">{window.ESTABLISHMENT} · v2.4</div>
        </div>
      </aside>

      <main className="login-main">
        <div className="login-box fade-up">
          <div className="login-logo-row">
            <img className="login-logo-img" src="assets/livana-logo.png" alt="Livana" />
          </div>

          <div className="login-eyebrow">Espace psychologue</div>
          <h1 className="login-title">Connexion sécurisée</h1>
          <p className="login-desc">Accédez au suivi des résidents et à l'assistant d'analyse des appels.</p>

          <form className="login-form" onSubmit={submit}>
            <div className="field">
              <label className="field-label">Adresse e-mail professionnelle</label>
              <div className="field-wrap">
                <span className="lead-ic"><Icon name="mail" size={17} /></span>
                <input className="field-input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="username" placeholder="vous@etablissement.fr" required />
              </div>
            </div>

            <div className="field">
              <label className="field-label">Mot de passe</label>
              <div className="field-wrap">
                <span className="lead-ic"><Icon name="lock" size={17} /></span>
                <input className="field-input" type={show ? 'text' : 'password'} value={pwd} onChange={(e) => setPwd(e.target.value)} autoComplete="current-password" placeholder="Votre mot de passe" required />
                <button type="button" className="field-eye" onClick={() => setShow((s) => !s)} title={show ? 'Masquer' : 'Afficher'}>
                  <Icon name="eye" size={17} />
                </button>
              </div>
            </div>

            <div className="login-row">
              <label className="checkbox-row">
                <input type="checkbox" checked={rester} onChange={(e) => setRester(e.target.checked)} /> Rester connectée
              </label>
              <a className="forgot-link" href="#" onClick={(e) => e.preventDefault()}>Mot de passe oublié&nbsp;?</a>
            </div>

            {error && (
              <div style={{ marginTop: 10, padding: '10px 12px', borderRadius: 10, background: 'oklch(0.97 0.02 25)', border: '1px solid oklch(0.85 0.06 25)', color: 'oklch(0.45 0.12 25)', fontSize: 13 }}>
                {error}
              </div>
            )}

            <button type="submit" className="btn btn-primary btn-block login-submit" disabled={busy}>
              {busy ? 'Connexion…' : 'Se connecter'}
            </button>
          </form>

          <div className="login-foot">© 2026 Livana · IA vocale pour les psychologues</div>
        </div>
      </main>
    </div>
  );
}

window.Login = Login;