"use client"

import { useRouter } from "next/navigation"
import { CheckCircle2, Sparkles, RefreshCw, LayoutDashboard } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"

interface CompletionDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onRestart?: () => void
  showDashboardButton?: boolean
  dashboardPath?: string
}

export function CompletionDialog({
  open,
  onOpenChange,
  onRestart,
  showDashboardButton = false,
  dashboardPath = "/app/apikeys",
}: CompletionDialogProps) {
  const router = useRouter()

  const handleDashboardClick = () => {
    router.push(dashboardPath)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center justify-center text-center gap-2 text-lg">
            <CheckCircle2 className="h-6 w-6 text-green-500" />
            <span>Guide Completed!</span>
            <Sparkles className="h-6 w-6 text-amber-500 animate-bounce" />
          </DialogTitle>
        </DialogHeader>

        <div className="py-6">
          <div className="rounded-lg bg-green-50 dark:bg-green-900/20 p-4 border border-green-200 dark:border-green-800 text-center">
            <p className="text-green-800 dark:text-green-300 mb-2 font-medium">
              Congratulations! 🎉
            </p>
            <p className="text-green-700 dark:text-green-400 text-sm">
              You&rsquo;ve successfully completed the Codeflash getting started guide. You&rsquo;re
              now ready to start using Codeflash in your projects!
            </p>
          </div>

          <div className="mt-6 text-center text-sm text-muted-foreground">
            <p>
              Want to explore other Codeflash features? Check out our
              <a
                href="https://docs.codeflash.ai/getting-started/local-installation"
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:underline font-medium mx-1"
              >
                documentation
              </a>
              for more advanced guides and examples.
            </p>
          </div>
        </div>

        <DialogFooter className="flex flex-col sm:flex-row sm:justify-center gap-2">
          {onRestart && (
            <Button variant="outline" onClick={onRestart} className="w-full sm:w-auto">
              <RefreshCw className="h-4 w-4 mr-2" />
              Restart Guide
            </Button>
          )}
          {showDashboardButton && (
            <Button onClick={handleDashboardClick} className="w-full sm:w-auto">
              <LayoutDashboard className="h-4 w-4 mr-2" />
              Go to Dashboard
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
