'use client'

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

// Tabs that can be navigated to
export type PlaygroundTab = 'params' | 'body' | 'headers' | 'auth'

// Fields that can be highlighted
export type HighlightField = 
  | { type: 'param'; key?: string }
  | { type: 'header'; key?: string }
  | { type: 'body' }
  | { type: 'auth'; field?: 'apiKey' | 'bearerToken' | 'basicUsername' | 'basicPassword' }

interface PlaygroundNavigationState {
  /** Currently active tab (controlled externally) */
  activeTab: PlaygroundTab | null
  /** Field to highlight */
  highlightField: HighlightField | null
  /** Whether to show error styling on highlighted field */
  showError: boolean
}

interface PlaygroundNavigationContextType {
  state: PlaygroundNavigationState
  /** Navigate to a specific tab */
  navigateToTab: (tab: PlaygroundTab) => void
  /** Navigate to tab and highlight a field */
  navigateAndHighlight: (tab: PlaygroundTab, field?: HighlightField, showError?: boolean) => void
  /** Clear highlight */
  clearHighlight: () => void
  /** Set active tab (called by RequestTabs) */
  setActiveTab: (tab: PlaygroundTab) => void
  /** Reset navigation state (called when endpoint changes) */
  resetNavigation: () => void
}

const PlaygroundNavigationContext = createContext<PlaygroundNavigationContextType | undefined>(undefined)

export function PlaygroundNavigationProvider({ children }: { children: ReactNode }) {
  const [state, setState] = useState<PlaygroundNavigationState>({
    activeTab: null,
    highlightField: null,
    showError: false,
  })

  const navigateToTab = useCallback((tab: PlaygroundTab) => {
    setState(prev => ({
      ...prev,
      activeTab: tab,
      highlightField: null,
      showError: false,
    }))
  }, [])

  const navigateAndHighlight = useCallback((
    tab: PlaygroundTab, 
    field?: HighlightField, 
    showError: boolean = true
  ) => {
    setState({
      activeTab: tab,
      highlightField: field || null,
      showError,
    })
    
    // Auto-clear highlight after a delay
    if (field) {
      setTimeout(() => {
        setState(prev => ({
          ...prev,
          highlightField: null,
          showError: false,
        }))
      }, 3000)
    }
  }, [])

  const clearHighlight = useCallback(() => {
    setState(prev => ({
      ...prev,
      highlightField: null,
      showError: false,
    }))
  }, [])

  const setActiveTab = useCallback((tab: PlaygroundTab) => {
    setState(prev => ({
      ...prev,
      activeTab: tab,
    }))
  }, [])

  const resetNavigation = useCallback(() => {
    setState({
      activeTab: null,
      highlightField: null,
      showError: false,
    })
  }, [])

  return (
    <PlaygroundNavigationContext.Provider 
      value={{ 
        state, 
        navigateToTab, 
        navigateAndHighlight, 
        clearHighlight,
        setActiveTab,
        resetNavigation,
      }}
    >
      {children}
    </PlaygroundNavigationContext.Provider>
  )
}

export function usePlaygroundNavigation() {
  const context = useContext(PlaygroundNavigationContext)
  if (context === undefined) {
    throw new Error('usePlaygroundNavigation must be used within a PlaygroundNavigationProvider')
  }
  return context
}
