"use client"

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

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="min-h-screen flex items-center justify-center bg-background p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl font-bold">Sign Out</CardTitle>
          <CardDescription>
            Are you sure you want to sign out?
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="text-center p-3 bg-muted rounded-lg">
            <div className="text-sm text-muted-foreground">Currently signed in as</div>
            <div className="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>
        </CardContent>
      </Card>
    </div>
  )
}