"use client";

// ---------------------------------------------------------------------------
// Shared types + theme palettes used across all scaffold surfaces
// ---------------------------------------------------------------------------

export interface ThemeColor {
  id: string;
  label: string;
  primary: string;
  primaryFg: string;
  activeBg: string;
  activeFg: string;
  ring: string;
  bg?: string;
  cardBg?: string;
  textColor?: string;
  borderColor?: string;
  mutedText?: string;
  /** If set, only show this palette when the user's mode matches. Unset = show for any mode. */
  themeMode?: "dark" | "light";
}

// ---------------------------------------------------------------------------
// Design configurator types — used by the surface configurator and scaffolds
// ---------------------------------------------------------------------------

export interface StyleOption {
  id: string;
  label: string;
  description?: string;
}

export interface LibraryStyleOptions {
  modes: StyleOption[];
  backgrounds: StyleOption[];
  navStyles: StyleOption[];
  headerStyles: StyleOption[];
  components: StyleOption[];
  fonts: StyleOption[];
  defaultConfig: DesignConfig;
}

export interface DesignConfig {
  mode: "dark" | "light";
  background: string;
  nav: string;
  header: string;
  components: string[];
  font: string;
}

// Shared mock data
export const TABLE_ROWS = [
  { name: "Alice Martin",  email: "alice@co.com",  role: "Admin",   status: "Active",   date: "Jan 12" },
  { name: "Ben Walsh",     email: "ben@co.com",    role: "Member",  status: "Pending",  date: "Jan 14" },
  { name: "Clara Kim",     email: "clara@co.com",  role: "Member",  status: "Active",   date: "Jan 15" },
  { name: "David Osei",    email: "david@co.com",  role: "Viewer",  status: "Inactive", date: "Jan 16" },
];

// ---------------------------------------------------------------------------
// Theme palettes
// ---------------------------------------------------------------------------

export const SHADCN_THEMES: ThemeColor[] = [
  { id: "neutral", label: "Neutral", primary: "#18181b", primaryFg: "#fff", activeBg: "#f4f4f5", activeFg: "#18181b", ring: "#e4e4e7" },
  { id: "blue",    label: "Blue",    primary: "#3b82f6", primaryFg: "#fff", activeBg: "#eff6ff", activeFg: "#1d4ed8", ring: "#bfdbfe" },
  { id: "green",   label: "Green",   primary: "#22c55e", primaryFg: "#fff", activeBg: "#f0fdf4", activeFg: "#15803d", ring: "#bbf7d0" },
  { id: "orange",  label: "Orange",  primary: "#f97316", primaryFg: "#fff", activeBg: "#fff7ed", activeFg: "#c2410c", ring: "#fed7aa" },
  { id: "violet",  label: "Violet",  primary: "#8b5cf6", primaryFg: "#fff", activeBg: "#f5f3ff", activeFg: "#6d28d9", ring: "#ddd6fe" },
  { id: "rose",    label: "Rose",    primary: "#f43f5e", primaryFg: "#fff", activeBg: "#fff1f2", activeFg: "#be123c", ring: "#fecdd3" },
];

export const MANTINE_THEMES: ThemeColor[] = [
  { id: "blue",   label: "Blue",   primary: "#228be6", primaryFg: "#fff", activeBg: "#e7f5ff", activeFg: "#1971c2", ring: "#a5d8ff" },
  { id: "teal",   label: "Teal",   primary: "#12b886", primaryFg: "#fff", activeBg: "#e6fcf5", activeFg: "#087f5b", ring: "#96f2d7" },
  { id: "violet", label: "Violet", primary: "#7950f2", primaryFg: "#fff", activeBg: "#f3f0ff", activeFg: "#5f3dc4", ring: "#d0bfff" },
  { id: "red",    label: "Red",    primary: "#fa5252", primaryFg: "#fff", activeBg: "#fff5f5", activeFg: "#c92a2a", ring: "#ffc9c9" },
  { id: "orange", label: "Orange", primary: "#fd7e14", primaryFg: "#fff", activeBg: "#fff4e6", activeFg: "#d9480f", ring: "#ffd8a8" },
  { id: "green",  label: "Green",  primary: "#40c057", primaryFg: "#fff", activeBg: "#ebfbee", activeFg: "#2f9e44", ring: "#b2f2bb" },
];

