selector.ts

import { fmtPct } from '../utils/fmtPct'
import { getComponentPropertyDefinitions } from '../utils/get-component-property-definitions'
import { perfEnd, perfStart } from '../utils/perf'
import { getProps } from '.'

// Cache getSelectorProps() keyed by ComponentSetNode.id.
// Called from addComponentTree() for each component — but the result depends only on the parent set.
const selectorPropsCache = new Map<
  string,
  Promise<{
    props: Record<string, object | string>
    variants: Record<string, string>
    variantComments: Record<string, string>
  }>
>()

// Cache getSelectorPropsForGroup() keyed by "setId::filter::viewport".
const selectorPropsForGroupCache = new Map<
  string,
  Promise<Record<string, object | string>>
>()

export function resetSelectorPropsCache(): void {
  selectorPropsCache.clear()
  selectorPropsForGroupCache.clear()
}

// Shorthand prop names to CSS standard property names
const shortToCssProperty: Record<string, string> = {
  bg: 'background',
  w: 'width',
  h: 'height',
  p: 'padding',
  pt: 'padding-top',
  pr: 'padding-right',
  pb: 'padding-bottom',
  pl: 'padding-left',
  px: 'padding-inline',
  py: 'padding-block',
  m: 'margin',
  mt: 'margin-top',
  mr: 'margin-right',
  mb: 'margin-bottom',
  ml: 'margin-left',
  mx: 'margin-inline',
  my: 'margin-block',
  pos: 'position',
}

/**
 * Convert camelCase to kebab-case for CSS property names.
 */
function toKebabCase(str: string): string {
  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
}

/**
 * Convert shorthand prop names to CSS standard property names for transitionProperty.
 * Also converts camelCase to kebab-case (e.g., boxShadow -> box-shadow).
 */
function toTransitionPropertyName(key: string): string {
  const mapped = shortToCssProperty[key] || key
  return toKebabCase(mapped)
}

// Convert property names to valid TypeScript identifiers
const toUpperCase = (_: string, chr: string) => chr.toUpperCase()

