"use client";

import { signOut, useSession } from "~/lib/auth-client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { Button } from "~/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";

export default function SignOutPage() {
  const { data: session, isPending } = useSession();
  const router = useRouter();
  const [isSigningOut, setIsSigningOut] = useState(false);

  useEffect(() => {
    if (!isPending && !session) {
      router.push("/");
    }
  }, [session, isPending, router]);

  const handleSignOut = async () => {
    setIsSigningOut(true);
    try {
      await signOut();
      router.push("/");
      router.refresh();
    } catch (error) {
      console.error("Error signing out:", error);
      setIsSigningOut(false);
    }
  };

  if (isPending) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
        <div className="text-center">
          <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-blue-600"></div>
          <p className="text-slate-600">Loading...</p>
        </div>
      </div>
    );
  }

  if (!session) {
    return null;
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100 px-4">
      <div className="w-full max-w-md">
        {/* Header */}
        <div className="mb-8 text-center">
          <Link href="/" className="inline-block">
            <h1 className="text-3xl font-bold text-slate-900">HRIStudio</h1>
          </Link>
          <p className="mt-2 text-slate-600">
            Sign out of your research account
          </p>
        </div>

        {/* Sign Out Card */}
        <Card>
          <CardHeader>
            <CardTitle>Sign Out</CardTitle>
            <CardDescription>
              Are you sure you want to sign out of your account?
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="rounded-md bg-blue-50 p-3 text-sm text-blue-700">
              <p className="font-medium">
                Currently signed in as:{" "}
                {session.user?.name ?? session.user?.email}
              </p>
            </div>

            <div className="flex gap-3">
              <Button
                onClick={handleSignOut}
                className="flex-1"
                disabled={isSigningOut}
                variant="destructive"
              >
                {isSigningOut ? "Signing out..." : "Sign Out"}
              </Button>
              <Button asChild variant="outline" className="flex-1">
                <Link href="/">Cancel</Link>
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Footer */}
        <div className="mt-8 text-center text-xs text-slate-500">
          <p>
            © {new Date().getFullYear()} HRIStudio. A platform for Human-Robot
            Interaction research.
          </p>
        </div>
      </div>
    </div>
  );
}
