import { resetTheme } from '../../services/theme-engine'
import { AccentSwitcher } from './accent-switcher'
import { DensitySwitcher } from './density-switcher'
import { FontStackPicker } from './font-stack-picker'
import { GlassSlider } from './glass-slider'
import { IconSetPicker } from './icon-set-picker'
import { IconUsageMatrix } from './icon-usage-matrix'
import { RadiusSlider } from './radius-slider'
import { ThemePresetGrid } from './theme-preset-grid'
import { ThemePreviewTile } from './theme-preview-tile'
import { ThemeSwitcher } from './theme-switcher'

export interface ThemeStudioOptions {
  showTabs?: boolean
  showHeader?: boolean
  showBrandSection?: boolean
}

const DEFAULT_OPTIONS: Required<ThemeStudioOptions> = {
  showTabs: true,
  showHeader: true,
  showBrandSection: true,
}

function el<K extends keyof HTMLElementTagNameMap>(
  tag: K,
  className?: string,
  text?: string
): HTMLElementTagNameMap[K] {
  const node = document.createElement(tag)
  if (className) node.className = className
  if (text !== undefined) node.textContent = text
  return node
}

function buildSection(
  title: string,
  helper: string,
  body: HTMLElement,
  rightSlot?: HTMLElement
): HTMLElement {
  const section = el('section', 'theme-studio-section')
  const head = el('div', 'theme-studio-section__head')
  const titles = el('div', 'theme-studio-section__titles')
  titles.appendChild(el('h3', 'theme-studio-section__title', title))
  titles.appendChild(el('div', 'theme-studio-section__helper', helper))
  head.appendChild(titles)
  if (rightSlot) head.appendChild(rightSlot)
  section.appendChild(head)
  section.appendChild(body)
  return section
}

function buildTabStrip(): HTMLElement {
  const strip = el('div', 'theme-studio-tabs')
  const tabs = ['Profile', 'Organization', 'Appearance', 'About'] as const
  for (const tab of tabs) {
    const button = el('button', 'theme-studio-tab', tab)
    button.type = 'button'
    if (tab === 'Appearance') button.classList.add('is-active')
    button.disabled = tab !== 'Appearance'
    strip.appendChild(button)
  }
  return strip
}

function buildResetLink(): HTMLButtonElement {
  const button = el('button', 'theme-studio-link', 'Reset to default')
  button.type = 'button'
  button.addEventListener('click', () => {
    resetTheme()
  })
  return button
}

function buildAdvanced(): HTMLElement {
  const wrap = el('div', 'theme-studio-advanced')

  const densityRow = el('div', 'theme-studio-advanced__row')
  densityRow.appendChild(new DensitySwitcher().el)
  wrap.appendChild(densityRow)

  const radiusRow = el('div', 'theme-studio-advanced__row')
  radiusRow.appendChild(new RadiusSlider().el)
  wrap.appendChild(radiusRow)

  const matrixHead = el('div', 'theme-studio-advanced__matrix-head')
  matrixHead.appendChild(el('h4', 'theme-studio-advanced__matrix-title', 'Per-icon mapping'))
  matrixHead.appendChild(
    el(
      'p',
      'theme-studio-advanced__matrix-helper',
      'Rebind any icon slot. Useful if your team thinks of detection as a bug instead of a shield.'
    )
  )
  wrap.appendChild(matrixHead)

  wrap.appendChild(new IconUsageMatrix().el)
  return wrap
}

function buildAdvancedSection(): HTMLElement {
  const details = document.createElement('details')
  details.className = 'theme-studio-section theme-studio-section--advanced'

  const summary = document.createElement('summary')
  summary.className = 'theme-studio-section__head theme-studio-section__head--summary'

  const titles = el('div', 'theme-studio-section__titles')
  titles.appendChild(el('h3', 'theme-studio-section__title', 'Advanced'))
  titles.appendChild(
    el('div', 'theme-studio-section__helper', 'Density, corner radius, and per-icon overrides')
  )
  summary.appendChild(titles)

  const toggle = el('span', 'theme-studio-section__chev', 'Show')
  summary.appendChild(toggle)

  details.appendChild(summary)
  details.appendChild(buildAdvanced())

  details.addEventListener('toggle', () => {
    toggle.textContent = details.open ? 'Hide' : 'Show'
  })

  return details
}

export class ThemeStudio {
  public readonly el: HTMLElement
  private readonly options: Required<ThemeStudioOptions>

  constructor(options: ThemeStudioOptions = {}) {
    this.options = { ...DEFAULT_OPTIONS, ...options }
    this.el = document.createElement('section')
    this.el.className = 'theme-studio-pane'
    this.render()
  }

  render(): void {
    this.el.innerHTML = ''

    if (this.options.showTabs) {
      this.el.appendChild(buildTabStrip())
    }

    if (this.options.showHeader) {
      const header = el('header', 'theme-studio-pane__header')
      header.appendChild(el('h1', 'theme-studio-pane__title', 'Appearance'))
      header.appendChild(
        el(
          'p',
          'theme-studio-pane__subtitle',
          'Customize how CounterMeasure looks. Pick a preset, tweak the color mode, accent, transparency, typography, and icons. Changes apply immediately and persist on this device.'
        )
      )
      this.el.appendChild(header)
    }

    this.el.appendChild(
      buildSection(
        'Start from a preset',
        'Curated combinations of mode, accent, font, and icon style.',
        new ThemePresetGrid().el,
        buildResetLink()
      )
    )

    this.el.appendChild(
      buildSection(
        'Live preview',
        'A miniature app shell that re-renders as you tweak settings below.',
        new ThemePreviewTile().el
      )
    )

    this.el.appendChild(
      buildSection('Color Mode', 'Choose how the interface looks.', new ThemeSwitcher().el)
    )
    this.el.appendChild(
      buildSection(
        'Accent Color',
        'Pick a color that highlights actions and links.',
        new AccentSwitcher().el
      )
    )
    this.el.appendChild(
      buildSection(
        'Surface Transparency',
        'How translucent panels, hover states, and overlays appear.',
        new GlassSlider({ expanded: true }).el
      )
    )
    this.el.appendChild(
      buildSection(
        'Typography',
        'Select the typeface used throughout the app.',
        new FontStackPicker().el
      )
    )
    this.el.appendChild(
      buildSection(
        'Icon Set',
        'Choose the icon style for navigation and content.',
        new IconSetPicker().el
      )
    )

    if (this.options.showBrandSection) {
      const brandBody = el('div', 'theme-studio-brand-note')
      brandBody.appendChild(
        el(
          'p',
          'theme-studio-brand-note__text',
          'Brand assets live under design-system brand resources. Switch icon sets to CounterMeasure above to apply the bespoke security glyphs.'
        )
      )
      this.el.appendChild(
        buildSection('Brand', 'Logo, wordmark, and brand glyph references.', brandBody)
      )
    }
    this.el.appendChild(buildAdvancedSection())
  }
}

export function renderThemeStudio(
  container: HTMLElement,
  options?: ThemeStudioOptions
): ThemeStudio {
  const studio = new ThemeStudio(options)
  container.innerHTML = ''
  container.appendChild(studio.el)
  return studio
}
