import { html, css, TemplateResult, CSSResultArray } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import NileElement from '../../internal/nile-element';
import { toEmbedUrl } from '../engine/plugins/embeds';
import '../../nile-input/index';
import '../../nile-button/index';

/**
 * Floating embed-insert panel: paste any https:// link (YouTube/Vimeo/Loom
 * are auto-formatted; anything else embeds as a sandboxed iframe). Styled to
 * match the image panel (nile-input + nile-button). Emits
 * `wysiwyg-embed-apply` detail: { src, provider } and `wysiwyg-embed-cancel`.
 */
@customElement('nile-wysiwyg-embed-panel')
export class NileWysiwygEmbedPanel extends NileElement {
  @property({ type: Boolean, reflect: true }) open = false;

  @state() private urlValue = '';
  @state() private error = '';

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

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

        nile-input {
          width: 100%;
        }

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

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

        .actions {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          gap: 8px;
          width: 100%;
        }
      `,
    ];
  }

  public focusInput(): void {
    this.updateComplete.then(() => {
      const input = this.shadowRoot?.querySelector('nile-input') as HTMLElement | null;
      input?.focus();
    });
  }

  /** Clears the field. */
  public reset(): void {
    this.urlValue = '';
    this.error = '';
  }

  private onUrl(event: CustomEvent): void {
    this.urlValue = (event.detail?.value ?? '') as string;
    this.error = '';
  }

  private handleSubmit(): void {
    const target = toEmbedUrl(this.urlValue.trim());
    if (!target) {
      this.error = 'Enter a valid https:// URL.';
      return;
    }
    this.error = '';
    this.emit('wysiwyg-embed-apply', target);
  }

  private handleKeydown(event: KeyboardEvent): void {
    if (event.key === 'Escape') {
      event.stopPropagation();
      this.emit('wysiwyg-embed-cancel');
    } else if (event.key === 'Enter') {
      event.preventDefault();
      event.stopPropagation();
      this.handleSubmit();
    }
  }

  public render(): TemplateResult {
    return html`
      <div class="embed-panel" part="embed-panel" @keydown=${this.handleKeydown}>
        <nile-input
          label="Video URL"
          placeholder="https://www.youtube.com/watch?v=…"
          .value=${this.urlValue}
          @nile-input=${this.onUrl}
        ></nile-input>

        ${this.error
          ? html`<span class="error" part="error">${this.error}</span>`
          : html`<span class="hint">Add any link to it</span>`}

        <div class="actions">
          <nile-button variant="primary" @click=${() => this.handleSubmit()}
            >Embed</nile-button
          >
        </div>
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'nile-wysiwyg-embed-panel': NileWysiwygEmbedPanel;
  }
}