/**
 * Accent Switcher — preview-only accent selector for design-system adoption checks.
 *
 * Reads/writes through the theme engine. Listens to `cm:theme-change` to
 * refresh pressed state when presets / theme studio change the accent.
 */

import { ACCENT_PALETTES, getTheme, setThemePartial } from '../../services/theme-engine'
import type { AccentId } from '../../services/theme-engine'

const ACCENTS: ReadonlyArray<{ id: AccentId; label: string; color: string }> = [
  { id: 'orange', label: 'Orange', color: ACCENT_PALETTES.orange.brand },
  { id: 'cyan', label: 'Cyan', color: ACCENT_PALETTES.cyan.brand },
  { id: 'violet', label: 'Violet', color: ACCENT_PALETTES.violet.brand },
  { id: 'rose', label: 'Rose', color: ACCENT_PALETTES.rose.brand },
  { id: 'emerald', label: 'Emerald', color: ACCENT_PALETTES.emerald.brand },
  { id: 'amber', label: 'Amber', color: ACCENT_PALETTES.amber.brand },
]

function isAccent(value: string | null | undefined): value is AccentId {
  return ACCENTS.some(accent => accent.id === value)
}

export function getCurrentAccent(): AccentId {
  return getTheme().accent
}

export function setPreviewAccent(accent: AccentId): void {
  setThemePartial({ accent })
  if (typeof document !== 'undefined') {
    document.dispatchEvent(new CustomEvent('preview:accent-change', { detail: { accent } }))
  }
}

export function applyAccentFromUrl(): void {
  if (typeof window === 'undefined') return
  const accent = new URLSearchParams(window.location.search).get('accent')
  if (isAccent(accent)) {
    setPreviewAccent(accent)
  }
}

export class AccentSwitcher {
  public readonly el: HTMLElement

  constructor() {
    this.el = document.createElement('div')
    this.el.className = 'preview-accent-switcher'

    const label = document.createElement('span')
    label.className = 'preview-accent-switcher__label'
    label.textContent = 'Accent'
    this.el.appendChild(label)

    const buttons = document.createElement('div')
    buttons.className = 'preview-accent-switcher__buttons'

    for (const accent of ACCENTS) {
      const btn = document.createElement('button')
      btn.type = 'button'
      btn.className = 'preview-accent-switcher__btn'
      btn.dataset.accent = accent.id
      btn.title = accent.label
      btn.setAttribute('aria-label', `Use ${accent.label} accent`)

      const swatch = document.createElement('span')
      swatch.className = 'preview-accent-swatch'
      swatch.style.background = accent.color
      btn.appendChild(swatch)

      btn.addEventListener('click', () => {
        setPreviewAccent(accent.id)
      })

      buttons.appendChild(btn)
    }

    this.el.appendChild(buttons)
    document.addEventListener('preview:accent-change', () => this.updateActive())
    document.addEventListener('cm:theme-change', () => this.updateActive())
    this.updateActive()
  }

  private updateActive(): void {
    const current = getCurrentAccent()
    const buttons = this.el.querySelectorAll<HTMLButtonElement>('.preview-accent-switcher__btn')
    for (const btn of buttons) {
      const isActive = btn.dataset.accent === current
      btn.classList.toggle('preview-accent-switcher__btn--active', isActive)
      btn.setAttribute('aria-pressed', String(isActive))
    }
  }
}
