import { useEffect, useMemo, useState, type ReactNode } from 'react'
import { Theme } from '@astryxdesign/core/theme'
import { defaultThemeSlug, themes } from '../astryx-themes'
import {
  ThemeModeContext,
  type ColorMode,
  type ThemeModeValue,
} from './themeModeContext'

const STORAGE_KEY = 'astryx-starter-mode'

function getInitialMode(): ColorMode {
  if (typeof window === 'undefined') return 'light'

  try {
    const stored = window.localStorage.getItem(STORAGE_KEY)
    if (stored === 'light' || stored === 'dark') return stored
  } catch {
    // Storage can be unavailable in private browsing or embedded contexts.
  }

  return window.matchMedia('(prefers-color-scheme: dark)').matches
    ? 'dark'
    : 'light'
}

export function ThemeModeProvider({ children }: { children: ReactNode }) {
  const [mode, setMode] = useState<ColorMode>(getInitialMode)

  useEffect(() => {
    try {
      window.localStorage.setItem(STORAGE_KEY, mode)
    } catch {
      // The theme still switches for this session if persistence is blocked.
    }
  }, [mode])

  const value = useMemo<ThemeModeValue>(
    () => ({
      mode,
      toggleMode: () => {
        setMode((current) => (current === 'light' ? 'dark' : 'light'))
      },
    }),
    [mode],
  )

  return (
    <Theme theme={themes[defaultThemeSlug]} mode={mode}>
      <ThemeModeContext.Provider value={value}>
        {children}
      </ThemeModeContext.Provider>
    </Theme>
  )
}