/* global React, SEQ_UI */
const { Wordmark } = window.SEQ_UI;

function Login() {
  const [mode, setMode] = React.useState("signin"); // signin | signup
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [name, setName] = React.useState("");
  const [error, setError] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [googleLoading, setGoogleLoading] = React.useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      if (mode === "signup") {
        await window.SEQ_API.signUpEmail(email, password, name || email.split("@")[0]);
      } else {
        await window.SEQ_API.signInEmail(email, password);
      }
      window.location.hash = "/home";
      window.location.reload();
    } catch (err) {
      setError(mode === "signup" ? "Não foi possível criar a conta." : "Email ou senha inválidos.");
      setLoading(false);
    }
  }

  async function handleGoogle() {
    setError(null);
    setGoogleLoading(true);
    try {
      // Better Auth exige callbackURL relativa (allowlist por trustedOrigins)
      const r = await window.SEQ_API.signInGoogle("/");
      const redirectUrl = r?.url || r?.data?.url;
      if (redirectUrl) {
        window.location.href = redirectUrl;
      } else {
        setError("Provider Google não retornou URL de redirect.");
        setGoogleLoading(false);
      }
    } catch (err) {
      // err.message tem o status (ex: "/api/auth/sign-in/social → 400")
      // Tentar parsear o body de erro:
      let detail = "Falha no login com Google.";
      try {
        const r = await fetch("/api/auth/sign-in/social", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ provider: "google", callbackURL: "/" }),
          credentials: "include",
        });
        const d = await r.json();
        if (d?.error) detail = `Google: ${d.error}`;
        if (d?.code === "PROVIDER_NOT_CONFIGURED")
          detail = "Provider Google ainda não foi habilitado no Neon Auth.";
      } catch {}
      setError(detail);
      setGoogleLoading(false);
    }
  }

  return (
    <main style={{
      minHeight: "100vh", display: "grid", gridTemplateColumns: "1fr 1fr",
      background: "var(--kp-paper)",
    }}>
      <aside style={{
        background: "var(--kp-ink)", color: "var(--kp-paper)",
        padding: "clamp(40px,5vw,72px)", display: "flex", flexDirection: "column", justifyContent: "space-between",
        position: "relative", overflow: "hidden",
      }}>
        <div>
          <Wordmark size={32} color="var(--kp-paper)" />
          <span style={{
            display: "block", marginTop: 12,
            fontFamily: "var(--kp-mono)", fontSize: 9.5, letterSpacing: "0.24em",
            textTransform: "uppercase", color: "var(--kp-faint)",
          }}>Pagamentos · Propostas · Recorrência</span>
        </div>
        <div>
          <p style={{
            fontFamily: "var(--kp-display)", fontSize: 44, lineHeight: 1.05,
            color: "var(--kp-paper)", margin: 0, fontWeight: 400, maxWidth: 420,
          }}>
            "Pare de mandar proposta e <em style={{ color: "var(--kp-pink)", fontStyle: "italic" }}>rezar</em>. Saiba."
          </p>
          <span style={{
            display: "block", marginTop: 18,
            fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.2em",
            textTransform: "uppercase", color: "var(--kp-green)",
          }}>— Kaleidos · MMXXVI</span>
        </div>
        <div style={{ position: "absolute", top: 80, right: 60, opacity: 0.18 }}>
          <div style={{
            width: 220, height: 220, borderRadius: "50%",
            background: "conic-gradient(var(--kp-green) 0% 33%, var(--kp-pink) 33% 66%, var(--kp-paper) 66% 100%)",
            animation: "kp-spin 80s linear infinite",
          }} />
        </div>
      </aside>

      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "clamp(40px,5vw,72px)" }}>
        <div style={{ width: "100%", maxWidth: 380 }}>
          <span className="kp-eyebrow"><span className="kp-dot" /> {mode === "signup" ? "CRIAR CONTA" : "ENTRAR"}</span>
          <h1 className="kp-display" style={{
            fontSize: "clamp(36px,4vw,52px)", lineHeight: 1, margin: "16px 0 6px",
          }}>
            {mode === "signup" ? <>Crie sua <em>conta</em>.</> : <>Bem-vindo de <em>volta</em>.</>}
          </h1>
          <p style={{ fontSize: 13, color: "var(--kp-muted)", margin: "0 0 24px" }}>
            {mode === "signup"
              ? "Comece grátis com 3 propostas por mês."
              : "Acesse sua conta Kaleidos Pay."}
          </p>

          {/* Google button */}
          <button
            type="button"
            onClick={handleGoogle}
            disabled={googleLoading}
            className="kp-btn"
            style={{
              width: "100%", padding: "12px 18px", fontSize: 11,
              background: "var(--kp-white)", color: "var(--kp-ink)",
              display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
            }}
          >
            <GoogleIcon />
            {googleLoading ? "Abrindo Google..." : "Continuar com Google"}
          </button>

          <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "16px 0" }}>
            <span style={{ flex: 1, height: 1, background: "var(--kp-ink)", opacity: 0.15 }} />
            <span className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>OU COM EMAIL</span>
            <span style={{ flex: 1, height: 1, background: "var(--kp-ink)", opacity: 0.15 }} />
          </div>

          <form onSubmit={handleSubmit}>
            {mode === "signup" && (
              <label style={{ display: "block", marginBottom: 12 }}>
                <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>NOME</span>
                <input
                  type="text"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="kp-input"
                  style={{ marginTop: 6 }}
                  placeholder="Seu nome"
                />
              </label>
            )}

            <label style={{ display: "block", marginBottom: 12 }}>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>EMAIL</span>
              <input
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="kp-input"
                style={{ marginTop: 6 }}
                placeholder="voce@kaleidos.com.br"
              />
            </label>

            <label style={{ display: "block", marginBottom: 6 }}>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>SENHA</span>
              <input
                type="password"
                required
                minLength={mode === "signup" ? 8 : undefined}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="kp-input"
                style={{ marginTop: 6 }}
                placeholder={mode === "signup" ? "8+ caracteres" : "••••••••"}
              />
            </label>

            <button
              type="submit"
              disabled={loading}
              className="kp-btn kp-btn-ink"
              style={{ width: "100%", marginTop: 16, padding: "14px 18px", fontSize: 11 }}
            >
              {loading
                ? (mode === "signup" ? "Criando..." : "Entrando...")
                : (mode === "signup" ? "Criar conta →" : "Entrar →")}
            </button>
          </form>

          {error && (
            <div style={{
              marginTop: 14, padding: "8px 12px",
              background: "#FFB5B5", border: "1.5px solid var(--kp-ink)",
              fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.14em",
            }}>⚠ {error}</div>
          )}

          <div style={{
            marginTop: 22, textAlign: "center",
            fontFamily: "var(--kp-mono)", fontSize: 9.5, letterSpacing: "0.16em",
            color: "var(--kp-muted)",
          }}>
            {mode === "signup" ? (
              <>
                Já tem conta?{" "}
                <button type="button" onClick={() => setMode("signin")} style={{ background: "none", border: "none", padding: 0, color: "var(--kp-pink)", cursor: "pointer", font: "inherit", letterSpacing: "inherit", textTransform: "inherit" }}>
                  ENTRAR
                </button>
              </>
            ) : (
              <>
                Sem conta?{" "}
                <button type="button" onClick={() => setMode("signup")} style={{ background: "none", border: "none", padding: 0, color: "var(--kp-pink)", cursor: "pointer", font: "inherit", letterSpacing: "inherit", textTransform: "inherit" }}>
                  CRIAR AGORA
                </button>
              </>
            )}
            <br />
            <a href="#/landing" style={{ color: "var(--kp-muted)", marginTop: 10, display: "inline-block" }}>← VOLTAR PARA LANDING</a>
          </div>
        </div>
      </div>
    </main>
  );
}

function GoogleIcon() {
  return (
    <svg width={18} height={18} viewBox="0 0 24 24" fill="none">
      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
      <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
      <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
    </svg>
  );
}

window.SEQ_LOGIN = Login;