export const HEROUI_THEMES: ThemeColor[] = [
  { id: "violet", label: "Violet", primary: "#7c3aed", primaryFg: "#fff", activeBg: "rgba(124,58,237,0.3)",  activeFg: "#c084fc", ring: "rgba(168,85,247,0.3)" },
  { id: "blue",   label: "Blue",   primary: "#2563eb", primaryFg: "#fff", activeBg: "rgba(37,99,235,0.3)",   activeFg: "#93c5fd", ring: "rgba(59,130,246,0.3)" },
  { id: "rose",   label: "Rose",   primary: "#e11d48", primaryFg: "#fff", activeBg: "rgba(225,29,72,0.3)",   activeFg: "#fda4af", ring: "rgba(244,63,94,0.3)"  },
  { id: "green",  label: "Green",  primary: "#16a34a", primaryFg: "#fff", activeBg: "rgba(22,163,74,0.3)",   activeFg: "#86efac", ring: "rgba(34,197,94,0.3)"  },
];

export const TREMOR_THEMES: ThemeColor[] = [
  { id: "blue",   label: "Blue",   primary: "#2563eb", primaryFg: "#fff", activeBg: "#eff6ff", activeFg: "#1d4ed8", ring: "#bfdbfe" },
  { id: "indigo", label: "Indigo", primary: "#4f46e5", primaryFg: "#fff", activeBg: "#eef2ff", activeFg: "#3730a3", ring: "#c7d2fe" },
  { id: "teal",   label: "Teal",   primary: "#0d9488", primaryFg: "#fff", activeBg: "#f0fdfa", activeFg: "#0f766e", ring: "#99f6e4" },
  { id: "rose",   label: "Rose",   primary: "#e11d48", primaryFg: "#fff", activeBg: "#fff1f2", activeFg: "#be123c", ring: "#fecdd3" },
];

