"use client";

import * as React from "react";

type Mode = "dark" | "light";

type ThemeProviderProps = {
  children: React.ReactNode;
  defaultMode?: Mode;
  storageKey?: string;
};

type ThemeProviderState = {
  mode: Mode;
  setMode: (mode: Mode) => void;
  toggleMode: () => void;
};

const initialState: ThemeProviderState = {
  mode: "light",
  setMode: () => null,
  toggleMode: () => null,
};

const ThemeProviderContext =
  React.createContext<ThemeProviderState>(initialState);

export function ThemeProvider({
  children,
  defaultMode = "light",
  storageKey = "app-theme",
  ...props
}: Readonly<ThemeProviderProps>) {
  const [mode, setModeState] = React.useState<Mode>(() => {
    if (typeof window !== "undefined") {
      return (localStorage.getItem(`${storageKey}-mode`) as Mode) || defaultMode;
    }
    return defaultMode;
  });

  React.useEffect(() => {
    const root = window.document.documentElement;
    root.classList.remove("light", "dark");
    root.classList.add(mode);
  }, [mode]);

  const setMode = React.useCallback(
    (next: Mode) => {
      localStorage.setItem(`${storageKey}-mode`, next);
      setModeState(next);
    },
    [storageKey],
  );

  const value = React.useMemo<ThemeProviderState>(
    () => ({
      mode,
      setMode,
      toggleMode: () => setMode(mode === "dark" ? "light" : "dark"),
    }),
    [mode, setMode],
  );

  return (
    <ThemeProviderContext.Provider {...props} value={value}>
      {children}
    </ThemeProviderContext.Provider>
  );
}

export const useTheme = () => {
  const context = React.useContext(ThemeProviderContext);

  if (context === undefined)
    throw new Error("useTheme must be used within a ThemeProvider");

  return context;
};