siftlode/frontend/src/components/Login.tsx

import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { api } from "../lib/api";
import { setLanguage, type LangCode } from "../i18n";
import LanguageSwitcher from "./LanguageSwitcher";

type Phase = "idle" | "sending" | "requested" | "approved" | "error";

const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;

export default function Login() {
  const { t, i18n } = useTranslation();

  // A denied Google login bounces back here with ?access=requested (we recorded it) or
  // ?access=denied (no usable email). Surface that so the user isn't left on a raw error.
  const params = new URLSearchParams(window.location.search);
  const bounced = params.get("access"); // "requested" | "denied" | null

  const [email, setEmail] = useState("");
  const [phase, setPhase] = useState<Phase>(bounced === "requested" ? "requested" : "idle");
  const [error, setError] = useState("");

  // Hidden demo entry: a whitelisted email signs straight into the shared demo account, with
  // no button to give it away. We watch the field and — once it holds a syntactically valid
  // email and typing has settled — quietly probe /auth/demo. A match sets the session, so we
  // reload into the app; a non-match does nothing visible (the normal "request access" flow
  // stays available). The server is rate-limited and answers uniformly, so this can't be
  // hammered as an oracle. Skipped while the request-access form is mid-submit/done.
  useEffect(() => {
    const candidate = email.trim().toLowerCase();
    const settled = phase === "requested" || phase === "approved";
    if (phase === "sending" || settled || !EMAIL_RE.test(candidate)) return;
    const timer = setTimeout(() => {
      api
        .demoLogin(candidate)
        .then((r) => {
          if (r.authenticated) window.location.reload();
        })
        .catch(() => {});
    }, 700);
    return () => clearTimeout(timer);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [email, phase]);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setError("");
    setPhase("sending");
    try {
      const r = await api.requestAccess(email.trim());
      setPhase(r.status === "approved" ? "approved" : "requested");
    } catch {
      setError(t("login.submitError"));
      setPhase("error");
    }
  }

  const done = phase === "requested" || phase === "approved";

  return (
    <div className="min-h-screen grid place-items-center bg-bg text-fg">
      <div className="absolute top-4 right-4">
        <LanguageSwitcher value={i18n.language as LangCode} onChange={setLanguage} />
      </div>
      <div className="glass w-[min(92vw,420px)] rounded-2xl p-10 text-center">
        <div className="text-3xl font-bold tracking-tight">
          Sift<span className="text-accent">lode</span>
        </div>
        <p className="text-muted my-5 leading-relaxed">{t("login.tagline")}</p>
        <a
          href="/auth/login"
          className="inline-flex items-center gap-2 px-5 py-3 rounded-xl font-semibold bg-accent text-accent-fg hover:opacity-90 transition"
        >
          {t("login.signIn")}
        </a>

        <div className="mt-7 pt-6 border-t border-border text-left">
          {phase === "approved" ? (
            <p className="text-sm text-fg/80">{t("login.approved")}</p>
          ) : done ? (
            <p className="text-sm text-fg/80">{t("login.requested")}</p>
          ) : (
            <>
              <div className="text-xs uppercase tracking-wide text-muted mb-2">
                {t("login.noAccessYet")}
              </div>
              {bounced === "denied" && (
                <p className="text-xs text-muted mb-2">{t("login.denied")}</p>
              )}
              <form onSubmit={submit} className="flex items-center gap-2">
                <input
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder={t("login.emailPlaceholder")}
                  className="flex-1 min-w-0 bg-card border border-border rounded-xl px-3 py-2 text-sm outline-none focus:border-accent"
                />
                <button
                  type="submit"
                  disabled={phase === "sending"}
                  className="shrink-0 px-3 py-2 rounded-xl text-sm font-semibold bg-card border border-border hover:border-accent disabled:opacity-50 transition"
                >
                  {phase === "sending" ? t("login.sending") : t("login.requestAccess")}
                </button>
              </form>
              {error && <p className="text-xs text-red-400 mt-2">{error}</p>}
            </>
          )}
        </div>
      </div>
      <footer className="mt-5 flex gap-4 text-xs text-muted">
        <a href="/privacy" className="hover:text-fg transition">
          {t("common.privacyPolicy")}
        </a>
        <a href="/terms" className="hover:text-fg transition">
          {t("common.termsOfService")}
        </a>
      </footer>
    </div>
  );
}