import type { AccentColor, ThemeMode, RadiusSize, CardStyle, DensitySize, ContentWidth } from "@/types/spec";
import { applyDesignTokens } from "./density";

export interface AccentPalette {
  main: string;
  light: string;
  dim: string;
  border: string;
  text: string;
}

export const ACCENTS: Record<AccentColor, AccentPalette> = {
  purple: { main: "#a855f7", light: "#c084fc", dim: "rgba(168,85,247,0.10)", border: "rgba(168,85,247,0.3)", text: "#c084fc" },
  blue:   { main: "#3b82f6", light: "#60a5fa", dim: "rgba(59,130,246,0.10)", border: "rgba(59,130,246,0.3)", text: "#60a5fa" },
  green:  { main: "#22c55e", light: "#4ade80", dim: "rgba(34,197,94,0.10)", border: "rgba(34,197,94,0.3)", text: "#4ade80" },
  red:    { main: "#ef4444", light: "#f87171", dim: "rgba(239,68,68,0.10)", border: "rgba(239,68,68,0.3)", text: "#f87171" },
  yellow: { main: "#eab308", light: "#facc15", dim: "rgba(234,179,8,0.10)", border: "rgba(234,179,8,0.3)", text: "#facc15" },
  orange: { main: "#f97316", light: "#fb923c", dim: "rgba(249,115,22,0.10)", border: "rgba(249,115,22,0.3)", text: "#fb923c" },
  cyan:   { main: "#06b6d4", light: "#22d3ee", dim: "rgba(6,182,212,0.10)", border: "rgba(6,182,212,0.3)", text: "#22d3ee" },
  pink:   { main: "#ec4899", light: "#f472b6", dim: "rgba(236,72,153,0.10)", border: "rgba(236,72,153,0.3)", text: "#f472b6" },
  indigo: { main: "#6366f1", light: "#818cf8", dim: "rgba(99,102,241,0.10)", border: "rgba(99,102,241,0.3)", text: "#818cf8" },
};

export function applyTheme(
  accent: AccentColor, theme: ThemeMode,
  radius?: RadiusSize, cardStyle?: CardStyle,
  density?: DensitySize, contentWidth?: ContentWidth,
): void {
  const palette = ACCENTS[accent] || ACCENTS.purple;
  const root = document.documentElement;

  root.style.setProperty("--z-accent", palette.main);
  root.style.setProperty("--z-accent-light", palette.light);
  root.style.setProperty("--z-accent-dim", palette.dim);
  root.style.setProperty("--z-accent-border", palette.border);
  root.style.setProperty("--z-accent-text", palette.text);

  // Theme class toggle (keep existing logic)
  if (theme === "light") {
    root.classList.remove("dark");
    root.classList.add("light");
  } else if (theme === "auto") {
    const dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    root.classList.toggle("dark", dark);
    root.classList.toggle("light", !dark);
  } else {
    root.classList.add("dark");
    root.classList.remove("light");
  }

  applyDesignTokens(root, radius, cardStyle, density, contentWidth);
}

/** Badge color names. */
export const BADGE_COLORS = ["green", "blue", "purple", "yellow", "orange", "red", "cyan", "pink", "indigo"] as const;
export type BadgeColorName = (typeof BADGE_COLORS)[number] | "default";

/** Resolve badge color: custom map first, then index-based fallback. */
export function resolveBadgeColor(
  value: string,
  choices?: string[] | null,
  colorMap?: Record<string, string> | null,
): BadgeColorName {
  if (colorMap && colorMap[value]) return colorMap[value] as BadgeColorName;
  if (!choices?.length) return "default";
  const idx = choices.indexOf(value);
  return idx >= 0 ? BADGE_COLORS[idx % BADGE_COLORS.length] : "default";
}

/** Deterministic avatar color from name. */
const AVATAR_COLORS = ["#7c3aed", "#2563eb", "#0891b2", "#059669", "#d97706", "#dc2626", "#db2777", "#6366f1"];
export function avatarColor(name: string): string {
  let h = 0;
  for (let i = 0; i < name.length; i++) h = name.charCodeAt(i) + ((h << 5) - h);
  return AVATAR_COLORS[Math.abs(h) % AVATAR_COLORS.length];
}
