import { useEffect } from "react";
import { useAppSettings } from "@/hooks/useAppSettings";
import type { ThemePreset } from "@/lib/app-settings.functions";

type Palette = {
  primary: string;
  primaryGlow: string;
  ring: string;
  accent: string;
  accentFg: string;
  gradientPrimary: string;
  gradientBalance: string;
  shadowCard: string;
  shadowElevated: string;
};

// OKLCH palettes for each preset — designed, not just recolored
export const THEME_PRESETS: Record<ThemePreset, { label: string; hex: string; palette: Palette }> = {
  pink: {
    label: "গোলাপি (bKash)",
    hex: "#e2136e",
    palette: {
      primary: "oklch(0.55 0.24 350)",
      primaryGlow: "oklch(0.68 0.22 350)",
      ring: "oklch(0.55 0.24 350)",
      accent: "oklch(0.95 0.03 350)",
      accentFg: "oklch(0.3 0.15 350)",
      gradientPrimary: "linear-gradient(135deg, oklch(0.5 0.25 348), oklch(0.62 0.22 355))",
      gradientBalance: "linear-gradient(135deg, oklch(0.45 0.22 350) 0%, oklch(0.55 0.24 350) 50%, oklch(0.65 0.2 355) 100%)",
      shadowCard: "0 2px 12px -2px oklch(0.55 0.24 350 / 0.12)",
      shadowElevated: "0 8px 30px -6px oklch(0.55 0.24 350 / 0.25)",
    },
  },
  blue: {
    label: "নীল",
    hex: "#2563eb",
    palette: {
      primary: "oklch(0.55 0.22 255)",
      primaryGlow: "oklch(0.7 0.18 255)",
      ring: "oklch(0.55 0.22 255)",
      accent: "oklch(0.95 0.03 255)",
      accentFg: "oklch(0.3 0.15 255)",
      gradientPrimary: "linear-gradient(135deg, oklch(0.5 0.22 250), oklch(0.62 0.19 260))",
      gradientBalance: "linear-gradient(135deg, oklch(0.42 0.2 250) 0%, oklch(0.55 0.22 255) 50%, oklch(0.65 0.18 260) 100%)",
      shadowCard: "0 2px 12px -2px oklch(0.55 0.22 255 / 0.12)",
      shadowElevated: "0 8px 30px -6px oklch(0.55 0.22 255 / 0.25)",
    },
  },
  green: {
    label: "সবুজ",
    hex: "#10b981",
    palette: {
      primary: "oklch(0.6 0.17 155)",
      primaryGlow: "oklch(0.72 0.15 155)",
      ring: "oklch(0.6 0.17 155)",
      accent: "oklch(0.95 0.04 155)",
      accentFg: "oklch(0.32 0.14 155)",
      gradientPrimary: "linear-gradient(135deg, oklch(0.52 0.17 155), oklch(0.65 0.15 160))",
      gradientBalance: "linear-gradient(135deg, oklch(0.45 0.16 150) 0%, oklch(0.58 0.17 155) 50%, oklch(0.68 0.14 160) 100%)",
      shadowCard: "0 2px 12px -2px oklch(0.6 0.17 155 / 0.12)",
      shadowElevated: "0 8px 30px -6px oklch(0.6 0.17 155 / 0.25)",
    },
  },
  purple: {
    label: "বেগুনি",
    hex: "#9333ea",
    palette: {
      primary: "oklch(0.55 0.25 300)",
      primaryGlow: "oklch(0.68 0.22 300)",
      ring: "oklch(0.55 0.25 300)",
      accent: "oklch(0.95 0.04 300)",
      accentFg: "oklch(0.32 0.17 300)",
      gradientPrimary: "linear-gradient(135deg, oklch(0.48 0.26 295), oklch(0.62 0.22 305))",
      gradientBalance: "linear-gradient(135deg, oklch(0.42 0.24 295) 0%, oklch(0.55 0.25 300) 50%, oklch(0.65 0.22 305) 100%)",
      shadowCard: "0 2px 12px -2px oklch(0.55 0.25 300 / 0.12)",
      shadowElevated: "0 8px 30px -6px oklch(0.55 0.25 300 / 0.25)",
    },
  },
  orange: {
    label: "কমলা",
    hex: "#f97316",
    palette: {
      primary: "oklch(0.68 0.19 45)",
      primaryGlow: "oklch(0.78 0.16 55)",
      ring: "oklch(0.68 0.19 45)",
      accent: "oklch(0.96 0.04 60)",
      accentFg: "oklch(0.4 0.15 45)",
      gradientPrimary: "linear-gradient(135deg, oklch(0.62 0.2 40), oklch(0.72 0.17 55))",
      gradientBalance: "linear-gradient(135deg, oklch(0.58 0.2 38) 0%, oklch(0.68 0.19 45) 50%, oklch(0.76 0.16 55) 100%)",
      shadowCard: "0 2px 12px -2px oklch(0.68 0.19 45 / 0.12)",
      shadowElevated: "0 8px 30px -6px oklch(0.68 0.19 45 / 0.25)",
    },
  },
};

export function ThemeApplier() {
  const { settings } = useAppSettings();
  useEffect(() => {
    const preset = THEME_PRESETS[settings.theme_preset] ?? THEME_PRESETS.pink;
    const p = preset.palette;
    const root = document.documentElement;
    root.style.setProperty("--primary", p.primary);
    root.style.setProperty("--primary-glow", p.primaryGlow);
    root.style.setProperty("--ring", p.ring);
    root.style.setProperty("--accent", p.accent);
    root.style.setProperty("--accent-foreground", p.accentFg);
    root.style.setProperty("--gradient-primary", p.gradientPrimary);
    root.style.setProperty("--gradient-balance", p.gradientBalance);
    root.style.setProperty("--shadow-card", p.shadowCard);
    root.style.setProperty("--shadow-elevated", p.shadowElevated);
    if (settings.theme_mode === "dark") root.classList.add("dark");
    else root.classList.remove("dark");
  }, [settings.theme_preset, settings.theme_mode]);
  return null;
}