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

/**
 * Floating bookmark-insert panel: name an in-text anchor. Emits
 * `wysiwyg-bookmark-apply` detail: { id } and `wysiwyg-bookmark-cancel`.
 */
@customElement('nile-wysiwyg-bookmark-panel')
export class NileWysiwygBookmarkPanel extends NileElement {
  @property({ type: Boolean, reflect: true }) open = false;

  @state() private error = '';

  @query('.bookmark-panel__name') nameInput?: HTMLInputElement;

  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;
        }

        .bookmark-panel {
          display: flex;
          flex-direction: column;
          gap: 8px;
          min-width: 280px;
          padding: 12px;
          background: var(--nile-wysiwyg-popover-bg, #ffffff);
          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
          border-radius: var(--nile-wysiwyg-radius, 8px);
          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
          font-size: 13px;
        }

        label {
          display: flex;
          flex-direction: column;
          gap: 4px;
          color: var(--nile-colors-neutral-700, #344054);
        }

        input {
          font: inherit;
          padding: 6px 8px;
          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
          border-radius: 6px;
          outline: none;
        }

        input:focus {
          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
        }

        .hint {
          font-size: 12px;
          color: var(--nile-colors-neutral-500, #98a2b3);
        }

        .error {
          font-size: 12px;
          color: var(--nile-colors-error-600, #d92d20);
        }

        .actions {
          display: flex;
          gap: 8px;
          justify-content: flex-end;
        }

        button {
          font: inherit;
          padding: 6px 12px;
          border-radius: 6px;
          border: 1px solid transparent;
          cursor: pointer;
          background: transparent;
          color: var(--nile-colors-neutral-700, #344054);
        }

        button.primary {
          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
          color: #ffffff;
        }
      `,
    ];
  }

  public focusInput(): void {
    this.error = '';
    this.updateComplete.then(() => {
      if (this.nameInput) this.nameInput.value = '';
      this.nameInput?.focus();
    });
  }

  private handleSubmit(event: Event): void {
    event.preventDefault();
    // Anchor ids can't contain whitespace; collapse runs to a single dash.
    const id = (this.nameInput?.value ?? '').trim().replace(/\s+/g, '-');
    if (!id) {
      this.error = 'Enter a bookmark name.';
      return;
    }
    this.error = '';
    this.emit('wysiwyg-bookmark-apply', { id });
  }

  public render(): TemplateResult {
    return html`
      <form
        class="bookmark-panel"
        part="bookmark-panel"
        @submit=${this.handleSubmit}
        @keydown=${(e: KeyboardEvent) => {
          if (e.key === 'Escape') {
            e.stopPropagation();
            this.emit('wysiwyg-bookmark-cancel');
          }
        }}
      >
        <label>
          Bookmark name
          <input class="bookmark-panel__name" type="text" placeholder="section-intro" />
        </label>
        ${this.error
          ? html`<div class="error">${this.error}</div>`
          : html`<div class="hint">An invisible anchor you can link to with #name</div>`}
        <div class="actions">
          <button type="button" @click=${() => this.emit('wysiwyg-bookmark-cancel')}>
            Cancel
          </button>
          <button type="submit" class="primary">Insert</button>
        </div>
      </form>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'nile-wysiwyg-bookmark-panel': NileWysiwygBookmarkPanel;
  }
}