import { createContext, useContext, useEffect, useState, ReactNode } from "react";

export type ThemeMode = "light" | "dark" | "system";
export type AccentScheme = "blue" | "violet" | "emerald" | "rose" | "amber" | "graphite";

interface ThemeContextValue {
  mode: ThemeMode;
  accent: AccentScheme;
  setMode: (m: ThemeMode) => void;
  setAccent: (a: AccentScheme) => void;
  resolvedMode: "light" | "dark";
}

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

const ACCENTS: Record<AccentScheme, { primary: string; ring: string; label: string; swatch: string }> = {
  blue:     { primary: "211 100% 50%", ring: "211 100% 50%", label: "Blue",     swatch: "hsl(211 100% 50%)" },
  violet:   { primary: "262 83% 58%",  ring: "262 83% 58%",  label: "Violet",   swatch: "hsl(262 83% 58%)" },
  emerald:  { primary: "152 70% 40%",  ring: "152 70% 40%",  label: "Emerald",  swatch: "hsl(152 70% 40%)" },
  rose:     { primary: "346 80% 56%",  ring: "346 80% 56%",  label: "Rose",     swatch: "hsl(346 80% 56%)" },
  amber:    { primary: "32 95% 50%",   ring: "32 95% 50%",   label: "Amber",    swatch: "hsl(32 95% 50%)" },
  graphite: { primary: "222 25% 22%",  ring: "222 25% 22%",  label: "Graphite", swatch: "hsl(222 25% 22%)" },
};

export const ACCENT_SWATCHES = ACCENTS;

function applyAccent(accent: AccentScheme) {
  const a = ACCENTS[accent];
  const root = document.documentElement;
  root.style.setProperty("--primary", a.primary);
  root.style.setProperty("--ring", a.ring);
  root.style.setProperty("--sidebar-primary", a.primary);
  root.style.setProperty("--sidebar-ring", a.ring);
}

function applyMode(mode: ThemeMode): "light" | "dark" {
  const resolved =
    mode === "system"
      ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
      : mode;
  document.documentElement.classList.toggle("dark", resolved === "dark");
  return resolved;
}

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [mode, setModeState] = useState<ThemeMode>(
    () => (localStorage.getItem("ui-theme-mode") as ThemeMode) || "light"
  );
  const [accent, setAccentState] = useState<AccentScheme>(
    () => (localStorage.getItem("ui-theme-accent") as AccentScheme) || "blue"
  );
  const [resolvedMode, setResolvedMode] = useState<"light" | "dark">("light");

  useEffect(() => {
    setResolvedMode(applyMode(mode));
    if (mode === "system") {
      const mq = window.matchMedia("(prefers-color-scheme: dark)");
      const handler = () => setResolvedMode(applyMode("system"));
      mq.addEventListener("change", handler);
      return () => mq.removeEventListener("change", handler);
    }
  }, [mode]);

  useEffect(() => {
    applyAccent(accent);
  }, [accent]);

  const setMode = (m: ThemeMode) => {
    localStorage.setItem("ui-theme-mode", m);
    setModeState(m);
  };
  const setAccent = (a: AccentScheme) => {
    localStorage.setItem("ui-theme-accent", a);
    setAccentState(a);
  };

  return (
    <ThemeContext.Provider value={{ mode, accent, setMode, setAccent, resolvedMode }}>
      {children}
    </ThemeContext.Provider>
  );
}

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