'use client'

import React, { createContext, useContext, useCallback } from 'react'

/**
 * Docs Navigation Context
 * 
 * Provides navigation functions for doc components (like Card) to use
 * the correct navigation method based on the current view.
 * 
 * In ApiDocs view: Uses hash-based navigation
 * In standalone /docs view: Uses Next.js router
 */

interface DocsNavigationContextValue {
  // Navigate to a doc page by slug
  navigateToPage: (slug: string) => void
  // Navigate to an endpoint by ID
  navigateToEndpoint: (endpointId: string) => void
  // Switch to a different tab
  switchToTab: (tabId: string) => void
  // Check if we're in the integrated ApiDocs view
  isApiDocsView: boolean
  // Current active tab
  activeTab?: string
}

const DocsNavigationContext = createContext<DocsNavigationContextValue | null>(null)

interface DocsNavigationProviderProps {
  children: React.ReactNode
  onNavigateToPage?: (slug: string) => void
  onNavigateToEndpoint?: (endpointId: string) => void
  onSwitchTab?: (tabId: string) => void
  activeTab?: string
}

export function DocsNavigationProvider({ 
  children, 
  onNavigateToPage,
  onNavigateToEndpoint,
  onSwitchTab,
  activeTab,
}: DocsNavigationProviderProps) {
  const navigateToPage = useCallback((slug: string) => {
    if (onNavigateToPage) {
      onNavigateToPage(slug)
    }
  }, [onNavigateToPage])

  const navigateToEndpoint = useCallback((endpointId: string) => {
    if (onNavigateToEndpoint) {
      onNavigateToEndpoint(endpointId)
    }
  }, [onNavigateToEndpoint])

  const switchToTab = useCallback((tabId: string) => {
    if (onSwitchTab) {
      onSwitchTab(tabId)
    }
  }, [onSwitchTab])

  return (
    <DocsNavigationContext.Provider 
      value={{ 
        navigateToPage, 
        navigateToEndpoint, 
        switchToTab,
        isApiDocsView: !!onNavigateToPage,
        activeTab,
      }}
    >
      {children}
    </DocsNavigationContext.Provider>
  )
}

export function useDocsNavigation() {
  return useContext(DocsNavigationContext)
}
