"use client";

import { create } from "zustand";

type Theme = "light" | "dark" | "system";

interface ThemeState {
  theme: Theme;
  setTheme: (theme: Theme) => void;
  initTheme: () => void;
}

function getResolvedTheme(theme: Theme): "light" | "dark" {
  if (theme === "system") {
    if (typeof window === "undefined") return "light";
    return window.matchMedia("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light";
  }
  return theme;
}

function applyTheme(theme: Theme) {
  const resolved = getResolvedTheme(theme);
  const html = document.documentElement;
  html.classList.remove("light", "dark");
  html.classList.add(resolved);
}

export const useThemeStore = create<ThemeState>((set) => ({
  theme: "system",

  setTheme: (theme) => {
    localStorage.setItem("mindavio-theme", theme);
    applyTheme(theme);
    set({ theme });
  },

  initTheme: () => {
    const stored = localStorage.getItem("mindavio-theme") as Theme | null;
    const theme = stored || "system";
    applyTheme(theme);
    set({ theme });

    // Listen for system theme changes when set to "system"
    const mq = window.matchMedia("(prefers-color-scheme: dark)");
    mq.addEventListener("change", () => {
      const current = localStorage.getItem("mindavio-theme") as Theme | null;
      if (!current || current === "system") {
        applyTheme("system");
      }
    });
  },
}));