/**
 * Icon Usage Matrix — 16 semantic-slot rows.
 *
 * Renders the slots from `ICON_USAGES`. Each row shows the slot's label and
 * its current binding; clicking "Change" cycles through the slot's alternates.
 * Persists into `theme.iconOverrides`.
 */

import { ICON_USAGES, getTheme, setThemePartial } from '../../services/theme-engine'
import type { IconUsage } from '../../services/theme-engine'

export class IconUsageMatrix {
  public readonly el: HTMLElement

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

  private currentIcon(usage: IconUsage): string {
    const overrides = getTheme().iconOverrides ?? {}
    return overrides[usage.id] ?? usage.defaultIcon
  }

  private cycle(usage: IconUsage): void {
    const current = this.currentIcon(usage)
    const list = usage.alternates.length > 0 ? usage.alternates : [usage.defaultIcon]
    const idx = list.indexOf(current)
    const next = list[(idx + 1) % list.length] ?? usage.defaultIcon
    const overrides = { ...(getTheme().iconOverrides ?? {}) }
    if (next === usage.defaultIcon) {
      delete overrides[usage.id]
    } else {
      overrides[usage.id] = next
    }
    setThemePartial({ iconOverrides: overrides })
  }

  private reset(usage: IconUsage): void {
    const overrides = { ...(getTheme().iconOverrides ?? {}) }
    delete overrides[usage.id]
    setThemePartial({ iconOverrides: overrides })
  }

  private render(): void {
    this.el.innerHTML = ''
    for (const usage of ICON_USAGES) {
      const row = document.createElement('div')
      row.className = 'theme-studio-icon-matrix__row'
      row.dataset.slot = usage.id

      const label = document.createElement('div')
      label.className = 'theme-studio-icon-matrix__label'
      label.textContent = usage.label
      row.appendChild(label)

      const value = document.createElement('code')
      value.className = 'theme-studio-icon-matrix__icon'
      value.textContent = this.currentIcon(usage)
      row.appendChild(value)

      const actions = document.createElement('div')
      actions.className = 'theme-studio-icon-matrix__actions'

      const change = document.createElement('button')
      change.type = 'button'
      change.className = 'theme-studio-icon-matrix__change'
      change.textContent = 'Change'
      change.addEventListener('click', () => this.cycle(usage))
      actions.appendChild(change)

      const reset = document.createElement('button')
      reset.type = 'button'
      reset.className = 'theme-studio-icon-matrix__reset'
      reset.textContent = 'Reset'
      reset.addEventListener('click', () => this.reset(usage))
      actions.appendChild(reset)

      row.appendChild(actions)
      this.el.appendChild(row)
    }
  }

  private refreshLabels(): void {
    const rows = this.el.querySelectorAll<HTMLElement>('.theme-studio-icon-matrix__row')
    for (const row of rows) {
      const slotId = row.dataset.slot
      const usage = ICON_USAGES.find(u => u.id === slotId)
      if (!usage) continue
      const code = row.querySelector<HTMLElement>('.theme-studio-icon-matrix__icon')
      if (code) code.textContent = this.currentIcon(usage)
    }
  }
}
