export interface Theme {
  name: string;
  label: string;
  cssVars: {
    light: Record<string, string>;
    dark: Record<string, string>;
  };
}

// Base colors yang sama untuk semua tema (kecuali primary dan primary-foreground)
const baseLightColors: Record<string, string> = {
  background: "oklch(1 0 0)",
  foreground: "oklch(0.145 0 0)",
  card: "oklch(1 0 0)",
  "card-foreground": "oklch(0.145 0 0)",
  popover: "oklch(1 0 0)",
  "popover-foreground": "oklch(0.145 0 0)",
  secondary: "oklch(0.967 0.001 286.375)",
  "secondary-foreground": "oklch(0.21 0.006 285.885)",
  muted: "oklch(0.97 0 0)",
  "muted-foreground": "oklch(0.556 0 0)",
  accent: "oklch(0.97 0 0)",
  "accent-foreground": "oklch(0.205 0 0)",
  destructive: "oklch(0.58 0.22 27)",
  border: "oklch(0.922 0 0)",
  input: "oklch(0.922 0 0)",
  ring: "oklch(0.708 0 0)",
};

const baseDarkColors: Record<string, string> = {
  background: "oklch(0.145 0 0)",
  foreground: "oklch(0.985 0 0)",
  card: "oklch(0.205 0 0)",
  "card-foreground": "oklch(0.985 0 0)",
  popover: "oklch(0.205 0 0)",
  "popover-foreground": "oklch(0.985 0 0)",
  secondary: "oklch(0.274 0.006 286.033)",
  "secondary-foreground": "oklch(0.985 0 0)",
  muted: "oklch(0.269 0 0)",
  "muted-foreground": "oklch(0.708 0 0)",
  accent: "oklch(0.371 0 0)",
  "accent-foreground": "oklch(0.985 0 0)",
  destructive: "oklch(0.704 0.191 22.216)",
  border: "oklch(1 0 0 / 10%)",
  input: "oklch(1 0 0 / 15%)",
  ring: "oklch(0.556 0 0)",
};

// Primary colors yang berbeda untuk setiap tema
interface PrimaryColors {
  light: {
    primary: string;
    "primary-foreground": string;
  };
  dark: {
    primary: string;
    "primary-foreground": string;
  };
}

