import type { FormatFnArguments } from 'style-dictionary/types'

import prettier from 'prettier'

import { processGridTokens } from './processors/grid-processor.js'
import { processTypographyTokens } from './processors/typography-processor.js'
import { getPrefixes } from './utils.js'

export const name = 'css/unity-theme'

export async function unityThemeFormat(args: FormatFnArguments) {
  const { dictionary, options } = args
  const { variablePrefix } = getPrefixes(options)

  // Build @theme block directly from the dictionary.
  // Every variable becomes a var(--uy-*) reference so the CSS cascade
  // controls which value is active at runtime.
  // Exception: breakpoint variables must be static pixel values because
  // Tailwind resolves them at build time to generate @media rules.
  const themeLines: string[] = ['--color-*: initial;']

  for (const token of dictionary.allTokens) {
    // Strip the prefix from the declaration name (Tailwind adds it)
    const unprefixedName = token.name.replace(
      new RegExp(`^${variablePrefix}`),
      '',
    )

    if (
      unprefixedName.startsWith('breakpoint-') ||
      unprefixedName.startsWith('container-')
    ) {
      themeLines.push(`  --${unprefixedName}: ${token.$value};`)
    } else {
      themeLines.push(`  --${unprefixedName}: var(--${token.name});`)
    }
  }

  const themeBlock = `@theme {\n${themeLines.join('\n')}\n}`

  const gridClasses = processGridTokens(dictionary, options)
  const typographyClasses = processTypographyTokens(dictionary, options)

  return prettier.format(
    `
    ${themeBlock}

    ${gridClasses}

    ${typographyClasses}
  `,
    { parser: 'css', printWidth: 120, tabWidth: 2, useTabs: false },
  )
}