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

/**
 * Floating "Paste Markdown" panel: paste/type Markdown and insert it into the
 * document as formatted content. The host converts and inserts on apply.
 * Emits `wysiwyg-markdown-apply` detail: { markdown } and
 * `wysiwyg-markdown-cancel`.
 */
@customElement('nile-wysiwyg-markdown-panel')
export class NileWysiwygMarkdownPanel extends NileElement {
  @property({ type: Boolean, reflect: true }) open = false;

  @query('textarea') textarea?: HTMLTextAreaElement;

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

        .md-panel {
          display: flex;
          flex-direction: column;
          gap: 10px;
          width: 460px;
          max-width: 90vw;
          padding: 14px;
          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;
        }

        .heading {
          font-weight: 600;
          color: var(--nile-colors-neutral-800, #1d2939);
        }

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

        textarea {
          font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
          font-size: 13px;
          line-height: 1.5;
          min-height: 180px;
          resize: vertical;
          padding: 10px;
          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
          border-radius: 6px;
          outline: none;
          color: var(--nile-colors-dark-900, #101828);
          background: var(--nile-colors-neutral-50, #f9fafb);
        }

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

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

  public focusInput(): void {
    this.updateComplete.then(() => this.textarea?.focus());
  }

  public reset(): void {
    this.updateComplete.then(() => {
      if (this.textarea) this.textarea.value = '';
    });
  }

  private submit(): void {
    const markdown = this.textarea?.value ?? '';
    if (!markdown.trim()) {
      this.emit('wysiwyg-markdown-cancel');
      return;
    }
    this.emit('wysiwyg-markdown-apply', { markdown });
  }

  private handleKeydown(event: KeyboardEvent): void {
    if (event.key === 'Escape') {
      event.stopPropagation();
      this.emit('wysiwyg-markdown-cancel');
    } else if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
      // Ctrl/Cmd+Enter inserts (plain Enter keeps adding newlines).
      event.preventDefault();
      event.stopPropagation();
      this.submit();
    }
  }

  public render(): TemplateResult {
    return html`
      <div class="md-panel" part="markdown-panel" @keydown=${this.handleKeydown}>
        <span class="heading">Paste Markdown</span>
        <textarea
          part="markdown-textarea"
          placeholder="# Heading&#10;&#10;Paste **Markdown** here — lists, \`code\`, tables…"
          spellcheck="false"
        ></textarea>
        <span class="hint">Converts to formatted content on insert (⌘/Ctrl+Enter).</span>
        <div class="actions">
          <nile-button variant="tertiary" @click=${() => this.emit('wysiwyg-markdown-cancel')}
            >Cancel</nile-button
          >
          <nile-button variant="primary" @click=${() => this.submit()}>Insert</nile-button>
        </div>
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'nile-wysiwyg-markdown-panel': NileWysiwygMarkdownPanel;
  }
}