/**
 * Responsibilities:
 * - Mirror the published token naming relationship between code CSS variables and Figma token names.
 * - Provide a stable translation layer for token audits and codegen checks.
 * - Keep token naming decisions out of individual component files.
 */

export const FIGMA_TOKEN_TO_CODE_TOKEN = {
  'UX/Brand/Brand': '--brand',
  'UX/Brand/Hover': '--brand-hover',
  'UX/Brand/Disable': '--brand-disable',
  'UX/Brand/Match,Hover': '--brand-match',
  'UX/Grey/grey-1 #FFFFFF': '--color-white',
  'UX/Grey/grey-2 #F8F8F8': '--color-grey-2',
  'UX/Grey/grey-3 #F0F0F0': '--color-grey-3',
  'UX/Grey/grey-4 #DBDBDB': '--color-grey-4',
  'UX/Grey/grey-5 #CCCCCC': '--color-grey-5',
  'UX/Grey/grey-6 #9E9E9E': '--color-grey-6',
  'UX/Grey/grey-7 #7B7B7B': '--color-grey-7',
  'UX/Grey/grey-8 #595959': '--color-grey-8',
  'UX/Grey/grey-9 #434343': '--color-grey-9',
  'UX/Grey/grey-10 #353535': '--color-grey-10',
  'UX/Grey/grey-11 #262626': '--color-grey-11',
  'UX/Grey/grey-12 #1F1F1F': '--color-grey-12',
  'UX/Grey/grey-13 #141414': '--color-grey-13',
  'UX/Grey/grey-14 #000000': '--color-grey-14',
  'UX/Red/Default': '--red',
  'UX/Red/Hover 1': '--red-hover',
  'UX/Red/Msg-bg': '--red-bg',
  'UX/Orange/Default': '--orange',
  'UX/Orange/Hover 1': '--orange-hover',
  'UX/Orange/Msg-bg': '--orange-bg',
  'UX/Orange/Time Zone': '--orange-tz',
  'UX/Blue/Default': '--blue',
  'UX/Blue/Hover 1': '--blue-hover',
  'UX/Blue/Msg-bg': '--blue-bg',
  'Color Type/Text/Heading & Button': '--text-heading',
  'Color Type/Text/Primary Button': '--text-primary-btn',
  'Color Type/Text/Text_1': '--text-body',
  'Color Type/Text/Text_2': '--text-2',
  'Color Type/Text/Tips': '--text-tips',
  'Color Type/Text/Placeholder & Button': '--text-placeholder',
  'Color Type/Text/Disable': '--text-disabled',
  'Color Type/Text/Enable Grey button': '--text-grey-en',
  'Color Type/Text/Disable Grey Button': '--text-grey-dis',
  'Color Type/Text/Hover Grey button': '--text-grey-hv',
  'Color Type/Icon/Active & Hover': '--icon-active',
  'Color Type/Icon/Default': '--icon-default',
  'Color Type/Icon/Disable': '--icon-disabled',
  'Color Type/Icon/Placeholder': '--icon-placeholder',
  'Color Type/Icon/Disable Grey Button': '--icon-grey-dis',
  'Color Type/Background/Layer_1': '--bg-layer1',
  'Color Type/Background/Layer_2': '--bg-layer2',
  'Color Type/Background/Layer_3': '--bg-layer3',
  'Color Type/Background/Layer_4': '--bg-layer4',
  'Color Type/Background/Top Bar': '--bg-topbar',
  'Color Type/Background/Hover Grey Button': '--bg-grey-btn-hv',
  'Color Type/Background/Enable Grey Button': '--bg-grey-btn-en',
  'Color Type/Background/Disable Grey Button': '--bg-grey-btn-dis',
  'Color Type/Line/Popup Border': '--line-border',
  'Color Type/Line/Deep Divider': '--line-deep',
  'Color Type/Line/Light Divider': '--line-light',

  // Effect Styles (figma 真源 3-layered, from design-tokens.tokens.json 2026-05-07)
  'L1 shadow': '--shadow-l1',
  'L2 shadow': '--shadow-l2',
  'L3 shadow': '--shadow-l3',
  'Mask blur8 #000-60%': '--mask-overlay', // companion: --mask-overlay-blur (8px backdrop-filter)

  // Text Styles (figma 真源 7 Text Styles, Roboto family)
  'Roboto/12 tips': '--text-style-tips',
  'Roboto/14 body': '--text-style-body',
  'Roboto/16 pop title': '--text-style-pop-title',
  'Roboto/18 headline 2': '--text-style-headline-2',
  'Roboto/20 headline 1': '--text-style-headline-1',
  'Roboto/22 large title': '--text-style-large-title-22',
  'Roboto/24 large title': '--text-style-large-title-24',

  // Spacing scale (figma 真源 tvu design system.spacing → canonical --sp-*)
  'tvu design system/spacing/xxs': '--sp-xxs',
  'tvu design system/spacing/xs': '--sp-xs',
  'tvu design system/spacing/s': '--sp-s',
  'tvu design system/spacing/m': '--sp-m',
  'tvu design system/spacing/l': '--sp-l',
  'tvu design system/spacing/xl': '--sp-xl',
  'tvu design system/spacing/xxl': '--sp-xxl',
  'tvu design system/spacing/xxxl': '--sp-xxxl',

  // Radius scale (figma 真源 tvu design system.radius → canonical --r-*)
  'tvu design system/radius/xs': '--r-xs',
  'tvu design system/radius/s': '--r-s',
  'tvu design system/radius/m': '--r-m',
  'tvu design system/radius/l': '--r-l',
  'tvu design system/radius/xl': '--r-xl',
  'tvu design system/radius/xxl': '--r-xxl',
} as const

