/* Veridyne Learning Portal — Access gate: Google Workspace sign-in.
   The button hands off to /api/auth/start (server-side OAuth). Only @veridyne.eu
   Google Workspace accounts are allowed; the server enforces the domain.

   Layout follows the shared "Veridyne — Shared Login & App Look" handoff so this
   screen is pixel-consistent with the other Veridyne apps (dark canvas + login
   glow, copper gradient button, Figtree). Only the logo + app-name word differ. */

function GoogleG({ size = 20 }) {
  // Full-color Google "G" on a transparent background.
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true" style={{ flexShrink: 0 }}>
      <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
      <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
      <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
      <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
    </svg>
  );
}

const AUTH_ERRORS = {
  domain: "That account isn't a Veridyne Workspace account. Sign in with your @veridyne.eu email.",
  denied: "Sign-in was cancelled. Try again when you're ready.",
  state: "Your sign-in session expired. Please try again.",
  token: "Google couldn't complete the sign-in. Please try again.",
  config: "Sign-in isn't configured yet — contact your Veridyne admin.",
  server: "Something went wrong signing you in. Please try again.",
};

function AccessGate() {
  const [redirecting, setRedirecting] = React.useState(false);
  const [error, setError] = React.useState(() => {
    const m = (location.search.match(/[?&]auth_error=([^&]+)/) || [])[1];
    return m ? AUTH_ERRORS[m] || AUTH_ERRORS.server : "";
  });

  React.useEffect(() => {
    if (location.search.includes("auth_error")) {
      history.replaceState(null, "", location.pathname + location.hash);
    }
  }, []);

  const signIn = () => {
    setError("");
    setRedirecting(true);
    const base = (window.VERIDYNE_CONFIG && window.VERIDYNE_CONFIG.apiBase) || "";
    window.location.href = base + "/api/auth/start";
  };

  return (
    // Full-viewport centered column on the shared Veridyne "login glow" canvas.
    <main
      style={{
        minHeight: "100vh",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: "40px 20px",
        background:
          "radial-gradient(120% 75% at 50% -8%, #201306 0%, #0c0908 46%, #070605 100%)",
        color: "#f2ede8",
      }}
    >
      <div className="anim-fade-up" style={{ width: "min(480px, 100%)" }}>
        {/* Brand: 90×90 mark + wordmark */}
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: 18,
            marginBottom: 40,
          }}
        >
          <VeridyneMark size={90} />
          <div style={{ fontSize: 26, letterSpacing: "-0.01em" }}>
            <span style={{ fontWeight: 700, color: "#f2ede8" }}>Veridyne</span>{" "}
            <span style={{ fontWeight: 400, color: "#9a9188" }}>Academy</span>
          </div>
        </div>

        {/* Sign-in card */}
        <div
          style={{
            width: "100%",
            background: "#141210",
            border: "1px solid #221e1b",
            borderRadius: 22,
            padding: "40px 40px 44px",
            textAlign: "left",
          }}
        >
          <h1
            style={{
              margin: "0 0 10px",
              fontSize: 32,
              fontWeight: 600,
              letterSpacing: "-0.02em",
              color: "#f2ede8",
            }}
          >
            Sign in
          </h1>
          <p style={{ margin: "0 0 32px", fontSize: 16, color: "#9a9188" }}>
            Use your Veridyne account to continue
          </p>

          {error ? (
            <div
              role="alert"
              style={{
                margin: "0 0 20px",
                padding: "11px 14px",
                borderRadius: 10,
                fontSize: 13,
                background: "rgba(200,80,60,0.12)",
                border: "1px solid rgba(200,80,60,0.3)",
                color: "#e08a72",
              }}
            >
              {error}
            </div>
          ) : null}

          <button
            onClick={signIn}
            disabled={redirecting}
            style={{
              width: "100%",
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              gap: 14,
              padding: "16px 20px",
              borderRadius: 12,
              border: "none",
              background: "linear-gradient(180deg, #c98a5b 0%, #bf7c48 100%)",
              color: "#1a0f06",
              fontSize: 16,
              fontWeight: 700,
              cursor: "pointer",
              opacity: redirecting ? 0.7 : 1,
              boxShadow: "0 8px 24px -10px rgba(191,124,72,0.6)",
              transition: "filter 140ms ease",
            }}
            onMouseEnter={(e) => (e.currentTarget.style.filter = "brightness(1.05)")}
            onMouseLeave={(e) => (e.currentTarget.style.filter = "none")}
          >
            <GoogleG size={20} />
            {redirecting ? "Redirecting to Google…" : "Sign in with Veridyne Account"}
          </button>
        </div>

        <p style={{ marginTop: 28, fontSize: 13.5, color: "#6b645c", textAlign: "center" }}>
          © {new Date().getFullYear()} Veridyne · Restricted to Veridyne staff
        </p>
      </div>
    </main>
  );
}

window.AccessGate = AccessGate;