/**
 * Icon Set Picker — 5 icon-style tiles.
 *
 * Each tile renders a small icon row in the set's stroke style so users can
 * see how icons will look. The 'countermeasure' tile gets a Brand badge.
 */

import { CM_ICON_PATHS, ICON_SETS, getTheme, setThemePartial } from '../../services/theme-engine'
import type { IconSet, IconSetId } from '../../services/theme-engine'

const PREVIEW_ICON_PATHS: Record<string, string> = {
  Search: 'M11 11m-7 0a7 7 0 1 0 14 0 7 7 0 1 0-14 0 M21 21l-4.35-4.35',
  Shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
  Settings:
    'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9c.06.55.39 1.04.86 1.34',
}

function buildIconRow(set: IconSet, names: ReadonlyArray<string>): SVGElement {
  const wrap = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  wrap.setAttribute('viewBox', `0 0 ${24 * names.length + 8} 24`)
  wrap.setAttribute('width', String(24 * names.length + 8))
  wrap.setAttribute('height', '24')
  wrap.setAttribute('class', 'theme-studio-icon-tile__row')

  for (let i = 0; i < names.length; i++) {
    const name = names[i]
    if (!name) continue
    const useBrand = set.brand && CM_ICON_PATHS[name]
    const raw = useBrand ? CM_ICON_PATHS[name]! : (PREVIEW_ICON_PATHS[name] ?? '')
    if (!raw) continue
    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
    g.setAttribute('transform', `translate(${i * 28},0)`)
    g.setAttribute('fill', 'none')
    g.setAttribute('stroke', 'currentColor')
    g.setAttribute('stroke-width', String(set.strokeWidth))
    g.setAttribute('stroke-linecap', set.linecap)
    g.setAttribute('stroke-linejoin', set.linejoin)

    for (const segment of raw.split(/(?=M)/g)) {
      const trimmed = segment.trim()
      if (!trimmed) continue
      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
      path.setAttribute('d', trimmed)
      g.appendChild(path)
    }
    wrap.appendChild(g)
  }
  return wrap
}

export class IconSetPicker {
  public readonly el: HTMLElement

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

  private render(): void {
    this.el.innerHTML = ''
    const current = getTheme().iconSet
    const names = ['Search', 'Shield', 'Settings'] as const

    for (const id of Object.keys(ICON_SETS) as IconSetId[]) {
      const set = ICON_SETS[id]
      const tile = document.createElement('button')
      tile.type = 'button'
      tile.className = 'theme-studio-icon-tile'
      tile.dataset.iconSet = id
      if (id === current) tile.classList.add('is-active')
      tile.setAttribute('aria-pressed', String(id === current))
      tile.setAttribute('aria-label', `Use ${set.label} icon set`)

      const preview = document.createElement('div')
      preview.className = 'theme-studio-icon-tile__preview'
      preview.appendChild(buildIconRow(set, names))
      tile.appendChild(preview)

      const name = document.createElement('div')
      name.className = 'theme-studio-icon-tile__name'
      name.textContent = set.label
      tile.appendChild(name)

      const desc = document.createElement('div')
      desc.className = 'theme-studio-icon-tile__desc'
      desc.textContent = set.description
      tile.appendChild(desc)

      if (set.brand) {
        const badge = document.createElement('span')
        badge.className = 'theme-studio-icon-tile__badge'
        badge.textContent = 'Brand'
        tile.appendChild(badge)
      }

      tile.addEventListener('click', () => setThemePartial({ iconSet: id }))
      this.el.appendChild(tile)
    }
  }

  private updateActive(): void {
    const current = getTheme().iconSet
    const tiles = this.el.querySelectorAll<HTMLButtonElement>('.theme-studio-icon-tile')
    for (const tile of tiles) {
      const isActive = tile.dataset.iconSet === current
      tile.classList.toggle('is-active', isActive)
      tile.setAttribute('aria-pressed', String(isActive))
    }
  }
}
