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

const ChatOverlayContext = createContext(null)

export function ChatOverlayProvider({ children }) {
  const [activeOverlay, setActiveOverlay] = useState(null) // null | 'create' | 'eval' | 'sandbox'
  const [overlayProps, setOverlayProps] = useState(null)

  const openOverlay = useCallback((type, props = null) => {
    setActiveOverlay(type)
    setOverlayProps(props)
  }, [])

  const closeOverlay = useCallback(() => {
    setActiveOverlay(null)
    setOverlayProps(null)
  }, [])

  return (
    <ChatOverlayContext.Provider value={{ activeOverlay, overlayProps, openOverlay, closeOverlay }}>
      {children}
    </ChatOverlayContext.Provider>
  )
}

export function useChatOverlay() {
  const ctx = useContext(ChatOverlayContext)
  if (!ctx) throw new Error('useChatOverlay must be used within ChatOverlayProvider')
  return ctx
}
