// Connexion — retour d'un utilisateur existant : email → code à usage unique
// (OTP par e-mail) → redirection vers l'app. Sans mot de passe (gate 0,
// passwordless) — miroir du Register (OnboardingScreens). Démo — n'importe
// quel code fonctionne. window.OryzeOnb.LoginScreen
(function () {
  const { Input, Button, OtpInput } = window.OryzeDesignSystem_78c60a;
  const Ic = window.OryzeIcons;

  const H = { fontWeight: 700, fontSize: 24, letterSpacing: "-0.02em", lineHeight: 1.2 };
  const sub = { fontSize: 13.5, color: "var(--text-muted)", marginTop: 8, lineHeight: 1.55 };

  function LoginScreen({ onSignup, finish }) {
    const [step, setStep] = React.useState("email"); // email | otp
    const [email, setEmail] = React.useState("marie.lefevre@atelier.fr");
    const [err, setErr] = React.useState(null);

    function submit() {
      setErr(null);
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) { setErr("Adresse électronique invalide."); return; }
      setStep("otp");
    }

    if (step === "otp") {
      return (
        <div style={{ padding: "26px 24px 30px" }}>
          <span style={{ width: 44, height: 44, display: "flex", alignItems: "center", justifyContent: "center", background: "var(--oryze-lilac)", border: "var(--border-key) solid var(--line-keyline)", borderRadius: "var(--radius-md)", color: "var(--oryze-lilac-ink)", marginBottom: 18 }}>
            <Ic.send size={22} />
          </span>
          <div style={H}>Vérifiez votre e-mail</div>
          <div style={sub}>On a envoyé un code à usage unique à <strong style={{ color: "var(--text-strong)" }}>{email}</strong>. Saisissez-le pour ouvrir votre session.</div>
          <div style={{ margin: "26px 0 16px", display: "flex", justifyContent: "center" }}>
            <OtpInput length={6} autoFocus onComplete={() => finish && finish()} />
          </div>
          <div style={{ fontSize: 11.5, color: "var(--text-subtle)", textAlign: "center", lineHeight: 1.5 }}>
            Mode démo — n'importe quel code fonctionne.
          </div>
          <button onClick={() => setStep("email")} style={{ display: "block", margin: "22px auto 0", border: "none", background: "none", color: "var(--text-link)", fontWeight: 600, fontSize: 13, cursor: "pointer", fontFamily: "var(--font-sans)" }}>
            Modifier l'adresse e-mail
          </button>
        </div>
      );
    }

    return (
      <div style={{ padding: "26px 24px 30px" }}>
        <div style={H}>Content de vous revoir</div>
        <div style={sub}>Saisissez votre e-mail — on vous enverra un code à usage unique pour vous connecter. Pas de mot de passe à retenir.</div>

        <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 24 }}>
          <Input label="Email professionnel" value={email} onChange={(e) => setEmail(e.target.value)} mono iconLeft={<Ic.mail size={16} />} />
        </div>
        {err && <div style={{ fontSize: 12.5, color: "var(--fin-negative)", fontWeight: 600, marginTop: 10 }}>{err}</div>}

        <Button fullWidth size="lg" style={{ marginTop: 22 }} iconRight={<Ic.arrowUpRight size={16} />} onClick={submit}>Recevoir mon code</Button>

        <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "20px 0" }}>
          <div style={{ flex: 1, height: 1, background: "var(--line-divider)" }} />
          <span style={{ fontSize: 12, color: "var(--text-subtle)" }}>ou</span>
          <div style={{ flex: 1, height: 1, background: "var(--line-divider)" }} />
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <Button variant="secondary" style={{ flex: 1 }} onClick={() => setStep("otp")}>Google</Button>
          <Button variant="secondary" style={{ flex: 1 }} onClick={() => setStep("otp")}>Apple</Button>
        </div>

        <div style={{ fontSize: 13, color: "var(--text-muted)", marginTop: 22, textAlign: "center" }}>
          Pas encore de compte ?{" "}
          <button onClick={() => onSignup && onSignup()} style={{ border: "none", background: "none", color: "var(--text-link)", fontWeight: 600, fontSize: 13, cursor: "pointer", fontFamily: "var(--font-sans)", padding: 0 }}>
            Créer un compte pro
          </button>
        </div>
      </div>
    );
  }

  window.OryzeOnb = window.OryzeOnb || {};
  window.OryzeOnb.LoginScreen = LoginScreen;
})();