export type UiThemeTokens = {
  background: string;
  foreground: string;
  card: string;
  cardForeground: string;
  popover: string;
  popoverForeground: string;
  primary: string;
  primaryForeground: string;
  secondary: string;
  secondaryForeground: string;
  muted: string;
  mutedForeground: string;
  accent: string;
  accentForeground: string;
  destructive: string;
  destructiveForeground: string;
  border: string;
  input: string;
  ring: string;
};

export type UiThemePreset = {
  id: string;
  name: string;
  tokens: UiThemeTokens;
};

export const LIGHT_UI_THEMES: UiThemePreset[] = [
  {
    id: "snow",
    name: "Snow",
    tokens: {
      background: "216 33% 96%",
      foreground: "222 47% 12%",
      card: "0 0% 100%",
      cardForeground: "222 47% 12%",
      popover: "0 0% 100%",
      popoverForeground: "222 47% 12%",
      primary: "208 100% 50%",
      primaryForeground: "0 0% 100%",
      secondary: "220 16% 90%",
      secondaryForeground: "222 47% 12%",
      muted: "220 16% 90%",
      mutedForeground: "220 10% 45%",
      accent: "208 100% 50%",
      accentForeground: "222 47% 12%",
      destructive: "0 70% 50%",
      destructiveForeground: "0 0% 100%",
      border: "220 16% 82%",
      input: "220 16% 82%",
      ring: "208 100% 50%",
    },
  },
  {
    id: "pure-white",
    name: "Pure White",
    tokens: {
      background: "0 0% 100%",
      foreground: "222 47% 12%",
      card: "0 0% 100%",
      cardForeground: "222 47% 12%",
      popover: "0 0% 100%",
      popoverForeground: "222 47% 12%",
      primary: "210 90% 48%",
      primaryForeground: "0 0% 100%",
      secondary: "220 12% 95%",
      secondaryForeground: "222 47% 12%",
      muted: "220 12% 95%",
      mutedForeground: "220 10% 45%",
      accent: "210 90% 48%",
      accentForeground: "222 47% 12%",
      destructive: "0 70% 50%",
      destructiveForeground: "0 0% 100%",
      border: "220 12% 88%",
      input: "220 12% 88%",
      ring: "210 90% 48%",
    },
  },
  {
    id: "ivory",
    name: "Ivory",
    tokens: {
      background: "38 40% 95%",
      foreground: "222 47% 12%",
      card: "40 45% 98%",
      cardForeground: "222 47% 12%",
      popover: "40 45% 98%",
      popoverForeground: "222 47% 12%",
      primary: "28 85% 50%",
      primaryForeground: "0 0% 100%",
      secondary: "36 28% 90%",
      secondaryForeground: "222 47% 12%",
      muted: "36 28% 90%",
      mutedForeground: "220 10% 45%",
      accent: "28 85% 50%",
      accentForeground: "222 47% 12%",
      destructive: "0 70% 50%",
      destructiveForeground: "0 0% 100%",
      border: "34 24% 84%",
      input: "34 24% 84%",
      ring: "28 85% 50%",
    },
  },
  {
    id: "mist",
    name: "Mist",
    tokens: {
      background: "210 20% 97%",
      foreground: "222 47% 12%",
      card: "210 20% 99%",
      cardForeground: "222 47% 12%",
      popover: "210 20% 99%",
      popoverForeground: "222 47% 12%",
      primary: "195 90% 45%",
      primaryForeground: "0 0% 100%",
      secondary: "210 16% 92%",
      secondaryForeground: "222 47% 12%",
      muted: "210 16% 92%",
      mutedForeground: "220 10% 45%",
      accent: "195 90% 45%",
      accentForeground: "222 47% 12%",
      destructive: "0 70% 50%",
      destructiveForeground: "0 0% 100%",
      border: "210 14% 84%",
      input: "210 14% 84%",
      ring: "195 90% 45%",
    },
  },
  {
    id: "mint",
    name: "Mint",
    tokens: {
      background: "150 30% 96%",
      foreground: "222 47% 12%",
      card: "150 30% 98%",
      cardForeground: "222 47% 12%",
      popover: "150 30% 98%",
      popoverForeground: "222 47% 12%",
      primary: "160 70% 40%",
      primaryForeground: "0 0% 100%",
      secondary: "150 18% 90%",
      secondaryForeground: "222 47% 12%",
      muted: "150 18% 90%",
      mutedForeground: "220 10% 45%",
      accent: "160 70% 40%",
      accentForeground: "222 47% 12%",
      destructive: "0 70% 50%",
      destructiveForeground: "0 0% 100%",
      border: "150 16% 84%",
      input: "150 16% 84%",
      ring: "160 70% 40%",
    },
  },
  {
    id: "sand",
    name: "Sand",
    tokens: {
      background: "34 30% 94%",
      foreground: "222 47% 12%",
      card: "34 30% 97%",
      cardForeground: "222 47% 12%",
      popover: "34 30% 97%",
      popoverForeground: "222 47% 12%",
      primary: "24 80% 50%",
      primaryForeground: "0 0% 100%",
      secondary: "34 18% 88%",
      secondaryForeground: "222 47% 12%",
      muted: "34 18% 88%",
      mutedForeground: "220 10% 45%",
      accent: "24 80% 50%",
      accentForeground: "222 47% 12%",
      destructive: "0 70% 50%",
      destructiveForeground: "0 0% 100%",
      border: "34 16% 82%",
      input: "34 16% 82%",
      ring: "24 80% 50%",
    },
  },
  {
    id: "lavender",
    name: "Lavender",
    tokens: {
      background: "270 30% 97%",
      foreground: "222 47% 12%",
      card: "270 30% 99%",
      cardForeground: "222 47% 12%",
      popover: "270 30% 99%",
      popoverForeground: "222 47% 12%",
      primary: "270 70% 55%",
      primaryForeground: "0 0% 100%",
      secondary: "270 20% 92%",
      secondaryForeground: "222 47% 12%",
      muted: "270 20% 92%",
      mutedForeground: "220 10% 45%",
      accent: "270 70% 55%",
      accentForeground: "222 47% 12%",
      destructive: "0 70% 50%",
      destructiveForeground: "0 0% 100%",
      border: "270 18% 86%",
      input: "270 18% 86%",
      ring: "270 70% 55%",
    },
  },
];

