import type { DashboardTheme } from "./types";

/**
 * Built-in dashboard themes.
 *
 * The "default" theme matches the current index.css @theme values exactly,
 * so applying it is a no-op (CSS vars stay at their stylesheet defaults).
 * Other themes override only what they change.
 */

export const defaultTheme: DashboardTheme = {
  name: "default",
  label: "Hermes Teal",
  description: "Classic dark teal — the canonical Hermes look",
  colors: {
    background: "#041C1C",
    foreground: "#ffe6cb",
    card: "#062424",
    "card-foreground": "#ffe6cb",
    primary: "#ffe6cb",
    "primary-foreground": "#041C1C",
    secondary: "#0a2e2e",
    "secondary-foreground": "#ffe6cb",
    muted: "#083030",
    "muted-foreground": "#8aaa9a",
    accent: "#0c3838",
    "accent-foreground": "#ffe6cb",
    destructive: "#fb2c36",
    "destructive-foreground": "#fff",
    success: "#4ade80",
    warning: "#ffbd38",
    border: "color-mix(in srgb, #ffe6cb 15%, transparent)",
    input: "color-mix(in srgb, #ffe6cb 15%, transparent)",
    ring: "#ffe6cb",
    popover: "#062424",
    "popover-foreground": "#ffe6cb",
  },
  overlay: {
    noiseOpacity: 0.10,
    noiseBlendMode: "color-dodge",
    warmGlowOpacity: 0.22,
    warmGlowColor: "rgba(255,189,56,0.35)",
  },
};

export const midnightTheme: DashboardTheme = {
  name: "midnight",
  label: "Midnight",
  description: "Deep blue-violet with cool accents",
  colors: {
    background: "#0a0a1a",
    foreground: "#e0e0f0",
    card: "#10102a",
    "card-foreground": "#e0e0f0",
    primary: "#a78bfa",
    "primary-foreground": "#0a0a1a",
    secondary: "#151530",
    "secondary-foreground": "#e0e0f0",
    muted: "#1a1a3a",
    "muted-foreground": "#8888bb",
    accent: "#1e1e44",
    "accent-foreground": "#e0e0f0",
    destructive: "#f43f5e",
    "destructive-foreground": "#fff",
    success: "#34d399",
    warning: "#fbbf24",
    border: "color-mix(in srgb, #a78bfa 15%, transparent)",
    input: "color-mix(in srgb, #a78bfa 15%, transparent)",
    ring: "#a78bfa",
    popover: "#10102a",
    "popover-foreground": "#e0e0f0",
  },
  overlay: {
    noiseOpacity: 0.08,
    noiseBlendMode: "color-dodge",
    warmGlowOpacity: 0.15,
    warmGlowColor: "rgba(120,80,220,0.3)",
  },
};

export const emberTheme: DashboardTheme = {
  name: "ember",
  label: "Ember",
  description: "Warm crimson and bronze — forge vibes",
  colors: {
    background: "#1a0a0a",
    foreground: "#fde8d0",
    card: "#241010",
    "card-foreground": "#fde8d0",
    primary: "#f97316",
    "primary-foreground": "#1a0a0a",
    secondary: "#2a1515",
    "secondary-foreground": "#fde8d0",
    muted: "#301818",
    "muted-foreground": "#b08878",
    accent: "#381e1e",
    "accent-foreground": "#fde8d0",
    destructive: "#ef4444",
    "destructive-foreground": "#fff",
    success: "#4ade80",
    warning: "#fbbf24",
    border: "color-mix(in srgb, #f97316 15%, transparent)",
    input: "color-mix(in srgb, #f97316 15%, transparent)",
    ring: "#f97316",
    popover: "#241010",
    "popover-foreground": "#fde8d0",
  },
  overlay: {
    noiseOpacity: 0.10,
    noiseBlendMode: "color-dodge",
    warmGlowOpacity: 0.25,
    warmGlowColor: "rgba(249,115,22,0.3)",
  },
};

