/**
 * Mosaic Theme System — Type Definitions
 *
 * Each theme provides a complete set of CSS variable overrides.
 * The token names map to `--ms-{key}` CSS variables in globals.css.
 */

export interface ThemeColors {
  /** Deepest background (e.g. behind modals) */
  "bg-950": string;
  /** Main page background */
  "bg-900": string;
  /** Elevated background (sidebar, panels) */
  "bg-850": string;
  /** Card/panel surface */
  "surface-800": string;
  /** Hover/secondary surface */
  "surface-750": string;
  /** Border color */
  "border-700": string;

  /** Primary text */
  "text-100": string;
  /** Secondary text */
  "text-300": string;
  /** Muted/tertiary text */
  "text-500": string;

  /** Primary accent */
  "blue-500": string;
  /** Primary accent lighter */
  "blue-400": string;
  /** Danger/error */
  "red-500": string;
  /** Danger lighter */
  "red-400": string;
  /** Purple accent */
  "purple-500": string;
  /** Purple lighter */
  "purple-400": string;
  /** Success/teal */
  "teal-500": string;
  /** Success lighter */
  "teal-400": string;
  /** Warning/amber */
  "amber-500": string;
  /** Warning lighter */
  "amber-400": string;
  /** Pink accent */
  "pink-500": string;
  /** Emerald accent */
  "emerald-500": string;
  /** Orange accent */
  "orange-500": string;
  /** Cyan accent */
  "cyan-500": string;
  /** Indigo accent */
  "indigo-500": string;
}

export interface ThemeShadows {
  sm: string;
  md: string;
  lg: string;
}

export interface ThemeDefinition {
  /** Unique identifier (used in localStorage + UserPreference) */
  id: string;
  /** Display name */
  name: string;
  /** Short description */
  description: string;
  /** Theme author/credit */
  author: string;
  /** Whether this is a dark-mode theme */
  isDark: boolean;
  /** Five representative colors for preview swatches [bg, surface, text, primary, accent] */
  colorPreview: [string, string, string, string, string];
  /** Color token overrides (maps to --ms-{key} CSS variables) */
  colors: ThemeColors;
  /** Shadow overrides */
  shadows: ThemeShadows;
}

/** The color token keys that map to --ms-{key} CSS variables */
export type ThemeColorKey = keyof ThemeColors;

/** All CSS variable names a theme can set (--ms-{colorKey} + --shadow-{sm|md|lg}) */
export function themeToVariables(theme: ThemeDefinition): Record<string, string> {
  const vars: Record<string, string> = {};
  for (const [key, value] of Object.entries(theme.colors) as [string, string][]) {
    vars[`--ms-${key}`] = value;
  }
  vars["--shadow-sm"] = theme.shadows.sm;
  vars["--shadow-md"] = theme.shadows.md;
  vars["--shadow-lg"] = theme.shadows.lg;
  return vars;
}
