import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import { toast } from "sonner";
import { Photo } from "@/components/site/look";
import { Frame } from "@/components/site/shell";
import { Button, Field, Input } from "@/components/ui";
import { authClient, GROK_PROVIDERS, signIn } from "@/lib/auth/client";
import { SignedIn, SignedOut } from "@/lib/auth/gates";
import { applyDemoRole, getShell } from "@/lib/clinic/api";
import { getPreferredLocale } from "@/lib/clinic/api";
import { DEMO_ACCOUNTS, DEMO_CODES, DEMO_PASSWORD } from "@/lib/clinic/logic";
import { useI18n } from "@/lib/i18n/context";

export const Route = createFileRoute("/login")({
  loader: async () => getShell({ data: await getPreferredLocale() }),
  component: LoginPage,
});

function LoginPage() {
  const shell = Route.useLoaderData();
  const { t } = useI18n();
  const [mode, setMode] = useState<"in" | "up">("in");
  const [email, setEmail] = useState(DEMO_ACCOUNTS[0].email);
  const [password, setPassword] = useState(DEMO_PASSWORD);
  const [name, setName] = useState("");
  const [code, setCode] = useState("AURELIA-OWNER");
  const [error, setError] = useState("");

  async function submit(event: React.FormEvent) {
    event.preventDefault();
    setError("");
    const result = mode === "up"
      ? await authClient.signUp.email({ email, password, name: name || email })
      : await authClient.signIn.email({ email, password });
    if (result.error) {
      setError(t("auth.failed"));
      return;
    }
    toast.success(mode === "up" ? t("auth.created") : t("auth.signedIn"));
    window.location.href = "/portal";
  }

  return (
    <Frame shell={shell}>
      <div className="mx-auto grid max-w-7xl items-center gap-12 px-5 py-16 md:grid-cols-2 md:px-6">
        <Photo src="/clinic/lounge.jpg" alt="" className="aspect-square w-full rounded-[1.75rem] object-cover" />
        <div className="grid gap-6">
        <h1 className="font-display text-5xl text-forest">{t("auth.title")}</h1>
        <p className="text-muted">{t("auth.lead")}</p>
        <SignedOut>
          <div className="grid gap-2">
            {GROK_PROVIDERS.map((provider) => (
              <Button key={provider.providerId} variant="line" onClick={() => signIn(provider.providerId, { callbackURL: "/portal" })}>
                {provider.providerId === "google" ? t("auth.google") : t("auth.x")}
              </Button>
            ))}
          </div>
          <form className="grid gap-3" onSubmit={(event) => void submit(event)}>
            {mode === "up" ? <Field label={t("auth.name")}><Input value={name} onChange={(event) => setName(event.target.value)} /></Field> : null}
            <Field label={t("auth.email")}><Input type="email" value={email} onChange={(event) => setEmail(event.target.value)} required /></Field>
            <Field label={t("auth.password")}><Input type="password" value={password} onChange={(event) => setPassword(event.target.value)} required /></Field>
            {error ? <p className="text-danger">{error}</p> : null}
            <Button type="submit">{mode === "up" ? t("auth.create") : t("auth.submit")}</Button>
            <button type="button" className="text-sm text-muted" onClick={() => setMode(mode === "up" ? "in" : "up")}>{mode === "up" ? t("auth.have") : t("auth.create")}</button>
          </form>
          <aside className="rounded-xl bg-paper p-4 text-sm">
            <p className="font-medium">{t("auth.demoTitle")}</p>
            <p className="mt-2">{t("auth.demoPassword")}: {DEMO_PASSWORD}</p>
            <ul className="mt-2 space-y-1">
              {DEMO_ACCOUNTS.map((account) => <li key={account.email}>{account.email} — {account.role}</li>)}
            </ul>
          </aside>
        </SignedOut>
        <SignedIn>
          <p>{t("auth.signedIn")}</p>
          <form className="grid gap-3" onSubmit={async (event) => {
            event.preventDefault();
            const result = await applyDemoRole({ data: { code } });
            if (!result.ok) { setError(t("admin.badCode")); return; }
            toast.success(t("common.saved"));
            window.location.href = result.role === "super_admin" ? "/platform" : result.role === "patient" ? "/portal" : "/admin";
          }}>
            <h2 className="font-display text-3xl">{t("auth.roleTitle")}</h2>
            <p className="text-sm text-muted">{t("admin.roleLead")}</p>
            <Field label={t("admin.code")}><Input value={code} onChange={(event) => setCode(event.target.value)} /></Field>
            <ul className="text-sm text-muted">{Object.keys(DEMO_CODES).map((item) => <li key={item}>{item}</li>)}</ul>
            {error ? <p className="text-danger">{error}</p> : null}
            <Button type="submit">{t("admin.applyCode")}</Button>
          </form>
          <Link to="/portal" className="text-sm">{t("nav.portal")}</Link>
        </SignedIn>
        </div>
      </div>
    </Frame>
  );
}