export const DAISY_THEMES: ThemeColor[] = [
  // — dark backgrounds —
  { id: "dark",       label: "Dark",       themeMode: "dark",  primary: "#793ef9", primaryFg: "#fff",    activeBg: "rgba(121,62,249,0.2)",   activeFg: "#a78bfa", ring: "#4c1d95",   bg: "#1d232a", cardBg: "#191e24", textColor: "#a6adba", borderColor: "#2a323c", mutedText: "#6b7280" },
  { id: "synthwave",  label: "Synthwave",  themeMode: "dark",  primary: "#e779c1", primaryFg: "#2d1b69", activeBg: "rgba(231,121,193,0.2)",  activeFg: "#f0abdc", ring: "#701a75",   bg: "#1a103c", cardBg: "#221551", textColor: "#e2e8f0", borderColor: "#4c3585", mutedText: "#a78bfa" },
  { id: "halloween",  label: "Halloween",  themeMode: "dark",  primary: "#f28c18", primaryFg: "#fff",    activeBg: "rgba(242,140,24,0.15)",  activeFg: "#f28c18", ring: "rgba(242,140,24,0.4)",  bg: "#212121", cardBg: "#2a2a2a", textColor: "#f4f4f4", borderColor: "#383838", mutedText: "#888" },
  { id: "aqua",       label: "Aqua",       themeMode: "dark",  primary: "#09ecf3", primaryFg: "#1a1a1a", activeBg: "rgba(9,236,243,0.15)",   activeFg: "#09ecf3", ring: "rgba(9,236,243,0.4)",   bg: "#0f172a", cardBg: "#1e293b", textColor: "#e2e8f0", borderColor: "#334155", mutedText: "#94a3b8" },
  { id: "luxury",     label: "Luxury",     themeMode: "dark",  primary: "#dca54c", primaryFg: "#09090b", activeBg: "rgba(220,165,76,0.15)",  activeFg: "#dca54c", ring: "rgba(220,165,76,0.4)",  bg: "#09090b", cardBg: "#171717", textColor: "#f5f5f4", borderColor: "#262626", mutedText: "#737373" },
  { id: "night",      label: "Night",      themeMode: "dark",  primary: "#38bdf8", primaryFg: "#0c1a2a", activeBg: "rgba(56,189,248,0.15)",  activeFg: "#38bdf8", ring: "rgba(56,189,248,0.4)",  bg: "#0f1923", cardBg: "#1a2535", textColor: "#cbd5e1", borderColor: "#1e3a5f", mutedText: "#64748b" },
  { id: "coffee",     label: "Coffee",     themeMode: "dark",  primary: "#db924b", primaryFg: "#fff",    activeBg: "rgba(219,146,75,0.15)",  activeFg: "#db924b", ring: "rgba(219,146,75,0.4)",  bg: "#20100e", cardBg: "#2c1810", textColor: "#e8d5c4", borderColor: "#3d2319", mutedText: "#8b6355" },
  { id: "dracula",    label: "Dracula",    themeMode: "dark",  primary: "#ff79c6", primaryFg: "#282a36", activeBg: "rgba(255,121,198,0.15)", activeFg: "#ff79c6", ring: "#bd93f9",   bg: "#282a36", cardBg: "#343746", textColor: "#f8f8f2", borderColor: "#44475a", mutedText: "#6272a4" },
  { id: "forest",     label: "Forest",     themeMode: "dark",  primary: "#1eb854", primaryFg: "#fff",    activeBg: "rgba(30,184,84,0.15)",   activeFg: "#1eb854", ring: "#15803d",   bg: "#171212", cardBg: "#1d1d1d", textColor: "#d1d5db", borderColor: "#292929", mutedText: "#4b5563" },
  { id: "nord",       label: "Nord",       themeMode: "dark",  primary: "#5e81ac", primaryFg: "#fff",    activeBg: "rgba(94,129,172,0.15)",  activeFg: "#88c0d0", ring: "rgba(94,129,172,0.4)",  bg: "#2e3440", cardBg: "#3b4252", textColor: "#eceff4", borderColor: "#434c5e", mutedText: "#9198a1" },
  { id: "dim",        label: "Dim",        themeMode: "dark",  primary: "#9fb8d8", primaryFg: "#1c2638", activeBg: "rgba(159,184,216,0.15)", activeFg: "#9fb8d8", ring: "rgba(159,184,216,0.4)", bg: "#2a303c", cardBg: "#242933", textColor: "#c6cdd8", borderColor: "#3d4451", mutedText: "#717d8a" },
  { id: "sunset",     label: "Sunset",     themeMode: "dark",  primary: "#ff865b", primaryFg: "#fff",    activeBg: "rgba(255,134,91,0.15)",  activeFg: "#ff865b", ring: "rgba(255,134,91,0.4)",  bg: "#1a0a00", cardBg: "#270f00", textColor: "#f4c09a", borderColor: "#3d1a00", mutedText: "#8b5a3a" },
  // — light backgrounds —
  { id: "light",      label: "Light",      themeMode: "light", primary: "#570df8", primaryFg: "#fff",    activeBg: "#f3f0ff",               activeFg: "#4c1d95", ring: "#ddd6fe",   bg: "#fff",    cardBg: "#fff",    textColor: "#1f2937", borderColor: "#e5e7eb", mutedText: "#6b7280" },
  { id: "cupcake",    label: "Cupcake",    themeMode: "light", primary: "#65c3c8", primaryFg: "#291334", activeBg: "#d9f5f6",               activeFg: "#0e6b70", ring: "#a7eaec",   bg: "#faf7f5", cardBg: "#fff",    textColor: "#291334", borderColor: "#e9e3df", mutedText: "#9ca3af" },
  { id: "valentine",  label: "Valentine",  themeMode: "light", primary: "#e96d7b", primaryFg: "#fff",    activeBg: "rgba(233,109,123,0.1)", activeFg: "#e96d7b", ring: "rgba(233,109,123,0.3)", bg: "#fae6eb", cardBg: "#fff5f7", textColor: "#632935", borderColor: "#f4c2cb", mutedText: "#9a5468" },
  { id: "cyberpunk",  label: "Cyberpunk",  themeMode: "light", primary: "#ff7598", primaryFg: "#1a103d", activeBg: "rgba(255,117,152,0.2)", activeFg: "#ff7598", ring: "rgba(255,117,152,0.5)", bg: "#ffff00", cardBg: "#ffef00", textColor: "#1a103d", borderColor: "#ff7598", mutedText: "rgba(26,16,61,0.55)" },
  { id: "retro",      label: "Retro",      themeMode: "light", primary: "#ef9995", primaryFg: "#282425", activeBg: "#fde8e7",               activeFg: "#7f1d1d", ring: "#fca5a5",   bg: "#e4d8b4", cardBg: "#f7f0d8", textColor: "#282425", borderColor: "#d4b483", mutedText: "#6b5745" },
  { id: "winter",     label: "Winter",     themeMode: "light", primary: "#047aed", primaryFg: "#fff",    activeBg: "#e0f0ff",               activeFg: "#0369a1", ring: "#bae6fd",   bg: "#fff",    cardBg: "#f0f9ff", textColor: "#1e3a5f", borderColor: "#bae6fd", mutedText: "#64748b" },
];

