"use client";

import { LogOut } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { Button } from "@/components/ui/button";
import { signOut, useSession } from "@/lib/auth-client";

export default function SignOutPage() {
	const { data: session, isPending } = useSession();
	const router = useRouter();

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

	const handleSignOut = async () => {
		await signOut();
		router.push("/");
	};

	if (isPending || !session?.user) {
		return null;
	}

	return (
		<div className="flex items-center justify-center px-4 py-20">
			<div className="w-full max-w-sm space-y-6 rounded-[10px] bg-card p-8 shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_12px_40px_rgba(0,0,0,0.12)]">
				<div className="text-center">
					<LogOut className="h-8 w-8 text-muted-foreground mx-auto mb-3" />
					<h1 className="text-lg font-semibold">Sign Out</h1>
					<p className="text-sm text-muted-foreground mt-1">
						Are you sure you want to sign out?
					</p>
				</div>

				<div className="rounded-[8px] bg-muted px-4 py-3 text-center shadow-[inset_0_0_0_1px_rgba(0,0,0,0.05)]">
					<div className="text-xs text-muted-foreground mb-0.5">
						Signed in as
					</div>
					<div className="text-sm font-medium">
						{session.user?.name || session.user?.email}
					</div>
				</div>

				<div className="grid grid-cols-2 gap-3">
					<Button
						onClick={handleSignOut}
						variant="destructive"
						className="w-full"
					>
						Sign Out
					</Button>
					<Button variant="outline" asChild>
						<Link href="/">Cancel</Link>
					</Button>
				</div>
			</div>
		</div>
	);
}