'use client';

import * as React from 'react';
import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
import {
  applyUiPrefs,
  DEFAULT_UI_PREFS,
  loadUiPrefs,
  saveUiPrefs,
  type UiPrefs,
} from '@/lib/ui-prefs';

const UiPrefsContext = React.createContext<{
  prefs: UiPrefs;
  setPrefs: (patch: Partial<UiPrefs>) => void;
}>({
  prefs: DEFAULT_UI_PREFS,
  setPrefs: () => {},
});

export function useUiPrefs() {
  return React.useContext(UiPrefsContext);
}

function UiPrefsInner({ children }: { children: React.ReactNode }) {
  const { resolvedTheme, theme } = useTheme();
  const [prefs, setPrefsState] = React.useState<UiPrefs>(DEFAULT_UI_PREFS);
  const [ready, setReady] = React.useState(false);

  React.useEffect(() => {
    setPrefsState(loadUiPrefs());
    setReady(true);
  }, []);

  const effective = theme === 'midnight' ? 'midnight' : resolvedTheme || 'light';

  React.useEffect(() => {
    if (!ready) return;
    applyUiPrefs(prefs, effective);
  }, [prefs, effective, ready]);

  const setPrefs = React.useCallback((patch: Partial<UiPrefs>) => {
    setPrefsState((prev) => {
      const next = { ...prev, ...patch };
      saveUiPrefs(next);
      return next;
    });
  }, []);

  return (
    <UiPrefsContext.Provider value={{ prefs, setPrefs }}>{children}</UiPrefsContext.Provider>
  );
}

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  return (
    <NextThemesProvider
      attribute="data-theme"
      defaultTheme="light"
      enableSystem
      themes={['light', 'dark', 'midnight', 'system']}
      storageKey="zy-theme"
      disableTransitionOnChange
    >
      <UiPrefsInner>{children}</UiPrefsInner>
    </NextThemesProvider>
  );
}