import { validators } from 'tailwind-merge'

// Unity spacing scale values
const unitySpacing = [
  '0',
  '25',
  '50',
  '75',
  '100',
  '125',
  '150',
  '200',
  '250',
  '300',
  '400',
  '500',
  '600',
  '800',
  '1000',
]

// Unity typography classes - actual generated class names (without -sm variants)
const unityTypography = [
  'display-heading',
  'h1',
  'h2',
  'h3',
  'h4',
  'overline',
  'subtitle',
  'display-title',
  'display-body',
  'body',
  'body-strong',
  'body-small',
  'body-small-strong',
  'body-large',
  'body-large-strong',
  'action',
  'action-small',
  'action-large',
]

// Unity font sizes
const unityFontSizes = [
  '50',
  '75',
  '100',
  '200',
  '300',
  '400',
  '500',
  '600',
  '800',
  '1000',
  '1200',
  '1400',
  '1600',
]

// Unity border radius values
const unityBorderRadius = [
  '0',
  '25',
  '50',
  '75',
  '100',
  '125',
  '150',
  '200',
  '300',
  '400',
  'xs',
  'sm',
  'md',
  'lg',
  'xl',
  'circle',
  'pill',
]

// Unity shadow values
const unityShadows = ['canvas', 'raising', 'floating', 'flying', 'soaring']

// Custom validator for Unity colors
const isUnityColor = (value: string): boolean => {
  // Primitive colors: {color}-l{number}
  if (/^[a-z]+-l\d+$/.test(value)) return true
  // Semantic colors: {category}-{type}-{variant}(-{state})?
  if (/^(?:canvas|surface|content|border|utility)-.+$/.test(value)) return true
  return false
}

export const twMergeConfig = {
  prefix: 'uy',
  extend: {
    classGroups: {
      // Colors - Use pattern matching for maintainability
      // Matches primitive colors like: grayscale-l0, red-l1, blue-l12, etc.
      // Matches semantic colors like: surface-primary-default, content-neutral-low, border-danger-default, etc.
      'bg-color': [{ bg: [validators.isArbitraryValue, isUnityColor] }],
      'text-color': [{ text: [validators.isArbitraryValue, isUnityColor] }],
      'border-color': [{ border: [validators.isArbitraryValue, isUnityColor] }],
      'outline-color': [
        { outline: [validators.isArbitraryValue, isUnityColor] },
      ],
      'ring-color': [{ ring: [validators.isArbitraryValue, isUnityColor] }],
      'ring-offset-color': [
        { 'ring-offset': [validators.isArbitraryValue, isUnityColor] },
      ],
      'divide-color': [{ divide: [validators.isArbitraryValue, isUnityColor] }],
      'text-decoration-color': [
        { decoration: [validators.isArbitraryValue, isUnityColor] },
      ],
      'gradient-color-from': [
        { from: [validators.isArbitraryValue, isUnityColor] },
      ],
      'gradient-color-via': [
        { via: [validators.isArbitraryValue, isUnityColor] },
      ],
      'gradient-color-to': [
        { to: [validators.isArbitraryValue, isUnityColor] },
      ],
      // Spacing - Padding
      p: [{ p: unitySpacing }],
      px: [{ px: unitySpacing }],
      py: [{ py: unitySpacing }],
      ps: [{ ps: unitySpacing }],
      pe: [{ pe: unitySpacing }],
      pt: [{ pt: unitySpacing }],
      pr: [{ pr: unitySpacing }],
      pb: [{ pb: unitySpacing }],
      pl: [{ pl: unitySpacing }],
      // Spacing - Margin
      m: [{ m: unitySpacing }],
      mx: [{ mx: unitySpacing }],
      my: [{ my: unitySpacing }],
      ms: [{ ms: unitySpacing }],
      me: [{ me: unitySpacing }],
      mt: [{ mt: unitySpacing }],
      mr: [{ mr: unitySpacing }],
      mb: [{ mb: unitySpacing }],
      ml: [{ ml: unitySpacing }],
      // Spacing - Gap
      gap: [{ gap: unitySpacing }],
      'gap-x': [{ 'gap-x': unitySpacing }],
      'gap-y': [{ 'gap-y': unitySpacing }],
      // Spacing - Space between
      'space-x': [{ 'space-x': unitySpacing }],
      'space-y': [{ 'space-y': unitySpacing }],
      // Spacing - Scroll padding
      'scroll-p': [{ 'scroll-p': unitySpacing }],
      'scroll-px': [{ 'scroll-px': unitySpacing }],
      'scroll-py': [{ 'scroll-py': unitySpacing }],
      'scroll-ps': [{ 'scroll-ps': unitySpacing }],
      'scroll-pe': [{ 'scroll-pe': unitySpacing }],
      'scroll-pt': [{ 'scroll-pt': unitySpacing }],
      'scroll-pr': [{ 'scroll-pr': unitySpacing }],
      'scroll-pb': [{ 'scroll-pb': unitySpacing }],
      'scroll-pl': [{ 'scroll-pl': unitySpacing }],
      // Spacing - Scroll margin
      'scroll-m': [{ 'scroll-m': unitySpacing }],
      'scroll-mx': [{ 'scroll-mx': unitySpacing }],
      'scroll-my': [{ 'scroll-my': unitySpacing }],
      'scroll-ms': [{ 'scroll-ms': unitySpacing }],
      'scroll-me': [{ 'scroll-me': unitySpacing }],
      'scroll-mt': [{ 'scroll-mt': unitySpacing }],
      'scroll-mr': [{ 'scroll-mr': unitySpacing }],
      'scroll-mb': [{ 'scroll-mb': unitySpacing }],
      'scroll-ml': [{ 'scroll-ml': unitySpacing }],
      // Typography
      typography: [{ typography: unityTypography }],
      'font-size': [{ text: unityFontSizes }],
      // Border radius
      rounded: [{ rounded: unityBorderRadius }],
      'rounded-s': [{ 'rounded-s': unityBorderRadius }],
      'rounded-e': [{ 'rounded-e': unityBorderRadius }],
      'rounded-t': [{ 'rounded-t': unityBorderRadius }],
      'rounded-r': [{ 'rounded-r': unityBorderRadius }],
      'rounded-b': [{ 'rounded-b': unityBorderRadius }],
      'rounded-l': [{ 'rounded-l': unityBorderRadius }],
      'rounded-ss': [{ 'rounded-ss': unityBorderRadius }],
      'rounded-se': [{ 'rounded-se': unityBorderRadius }],
      'rounded-ee': [{ 'rounded-ee': unityBorderRadius }],
      'rounded-es': [{ 'rounded-es': unityBorderRadius }],
      'rounded-tl': [{ 'rounded-tl': unityBorderRadius }],
      'rounded-tr': [{ 'rounded-tr': unityBorderRadius }],
      'rounded-br': [{ 'rounded-br': unityBorderRadius }],
      'rounded-bl': [{ 'rounded-bl': unityBorderRadius }],
      // Shadows
      shadow: [{ shadow: unityShadows }],
    },
  },
}