import { SEMANTIC_CSS_MAP as SEMANTIC_CSS_MAP_B_END } from './semantic-css-map.js';

/**
 * 与各设计系统 `generateThemeCssVars` 一致：语义键 → `--color-{SEMANTIC_CSS_MAP[key]||key}`。
 * Dashboard 在后，覆盖/补充图表专用键（border-chart-grid 等）。
 */
const MERGED_SEMANTIC_CSS_MAP = {
  ...SEMANTIC_CSS_MAP_B_END,
  ...SEMANTIC_CSS_MAP_DASHBOARD,
};

/**
 * @param {string} raw
 * @returns {string|null}
 */
function semanticTokenToColorVarName(raw) {
  if (Object.prototype.hasOwnProperty.call(MERGED_SEMANTIC_CSS_MAP, raw)) {
    return `--color-${MERGED_SEMANTIC_CSS_MAP[raw]}`;
  }
  if (/^(text|bg|border|fill|status|overlay|focus|chart)-/.test(raw)) {
    return `--color-${raw}`;
  }
  return null;
}

/**
 * 将设计系统里的「Token 简称」解析为可在 DOM 上使用的 CSS 自定义属性名。
 * 与 `tokens.js` 中 `generateThemeCssVars` 写入 :root 的命名保持一致。
 *
 * @param {string} tokenName
 * @returns {string} 以 `--` 开头的变量名
 */
export function tokenNameToCssVar(tokenName) {
  const raw = String(tokenName ?? '').trim();
  if (!raw) return '';

  if (raw.startsWith('--')) return raw;

  // 图表序列色：data-0 → --color-data-0
  if (/^data-\d+$/.test(raw)) return `--color-${raw}`;

  // 图表 categorical：chart-categorical-0 → --color-chart-categorical-0
  if (/^chart-categorical-\d+$/.test(raw)) return `--color-${raw}`;

  // 已带 color- 前缀的 primitive：color-brand-500 → --color-brand-500
  if (raw.startsWith('color-')) return `--${raw}`;

  if (raw === 'black' || raw === 'white') return `--color-${raw}`;

  // 圆角档位：radius-sm → --radius-sm
  if (/^radius-(none|sm|md|lg)$/.test(raw)) return `--${raw}`;

  // 色板刻度：brand-500、blueGrey-900、grey-100
  if (/^[a-zA-Z][a-zA-Z0-9]*-\d+$/.test(raw)) return `--color-${raw}`;

  const semanticColor = semanticTokenToColorVarName(raw);
  if (semanticColor) return semanticColor;

  // 其余：原样加 --（便于扩展未列出的语义键）
  return `--${raw}`;
}

/**
 * 浏览器计算后的 color 串（rgb / rgba）转为 Hex。
 * @param {string} computed
 * @returns {string|null}
 */
function computedColorToHex(computed) {
  if (!computed || computed === 'transparent') return null;

  const m = computed.match(/^rgba?\(\s*([^)]+)\s*\)/i);
  if (m) {
    const parts = m[1].split(',').map((s) => s.trim());
    const r = Math.min(255, Math.max(0, Math.round(parseFloat(parts[0], 10))));
    const g = Math.min(255, Math.max(0, Math.round(parseFloat(parts[1], 10))));
    const b = Math.min(255, Math.max(0, Math.round(parseFloat(parts[2], 10))));
    const a = parts.length > 3 ? Math.min(1, Math.max(0, parseFloat(parts[3], 10))) : 1;
    const hx = (n) => n.toString(16).padStart(2, '0').toUpperCase();
    if (a < 1) return `#${hx(r)}${hx(g)}${hx(b)}${hx(Math.round(a * 255))}`;
    return `#${hx(r)}${hx(g)}${hx(b)}`;
  }

  if (computed.startsWith('#')) {
    let h = computed.slice(1);
    if (h.length === 3) {
      h = h.split('').map((c) => c + c).join('');
    }
    if (h.length === 6 || h.length === 8) {
      return `#${h.toUpperCase()}`;
    }
  }

  return null;
}

/**
 * 读取当前页面 :root（或挂载点）上已生效的 Token，解析为实色 Hex，供 Recharts 等库使用。
 *
 * 说明：对含 `var()` 链的语义色，需通过临时节点计算 `getComputedStyle`，
 * 不能直接用 `getPropertyValue('--x')`（多为未展开的 var 文本）。
 *
 * @param {string} tokenName 如 `data-0`、`text-secondary`、`brand-500`、`--color-data-0`
 * @param {{ root?: Element }} [options] 探测节点挂载位置，默认 `document.body`（继承 :root 上的主题变量）
 * @returns {string|null} `#RRGGBB` 或带透明度的 `#RRGGBBAA`；非浏览器环境或无法解析时返回 `null`
 *
 * @example
 * resolveColorToken('data-0');       // → '#24CDA5'
 * resolveColorToken('text-secondary'); // → '#475467'
 */