const primaryColors: Record<string, PrimaryColors> = {
  amber: {
    light: {
      primary: "oklch(0.67 0.16 58)",
      "primary-foreground": "oklch(0.99 0.02 95)",
    },
    dark: {
      primary: "oklch(0.77 0.16 70)",
      "primary-foreground": "oklch(0.28 0.07 46)",
    },
  },
  blue: {
    light: {
      primary: "oklch(0.488 0.243 264.376)",
      "primary-foreground": "oklch(0.97 0.014 254.604)",
    },
    dark: {
      primary: "oklch(0.42 0.18 266)",
      "primary-foreground": "oklch(0.97 0.014 254.604)",
    },
  },
  cyan: {
    light: {
      primary: "oklch(0.61 0.11 222)",
      "primary-foreground": "oklch(0.98 0.02 201)",
    },
    dark: {
      primary: "oklch(0.71 0.13 215)",
      "primary-foreground": "oklch(0.30 0.05 230)",
    },
  },
  emerald: {
    light: {
      primary: "oklch(0.60 0.13 163)",
      "primary-foreground": "oklch(0.98 0.02 166)",
    },
    dark: {
      primary: "oklch(0.70 0.15 162)",
      "primary-foreground": "oklch(0.26 0.05 173)",
    },
  },
  fuchsia: {
    light: {
      primary: "oklch(0.59 0.26 323)",
      "primary-foreground": "oklch(0.98 0.02 320)",
    },
    dark: {
      primary: "oklch(0.67 0.26 322)",
      "primary-foreground": "oklch(0.98 0.02 320)",
    },
  },
  green: {
    light: {
      primary: "oklch(0.648 0.2 131.684)",
      "primary-foreground": "oklch(0.986 0.031 120.757)",
    },
    dark: {
      primary: "oklch(0.648 0.2 131.684)",
      "primary-foreground": "oklch(0.986 0.031 120.757)",
    },
  },
  indigo: {
    light: {
      primary: "oklch(0.51 0.23 277)",
      "primary-foreground": "oklch(0.96 0.02 272)",
    },
    dark: {
      primary: "oklch(0.59 0.20 277)",
      "primary-foreground": "oklch(0.96 0.02 272)",
    },
  },
  lime: {
    light: {
      primary: "oklch(0.65 0.18 132)",
      "primary-foreground": "oklch(0.99 0.03 121)",
    },
    dark: {
      primary: "oklch(0.77 0.20 131)",
      "primary-foreground": "oklch(0.27 0.07 132)",
    },
  },
  neutral: {
    light: {
      primary: "oklch(0.205 0 0)",
      "primary-foreground": "oklch(0.985 0 0)",
    },
    dark: {
      primary: "oklch(0.922 0 0)",
      "primary-foreground": "oklch(0.205 0 0)",
    },
  },
  orange: {
    light: {
      primary: "oklch(0.646 0.222 41.116)",
      "primary-foreground": "oklch(0.98 0.016 73.684)",
    },
    dark: {
      primary: "oklch(0.705 0.213 47.604)",
      "primary-foreground": "oklch(0.98 0.016 73.684)",
    },
  },
  pink: {
    light: {
      primary: "oklch(0.59 0.22 1)",
      "primary-foreground": "oklch(0.97 0.01 343)",
    },
    dark: {
      primary: "oklch(0.66 0.21 354)",
      "primary-foreground": "oklch(0.97 0.01 343)",
    },
  },
  purple: {
    light: {
      primary: "oklch(0.56 0.25 302)",
      "primary-foreground": "oklch(0.98 0.01 308)",
    },
    dark: {
      primary: "oklch(0.63 0.23 304)",
      "primary-foreground": "oklch(0.98 0.01 308)",
    },
  },
  red: {
    light: {
      primary: "oklch(0.577 0.245 27.325)",
      "primary-foreground": "oklch(0.971 0.013 17.38)",
    },
    dark: {
      primary: "oklch(0.637 0.237 25.331)",
      "primary-foreground": "oklch(0.971 0.013 17.38)",
    },
  },
  rose: {
    light: {
      primary: "oklch(0.586 0.253 17.585)",
      "primary-foreground": "oklch(0.969 0.015 12.422)",
    },
    dark: {
      primary: "oklch(0.645 0.246 16.439)",
      "primary-foreground": "oklch(0.969 0.015 12.422)",
    },
  },
  sky: {
    light: {
      primary: "oklch(0.59 0.14 242)",
      "primary-foreground": "oklch(0.98 0.01 237)",
    },
    dark: {
      primary: "oklch(0.68 0.15 237)",
      "primary-foreground": "oklch(0.29 0.06 243)",
    },
  },
  teal: {
    light: {
      primary: "oklch(0.60 0.10 185)",
      "primary-foreground": "oklch(0.98 0.01 181)",
    },
    dark: {
      primary: "oklch(0.70 0.12 183)",
      "primary-foreground": "oklch(0.28 0.04 193)",
    },
  },
  violet: {
    light: {
      primary: "oklch(0.541 0.281 293.009)",
      "primary-foreground": "oklch(0.969 0.016 293.756)",
    },
    dark: {
      primary: "oklch(0.606 0.25 292.717)",
      "primary-foreground": "oklch(0.969 0.016 293.756)",
    },
  },
  yellow: {
    light: {
      primary: "oklch(0.852 0.199 91.936)",
      "primary-foreground": "oklch(0.421 0.095 57.708)",
    },
    dark: {
      primary: "oklch(0.795 0.184 86.047)",
      "primary-foreground": "oklch(0.421 0.095 57.708)",
    },
  },
};

// Helper function untuk menggabungkan base colors dengan primary colors
function createTheme(
  name: string,
  label: string,
  primary: PrimaryColors
): Theme {
  return {
    name,
    label,
    cssVars: {
      light: { ...baseLightColors, ...primary.light },
      dark: { ...baseDarkColors, ...primary.dark },
    },
  };
}

export const themes: Theme[] = [
  createTheme("amber", "Amber", primaryColors.amber),
  createTheme("blue", "Blue", primaryColors.blue),
  createTheme("cyan", "Cyan", primaryColors.cyan),
  createTheme("emerald", "Emerald", primaryColors.emerald),
  createTheme("fuchsia", "Fuchsia", primaryColors.fuchsia),
  createTheme("green", "Green", primaryColors.green),
  createTheme("indigo", "Indigo", primaryColors.indigo),
  createTheme("lime", "Lime", primaryColors.lime),
  createTheme("neutral", "Neutral", primaryColors.neutral),
  createTheme("orange", "Orange", primaryColors.orange),
  createTheme("pink", "Pink", primaryColors.pink),
  createTheme("purple", "Purple", primaryColors.purple),
  createTheme("red", "Red", primaryColors.red),
  createTheme("rose", "Rose", primaryColors.rose),
  createTheme("sky", "Sky", primaryColors.sky),
  createTheme("teal", "Teal", primaryColors.teal),
  createTheme("violet", "Violet", primaryColors.violet),
  createTheme("yellow", "Yellow", primaryColors.yellow),
].sort((a, b) => a.name.localeCompare(b.name));

export function applyTheme(themeName: string) {
  const theme = themes.find((t) => t.name === themeName) || themes[0];
  const root = document.documentElement;
  const isDark = root.classList.contains("dark");
  const vars = isDark ? theme.cssVars.dark : theme.cssVars.light;

  Object.entries(vars).forEach(([key, value]) => {
    root.style.setProperty(`--${key}`, value);
  });
}