"use client";

import { useEffect, useState } from "react";

export type ThemeColor = "blue" | "indigo" | "emerald" | "rose" | "violet" | "teal" | "slate";

const PALETTES: Record<ThemeColor, Record<string, string>> = {
  blue: {
    "50": "#eff6ff",
    "100": "#dbeafe",
    "200": "#bfdbfe",
    "300": "#93c5fd",
    "400": "#60a5fa",
    "500": "#3b82f6",
    "600": "#2563eb",
    "700": "#1d4ed8",
    "800": "#1e40af",
    "900": "#1e3a8a",
    "950": "#172554",
  },
  indigo: {
    "50": "#eef2ff",
    "100": "#e0e7ff",
    "200": "#c7d2fe",
    "300": "#a5b4fc",
    "400": "#818cf8",
    "500": "#6366f1",
    "600": "#4f46e5",
    "700": "#4338ca",
    "800": "#3730a3",
    "900": "#312e81",
    "950": "#1e1b4b",
  },
  emerald: {
    "50": "#ecfdf5",
    "100": "#d1fae5",
    "200": "#a7f3d0",
    "300": "#6ee7b7",
    "400": "#34d399",
    "500": "#10b981",
    "600": "#059669",
    "700": "#047857",
    "800": "#065f46",
    "900": "#064e3b",
    "950": "#022c22",
  },
  rose: {
    "50": "#fff1f2",
    "100": "#ffe4e6",
    "200": "#fecdd3",
    "300": "#fda4af",
    "400": "#fb7185",
    "500": "#f43f5e",
    "600": "#e11d48",
    "700": "#be123c",
    "800": "#9f1239",
    "900": "#881337",
    "950": "#4c0519",
  },
  violet: {
    "50": "#f5f3ff",
    "100": "#ede9fe",
    "200": "#ddd6fe",
    "300": "#c4b5fd",
    "400": "#a78bfa",
    "500": "#8b5cf6",
    "600": "#7c3aed",
    "700": "#6d28d9",
    "800": "#5b21b6",
    "900": "#4c1d95",
    "950": "#2e1065",
  },
  teal: {
    "50": "#f0fdfa",
    "100": "#ccfbf1",
    "200": "#99f6e4",
    "300": "#5eead4",
    "400": "#2dd4bf",
    "500": "#14b8a6",
    "600": "#0d9488",
    "700": "#0f766e",
    "800": "#115e59",
    "900": "#134e4a",
    "950": "#042f2e",
  },
  slate: {
    "50": "#f8fafc",
    "100": "#f1f5f9",
    "200": "#e2e8f0",
    "300": "#cbd5e1",
    "400": "#94a3b8",
    "500": "#64748b",
    "600": "#475569",
    "700": "#334155",
    "800": "#1e293b",
    "900": "#0f172a",
    "950": "#020617",
  },
};

export function ThemeRegistry() {
  const [theme, setTheme] = useState<ThemeColor | null>(null);

  useEffect(() => {
    // Initial fetch
    fetch("/api/settings/theme")
      .then((res) => res.json())
      .then((data) => {
        if (data && data.color) {
          setTheme(data.color as ThemeColor);
        }
      })
      .catch(console.error);

    // Listen for live updates
    const handleUpdate = (e: Event) => {
      const customEvent = e as CustomEvent<{ color: ThemeColor }>;
      if (customEvent.detail?.color) {
        setTheme(customEvent.detail.color);
      }
    };
    window.addEventListener("brand_theme_updated", handleUpdate);
    return () => window.removeEventListener("brand_theme_updated", handleUpdate);
  }, []);

  if (!theme || theme === "blue") return null; // Default is blue/indigo, no override needed

  const palette = PALETTES[theme];
  if (!palette) return null;

  // We alias both blue and indigo to the chosen theme, 
  // since the app uses blue for ATS and indigo for HRIS.
  const cssString = `
    :root {
      ${Object.entries(palette)
        .map(([weight, hex]) => {
          return `--color-blue-${weight}: ${hex}; --color-indigo-${weight}: ${hex};`;
        })
        .join("\n      ")}
    }
  `;

  return <style dangerouslySetInnerHTML={{ __html: cssString }} />;
}