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

export type PageId = 
  | 'dashboard' 
  | 'dashboard/overview'
  | 'dashboard/analytics'
  | 'dashboard/reports'
  | 'globals'
  | 'orders'
  | 'products'
  | 'products/bundles'
  | 'products/addons'
  | 'products/subscriptions'
  | 'products/quantity-limits'
  | 'products/wishlist'
  | 'products/ajax-search'
  | 'checkout/field-editor'
  | 'customization/registration-form'
  | 'compliance/cookie-consent'
  | 'notifications/back-in-stock'
  | 'notifications/abandoned-cart'
  | 'shipping/tracking'
  | 'spam/recaptcha'
  | 'spam/email-verification'
  | 'popups/added-to-cart'
  | 'system/info'
  | 'currencies/switcher'

interface NavigationContextType {
  currentPage: PageId
  navigateTo: (page: PageId) => void
}

const NavigationContext = createContext<NavigationContextType | null>(null)

export function NavigationProvider({ children }: { children: ReactNode }) {
  const [currentPage, setCurrentPage] = useState<PageId>('dashboard')

  const navigateTo = useCallback((page: PageId) => {
    setCurrentPage(page)
  }, [])

  return (
    <NavigationContext.Provider value={{ currentPage, navigateTo }}>
      {children}
    </NavigationContext.Provider>
  )
}

export function useNavigation() {
  const context = useContext(NavigationContext)
  if (!context) {
    throw new Error('useNavigation must be used within a NavigationProvider')
  }
  return context
}