const clamp = (v, min, max) => Math.min(max, Math.max(min, v));

const toHex2 = (n) =>
  clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0");

const parseHex = (hex) => {
  const v = (hex || "").trim().replace("#", "");
  if (v.length === 3) {
    const [r, g, b] = v.split("").map((c) => c + c);
    return { r: parseInt(r, 16), g: parseInt(g, 16), b: parseInt(b, 16) };
  }
  return {
    r: parseInt(v.slice(0, 2), 16),
    g: parseInt(v.slice(2, 4), 16),
    b: parseInt(v.slice(4, 6), 16),
  };
};

const mix = (hex, target, amount) => {
  const s = parseHex(hex);
  const t = parseHex(target);
  return (
    "#" +
    toHex2(s.r + (t.r - s.r) * amount) +
    toHex2(s.g + (t.g - s.g) * amount) +
    toHex2(s.b + (t.b - s.b) * amount)
  ).toUpperCase();
};

const rgbaOf = (hex, a) => {
  const { r, g, b } = parseHex(hex);
  return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${a})`;
};

// 单一数据源：每个预设主题的 brandColor + 渐变端点 + 弹窗 UI 字段
export const PRESET_THEMES = {
  blue: {
    borderColor: "#3289FB",
    gradientTo: "#77B2FF",
    boxShadow: "0 4px 12px 0 rgba(50, 137, 251, 0.5)",
    name: "穹宇蓝",
    desc: "深邃星空\n科技感十足",
  },
  purple: {
    borderColor: "#6155F5",
    gradientTo: "#9B93FF",
    boxShadow: "0 4px 12px 0 rgba(97, 85, 245, 0.5)",
    name: "星轨紫",
    desc: "神秘优雅\n梦幻氛围",
  },
  red: {
    borderColor: "#DE6262",
    gradientTo: "#FF988B",
    boxShadow: "0 4px 12px 0 rgba(222, 98, 98, 0.5)",
    name: "流金粉",
    desc: "晨雾染金\n自带光芒",
  },
};

export const DEFAULT_THEME = "blue";

export const normalizeThemeValue = (v) =>
  PRESET_THEMES[v] ? v : DEFAULT_THEME;

export const buildLinearRight = (themeValue) => {
  const t = PRESET_THEMES[normalizeThemeValue(themeValue)];
  return `linear-gradient(to right, ${t.borderColor} 0%, ${t.gradientTo} 100%)`;
};

export const buildPreview = (themeValue) => {
  const t = PRESET_THEMES[normalizeThemeValue(themeValue)];
  return `linear-gradient(to bottom, ${t.borderColor} 0%, ${t.gradientTo} 100%)`;
};

export const buildThemeVars = (themeValue) => {
  const t = PRESET_THEMES[normalizeThemeValue(themeValue)];
  const c = t.borderColor;

  return {
    "--brand-color": c,
    "--brand-color-bg": rgbaOf(c, 0.21),
    "--brand-color-hover": mix(c, "#FFFFFF", 0.12),
    "--brand-color-active": mix(c, "#000000", 0.14),
    "--brand-color-disabled": rgbaOf(c, 0.4),
    "--brand-color-focus": rgbaOf(c, 0.18),
    "--brand-color-light": rgbaOf(c, 0.12),
    "--text-color-brand": c,
    "--text-color-link": c,
    "--el-color-primary": c,
    "--el-color-primary-light-3": mix(c, "#FFFFFF", 0.2),
    "--el-color-primary-light-5": mix(c, "#FFFFFF", 0.28),
    "--el-color-primary-light-7": mix(c, "#FFFFFF", 0.48),
    "--el-color-primary-light-8": mix(c, "#FFFFFF", 0.64),
    "--el-color-primary-light-9": mix(c, "#FFFFFF", 0.82),
    "--el-color-primary-dark-2": mix(c, "#000000", 0.14),
    "--el-menu-hover-bg-color": rgbaOf(c, 0.12),
    "--el-menu-active-color": c,
    "--el-menu-active-background": rgbaOf(c, 0.12),
    "--el-text-color-secondary": c,
    "--linear-right": buildLinearRight(normalizeThemeValue(themeValue)),
  };
};