export const CODE_TOKEN_TO_FIGMA_TOKEN = {
  '--brand': 'UX/Brand/Brand',
  '--brand-hover': 'UX/Brand/Hover',
  '--brand-disable': 'UX/Brand/Disable',
  '--brand-match': 'UX/Brand/Match,Hover',
  '--color-white': 'UX/Grey/grey-1 #FFFFFF',
  '--color-grey-2': 'UX/Grey/grey-2 #F8F8F8',
  '--color-grey-3': 'UX/Grey/grey-3 #F0F0F0',
  '--color-grey-4': 'UX/Grey/grey-4 #DBDBDB',
  '--color-grey-5': 'UX/Grey/grey-5 #CCCCCC',
  '--color-grey-6': 'UX/Grey/grey-6 #9E9E9E',
  '--color-grey-7': 'UX/Grey/grey-7 #7B7B7B',
  '--color-grey-8': 'UX/Grey/grey-8 #595959',
  '--color-grey-9': 'UX/Grey/grey-9 #434343',
  '--color-grey-10': 'UX/Grey/grey-10 #353535',
  '--color-grey-11': 'UX/Grey/grey-11 #262626',
  '--color-grey-12': 'UX/Grey/grey-12 #1F1F1F',
  '--color-grey-13': 'UX/Grey/grey-13 #141414',
  '--color-grey-14': 'UX/Grey/grey-14 #000000',
  '--red': 'UX/Red/Default',
  '--red-hover': 'UX/Red/Hover 1',
  '--red-bg': 'UX/Red/Msg-bg',
  '--orange': 'UX/Orange/Default',
  '--orange-hover': 'UX/Orange/Hover 1',
  '--orange-bg': 'UX/Orange/Msg-bg',
  '--orange-tz': 'UX/Orange/Time Zone',
  '--blue': 'UX/Blue/Default',
  '--blue-hover': 'UX/Blue/Hover 1',
  '--blue-bg': 'UX/Blue/Msg-bg',
  '--text-heading': 'Color Type/Text/Heading & Button',
  '--text-primary-btn': 'Color Type/Text/Primary Button',
  '--text-body': 'Color Type/Text/Text_1',
  '--text-2': 'Color Type/Text/Text_2',
  '--text-tips': 'Color Type/Text/Tips',
  '--text-placeholder': 'Color Type/Text/Placeholder & Button',
  '--text-disabled': 'Color Type/Text/Disable',
  '--text-grey-en': 'Color Type/Text/Enable Grey button',
  '--text-grey-dis': 'Color Type/Text/Disable Grey Button',
  '--text-grey-hv': 'Color Type/Text/Hover Grey button',
  '--icon-active': 'Color Type/Icon/Active & Hover',
  '--icon-default': 'Color Type/Icon/Default',
  '--icon-disabled': 'Color Type/Icon/Disable',
  '--icon-placeholder': 'Color Type/Icon/Placeholder',
  '--icon-grey-dis': 'Color Type/Icon/Disable Grey Button',
  '--bg-layer1': 'Color Type/Background/Layer_1',
  '--bg-layer2': 'Color Type/Background/Layer_2',
  '--bg-layer3': 'Color Type/Background/Layer_3',
  '--bg-layer4': 'Color Type/Background/Layer_4',
  '--bg-topbar': 'Color Type/Background/Top Bar',
  '--bg-grey-btn-hv': 'Color Type/Background/Hover Grey Button',
  '--bg-grey-btn-en': 'Color Type/Background/Enable Grey Button',
  '--bg-grey-btn-dis': 'Color Type/Background/Disable Grey Button',
  '--line-border': 'Color Type/Line/Popup Border',
  '--line-deep': 'Color Type/Line/Deep Divider',
  '--line-light': 'Color Type/Line/Light Divider',

  // Reverse: Effect Styles
  '--shadow-l1': 'L1 shadow',
  '--shadow-l2': 'L2 shadow',
  '--shadow-l3': 'L3 shadow',
  '--mask-overlay': 'Mask blur8 #000-60%',

  // Reverse: Text Styles
  '--text-style-tips': 'Roboto/12 tips',
  '--text-style-body': 'Roboto/14 body',
  '--text-style-pop-title': 'Roboto/16 pop title',
  '--text-style-headline-2': 'Roboto/18 headline 2',
  '--text-style-headline-1': 'Roboto/20 headline 1',
  '--text-style-large-title-22': 'Roboto/22 large title',
  '--text-style-large-title-24': 'Roboto/24 large title',

  // Reverse: Spacing
  '--sp-xxs': 'tvu design system/spacing/xxs',
  '--sp-xs': 'tvu design system/spacing/xs',
  '--sp-s': 'tvu design system/spacing/s',
  '--sp-m': 'tvu design system/spacing/m',
  '--sp-l': 'tvu design system/spacing/l',
  '--sp-xl': 'tvu design system/spacing/xl',
  '--sp-xxl': 'tvu design system/spacing/xxl',
  '--sp-xxxl': 'tvu design system/spacing/xxxl',

  // Reverse: Radius
  '--r-xs': 'tvu design system/radius/xs',
  '--r-s': 'tvu design system/radius/s',
  '--r-m': 'tvu design system/radius/m',
  '--r-l': 'tvu design system/radius/l',
  '--r-xl': 'tvu design system/radius/xl',
  '--r-xxl': 'tvu design system/radius/xxl',
} as const

