'use client'
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
} from '@/components/ui/alert-dialog'
import { useEffect, useState } from 'react'
import { useChatConfig } from '../../context/chatConfig'
import { useRouter } from 'next/navigation'

const ChatFirstGuideDialog = () => {
  const [open, setOpen] = useState(false)
  const { aiId } = useChatConfig()
  const router = useRouter()

  useEffect(() => {
    if (!!localStorage.getItem('create-ai-show-guide')) {
      setOpen(true)
      localStorage.removeItem('create-ai-show-guide')
    }
  }, [])

  const handleConfirm = () => {
    setOpen(false)
    router.push(`/@${aiId}`)
  }

  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Create Album</AlertDialogTitle>
        </AlertDialogHeader>
        <AlertDialogDescription>
          <p>
            Go to the character’s profile to create an album, attract more chatters, and increase
            your earnings.
          </p>
        </AlertDialogDescription>
        <AlertDialogFooter>
          <AlertDialogCancel>Not now</AlertDialogCancel>
          <AlertDialogAction onClick={handleConfirm}>Go</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

export default ChatFirstGuideDialog
