import { html, css, TemplateResult, CSSResultArray } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import NileElement from '../../internal/nile-element';
import { renderGlyph } from '../../internal/glyph';
import type { ToolbarState } from '../engine/selection-state';

interface EmbedOp {
  label: string;
  icon?: string;
  text?: string;
  command: string;
  attrs?: Record<string, unknown>;
  active?: (s: ToolbarState) => boolean;
}

const OPS: EmbedOp[] = [
  {
    label: 'Align left',
    icon: 'format_align_left',
    command: 'setEmbedAlign',
    attrs: { align: 'left' },
    active: s => s.embedAlign === 'left' || s.embedAlign === null,
  },
  {
    label: 'Align center',
    icon: 'format_align_middle',
    command: 'setEmbedAlign',
    attrs: { align: 'center' },
    active: s => s.embedAlign === 'center',
  },
  {
    label: 'Align right',
    icon: 'format_align_right',
    command: 'setEmbedAlign',
    attrs: { align: 'right' },
    active: s => s.embedAlign === 'right',
  },
  { label: 'Delete video', icon: 'ng-trash-01', command: 'deleteEmbed' },
];

/**
 * Compact floating bar shown while a video embed is selected — mirrors the
 * image menu (align left/center/right, delete). The host positions it;
 * operations bubble up as `wysiwyg-command` events.
 */
@customElement('nile-wysiwyg-embed-menu')
export class NileWysiwygEmbedMenu extends NileElement {
  @property({ type: Boolean, reflect: true }) open = false;

  @property({ attribute: false }) toolbarState?: ToolbarState;

  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: 15;
          display: none;
        }

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

        .menu {
          display: flex;
          gap: 2px;
          padding: 4px;
          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));
        }

        button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 26px;
          height: 26px;
          padding: 0 4px;
          border: none;
          border-radius: 5px;
          background: transparent;
          cursor: pointer;
          font-size: 12px;
          font-weight: 600;
          color: var(--nile-colors-neutral-700, #344054);
        }

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

        button[data-active] {
          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));
        }
      `,
    ];
  }

  public render(): TemplateResult {
    const state = this.toolbarState;
    return html`
      <div class="menu" part="embed-menu" @mousedown=${(e: Event) => e.preventDefault()}>
        ${OPS.map(
          op => html`
            <button
              type="button"
              title=${op.label}
              aria-label=${op.label}
              ?data-active=${state && op.active ? op.active(state) : false}
              @click=${() => this.emit('wysiwyg-command', { name: op.command, attrs: op.attrs })}
            >
              ${op.icon ? renderGlyph(op.icon, 16) : op.text}
            </button>
          `
        )}
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'nile-wysiwyg-embed-menu': NileWysiwygEmbedMenu;
  }
}