/**
 * EmptyState - Placeholder for empty content areas
 * @countermeasure/web-components/display/empty-state
 */

import { resolveContainer } from '../../primitives/utils'
import { setSafeIconHtml } from '../../utils/sanitize'
import { type EmptyStateConfig } from './types'

export type { EmptyStateConfig } from './types'

export class EmptyState {
  public readonly el: HTMLDivElement

  private titleEl: HTMLHeadingElement
  private descriptionEl: HTMLParagraphElement | null = null
  private actionBtn: HTMLButtonElement | null = null
  private actionClickHandler: (() => void) | null = null

  constructor(config: EmptyStateConfig) {
    // Create root element
    this.el = document.createElement('div')
    this.el.className = 'cmm-empty-state'

    if (config.className) {
      this.el.classList.add(config.className)
    }

    // Icon (optional)
    if (config.icon !== undefined) {
      const iconEl = document.createElement('div')
      iconEl.className = 'cmm-empty-state__icon'
      setSafeIconHtml(iconEl, config.icon)
      this.el.appendChild(iconEl)
    }

    // Title
    this.titleEl = document.createElement('h3')
    this.titleEl.className = 'cmm-empty-state__title'
    this.titleEl.textContent = config.title
    this.el.appendChild(this.titleEl)

    // Description (optional)
    if (config.description !== undefined) {
      this.descriptionEl = document.createElement('p')
      this.descriptionEl.className = 'cmm-empty-state__description'
      this.descriptionEl.textContent = config.description
      this.el.appendChild(this.descriptionEl)
    }

    // Action (optional)
    if (config.action !== undefined) {
      const actionWrapper = document.createElement('div')
      actionWrapper.className = 'cmm-empty-state__action'

      this.actionBtn = document.createElement('button')
      this.actionBtn.className = 'cmm-btn cmm-btn--primary'
      this.actionBtn.textContent = config.action.label
      this.actionClickHandler = config.action.onClick
      this.actionBtn.addEventListener('click', this.actionClickHandler)

      actionWrapper.appendChild(this.actionBtn)
      this.el.appendChild(actionWrapper)
    }

    // Mount if container provided
    if (config.container !== undefined) {
      const parent = resolveContainer(config.container)
      parent.appendChild(this.el)
    }
  }

  /** Update the title text */
  setTitle(title: string): void {
    this.titleEl.textContent = title
  }

  /** Update or remove the description text */
  setDescription(desc: string | null): void {
    if (desc === null) {
      if (this.descriptionEl) {
        this.descriptionEl.remove()
        this.descriptionEl = null
      }
      return
    }

    if (this.descriptionEl) {
      this.descriptionEl.textContent = desc
    } else {
      this.descriptionEl = document.createElement('p')
      this.descriptionEl.className = 'cmm-empty-state__description'
      this.descriptionEl.textContent = desc

      // Insert before action wrapper if it exists, otherwise append
      const actionWrapper = this.el.querySelector('.cmm-empty-state__action')
      if (actionWrapper) {
        this.el.insertBefore(this.descriptionEl, actionWrapper)
      } else {
        this.el.appendChild(this.descriptionEl)
      }
    }
  }

  /** Remove from the DOM and clean up listeners */
  destroy(): void {
    if (this.actionBtn && this.actionClickHandler) {
      this.actionBtn.removeEventListener('click', this.actionClickHandler)
    }
    this.el.remove()
  }
}
