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

// One request to open the Docs panel scrolled to a specific section.
export interface DocsTarget {
  sectionId: string
  /** Bumped on every request, even to the same section, so a repeat click re-triggers the flash. */
  nonce: number
}

interface DocsNavValue {
  target: DocsTarget | null
  openSection: (sectionId: string) => void
}

const DocsNavContext = createContext<DocsNavValue | null>(null)

/** Wraps the app so any component can open Docs to a specific section via `useDocsNav`. */
export function DocsNavProvider({ children }: { children: ReactNode }) {
  const [target, setTarget] = useState<DocsTarget | null>(null)
  const nonceRef = useRef(0)

  const openSection = useCallback((sectionId: string) => {
    nonceRef.current += 1
    setTarget({ sectionId, nonce: nonceRef.current })
  }, [])

  const value = useMemo(() => ({ target, openSection }), [target, openSection])
  return <DocsNavContext.Provider value={value}>{children}</DocsNavContext.Provider>
}

export function useDocsNav(): DocsNavValue {
  const ctx = useContext(DocsNavContext)
  if (!ctx) throw new Error('useDocsNav must be used within a DocsNavProvider')
  return ctx
}