// Auth pages — Login & Register (full-screen, no sidebar)

function AuthPage({ mode = "login" }) {
  const [email, setEmail]       = React.useState("");
  const [password, setPassword] = React.useState("");
  const [name, setName]         = React.useState("");
  const [role, setRole]         = React.useState("Créateur");
  const [loading, setLoading]   = React.useState(false);
  const [error, setError]       = React.useState("");

  const isLogin = mode === "login";

  function handleSubmit(e) {
    e.preventDefault();
    setError("");
    if (!email.trim() || !password.trim()) {
      setError("Merci de remplir tous les champs.");
      return;
    }
    if (!isLogin && !name.trim()) {
      setError("Merci d'entrer ton prénom.");
      return;
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      window.vlNavigate?.("home");
    }, 800);
  }

  const roles = ["Créateur", "Hôte", "Photographe"];
  const socials = [
    { label: "Continuer avec Google", icon: "https://www.svgrepo.com/show/475656/google-color.svg" },
    { label: "Continuer avec WhatsApp", wa: true },
  ];

  return (
    <div style={{
      minHeight: "100vh", background: "#F9FAFB",
      display: "flex", alignItems: "center", justifyContent: "center",
      fontFamily: "Inter, sans-serif", padding: 20,
    }}>
      <div style={{ width: "100%", maxWidth: 420 }}>

        {/* Card */}
        <div style={{
          background: "#fff", borderRadius: 20,
          border: "1px solid #E5E7EB",
          boxShadow: "0 8px 40px rgba(0,0,0,0.08)",
          overflow: "hidden",
        }}>
          {/* Gradient top bar */}
          <div style={{ height: 4, background: "linear-gradient(90deg,#0072C6,#4CAF50)" }}/>

          <div style={{ padding: "36px 36px 32px" }}>
            {/* Logo */}
            <div onClick={() => window.vlNavigate?.("home")} style={{ display: "flex", justifyContent: "center", marginBottom: 28, cursor: "pointer" }}>
              <img src="https://live.staticflickr.com/65535/54946982232_6f6f3d2518_z.jpg" alt="Viralobby" style={{ height: 40, width: "auto" }}/>
            </div>

            {/* Title */}
            <div style={{ textAlign: "center", marginBottom: 28 }}>
              <h1 style={{ fontSize: 22, fontWeight: 800, color: "#111827", fontFamily: "Space Grotesk, sans-serif", margin: "0 0 6px", letterSpacing: "-0.02em" }}>
                {isLogin ? "Content de te revoir" : "Rejoins Viralobby"}
              </h1>
              <p style={{ fontSize: 13.5, color: "#6B7280", margin: 0 }}>
                {isLogin ? "Connecte-toi à ton espace créateur." : "La plateforme des créateurs marocains."}
              </p>
            </div>

            {/* Role selector (register only) */}
            {!isLogin && (
              <div style={{ marginBottom: 20 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: "#9CA3AF", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 8 }}>
                  Je suis un·e
                </div>
                <div style={{ display: "flex", background: "#F9FAFB", border: "1px solid #E5E7EB", borderRadius: 10, padding: 4, gap: 4 }}>
                  {roles.map(r => (
                    <button key={r} onClick={() => setRole(r)} style={{
                      flex: 1, padding: "8px 0", borderRadius: 7, border: "none", cursor: "pointer",
                      fontSize: 12, fontWeight: 700,
                      background: role === r ? "#fff" : "transparent",
                      color: role === r ? "#0072C6" : "#9CA3AF",
                      boxShadow: role === r ? "0 1px 4px rgba(0,0,0,0.08)" : "none",
                      transition: "all .15s",
                    }}>{r}</button>
                  ))}
                </div>
              </div>
            )}

            {/* Form */}
            <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {!isLogin && (
                <div>
                  <label style={{ display: "block", fontSize: 12, fontWeight: 700, color: "#374151", marginBottom: 6 }}>Prénom</label>
                  <input
                    value={name} onChange={e => setName(e.target.value)}
                    placeholder="Ismail"
                    style={{
                      width: "100%", height: 44, padding: "0 14px",
                      border: "1.5px solid #E5E7EB", borderRadius: 10,
                      fontSize: 14, color: "#111827", background: "#F9FAFB",
                      outline: "none", fontFamily: "Inter, sans-serif",
                      boxSizing: "border-box",
                    }}
                    onFocus={e => e.target.style.borderColor="#0072C6"}
                    onBlur={e => e.target.style.borderColor="#E5E7EB"}
                  />
                </div>
              )}
              <div>
                <label style={{ display: "block", fontSize: 12, fontWeight: 700, color: "#374151", marginBottom: 6 }}>Email</label>
                <input
                  type="email" value={email} onChange={e => setEmail(e.target.value)}
                  placeholder="toi@email.ma"
                  style={{
                    width: "100%", height: 44, padding: "0 14px",
                    border: "1.5px solid #E5E7EB", borderRadius: 10,
                    fontSize: 14, color: "#111827", background: "#F9FAFB",
                    outline: "none", fontFamily: "Inter, sans-serif",
                    boxSizing: "border-box",
                  }}
                  onFocus={e => e.target.style.borderColor="#0072C6"}
                  onBlur={e => e.target.style.borderColor="#E5E7EB"}
                />
              </div>
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
                  <label style={{ fontSize: 12, fontWeight: 700, color: "#374151" }}>Mot de passe</label>
                  {isLogin && (
                    <span style={{ fontSize: 12, color: "#0072C6", fontWeight: 600, cursor: "pointer" }}>Oublié ?</span>
                  )}
                </div>
                <input
                  type="password" value={password} onChange={e => setPassword(e.target.value)}
                  placeholder="••••••••"
                  style={{
                    width: "100%", height: 44, padding: "0 14px",
                    border: "1.5px solid #E5E7EB", borderRadius: 10,
                    fontSize: 14, color: "#111827", background: "#F9FAFB",
                    outline: "none", fontFamily: "Inter, sans-serif",
                    boxSizing: "border-box",
                  }}
                  onFocus={e => e.target.style.borderColor="#0072C6"}
                  onBlur={e => e.target.style.borderColor="#E5E7EB"}
                />
              </div>

              {error && (
                <div style={{ fontSize: 12.5, color: "#EF4444", background: "#FEF2F2", border: "1px solid #FECACA", borderRadius: 8, padding: "8px 12px" }}>
                  {error}
                </div>
              )}

              <button type="submit" disabled={loading} style={{
                width: "100%", height: 46, borderRadius: 999, border: "none", cursor: "pointer",
                background: "linear-gradient(90deg,#0072C6,#4CAF50)",
                color: "#fff", fontSize: 14, fontWeight: 800,
                boxShadow: "0 4px 14px rgba(0,114,198,0.30)",
                opacity: loading ? 0.75 : 1,
                transition: "opacity .15s",
                fontFamily: "Inter, sans-serif",
                marginTop: 4,
              }}>
                {loading ? "Chargement…" : isLogin ? "Se connecter" : "Créer mon compte"}
              </button>
            </form>

            {/* Divider */}
            <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "20px 0" }}>
              <div style={{ flex: 1, height: 1, background: "#E5E7EB" }}/>
              <span style={{ fontSize: 11, color: "#9CA3AF", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.06em" }}>ou</span>
              <div style={{ flex: 1, height: 1, background: "#E5E7EB" }}/>
            </div>

            {/* Social buttons */}
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <button onClick={() => window.vlNavigate?.("home")} style={{
                width: "100%", height: 44, borderRadius: 10,
                border: "1.5px solid #E5E7EB", background: "#fff",
                display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
                fontSize: 13.5, fontWeight: 600, color: "#374151",
                cursor: "pointer", fontFamily: "Inter, sans-serif",
              }}>
                <img src="https://www.svgrepo.com/show/475656/google-color.svg" style={{ width: 18, height: 18 }} alt="Google"/>
                Continuer avec Google
              </button>
            </div>

            {/* Switch mode */}
            <div style={{ textAlign: "center", marginTop: 22, fontSize: 13.5, color: "#6B7280" }}>
              {isLogin ? "Pas encore de compte ? " : "Déjà inscrit ? "}
              <span
                onClick={() => window.vlNavigate?.(isLogin ? "register" : "login")}
                style={{ color: "#0072C6", fontWeight: 700, cursor: "pointer" }}>
                {isLogin ? "S'inscrire" : "Se connecter"}
              </span>
            </div>

            {/* Demo hint */}
            {isLogin && (
              <div style={{ marginTop: 16, padding: "10px 14px", background: "#F0F9FF", border: "1px solid #BAE6FD", borderRadius: 10, fontSize: 12, color: "#0369A1" }}>
                <b>Demo :</b> utilise n'importe quel email + mot de passe pour accéder.
              </div>
            )}
          </div>
        </div>

        {/* Back to home */}
        <div style={{ textAlign: "center", marginTop: 20 }}>
          <span onClick={() => window.vlNavigate?.("home")} style={{ fontSize: 13, color: "#9CA3AF", cursor: "pointer" }}>
            ← Retour à l'accueil
          </span>
        </div>
      </div>
    </div>
  );
}

function LoginPage()    { return <AuthPage mode="login"/>; }
function RegisterPage() { return <AuthPage mode="register"/>; }

Object.assign(window, { LoginPage, RegisterPage });