import type { PaletteSet, ColorTokens, ShapeTokens } from './types'
import { cssVarFor } from './css-var'
import { DEFAULT_RAMPS } from './ramps'

const RAMP_KEYS = ['neutral', 'accent', 'success', 'warning', 'danger', 'info'] as const

function decls(colors: ColorTokens, shape: ShapeTokens, mode: 'light' | 'dark'): string {
  const lines: string[] = []
  for (const [k, v] of Object.entries(colors)) lines.push(`  ${cssVarFor(k)}: ${v};`)
  for (const [k, v] of Object.entries(shape)) lines.push(`  ${cssVarFor(k)}: ${v};`)
  for (const rampName of RAMP_KEYS) {
    const ramp = DEFAULT_RAMPS[rampName][mode]
    ramp.steps.forEach((step, index) => lines.push(`  --mod-${rampName}-${index + 1}: ${step};`))
    ramp.alpha.forEach((alpha, index) => lines.push(`  --mod-${rampName}-a${index + 1}: ${alpha};`))
    lines.push(`  --mod-${rampName}-contrast: ${ramp.contrast};`)
  }
  lines.push(`  color-scheme: ${mode};`)
  return lines.join('\n')
}

/** Build-time static CSS for SSR/no-JS first paint. Palette-scoped; group 3 resolves system-mode with no flash. */
export function themeToCss(pkg: PaletteSet): string {
  const blocks: string[] = []
  for (const palette of pkg.palettes) {
    const base = `[data-theme="${pkg.id}"][data-palette="${palette.id}"]`
    const light = decls(palette.colors.light, pkg.shape.light, 'light')
    const dark = decls(palette.colors.dark, pkg.shape.dark, 'dark')
    // 1. explicit light
    blocks.push(`${base}[data-mode="light"] {\n${light}\n}`)
    // 2. explicit dark
    blocks.push(`${base}[data-mode="dark"] {\n${dark}\n}`)
    // 3. system: light as the un-wrapped default + dark under the media query (anti-FOUC, no JS)
    blocks.push(`${base}:not([data-mode]) {\n${light}\n}`)
    blocks.push(`@media (prefers-color-scheme: dark) {\n  ${base}:not([data-mode]) {\n${dark}\n  }\n}`)
  }
  return blocks.join('\n\n')
}