export function sanitizePropertyName(name: string): string {
  // 0. Strip Figma's internal "#nodeId:uniqueId" suffix (e.g., "leftIcon#60:123" → "leftIcon")
  const stripped = name.replace(/#\d+:\d+$/, '')

  // 1. Replace Korean word for "property" with English equivalent (e.g., "속성1" → "property1")
  const normalized = stripped.trim().replace(/속성\s*/g, 'property')

  // 2. Convert spaces and special characters to camelCase
  const result = normalized
    // Capitalize the character after spaces/hyphens/underscores (camelCase)
    .replace(/[\s\-_]+(.)/g, toUpperCase)
    // Prefix leading digits with underscore
    .replace(/^(\d)/, '_$1')

  // 3. Remove invalid characters (Korean, special chars, etc.)
  const cleaned = result.replace(/[^\w$]/g, '')

  // 4. Fall back to default name if empty or digits-only
  if (!cleaned || /^\d+$/.test(cleaned)) {
    return 'variant'
  }

  return cleaned
}

/**
 * If exactly 1 TEXT-type variant (type === 'string'), rename it to 'children'
 * with 'React.ReactNode' type. Returns variantComments mapping 'children' to original name.
 */
export function applyTextChildrenTransform(variants: Record<string, string>): {
  variants: Record<string, string>
  variantComments: Record<string, string>
} {
  const textEntries = Object.entries(variants).filter(([, v]) => v === 'string')
  if (textEntries.length !== 1) return { variants, variantComments: {} }

  const [originalKey] = textEntries[0]
  const newVariants = { ...variants }
  delete newVariants[originalKey]
  newVariants.children = 'React.ReactNode'
  return { variants: newVariants, variantComments: { children: originalKey } }
}

export async function getSelectorProps(
  node: ComponentSetNode | ComponentNode,
): Promise<
  | {
      props: Record<string, object | string>
      variants: Record<string, string>
      variantComments: Record<string, string>
    }
  | undefined
> {
  if (node.type === 'COMPONENT' && node.parent?.type === 'COMPONENT_SET') {
    return getSelectorProps(node.parent)
  }
  if (node.type !== 'COMPONENT_SET') return

  const cacheKey = node.id
  if (cacheKey) {
    const cached = selectorPropsCache.get(cacheKey)
    if (cached) return cached
  }

  const promise = computeSelectorProps(node)
  if (cacheKey) {
    selectorPropsCache.set(cacheKey, promise)
  }
  return promise
}

async function computeSelectorProps(node: ComponentSetNode): Promise<{
  props: Record<string, object | string>
  variants: Record<string, string>
  variantComments: Record<string, string>
}> {
  const propDefs = getComponentPropertyDefinitions(node)
  const hasEffect = !!propDefs.effect
  const tSelector = perfStart()
  // Pre-filter: only call expensive getProps() on children with non-default effects.
  // The effect/trigger check is a cheap property read — skip children that would be
  // discarded later anyway (effect === undefined or effect === 'default').
  const effectChildren: { component: SceneNode; effect: string }[] = []
  for (const child of node.children) {
    if (child.type !== 'COMPONENT') continue
    const effect = hasEffect
      ? (child as ComponentNode).variantProperties?.effect
      : triggerTypeToEffect(child.reactions?.[0]?.trigger?.type)
    if (effect && effect !== 'default') {
      effectChildren.push({ component: child, effect })
    }
  }
  const components: (readonly [string, Record<string, unknown>])[] = []
  for (const { component, effect } of effectChildren) {
    components.push([effect, await getProps(component)] as const)
  }
  perfEnd('getSelectorProps.getPropsAll()', tSelector)

  const defaultProps = await getProps(node.defaultVariant)

  const result: {
    props: Record<string, object | string>
    variants: Record<string, string>
    variantComments: Record<string, string>
  } = { props: {}, variants: {}, variantComments: {} }
  const defs = propDefs
  for (const name in defs) {
    if (name === 'effect' || name === 'viewport') continue
    const definition = defs[name]
    const sanitizedName = sanitizePropertyName(name)
    if (definition.type === 'VARIANT' && definition.variantOptions) {
      result.variants[sanitizedName] = definition.variantOptions
        .map((option) => `'${option}'`)
        .join(' | ')
    } else if (definition.type === 'INSTANCE_SWAP') {
      result.variants[sanitizedName] = 'React.ReactNode'
    } else if (definition.type === 'BOOLEAN') {
      result.variants[sanitizedName] = 'boolean'
    } else if (definition.type === 'TEXT') {
      result.variants[sanitizedName] = 'string'
    }
  }

  const { variants: transformedVariants, variantComments } =
    applyTextChildrenTransform(result.variants)
  result.variants = transformedVariants
  result.variantComments = variantComments

  if (components.length > 0) {
    const findNodeAction = (action: Action) => action.type === 'NODE'
    const getTransition = (reaction: Reaction) =>
      reaction.actions?.find(findNodeAction)?.transition
    const transition = node.defaultVariant.reactions
      .flatMap(getTransition)
      .flat()[0]
    const diffKeys = new Set<string>()
    for (const [effect, props] of components) {
      const def = difference(props, defaultProps)
      if (Object.keys(def).length === 0) continue
      result.props[`_${effect}`] = def
      for (const key of Object.keys(def)) {
        diffKeys.add(key)
      }
    }
    if (transition?.type === 'SMART_ANIMATE' && diffKeys.size > 0) {
      const keys: string[] = []
      for (const key of diffKeys) keys.push(toTransitionPropertyName(key))
      keys.sort()
      result.props.transition = `${fmtPct(transition.duration)}ms ${transition.easing.type.toLocaleLowerCase().replaceAll('_', '-')}`
      result.props.transitionProperty = keys.join(',')
    }
  }

  return result
}

/**
 * Get selector props for a specific variant group (e.g., size=Md, variant=primary).
 * This filters components by the given variant properties before calculating pseudo-selector diffs.
 *
 * @param componentSet The component set to extract selector props from
 * @param variantFilter Object containing variant key-value pairs to filter by (excluding effect and viewport)
 * @param viewportValue Optional viewport value to filter by (e.g., 'Desktop', 'Mobile')
 */
export async function getSelectorPropsForGroup(
  componentSet: ComponentSetNode,
  variantFilter: Record<string, string>,
  viewportValue?: string,
): Promise<Record<string, object | string>> {
  const setDefs = getComponentPropertyDefinitions(componentSet)
  const hasEffect = !!setDefs.effect
  if (!hasEffect) return {}

  // Build cache key from componentSet.id + filter + viewport
  const setId = componentSet.id
  const filterParts: string[] = []
  for (const k in variantFilter) {
    filterParts.push(`${k}=${variantFilter[k]}`)
  }
  filterParts.sort()
  const filterKey = filterParts.join('|')
  const cacheKey = setId ? `${setId}::${filterKey}::${viewportValue ?? ''}` : ''

  if (cacheKey) {
    const cached = selectorPropsForGroupCache.get(cacheKey)
    if (cached) return cached
  }

  const promise = computeSelectorPropsForGroup(
    componentSet,
    variantFilter,
    viewportValue,
  )

  if (cacheKey) {
    selectorPropsForGroupCache.set(cacheKey, promise)
  }
  return promise
}

async function computeSelectorPropsForGroup(
  componentSet: ComponentSetNode,
  variantFilter: Record<string, string>,
  viewportValue?: string,
): Promise<Record<string, object | string>> {
  // Find viewport key if needed
  const groupDefs = getComponentPropertyDefinitions(componentSet)
  const viewportKey = Object.keys(groupDefs).find(
    (key) => key.toLowerCase() === 'viewport',
  )

  // Filter components matching the variant filter (and viewport if specified)
  const matchingComponents = componentSet.children.filter((child) => {
    if (child.type !== 'COMPONENT') return false
    const variantProps = child.variantProperties || {}

    // Check all filter conditions match
    for (const key in variantFilter) {
      if (variantProps[key] !== variantFilter[key]) return false
    }

    // Check viewport if specified
    if (viewportValue && viewportKey) {
      if (variantProps[viewportKey] !== viewportValue) return false
    }

    return true
  }) as ComponentNode[]

  if (matchingComponents.length === 0) return {}

  // Find the default component in this group (effect=default)
  const defaultComponent = matchingComponents.find(
    (c) => c.variantProperties?.effect === 'default',
  )
  if (!defaultComponent) return {}

  const tGroup = perfStart()
  const defaultProps = await getProps(defaultComponent)
  const result: Record<string, object | string> = {}
  const diffKeys = new Set<string>()

  // Calculate diffs for each effect state — fire all getProps() concurrently
  const effectComponents = matchingComponents.filter((c) => {
    const effect = c.variantProperties?.effect
    return effect && effect !== 'default'
  })
  const effectPropsResults: {
    effect: string
    props: Record<string, unknown>
  }[] = []
  for (const component of effectComponents) {
    const effect = component.variantProperties?.effect as string
    const props = await getProps(component)
    effectPropsResults.push({ effect, props })
  }
  for (const { effect, props } of effectPropsResults) {
    const def = difference(props, defaultProps)
    if (Object.keys(def).length === 0) continue

    result[`_${effect}`] = def
    for (const key of Object.keys(def)) {
      diffKeys.add(key)
    }
  }

  // Add transition if available
  if (diffKeys.size > 0) {
    const findNodeAction = (action: Action) => action.type === 'NODE'
    const getTransition = (reaction: Reaction) =>
      reaction.actions?.find(findNodeAction)?.transition
    const transition = defaultComponent.reactions
      ?.flatMap(getTransition)
      .flat()[0]
    if (transition?.type === 'SMART_ANIMATE') {
      const keys: string[] = []
      for (const key of diffKeys) keys.push(toTransitionPropertyName(key))
      keys.sort()
      result.transition = `${fmtPct(transition.duration)}ms ${transition.easing.type.toLocaleLowerCase().replaceAll('_', '-')}`
      result.transitionProperty = keys.join(',')
    }
  }

  perfEnd('getSelectorPropsForGroup.inner()', tGroup)
  return result
}

function triggerTypeToEffect(triggerType: Trigger['type'] | undefined) {
  if (!triggerType) return undefined
  switch (triggerType) {
    case 'ON_HOVER':
      return 'hover'
    case 'ON_PRESS':
      return 'active'
  }
}

function difference(a: Record<string, unknown>, b: Record<string, unknown>) {
  const result: Record<string, unknown> = {}
  for (const key in a) {
    const value = a[key]
    if (value !== undefined && b[key] !== value) {
      result[key] = value
    }
  }
  return result
}