/**
 * Theme Preset Grid — 6 curated preset cards.
 *
 * Modeled on Theme.jsx ThemePresetGrid (~L460-482). Each card shows a small
 * art preview (header bar + accent dot + content card with bars) and the
 * preset's label + description. Clicking applies the preset to the engine.
 */

import {
  ACCENT_PALETTES,
  COLOR_MODES,
  THEME_PRESETS,
  findActivePresetId,
  getTheme,
  setThemeFull,
} from '../../services/theme-engine'
import type { ThemePreset } from '../../services/theme-engine'

function buildArt(preset: ThemePreset): HTMLElement {
  const accent = ACCENT_PALETTES[preset.theme.accent]
  const mode = COLOR_MODES[preset.theme.mode]

  const art = document.createElement('div')
  art.className = 'theme-studio-preset__art'
  art.style.background = mode.swatch[1]

  const bar = document.createElement('div')
  bar.className = 'theme-studio-preset__art-bar'
  bar.style.background = mode.swatch[0]
  bar.style.borderColor = mode.swatch[2]

  const dot = document.createElement('span')
  dot.className = 'theme-studio-preset__art-dot'
  dot.style.background = accent.brand
  bar.appendChild(dot)

  for (let i = 0; i < 2; i++) {
    const line = document.createElement('span')
    line.className = 'theme-studio-preset__art-line'
    bar.appendChild(line)
  }
  art.appendChild(bar)

  const card = document.createElement('div')
  card.className = 'theme-studio-preset__art-card'
  card.style.background = mode.swatch[2]
  card.style.borderColor = 'rgba(255,255,255,0.10)'

  const pill = document.createElement('span')
  pill.className = 'theme-studio-preset__art-pill'
  pill.style.background = accent.soft
  pill.style.color = accent.brand
  pill.style.borderColor = accent.brand
  pill.textContent = preset.label.split(' ')[0] ?? preset.label
  card.appendChild(pill)

  const bars = document.createElement('span')
  bars.className = 'theme-studio-preset__art-bars'
  const widths = ['70%', '46%', '60%']
  const colors = [accent.brand, 'rgba(255,255,255,0.30)', 'rgba(255,255,255,0.20)']
  for (let i = 0; i < 3; i++) {
    const b = document.createElement('i')
    b.style.background = colors[i] ?? 'rgba(255,255,255,0.20)'
    b.style.width = widths[i] ?? '60%'
    bars.appendChild(b)
  }
  card.appendChild(bars)
  art.appendChild(card)

  return art
}

export class ThemePresetGrid {
  public readonly el: HTMLElement

  constructor() {
    this.el = document.createElement('div')
    this.el.className = 'theme-studio-presets'
    this.render()
    document.addEventListener('cm:theme-change', () => this.updateActive())
  }

  private render(): void {
    this.el.innerHTML = ''
    const activeId = findActivePresetId(getTheme())

    for (const preset of THEME_PRESETS) {
      const card = document.createElement('button')
      card.type = 'button'
      card.className = 'theme-studio-preset'
      card.dataset.presetId = preset.id
      if (activeId === preset.id) card.classList.add('is-active')
      card.setAttribute('aria-pressed', String(activeId === preset.id))
      card.setAttribute('aria-label', `Apply ${preset.label} preset`)

      card.appendChild(buildArt(preset))

      const name = document.createElement('div')
      name.className = 'theme-studio-preset__name'
      name.textContent = preset.label
      card.appendChild(name)

      const desc = document.createElement('div')
      desc.className = 'theme-studio-preset__desc'
      desc.textContent = preset.description
      card.appendChild(desc)

      card.addEventListener('click', () => {
        setThemeFull({ ...preset.theme, iconOverrides: {} })
      })

      this.el.appendChild(card)
    }
  }

  private updateActive(): void {
    const activeId = findActivePresetId(getTheme())
    const cards = this.el.querySelectorAll<HTMLButtonElement>('.theme-studio-preset')
    for (const card of cards) {
      const isActive = card.dataset.presetId === activeId
      card.classList.toggle('is-active', isActive)
      card.setAttribute('aria-pressed', String(isActive))
    }
  }
}
