/**
 * Ant Design Vue Theme Token Mapping — Notion-Inspired Light Theme
 *
 * Reads CSS custom properties at runtime from tokens.css to ensure
 * single source of truth. Falls back to hardcoded values if CSS
 * variables are not yet available (SSR / build time).
 */

import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context'

function readToken(varName: string, fallback: string): string {
  if (typeof document === 'undefined') return fallback
  const val = getComputedStyle(document.documentElement).getPropertyValue(varName).trim()
  return val || fallback
}

export const themeConfig: ThemeConfig = {
  token: {
    // 2026-06-18 VI 重梳: 主色改为近黑（#1a1a1a），accent 仅做语义信号
    colorPrimary: readToken('--color-primary', '#1a1a1a'),
    colorInfo: readToken('--accent-team', '#3b82f6'),
    colorLink: readToken('--accent-team', '#3b82f6'),

    // Semantic
    colorSuccess: readToken('--color-success', '#22c55e'),
    colorWarning: readToken('--color-warning', '#f59e0b'),
    colorError: readToken('--color-error', '#ef4444'),

    // Text
    colorText: readToken('--text-primary', '#1a1a1a'),
    colorTextSecondary: readToken('--text-secondary', '#4a4a4a'),
    colorTextTertiary: readToken('--text-tertiary', '#6b6b6a'),
    colorTextQuaternary: readToken('--text-placeholder', '#9b9b9a'),

    // Background
    colorBgContainer: readToken('--bg-primary', '#ffffff'),
    colorBgLayout: readToken('--bg-secondary', '#fbfbfa'),
    colorBgElevated: readToken('--bg-primary', '#ffffff'),

    // Border
    colorBorder: readToken('--border-color', '#ededec'),
    colorBorderSecondary: readToken('--border-color-split', '#f2f2f0'),

    // Font
    fontSize: 14,
    fontSizeSM: 12,
    fontSizeLG: 16,
    fontSizeXL: 20,

    // Radius — 略大，Notion 风格
    borderRadius: 8,
    borderRadiusSM: 6,
    borderRadiusLG: 12,

    // Spacing
    marginXS: 4,
    marginSM: 8,
    margin: 16,
    marginMD: 16,
    marginLG: 24,
    marginXL: 32,

    // Shadow — Notion 风格
    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.04)',
    boxShadowSecondary: '0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)',

    // Control
    controlHeight: 32,
    controlHeightSM: 24,
    controlHeightLG: 40,
  },
  components: {
    Menu: {
      itemSelectedBg: readToken('--color-primary-light', '#f3f4f6'),
      itemSelectedColor: readToken('--text-primary', '#1a1a1a'),
      itemHoverBg: readToken('--bg-tertiary', '#f7f7f5'),
      itemHoverColor: readToken('--text-primary', '#1a1a1a'),
      itemColor: readToken('--text-secondary', '#4a4a4a'),
    } as Record<string, unknown>,
    Tabs: {
      itemSelectedColor: readToken('--accent-team', '#3b82f6'),
      itemHoverColor: readToken('--accent-team-hover', '#2563eb'),
    } as Record<string, unknown>,
    Select: {
      colorPrimary: readToken('--accent-team', '#3b82f6'),
      colorPrimaryHover: readToken('--accent-team-hover', '#2563eb'),
      // Static (light) dropdown highlight — see stores/theme.ts for the
      // reactive dark-mode counterpart and the full rationale.
      optionSelectedBg: readToken('--color-primary-light', '#f3f4f6'),
      optionSelectedColor: readToken('--color-primary', '#1a1a1a'),
      optionActiveBg: readToken('--color-primary-light', '#ededec'),
    } as Record<string, unknown>,
    Button: {
      borderRadius: 8,
      controlHeight: 32,
      // 2026-06-18: primary button 改为近黑，更克制
      defaultBg: readToken('--bg-primary', '#ffffff'),
      defaultColor: readToken('--text-primary', '#1a1a1a'),
    } as Record<string, unknown>,
    Card: {
      borderRadiusLG: Number.parseInt(readToken('--radius-card', '12'), 10),
      borderRadius: Number.parseInt(readToken('--radius-card', '12'), 10),
    } as Record<string, unknown>,
    Input: {
      borderRadius: Number.parseInt(readToken('--radius-md', '6'), 10),
    } as Record<string, unknown>,
    Modal: {
      borderRadiusLG: Number.parseInt(readToken('--radius-card', '12'), 10),
    } as Record<string, unknown>,
    Tag: {
      borderRadiusSM: 4,
    } as Record<string, unknown>,
  },
}
