import { create } from "zustand";
import { persist } from "zustand/middleware";
import type { ColorScheme } from "@/types";

interface ThemeState {
  colorScheme: ColorScheme;
  setColorScheme: (scheme: ColorScheme) => void;
}

function normalizeScheme(value: unknown): ColorScheme {
  return value === "light" ? "light" : "dark";
}

export const useThemeStore = create<ThemeState>()(
  persist(
    (set) => ({
      colorScheme: "dark",
      setColorScheme: (colorScheme) => set({ colorScheme }),
    }),
    {
      name: "nogahost-theme",
      version: 1,
      partialize: (state) => ({ colorScheme: state.colorScheme }),
      migrate: (persisted) => {
        const state = persisted as { colorScheme?: unknown };
        return { colorScheme: normalizeScheme(state?.colorScheme) };
      },
      onRehydrateStorage: () => (state) => {
        if (state && typeof document !== "undefined") {
          document.documentElement.setAttribute(
            "data-mantine-color-scheme",
            state.colorScheme,
          );
        }
      },
    },
  ),
);