/* Login + Sign up. Google OAuth via Azure Static Web Apps; the email/password
   forms that used to live here were decorative (no backend ever existed for
   them) and were removed. */

function LoginPage({ go }) {
  const [mode, setMode] = React.useState("signin");
  React.useEffect(() => {
    const onSignup = () => setMode("signup");
    window.addEventListener("mcs:signup", onSignup);
    return () => window.removeEventListener("mcs:signup", onSignup);
  }, []);
  return (
    <div className="page" data-screen-label="02 Login">
      <section className="section" style={{ paddingTop: 64 }}>
        <div className="container" style={{ maxWidth: 1040 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }} className="hero-grid">
            <LoginAside mode={mode} />
            <div className="card bordered" style={{ padding: 32 }}>
              <div style={{ display: "flex", gap: 4, marginBottom: 24, padding: 4, background: "var(--paper-2)", borderRadius: 10 }}>
                <SegBtn active={mode === "signin"} onClick={() => setMode("signin")}>Sign in</SegBtn>
                <SegBtn active={mode === "signup"} onClick={() => setMode("signup")}>Create account</SegBtn>
              </div>
              <GoogleAuthBlock mode={mode} />
              <div className="kicker" style={{ marginTop: 24, textAlign: "center", lineHeight: 1.6 }}>
                Sign in to mint a cloud-sync key for the desktop app,<br/>
                or to view your stash from your phone.
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function SegBtn({ active, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      flex: 1, padding: "8px 12px", border: 0,
      borderRadius: 7, cursor: "pointer",
      background: active ? "var(--paper)" : "transparent",
      color: active ? "var(--ink)" : "var(--ink-3)",
      boxShadow: active ? "0 1px 2px rgba(0,0,0,.06)" : "none",
      fontFamily: "inherit", fontSize: "0.92rem", fontWeight: 600,
    }}>{children}</button>
  );
}

function LoginAside({ mode }) {
  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 16 }}>Members</div>
      <h2 style={{ marginBottom: 22 }}>
        {mode === "signup" ? "Join the stash." : "Welcome back, crafter."}
      </h2>
      <p className="lead" style={{ maxWidth: 380, marginBottom: 36 }}>
        Sign in to manage your cloud sync keys and view your stash from any
        device. We use Google for sign-in so we never have to store your password.
      </p>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "var(--line-soft)", border: "1px solid var(--line-soft)", borderRadius: 12, overflow: "hidden" }}>
        {[
          { v: "1,284", k: "items catalogued" },
          { v: "$0", k: "spent on dupes" },
          { v: "37", k: "cards made" },
          { v: "12", k: "tutorial videos" },
        ].map((s, i) => (
          <div key={i} style={{ padding: "20px 22px", background: "var(--paper)" }}>
            <div style={{ fontFamily: "var(--display-font)", fontSize: "1.6rem", fontWeight: 700, lineHeight: 1, marginBottom: 6 }}>{s.v}</div>
            <div className="kicker">{s.k}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* The actual auth control. Same OAuth flow whether the user picks Sign in or
   Create account on the segmented control. Google creates the account on
   first sign-in automatically. After auth, SWA bounces back to /#stash, the
   signed-in landing page (keys for desktop setup live at /#keys). */
function GoogleAuthBlock({ mode }) {
  const href = "/.auth/login/google?post_login_redirect_uri=/%23stash";
  const label = mode === "signup" ? "Sign up with Google" : "Continue with Google";
  return (
    <div style={{ padding: "8px 0 4px" }}>
      <a href={href}
         style={{
           display: "flex", alignItems: "center", justifyContent: "center", gap: 12,
           width: "100%", padding: "14px 20px",
           background: "var(--paper)",
           color: "var(--ink)",
           border: "1px solid var(--line-soft)",
           borderRadius: 10,
           textDecoration: "none",
           fontSize: "0.98rem", fontWeight: 600,
           fontFamily: "inherit",
           boxShadow: "0 1px 2px rgba(0,0,0,.06)",
           transition: "background 120ms ease, border-color 120ms ease",
         }}
         onMouseOver={(e) => { e.currentTarget.style.background = "var(--paper-2)"; }}
         onMouseOut={(e) => { e.currentTarget.style.background = "var(--paper)"; }}>
        <GoogleGlyph />
        {label}
      </a>
      <p style={{
        marginTop: 18, marginBottom: 0,
        fontSize: "0.85rem", color: "var(--ink-3)",
        textAlign: "center", lineHeight: 1.5,
      }}>
        {mode === "signup"
          ? "First time? Click above to create your account with one tap. No password to remember."
          : "We'll bounce you to Google, then right back here."}
      </p>
    </div>
  );
}

/* Google's official multi-color "G" glyph. Inline SVG so we don't pull a
   dependency or hit an external CDN for an 18px icon. */
function GoogleGlyph() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
      <path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 01-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"/>
      <path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 009 18z"/>
      <path fill="#FBBC05" d="M3.964 10.71A5.41 5.41 0 013.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 000 9c0 1.452.348 2.827.957 4.042l3.007-2.332z"/>
      <path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 00.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z"/>
    </svg>
  );
}

Object.assign(window, { LoginPage });