"use client"

import { useState, useRef, useEffect } from "react"
import OnboardingFlow from "@/components/onboarding/onboarding-flow"
import INTEGRATION_CONFIG from "@/app/(auth)/onboarding/config"
import { CompletionDialog } from "@/components/onboarding/completion-dialog"
import { ConfettiEffect } from "@/components/onboarding/confetti-effect"

export default function GettingStartedClient() {
  const [showCompletionDialog, setShowCompletionDialog] = useState(false)
  const [showConfetti, setShowConfetti] = useState(false)
  const [key, setKey] = useState(0)
  const timeoutRef = useRef<NodeJS.Timeout | null>(null)

  useEffect(() => {
    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current)
    }
  }, [])

  const handleComplete = async () => {
    setShowConfetti(true)
    setShowCompletionDialog(true)

    timeoutRef.current = setTimeout(() => {
      setShowConfetti(false)
    }, 5000)
  }

  const handleRestart = () => {
    setShowCompletionDialog(false)
    setKey(prevKey => prevKey + 1)
  }

  return (
    <>
      <OnboardingFlow
        key={key}
        steps={INTEGRATION_CONFIG.cli.steps}
        title="Getting Started Guide"
        description=""
        showSkip={false}
        onComplete={handleComplete}
        hasExistingApiKey={false}
        showNewKeyMessage={false}
      />

      {showConfetti && <ConfettiEffect />}

      <CompletionDialog
        open={showCompletionDialog}
        onOpenChange={setShowCompletionDialog}
        onRestart={handleRestart}
        showDashboardButton={false}
      />
    </>
  )
}