// Aceternity UI accent colour palettes
export const ACETERNITY_THEMES: ThemeColor[] = [
  { id: "purple-blue",  label: "Purple / Blue",  primary: "#a855f7", primaryFg: "#fff", activeBg: "rgba(168,85,247,0.15)", activeFg: "#c084fc", ring: "rgba(168,85,247,0.4)" },
  { id: "cyan-teal",    label: "Cyan / Teal",    primary: "#06b6d4", primaryFg: "#fff", activeBg: "rgba(6,182,212,0.15)",  activeFg: "#67e8f9", ring: "rgba(6,182,212,0.4)"  },
  { id: "pink-rose",    label: "Pink / Rose",    primary: "#ec4899", primaryFg: "#fff", activeBg: "rgba(236,72,153,0.15)", activeFg: "#f9a8d4", ring: "rgba(236,72,153,0.4)"  },
  { id: "green-emerald", label: "Green / Emerald", primary: "#10b981", primaryFg: "#fff", activeBg: "rgba(16,185,129,0.15)", activeFg: "#6ee7b7", ring: "rgba(16,185,129,0.4)" },
  { id: "amber-orange", label: "Amber / Orange", primary: "#f59e0b", primaryFg: "#fff", activeBg: "rgba(245,158,11,0.15)", activeFg: "#fcd34d", ring: "rgba(245,158,11,0.4)"  },
];

export const HEROUI_MARKETING_THEMES: ThemeColor[] = [
  { id: "purple", label: "Purple", themeMode: "light", primary: "#7c3aed", primaryFg: "#fff", activeBg: "rgba(124,58,237,0.08)", activeFg: "#7c3aed", ring: "rgba(124,58,237,0.15)", bg: "#fff" },
  { id: "blue",   label: "Blue",   themeMode: "light", primary: "#2563eb", primaryFg: "#fff", activeBg: "rgba(37,99,235,0.08)",  activeFg: "#2563eb", ring: "rgba(37,99,235,0.15)",  bg: "#fff" },
  { id: "teal",   label: "Teal",   themeMode: "light", primary: "#0d9488", primaryFg: "#fff", activeBg: "rgba(13,148,136,0.08)", activeFg: "#0d9488", ring: "rgba(13,148,136,0.15)", bg: "#fff" },
  { id: "dark",   label: "Dark",   themeMode: "dark",  primary: "#7c3aed", primaryFg: "#fff", activeBg: "rgba(124,58,237,0.2)",  activeFg: "#c084fc", ring: "rgba(124,58,237,0.3)",  bg: "#09090b", cardBg: "#18181b", textColor: "#f4f4f5", borderColor: "#27272a", mutedText: "#71717a" },
  { id: "modern", label: "Modern", themeMode: "light", primary: "#06b6d4", primaryFg: "#fff", activeBg: "rgba(6,182,212,0.08)",  activeFg: "#06b6d4", ring: "rgba(6,182,212,0.15)",  bg: "#fff" },
];