/**
 * SEMANTIC_TO_PRIMITIVE_EQUIVALENCE
 *
 * Registers the current L2 semantic token equivalence to L1 primitive tokens
 * for each theme scope. Audit uses this as evidence to separate exact matches,
 * theme-asymmetric aliases, and true non-equivalent token drift.
 *
 * Source of truth remains src/tokens/variables.css. The component attributes
 * audit validates this table against the resolved CSS values at startup.
 */
export const SEMANTIC_TO_PRIMITIVE_EQUIVALENCE: Record<
  string,
  { dark: string | null; light: string | null }
> = {
  '--bg-grey-btn-dis': { dark: '--color-grey-9', light: '--color-grey-4' },
  '--bg-grey-btn-en': { dark: '--color-grey-9', light: '--color-grey-4' },
  '--bg-grey-btn-hv': { dark: '--color-grey-8', light: '--color-grey-5' },
  '--bg-layer1': { dark: '--color-grey-13', light: '--color-white' },
  '--bg-layer2': { dark: '--color-grey-12', light: '--color-grey-2' },
  '--bg-layer3': { dark: '--color-grey-11', light: '--color-grey-3' },
  '--bg-layer4': { dark: '--color-grey-10', light: '--color-grey-4' },
  '--bg-topbar': { dark: '--color-grey-14', light: '--color-white' },
  '--chart-color-1': { dark: '--brand', light: '--brand' },
  '--chart-color-10': { dark: null, light: null },
  '--chart-color-11': { dark: null, light: null },
  '--chart-color-12': { dark: null, light: null },
  '--chart-color-2': { dark: '--red', light: '--red' },
  '--chart-color-3': { dark: '--blue', light: '--blue' },
  '--chart-color-4': { dark: '--orange', light: '--orange' },
  '--chart-color-5': { dark: null, light: null },
  '--chart-color-6': { dark: null, light: null },
  '--chart-color-7': { dark: null, light: null },
  '--chart-color-8': { dark: null, light: null },
  '--chart-color-9': { dark: null, light: null },
  '--control-default-border': { dark: '--color-grey-7', light: '--color-grey-6' },
  '--control-disabled-bg': { dark: '--color-grey-10', light: '--color-grey-4' },
  '--control-disabled-border': { dark: '--color-grey-8', light: '--color-grey-3' },
  '--control-disabled-selected-bg': { dark: '--brand-disable', light: '--brand-disable' },
  '--control-disabled-selected-icon': { dark: '--color-grey-6', light: '--color-white' },
  '--control-disabled-text': { dark: '--color-grey-8', light: '--color-grey-5' },
  '--green-bg': { dark: '--brand-match', light: '--brand-match' },
  '--icon-active': { dark: '--color-grey-2', light: '--color-grey-9' },
  '--icon-default': { dark: '--color-grey-6', light: '--color-grey-8' },
  '--icon-disabled': { dark: '--color-grey-8', light: '--color-grey-5' },
  '--icon-grey-dis': { dark: '--color-grey-7', light: '--color-grey-6' },
  '--icon-placeholder': { dark: '--color-grey-7', light: '--color-grey-6' },
  '--input-filled-bg': { dark: '--color-grey-10', light: '--color-white' },
  '--line-border': { dark: '--color-grey-8', light: '--color-grey-3' },
  '--line-deep': { dark: '--color-grey-10', light: '--color-grey-4' },
  '--line-divider-deep': { dark: '--color-grey-10', light: '--color-grey-4' },
  '--line-divider-light': { dark: '--color-grey-9', light: '--color-grey-5' },
  '--line-light': { dark: '--color-grey-9', light: '--color-grey-5' },
  '--msg-bg-blue': { dark: null, light: null },
  '--msg-bg-brand': { dark: null, light: null },
  '--msg-bg-grey': { dark: '--color-grey-10', light: null },
  '--msg-bg-red': { dark: null, light: null },
  '--notification-bg-dark': { dark: '--color-grey-10', light: '--color-grey-10' },
  '--notification-bg-light': { dark: '--color-grey-2', light: '--color-grey-2' },
  '--progress-track-bg-dark': { dark: '--color-grey-10', light: '--color-grey-4' },
  '--progress-track-bg-light': { dark: '--color-grey-4', light: '--color-grey-4' },
  '--prompt-error-text': { dark: '--red', light: null },
  '--prompt-info-text': { dark: '--blue', light: null },
  '--prompt-success-bg': { dark: null, light: '--brand-match' },
  '--prompt-success-text': { dark: '--brand', light: null },
  '--prompt-warning-text': { dark: '--orange', light: null },
  '--radio-default-border': { dark: '--color-grey-6', light: '--color-grey-6' },
  '--radio-disabled-off-bg': { dark: '--color-grey-8', light: '--color-grey-3' },
  '--radio-disabled-off-border': { dark: '--color-grey-10', light: '--color-grey-4' },
  '--radio-disabled-selected-bg': { dark: '--brand-disable', light: '--brand-disable' },
  '--radio-selected-dot': { dark: '--color-grey-13', light: '--color-white' },
  '--switch-bg-disabled-off-dark': { dark: '--color-grey-9', light: '--color-grey-9' },
  '--switch-bg-disabled-off-light': { dark: '--color-grey-5', light: '--color-grey-5' },
  '--switch-bg-off-dark': { dark: '--color-grey-8', light: '--color-grey-8' },
  '--switch-bg-off-light': { dark: '--color-grey-6', light: '--color-grey-6' },
  '--text-2': { dark: '--color-grey-5', light: '--color-grey-9' },
  '--text-body': { dark: '--color-grey-2', light: '--color-grey-13' },
  '--text-disabled': { dark: '--color-grey-8', light: '--color-grey-5' },
  '--text-grey-dis': { dark: '--color-grey-7', light: '--color-grey-6' },
  '--text-grey-en': { dark: '--color-grey-5', light: '--color-grey-9' },
  '--text-grey-hv': { dark: '--color-grey-5', light: '--color-grey-9' },
  '--text-heading': { dark: '--color-white', light: '--color-grey-14' },
  '--text-placeholder': { dark: '--color-grey-7', light: '--color-grey-6' },
  '--text-primary-btn': { dark: '--color-white', light: '--color-white' },
  '--text-tips': { dark: '--color-grey-6', light: '--color-grey-8' },
  '--tooltip-bg-dark': { dark: '--color-grey-10', light: '--color-grey-10' },
  '--tooltip-bg-light': { dark: '--color-white', light: '--color-white' },
  '--tooltip-border-dark': { dark: '--color-grey-8', light: '--color-grey-8' },
  '--tooltip-border-light': { dark: '--color-grey-3', light: '--color-grey-3' },
  '--tooltip-text-dark': { dark: '--color-grey-2', light: '--color-grey-2' },
  '--tooltip-text-light': { dark: '--color-grey-13', light: '--color-grey-13' },
}