"use client";

import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
import { applyTheme, useSystemThemeSync, useUiStore, type Theme } from "@/stores/ui-store";

interface ThemeContextValue {
  theme: Theme;
  setTheme: (theme: Theme) => void;
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextValue | null>(null);

/**
 * Minimal localStorage-backed theme provider (PRODUCT-SPEC §27: light/dark/
 * system, design tokens via CSS variables — no hard-coded colors).
 */
export function ThemeProvider({ children }: { children: ReactNode }) {
  const theme = useUiStore((s) => s.theme);
  const setTheme = useUiStore((s) => s.setTheme);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    applyTheme(theme);
    setMounted(true);
  }, [theme]);

  useSystemThemeSync();

  const toggleTheme = useCallback(() => {
    const current = useUiStore.getState().theme;
    const next: Theme =
      current === "light" ? "dark" : current === "dark" ? "system" : "light";
    useUiStore.getState().setTheme(next);
  }, []);

  const value = useMemo(
    () => ({ theme: mounted ? theme : "light", setTheme, toggleTheme }),
    [theme, setTheme, toggleTheme, mounted]
  );

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

export function useTheme(): ThemeContextValue {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error("useTheme must be used within <ThemeProvider>");
  return ctx;
}