'use client'

import * as React from 'react'

/**
 * DevPanel Context 类型定义
 */
interface DevPanelContextType {
  terminalLoaded: boolean
  setTerminalLoaded: (loaded: boolean) => void
}

/**
 * DevPanel Context
 */
const DevPanelContext = React.createContext<DevPanelContextType | undefined>(
  undefined
)

/**
 * DevPanel Provider Props
 */
interface DevPanelProviderProps {
  children: React.ReactNode
}

/**
 * DevPanel Provider
 * 管理开发面板的全局状态，包括终端加载状态等
 */
export function DevPanelProvider({ children }: DevPanelProviderProps) {
  const [terminalLoaded, setTerminalLoaded] = React.useState(false)

  const value = React.useMemo(
    () => ({
      terminalLoaded,
      setTerminalLoaded,
    }),
    [terminalLoaded]
  )

  return (
    <DevPanelContext.Provider value={value}>
      {children}
    </DevPanelContext.Provider>
  )
}

/**
 * 使用 DevPanel Context 的 Hook
 * @throws {Error} 如果在 DevPanelProvider 外部使用
 */
export function useDevPanel() {
  const context = React.useContext(DevPanelContext)
  if (context === undefined) {
    throw new Error('useDevPanel must be used within a DevPanelProvider')
  }
  return context
}