export function resolveColorToken(tokenName, options = {}) {
  if (typeof window === 'undefined' || !document.body) return null;

  const varName = tokenNameToCssVar(tokenName);
  if (!varName.startsWith('--')) return null;

  const root = options.root ?? document.body;
  const probe = document.createElement('div');
  probe.setAttribute('data-token-resolver', '');
  probe.style.cssText =
    'position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none;visibility:hidden;color:';
  probe.style.setProperty('color', `var(${varName})`);

  root.appendChild(probe);
  const computed = getComputedStyle(probe).color;
  root.removeChild(probe);

  return computedColorToHex(computed);
}

/**
 * 读取主题上的「纯数值」CSS 变量（如面积图 fillOpacity），非颜色类。
 * @param {string} tokenName 语义键（如 `chart-area-fill-opacity-multi`）或已带 `--` 的变量名
 * @param {{ root?: Element }} [options] 优先从该元素继承计算样式，默认 `document.documentElement`
 * @returns {number|null}
 */
export function resolveCssNumericVar(tokenName, options = {}) {
  if (typeof window === 'undefined') return null;

  const rawName = String(tokenName ?? '').trim();
  const varName = rawName.startsWith('--') ? rawName : tokenNameToCssVar(rawName);
  if (!varName?.startsWith('--')) return null;

  const root = options.root ?? document.documentElement;
  const chain = root instanceof Element ? root : document.documentElement;
  let raw = getComputedStyle(chain).getPropertyValue(varName).trim();
  if (!raw && chain !== document.documentElement) {
    raw = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
  }
  const n = parseFloat(raw);
  return Number.isFinite(n) ? n : null;
}

/**
 * 将 CSS 长度类自定义属性（如 `--radius-sm`）解析为像素数值，供图表圆角等使用。
 *
 * @param {string} cssVarName 如 `--radius-sm`
 * @param {{ root?: Element }} [options]
 * @returns {number|null}
 */
export function resolveLengthVar(cssVarName, options = {}) {
  if (typeof window === 'undefined' || !document.body) return null;

  const name = String(cssVarName || '').trim().startsWith('--')
    ? String(cssVarName).trim()
    : tokenNameToCssVar(cssVarName);
  if (!name?.startsWith('--')) return null;

  const root = options.root ?? document.body;
  const probe = document.createElement('div');
  probe.setAttribute('data-token-resolver', 'length');
  probe.style.cssText =
    'position:absolute;left:-9999px;top:0;width:0;height:0;overflow:hidden;visibility:hidden;border-style:solid;border-width:0;';
  probe.style.setProperty('border-top-left-radius', `var(${name})`);

  root.appendChild(probe);
  const px = getComputedStyle(probe).borderTopLeftRadius;
  root.removeChild(probe);

  const m = /^([\d.]+)px$/.exec(px);
  return m ? Number.parseFloat(m[1]) : null;
}

/**
 * 从设计系统 TOKEN_GRADIENTS 中提取 group === 'ai' 的条目（顺序与源对象一致）。
 * 供 Token 页与组件属性色板共用，避免硬编码 ai-fill-* 列表。
 *
 * @param {Record<string, { css?: string, group?: string, label?: string, desc?: string }>} [tokenGradients]
 * @returns {Array<[string, { css: string, group?: string, label?: string, desc?: string }]>}
 */
export function getAiGradientEntries(tokenGradients) {
  if (!tokenGradients || typeof tokenGradients !== 'object') return [];
  const aiEntries = Object.entries(tokenGradients).filter(([, g]) => g?.css && g?.group === 'ai');
  if (aiEntries.length > 0) return aiEntries;
  return Object.entries(tokenGradients).filter(
    ([key, g]) => g?.css && (key === 'dark' || key.startsWith('ai-')),
  );
}

/** `--gradient-ai-fill-3` → `ai-fill-3` */
export function gradientVarToKey(token) {
  return String(token || '').replace(/^--gradient-/, '');
}

/** 解析 `--gradient-*` 对应的 CSS 渐变字符串 */
export function resolveGradientCss(token, tokenGradients) {
  if (!token?.startsWith('--gradient-') || !tokenGradients) return null;
  return tokenGradients[gradientVarToKey(token)]?.css || null;
}

