/**
 * Theme Preview Tile — port of Theme.jsx `ThemePreviewTile` (~L484-522).
 *
 * Mini app-shell: header with brand mark + wordmark + search/bell, body with
 * a "DETECTIONS" eyebrow + 3 detection rows + a "Connect source" CTA. Re-renders
 * reactively on `cm:theme-change` so users see preset/accent/font changes
 * immediately.
 */

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

const SHIELD_PATH = 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'
const BUG_PATH =
  'M12 2l4 5h-8z M12 7v15 M5 12l-2 2 2 2 M19 12l2 2-2 2 M8 22h8 M3 9c2 0 3 1 4 2 M21 9c-2 0-3 1-4 2'
const SKULL_PATH =
  'M12 3a8 8 0 0 0-8 8v6l3 1v3h2v-3h2v3h2v-3h2v3h2v-3l3-1v-6a8 8 0 0 0-8-8z M9 12h.01 M15 12h.01'
const SEARCH_PATH = 'M11 11m-7 0a7 7 0 1 0 14 0 7 7 0 1 0-14 0 M21 21l-4.35-4.35'
const BELL_PATH = 'M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 0 1-3.46 0'
const PLUG_PATH = 'M12 2v4 M9 6h6 M10 6v4a4 4 0 0 0 8 0V6'

function svgIcon(d: string, size = 14): SVGElement {
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
  svg.setAttribute('width', String(size))
  svg.setAttribute('height', String(size))
  svg.setAttribute('viewBox', '0 0 24 24')
  svg.setAttribute('fill', 'none')
  svg.setAttribute('stroke', 'currentColor')
  svg.setAttribute('stroke-width', '2')
  svg.setAttribute('stroke-linecap', 'round')
  svg.setAttribute('stroke-linejoin', 'round')
  for (const segment of d.split(/(?=M)/g)) {
    const trimmed = segment.trim()
    if (!trimmed) continue
    const p = document.createElementNS('http://www.w3.org/2000/svg', 'path')
    p.setAttribute('d', trimmed)
    svg.appendChild(p)
  }
  return svg
}

interface RowSpec {
  iconPath: string
  label: string
  pillText: string
  pillBg: string
  pillColor: string
}

export class ThemePreviewTile {
  public readonly el: HTMLElement

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

  private render(): void {
    const theme = getTheme()
    const accent = ACCENT_PALETTES[theme.accent]
    this.el.dataset.mode = theme.mode
    this.el.innerHTML = ''

    // Header
    const head = document.createElement('div')
    head.className = 'theme-studio-preview-tile__head'

    const mark = document.createElement('span')
    mark.className = 'theme-studio-preview-tile__mark'
    mark.style.background = accent.brand
    mark.appendChild(svgIcon(SHIELD_PATH, 12))
    head.appendChild(mark)

    const title = document.createElement('span')
    title.className = 'theme-studio-preview-tile__title'
    title.textContent = 'CounterMeasure'
    head.appendChild(title)

    const spacer = document.createElement('span')
    spacer.className = 'theme-studio-preview-tile__spacer'
    head.appendChild(spacer)

    const searchBtn = document.createElement('span')
    searchBtn.className = 'theme-studio-preview-tile__icon'
    searchBtn.appendChild(svgIcon(SEARCH_PATH, 14))
    head.appendChild(searchBtn)

    const bellBtn = document.createElement('span')
    bellBtn.className = 'theme-studio-preview-tile__icon'
    bellBtn.appendChild(svgIcon(BELL_PATH, 14))
    head.appendChild(bellBtn)

    this.el.appendChild(head)

    // Body
    const body = document.createElement('div')
    body.className = 'theme-studio-preview-tile__body'

    const section = document.createElement('div')
    section.className = 'theme-studio-preview-tile__section'

    const eyebrow = document.createElement('div')
    eyebrow.className = 'theme-studio-preview-tile__eyebrow'
    eyebrow.textContent = 'DETECTIONS'
    section.appendChild(eyebrow)

    const rows: RowSpec[] = [
      {
        iconPath: SHIELD_PATH,
        label: 'Cobalt Strike beacon',
        pillText: '87',
        pillBg: accent.soft,
        pillColor: accent.brand,
      },
      {
        iconPath: BUG_PATH,
        label: 'Lateral movement (PsExec)',
        pillText: 'HIGH',
        pillBg: 'rgba(239,68,68,0.10)',
        pillColor: '#f87171',
      },
      {
        iconPath: SKULL_PATH,
        label: 'APT29 — kerberoasting',
        pillText: '23',
        pillBg: 'rgba(255,255,255,0.06)',
        pillColor: 'var(--text-3)',
      },
    ]

    for (const row of rows) {
      const r = document.createElement('div')
      r.className = 'theme-studio-preview-tile__row'
      r.appendChild(svgIcon(row.iconPath, 14))

      const label = document.createElement('span')
      label.className = 'theme-studio-preview-tile__row-label'
      label.textContent = row.label
      r.appendChild(label)

      const pill = document.createElement('span')
      pill.className = 'theme-studio-preview-tile__pill'
      pill.style.background = row.pillBg
      pill.style.color = row.pillColor
      pill.textContent = row.pillText
      r.appendChild(pill)

      section.appendChild(r)
    }
    body.appendChild(section)

    const cta = document.createElement('button')
    cta.type = 'button'
    cta.className = 'theme-studio-preview-tile__cta'
    cta.style.background = accent.brand
    cta.appendChild(svgIcon(PLUG_PATH, 12))
    const ctaLabel = document.createElement('span')
    ctaLabel.textContent = 'Connect source'
    cta.appendChild(ctaLabel)
    body.appendChild(cta)

    this.el.appendChild(body)
  }
}
