import { createFileRoute, Link } from "@tanstack/react-router";
import { GROK_PROVIDERS, authEnabled, signIn } from "@/lib/auth/client";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export const Route = createFileRoute("/login")({ component: Login });

function Login() {
  return (
    <main className="grid min-h-dvh place-items-center bg-field-noise px-4 py-16">
      <Card className="w-full max-w-md">
        <CardHeader>
          <div className="mb-2 flex items-center gap-3">
            <img src="/images/logo.png" alt="" className="h-10 w-auto" />
            <span className="font-display text-xl font-semibold">PG SEC</span>
          </div>
          <CardTitle>Staff sign in</CardTitle>
          <CardDescription>
            Sign in for internal staff tools. Job applicants can use the public form on the home page.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          {authEnabled ? (
            GROK_PROVIDERS.map((p) => (
              <Button
                key={p.providerId}
                type="button"
                variant="secondary"
                className="w-full"
                onClick={() => signIn(p.providerId, { callbackURL: "/" })}
              >
                Continue with {p.label}
              </Button>
            ))
          ) : (
            <p className="text-sm text-[var(--color-fg-muted)]">Sign-in is disabled.</p>
          )}
          <Button asChild variant="ghost" className="w-full">
            <Link to="/">Back to careers</Link>
          </Button>
        </CardContent>
      </Card>
    </main>
  );
}