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

interface DeveloperModeContextType {
  isDeveloperMode: boolean
  setDeveloperMode: (enabled: boolean) => void
}

const DeveloperModeContext = createContext<DeveloperModeContextType | undefined>(undefined)

const STORAGE_KEY = 'punimtag_developer_mode'

export function DeveloperModeProvider({ children }: { children: ReactNode }) {
  const [isDeveloperMode, setIsDeveloperMode] = useState<boolean>(false)

  // Load from localStorage on mount
  useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY)
    if (stored !== null) {
      setIsDeveloperMode(stored === 'true')
    }
  }, [])

  const setDeveloperMode = (enabled: boolean) => {
    setIsDeveloperMode(enabled)
    localStorage.setItem(STORAGE_KEY, enabled.toString())
  }

  return (
    <DeveloperModeContext.Provider value={{ isDeveloperMode, setDeveloperMode }}>
      {children}
    </DeveloperModeContext.Provider>
  )
}

export function useDeveloperMode() {
  const context = useContext(DeveloperModeContext)
  if (context === undefined) {
    throw new Error('useDeveloperMode must be used within a DeveloperModeProvider')
  }
  return context
}