export const DARK_UI_THEMES: UiThemePreset[] = [
  {
    id: "pure-black",
    name: "Pure Black",
    tokens: {
      background: "0 0% 0%",
      foreground: "0 0% 95%",
      card: "0 0% 5%",
      cardForeground: "0 0% 95%",
      popover: "0 0% 5%",
      popoverForeground: "0 0% 95%",
      primary: "210 90% 60%",
      primaryForeground: "0 0% 100%",
      secondary: "0 0% 0%",
      secondaryForeground: "0 0% 92%",
      muted: "0 0% 15%",
      mutedForeground: "0 0% 65%",
      accent: "210 90% 60%",
      accentForeground: "0 0% 100%",
      destructive: "0 70% 50%",
      destructiveForeground: "0 0% 100%",
      border: "0 0% 12%",
      input: "0 0% 12%",
      ring: "210 90% 60%",
    },
  },
  {
    id: "midnight",
    name: "Midnight",
    tokens: {
      background: "220 28% 10%",
      foreground: "210 40% 95%",
      card: "220 22% 12%",
      cardForeground: "210 40% 95%",
      popover: "220 22% 12%",
      popoverForeground: "210 40% 95%",
      primary: "200 100% 61%",
      primaryForeground: "220 40% 96%",
      secondary: "220 16% 16%",
      secondaryForeground: "210 40% 90%",
      muted: "220 16% 16%",
      mutedForeground: "220 10% 70%",
      accent: "200 100% 61%",
      accentForeground: "220 40% 96%",
      destructive: "0 70% 50%",
      destructiveForeground: "210 40% 96%",
      border: "220 22% 18%",
      input: "220 22% 18%",
      ring: "200 100% 61%",
    },
  },
  {
    id: "deep-blue",
    name: "Deep Blue",
    tokens: {
      background: "220 35% 10%",
      foreground: "210 40% 96%",
      card: "220 28% 14%",
      cardForeground: "210 40% 96%",
      popover: "220 28% 14%",
      popoverForeground: "210 40% 96%",
      primary: "210 90% 60%",
      primaryForeground: "220 40% 96%",
      secondary: "220 20% 18%",
      secondaryForeground: "210 40% 90%",
      muted: "220 20% 18%",
      mutedForeground: "220 10% 72%",
      accent: "210 90% 60%",
      accentForeground: "220 40% 96%",
      destructive: "0 70% 50%",
      destructiveForeground: "210 40% 96%",
      border: "220 20% 22%",
      input: "220 20% 22%",
      ring: "210 90% 60%",
    },
  },
  {
    id: "vscode",
    name: "VS Code",
    tokens: {
      background: "0 0% 12%",
      foreground: "210 20% 92%",
      card: "0 0% 16%",
      cardForeground: "210 20% 92%",
      popover: "0 0% 16%",
      popoverForeground: "210 20% 92%",
      primary: "210 90% 60%",
      primaryForeground: "0 0% 100%",
      secondary: "0 0% 18%",
      secondaryForeground: "210 20% 92%",
      muted: "0 0% 18%",
      mutedForeground: "0 0% 65%",
      accent: "210 90% 60%",
      accentForeground: "0 0% 100%",
      destructive: "0 70% 50%",
      destructiveForeground: "0 0% 100%",
      border: "0 0% 22%",
      input: "0 0% 22%",
      ring: "210 90% 60%",
    },
  },
  {
    id: "graphite",
    name: "Graphite",
    tokens: {
      background: "220 8% 12%",
      foreground: "210 20% 94%",
      card: "220 8% 16%",
      cardForeground: "210 20% 94%",
      popover: "220 8% 16%",
      popoverForeground: "210 20% 94%",
      primary: "210 80% 60%",
      primaryForeground: "0 0% 100%",
      secondary: "220 6% 18%",
      secondaryForeground: "210 20% 92%",
      muted: "220 6% 18%",
      mutedForeground: "0 0% 70%",
      accent: "210 80% 60%",
      accentForeground: "0 0% 100%",
      destructive: "0 70% 50%",
      destructiveForeground: "0 0% 100%",
      border: "220 6% 22%",
      input: "220 6% 22%",
      ring: "210 80% 60%",
    },
  },
  {
    id: "obsidian",
    name: "Obsidian",
    tokens: {
      background: "240 8% 8%",
      foreground: "210 20% 94%",
      card: "240 8% 12%",
      cardForeground: "210 20% 94%",
      popover: "240 8% 12%",
      popoverForeground: "210 20% 94%",
      primary: "265 80% 65%",
      primaryForeground: "0 0% 100%",
      secondary: "240 6% 16%",
      secondaryForeground: "210 20% 92%",
      muted: "240 6% 16%",
      mutedForeground: "240 5% 70%",
      accent: "265 80% 65%",
      accentForeground: "0 0% 100%",
      destructive: "0 70% 50%",
      destructiveForeground: "0 0% 100%",
      border: "240 6% 20%",
      input: "240 6% 20%",
      ring: "265 80% 65%",
    },
  },
  {
    id: "forest",
    name: "Forest",
    tokens: {
      background: "150 12% 10%",
      foreground: "150 20% 92%",
      card: "150 12% 14%",
      cardForeground: "150 20% 92%",
      popover: "150 12% 14%",
      popoverForeground: "150 20% 92%",
      primary: "160 70% 50%",
      primaryForeground: "0 0% 100%",
      secondary: "150 10% 18%",
      secondaryForeground: "150 20% 90%",
      muted: "150 10% 18%",
      mutedForeground: "150 8% 68%",
      accent: "160 70% 50%",
      accentForeground: "0 0% 100%",
      destructive: "0 70% 50%",
      destructiveForeground: "0 0% 100%",
      border: "150 8% 22%",
      input: "150 8% 22%",
      ring: "160 70% 50%",
    },
  },
];

export const getUiThemeById = (theme: "light" | "dark", id: string): UiThemePreset => {
  const list = theme === "dark" ? DARK_UI_THEMES : LIGHT_UI_THEMES;
  const found = list.find((preset) => preset.id === id);
  return found || list[0];
};
