import { PALETTES, type PaletteMode, resetPalette, setPalette, setTheme, usePalette, useTheme } from '@app/lib'
import { type ReactNode, useMemo } from 'react'
import { ThemeContext, type ThemeContextValue } from './theme-context'

/**
 * Publishes the palette store to the tree. The store itself lives in
 * `shared/lib/palettes` (plain module + `useSyncExternalStore`), so themed
 * surfaces outside React — the injected `<style>` and the boot sequence — read
 * the same state without a provider in scope.
 */
export function ThemeProvider({ children }: { children: ReactNode }) {
  const palette = usePalette()
  const mode = useTheme()
  const value = useMemo<ThemeContextValue>(
    () => ({
      palette: palette.palette,
      paletteId: palette.id,
      mode,
      variant: palette.variant,
      encoded: palette.encoded,
      palettes: PALETTES,
      setPalette,
      resetPalette,
      setMode: (next: PaletteMode) => setTheme(next),
    }),
    [palette, mode],
  )
  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
}