import { createContext, useContext, useState, useEffect } from 'react'

const TutorialContext = createContext()

export function TutorialProvider({ children }) {
  const [isTutorialActive, setIsTutorialActive] = useState(false)
  const [currentStep, setCurrentStep] = useState(0)
  const [highlightedElement, setHighlightedElement] = useState(null)

  useEffect(() => {
    const handleStartTutorial = () => {
      setIsTutorialActive(true)
      setCurrentStep(0)
    }
    window.addEventListener('start-tutorial', handleStartTutorial)
    return () => window.removeEventListener('start-tutorial', handleStartTutorial)
  }, [])

  const nextStep = () => {
    setCurrentStep(prev => prev + 1)
  }

  const previousStep = () => {
    setCurrentStep(prev => Math.max(0, prev - 1))
  }

  const endTutorial = () => {
    setIsTutorialActive(false)
    setCurrentStep(0)
    setHighlightedElement(null)
  }

  return (
    <TutorialContext.Provider value={{
      isTutorialActive,
      currentStep,
      nextStep,
      previousStep,
      endTutorial,
      highlightedElement,
      setHighlightedElement
    }}>
      {children}
    </TutorialContext.Provider>
  )
}

export function useTutorial() {
  const context = useContext(TutorialContext)
  if (!context) {
    throw new Error('useTutorial must be used within TutorialProvider')
  }
  return context
}