import { writeFile } from 'fs/promises'
import { join } from 'path'
import { tokens } from './tokens'

type TokenValue = {
  light: string
  dark: string
}

type TokenCategory = Record<string, TokenValue>

type Tokens = Record<string, TokenCategory>

type CSSVariables = {
  light: string[]
  dark: string[]
}

async function generateTokens(): Promise<boolean> {
  const cssVariables: CSSVariables = {
    light: [],
    dark: [],
  }

  // Process each category
  Object.entries(tokens as Tokens).forEach(([categoryName, category]) => {
    // Add category comment
    cssVariables.light.push(`\n    /* ${categoryName} */`)
    cssVariables.dark.push(`\n    /* ${categoryName} */`)

    // Process each token in the category
    Object.entries(category).forEach(([tokenName, token]) => {
      const cssVariable = `--${tokenName}`

      // Add light mode value
      cssVariables.light.push(`${cssVariable}: ${token.light};`)

      // Add dark mode value
      cssVariables.dark.push(`${cssVariable}: ${token.dark};`)
    })
  })

  // Generate the CSS content with only the tokens
  const cssContent = `/* 
  ⚠️ WARNING: This file is auto-generated by generateTokens.ts
  Do not edit this file directly as your changes will be overwritten.
  
  To modify the design tokens:
  1. Edit libs/blocks/src/theme/tokens/tokens.ts
  2. The pre-commit hook will automatically generate this file when you commit
  
  If you need to generate this file manually (e.g., for testing):
  pnpm nx run @chainlink/blocks:generate-tokens
  
  The tokens are used to maintain consistent theming across the application.
*/

  :root {${cssVariables.light.join('\n    ')}
  }

  .dark {${cssVariables.dark.join('\n    ')}
  }
`

  // Write to tokens.css in the same directory
  const outputPath = join(process.cwd(), 'src/theme/tokens/tokens.css')
  await writeFile(outputPath, cssContent, 'utf-8')

  console.warn('✅ CSS variables generated at:', outputPath)
  return true
}

void generateTokens()