import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { Button } from "@/components/ui/button";
import { CheckCircle2, Loader2, XCircle } from "lucide-react";

export const Route = createFileRoute("/verify-email")({
  ssr: false,
  head: () => ({ meta: [{ title: "Verify your email — eBay BOS" }] }),
  component: VerifyEmailPage,
});

function VerifyEmailPage() {
  const navigate = useNavigate();
  const [status, setStatus] = useState<"checking" | "ok" | "fail">("checking");

  useEffect(() => {
    // Supabase auto-hydrates the session from the URL hash on this route.
    const timeout = setTimeout(async () => {
      const { data } = await supabase.auth.getSession();
      setStatus(data.session ? "ok" : "fail");
    }, 800);
    return () => clearTimeout(timeout);
  }, []);

  return (
    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-12">
      <div className="w-full max-w-md rounded-xl border bg-card p-8 text-center">
        {status === "checking" && (
          <>
            <Loader2 className="mx-auto h-10 w-10 animate-spin text-muted-foreground" />
            <p className="mt-4 text-sm text-muted-foreground">Verifying your email…</p>
          </>
        )}
        {status === "ok" && (
          <>
            <CheckCircle2 className="mx-auto h-10 w-10 text-primary" />
            <h1 className="mt-4 text-xl font-semibold">Email verified</h1>
            <p className="mt-1 text-sm text-muted-foreground">You're all set.</p>
            <Button className="mt-6 w-full" onClick={() => navigate({ to: "/dashboard" })}>
              Continue to dashboard
            </Button>
          </>
        )}
        {status === "fail" && (
          <>
            <XCircle className="mx-auto h-10 w-10 text-destructive" />
            <h1 className="mt-4 text-xl font-semibold">Verification link expired</h1>
            <p className="mt-1 text-sm text-muted-foreground">
              Sign in to request a new verification email.
            </p>
            <Button asChild className="mt-6 w-full">
              <Link to="/auth">Back to sign in</Link>
            </Button>
          </>
        )}
      </div>
    </div>
  );
}