export const monoTheme: DashboardTheme = {
  name: "mono",
  label: "Mono",
  description: "Clean grayscale — minimal and focused",
  colors: {
    background: "#111111",
    foreground: "#e0e0e0",
    card: "#1a1a1a",
    "card-foreground": "#e0e0e0",
    primary: "#e0e0e0",
    "primary-foreground": "#111111",
    secondary: "#1e1e1e",
    "secondary-foreground": "#e0e0e0",
    muted: "#222222",
    "muted-foreground": "#888888",
    accent: "#2a2a2a",
    "accent-foreground": "#e0e0e0",
    destructive: "#ef4444",
    "destructive-foreground": "#fff",
    success: "#4ade80",
    warning: "#fbbf24",
    border: "color-mix(in srgb, #e0e0e0 12%, transparent)",
    input: "color-mix(in srgb, #e0e0e0 12%, transparent)",
    ring: "#e0e0e0",
    popover: "#1a1a1a",
    "popover-foreground": "#e0e0e0",
  },
  overlay: {
    noiseOpacity: 0.06,
    noiseBlendMode: "color-dodge",
    warmGlowOpacity: 0.0,
    warmGlowColor: "rgba(255,255,255,0)",
  },
};

export const cyberpunkTheme: DashboardTheme = {
  name: "cyberpunk",
  label: "Cyberpunk",
  description: "Neon green on black — matrix terminal",
  colors: {
    background: "#050505",
    foreground: "#00ff88",
    card: "#0a0a0a",
    "card-foreground": "#00ff88",
    primary: "#00ff88",
    "primary-foreground": "#050505",
    secondary: "#0e0e0e",
    "secondary-foreground": "#00ff88",
    muted: "#121212",
    "muted-foreground": "#00aa55",
    accent: "#161616",
    "accent-foreground": "#00ff88",
    destructive: "#ff0055",
    "destructive-foreground": "#fff",
    success: "#00ff88",
    warning: "#ffff00",
    border: "color-mix(in srgb, #00ff88 12%, transparent)",
    input: "color-mix(in srgb, #00ff88 12%, transparent)",
    ring: "#00ff88",
    popover: "#0a0a0a",
    "popover-foreground": "#00ff88",
  },
  overlay: {
    noiseOpacity: 0.12,
    noiseBlendMode: "color-dodge",
    warmGlowOpacity: 0.10,
    warmGlowColor: "rgba(0,255,136,0.15)",
  },
};

export const roseTheme: DashboardTheme = {
  name: "rose",
  label: "Rosé",
  description: "Soft pink and warm ivory — easy on the eyes",
  colors: {
    background: "#1a1015",
    foreground: "#f5e6e0",
    card: "#221820",
    "card-foreground": "#f5e6e0",
    primary: "#f9a8d4",
    "primary-foreground": "#1a1015",
    secondary: "#281e28",
    "secondary-foreground": "#f5e6e0",
    muted: "#2e2230",
    "muted-foreground": "#b08898",
    accent: "#352838",
    "accent-foreground": "#f5e6e0",
    destructive: "#fb2c36",
    "destructive-foreground": "#fff",
    success: "#4ade80",
    warning: "#fbbf24",
    border: "color-mix(in srgb, #f9a8d4 14%, transparent)",
    input: "color-mix(in srgb, #f9a8d4 14%, transparent)",
    ring: "#f9a8d4",
    popover: "#221820",
    "popover-foreground": "#f5e6e0",
  },
  overlay: {
    noiseOpacity: 0.08,
    noiseBlendMode: "color-dodge",
    warmGlowOpacity: 0.18,
    warmGlowColor: "rgba(249,168,212,0.2)",
  },
};

/** All built-in themes, keyed by name. */
export const BUILTIN_THEMES: Record<string, DashboardTheme> = {
  default: defaultTheme,
  midnight: midnightTheme,
  ember: emberTheme,
  mono: monoTheme,
  cyberpunk: cyberpunkTheme,
  rose: roseTheme,
};
