import { html, css, TemplateResult, CSSResultArray, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import NileElement from '../../internal/nile-element';

export interface InsertMenuItem {
  label: string;
  description?: string;
}

/**
 * Generic list popover for "pick one and insert" toolbar actions — used by the
 * template and merge-field pickers. Emits `wysiwyg-insert-select` { index } and
 * `wysiwyg-insert-cancel`. Never takes focus, so the editor selection survives.
 */
@customElement('nile-wysiwyg-insert-menu')
export class NileWysiwygInsertMenu extends NileElement {
  @property({ type: Boolean, reflect: true }) open = false;

  @property({ type: String }) heading = '';

  @property({ type: String, attribute: 'empty-text' }) emptyText = 'Nothing configured.';

  @property({ attribute: false }) items: InsertMenuItem[] = [];

  public static get styles(): CSSResultArray {
    return [
      css`
        :host {
          font-family: var(
            --nile-font-family-sans-serif,
            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
          );
          position: absolute;
          z-index: 20;
          display: none;
        }

        :host([open]) {
          display: block;
        }

        .panel {
          width: 260px;
          max-height: 300px;
          overflow-y: auto;
          overscroll-behavior: contain;
          padding: 6px;
          background: var(--nile-wysiwyg-popover-bg, #ffffff);
          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
          border-radius: 8px;
          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
        }

        .heading {
          font-size: 11px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.04em;
          color: var(--nile-colors-neutral-600, #667085);
          padding: 4px 8px;
        }

        .item {
          display: block;
          width: 100%;
          text-align: left;
          font: inherit;
          padding: 6px 8px;
          border: none;
          border-radius: 6px;
          background: transparent;
          cursor: pointer;
          color: var(--nile-colors-dark-900, #101828);
        }

        .item:hover {
          background: var(--nile-colors-neutral-100, #f2f4f7);
        }

        .item .label {
          font-size: 13px;
        }

        .item .desc {
          font-size: 11px;
          color: var(--nile-colors-neutral-600, #667085);
          margin-top: 1px;
        }

        .empty {
          font-size: 12px;
          color: var(--nile-colors-neutral-600, #667085);
          padding: 8px;
        }
      `,
    ];
  }

  private handleKeydown(event: KeyboardEvent): void {
    if (event.key === 'Escape') {
      event.stopPropagation();
      this.emit('wysiwyg-insert-cancel');
    }
  }

  public render(): TemplateResult {
    return html`
      <div
        class="panel"
        part="insert-menu"
        role="menu"
        @keydown=${this.handleKeydown}
        @mousedown=${(e: Event) => e.preventDefault()}
      >
        ${this.heading ? html`<div class="heading">${this.heading}</div>` : nothing}
        ${this.items.length === 0
          ? html`<div class="empty">${this.emptyText}</div>`
          : this.items.map(
              (item, index) => html`
                <button
                  type="button"
                  class="item"
                  role="menuitem"
                  @click=${() => this.emit('wysiwyg-insert-select', { index })}
                >
                  <div class="label">${item.label}</div>
                  ${item.description
                    ? html`<div class="desc">${item.description}</div>`
                    : nothing}
                </button>
              `
            )}
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'nile-wysiwyg-insert-menu': NileWysiwygInsertMenu;
  }
}