import { html, css, TemplateResult, CSSResultArray } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import hljs from 'highlight.js/lib/core';
import xml from 'highlight.js/lib/languages/xml';
import NileElement from '../../internal/nile-element';
import { sanitizeHtml } from '../engine/sanitize';
import './preview';

// HTML highlighting only — reuses the same lib the code-block feature already
// bundles, so this adds no new dependency. Registration is idempotent.
hljs.registerLanguage('xml', xml);

/**
 * Raw HTML source editing mode. A split view: the raw HTML on the left, a
 * live rendered preview on the right, with a draggable divider between them
 * and a resizable body. The preview runs the same sanitizer the host applies
 * on the way back, so what you see is what the document becomes. Emits
 * `wysiwyg-source-apply` detail: { html } and `wysiwyg-source-cancel`.
 *
 * The code pane is a lightweight editor: a real `<textarea>` for input, with a
 * highlight.js-coloured layer painted behind it and a synced line-number
 * gutter. No heavyweight code-editor dependency.
 */
@customElement('nile-wysiwyg-source-view')
export class NileWysiwygSourceView extends NileElement {
  @property({ type: String }) value = '';

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

  @query('.hl > code') private highlightEl?: HTMLElement;

  @query('.linenos-inner') private linenosEl?: HTMLElement;

  @query('.body') private bodyEl?: HTMLElement;

  /** Current source text, drives the live preview, highlight and gutter. */
  @state() private draft = '';

  /**
   * Fraction of the body width given to the code pane (the rest is preview).
   * Clamped while dragging the divider.
   */
  @state() private splitRatio = 0.5;

  /** Whether the divider is currently being dragged. */
  @state() private splitDragging = false;

  public static get styles(): CSSResultArray {
    return [
      css`
        :host {
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          overflow: hidden;
          min-height: var(--nile-wysiwyg-min-height, 200px);
          height: var(--nile-wysiwyg-source-height, 340px);
          max-height: var(
            --nile-wysiwyg-source-max-height,
            var(--nile-wysiwyg-max-height, 70vh)
          );
          resize: vertical;
        }

        .bar {
          flex: 0 0 auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 6px 12px;
          font-size: 12px;
          color: var(--nile-colors-neutral-600, #475467);
          border-bottom: 1px solid var(--nile-colors-neutral-300, #e4e7ec);
          background: var(--nile-wysiwyg-toolbar-bg, var(--nile-colors-neutral-50, #f9fafb));
        }

        .actions {
          display: flex;
          gap: 8px;
        }

        button {
          font: inherit;
          font-size: 12px;
          padding: 4px 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;
        }

        .body {
          flex: 1 1 auto;
          display: flex;
          align-items: stretch;
          overflow: hidden;
          min-height: 0;
          box-sizing: border-box;
        }

        .body--dragging {
          cursor: col-resize;
          user-select: none;
          -webkit-user-select: none;
        }

        .body--dragging .pane {
          pointer-events: none;
        }

        .pane {
          min-width: 0;
          min-height: 0;
          box-sizing: border-box;
        }

        /* --- Lightweight code editor: gutter + highlighted textarea --- */
        .pane--code {
          display: flex;
          background: var(--nile-colors-white-base, #ffffff);
          /* Shared code metrics, inherited by the gutter, highlight and textarea
             so every line lines up to the pixel. */
          font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
          font-size: 12px;
          line-height: 18px;
          tab-size: 2;
          -moz-tab-size: 2;
        }

        .linenos {
          flex: 0 0 auto;
          overflow: hidden;
          box-sizing: border-box;
          padding: 12px 8px 0;
          text-align: right;
          color: var(--nile-colors-neutral-400, #98a2b3);
          background: var(--nile-colors-neutral-50, #f9fafb);
          border-right: 1px solid var(--nile-colors-neutral-200, #eaecf0);
          user-select: none;
        }

        .linenos-inner {
          will-change: transform;
        }

        .linenos-inner > div {
          height: 18px;
        }

        .input-wrap {
          position: relative;
          flex: 1 1 0;
          min-width: 0;
          overflow: hidden;
        }

        /* Highlight layer and textarea share the exact same box (offset for
           padding via top/left, extending to the edges for horizontal scroll),
           so the coloured text sits directly under the caret. */
        .hl,
        textarea {
          position: absolute;
          top: 12px;
          left: 16px;
          right: 0;
          bottom: 0;
          margin: 0;
          border: 0;
          padding: 0;
          font: inherit;
          line-height: inherit;
          tab-size: inherit;
          white-space: pre;
          word-wrap: normal;
          overflow-wrap: normal;
          box-sizing: border-box;
        }

        .hl {
          overflow: hidden;
          pointer-events: none;
          color: var(--nile-colors-neutral-900, #101828);
        }

        .hl > code {
          display: block;
          will-change: transform;
        }

        textarea {
          width: auto;
          resize: none;
          outline: none;
          overflow: auto;
          background: transparent;
          color: transparent;
          caret-color: var(--nile-colors-neutral-900, #101828);
        }

        /* Must be translucent: the textarea's text is transparent and the
           coloured code sits BEHIND it, so an opaque selection would hide the
           text. A tint lets the highlighted code show through the selection. */
        textarea::selection {
          background: rgba(41, 112, 255, 0.3);
        }
        textarea::-moz-selection {
          background: rgba(41, 112, 255, 0.3);
        }

        /* highlight.js token palette (Atom One Light), matching code blocks. */
        .hl .hljs-comment,
        .hl .hljs-quote { color: #a0a1a7; font-style: italic; }
        .hl .hljs-keyword,
        .hl .hljs-selector-tag,
        .hl .hljs-doctag { color: #a626a4; }
        .hl .hljs-name,
        .hl .hljs-selector-id,
        .hl .hljs-selector-class,
        .hl .hljs-tag { color: #e45649; }
        .hl .hljs-literal,
        .hl .hljs-built_in { color: #0184bb; }
        .hl .hljs-string,
        .hl .hljs-attribute,
        .hl .hljs-meta .hljs-string { color: #50a14f; }
        .hl .hljs-attr,
        .hl .hljs-variable,
        .hl .hljs-type,
        .hl .hljs-number { color: #986801; }
        .hl .hljs-symbol,
        .hl .hljs-meta,
        .hl .hljs-title { color: #4078f2; }

        /* Draggable divider between the code and preview panes. */
        .gutter {
          flex: 0 0 auto;
          position: relative;
          width: 1px;
          align-self: stretch;
          background: var(--nile-colors-neutral-300, #e4e7ec);
          cursor: col-resize;
          touch-action: none;
        }

        .gutter::before {
          content: '';
          position: absolute;
          inset: 0 -4px;
        }

        .gutter:hover,
        .body--dragging .gutter {
          background: var(--ng-colors-bg-brand-primary, #2970ff);
        }

        .pane--preview {
          flex: 1 1 0;
          overflow: auto;
          border-left: 1px solid var(--nile-colors-neutral-200, #eaecf0);
          background: var(--nile-colors-white-base, #ffffff);
        }

        nile-wysiwyg-preview {
          display: block;
        }

        .preview-empty {
          display: block;
          padding: 12px 16px;
          color: var(--nile-colors-neutral-500, #98a2b3);
          font-size: 12px;
          opacity: 0.7;
        }
      `,
    ];
  }

  protected willUpdate(changed: Map<string, unknown>): void {
    // Sync the draft (and thus preview/highlight) whenever the host sets value.
    if (changed.has('value')) this.draft = this.value;
  }

  /** The current (possibly edited) source text — what "Done" would apply. */
  public get currentValue(): string {
    return this.draft;
  }

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

  /** highlight.js-coloured HTML for the current draft (falls back to escaped). */
  private get highlighted(): string {
    if (!this.draft) return '';
    try {
      return hljs.highlight(this.draft, { language: 'xml' }).value;
    } catch {
      return this.draft.replace(/[&<>]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]!));
    }
  }

  private get lineCount(): number {
    return this.draft ? this.draft.split('\n').length : 1;
  }

  /** Begins a pointer-driven resize of the split divider. */
  private startSplitDrag = (e: PointerEvent) => {
    const body = this.bodyEl;
    if (!body) return;
    e.preventDefault();
    this.splitDragging = true;

    const rect = body.getBoundingClientRect();
    const MIN = 0.15;
    const MAX = 0.85;

    const onMove = (ev: PointerEvent) => {
      if (rect.width === 0) return;
      const ratio = (ev.clientX - rect.left) / rect.width;
      this.splitRatio = Math.min(MAX, Math.max(MIN, ratio));
    };
    const onUp = () => {
      this.splitDragging = false;
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('pointerup', onUp);
    };
    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointerup', onUp);
  };

  /** Resets the divider to a 50/50 layout (double-click affordance). */
  private resetSplit = () => {
    this.splitRatio = 0.5;
  };

  private onInput = (e: Event) => {
    this.draft = (e.target as HTMLTextAreaElement).value;
  };

  /** Keeps the highlight layer and line-number gutter aligned with scroll. */
  private onScroll = (e: Event) => {
    const ta = e.target as HTMLTextAreaElement;
    if (this.highlightEl) {
      this.highlightEl.style.transform = `translate(${-ta.scrollLeft}px, ${-ta.scrollTop}px)`;
    }
    if (this.linenosEl) {
      this.linenosEl.style.transform = `translateY(${-ta.scrollTop}px)`;
    }
  };

  public render(): TemplateResult {
    const preview = sanitizeHtml(this.draft);
    const lines: TemplateResult[] = [];
    for (let i = 1; i <= this.lineCount; i += 1) lines.push(html`<div>${i}</div>`);
    return html`
      <div class="bar" part="source-bar">
        <span>HTML</span>
        <span class="actions">
          <button type="button" @click=${() => this.emit('wysiwyg-source-cancel')}>
            Cancel
          </button>
          <button
            type="button"
            class="primary"
            @click=${() => this.emit('wysiwyg-source-apply', { html: this.draft })}
          >
            Done
          </button>
        </span>
      </div>
      <div class=${classMap({ body: true, 'body--dragging': this.splitDragging })}>
        <div class="pane pane--code" style="flex: 0 0 ${this.splitRatio * 100}%">
          <div class="linenos" part="line-numbers" aria-hidden="true">
            <div class="linenos-inner">${lines}</div>
          </div>
          <div class="input-wrap">
            <pre class="hl" aria-hidden="true"><code>${unsafeHTML(this.highlighted)}</code></pre>
            <textarea
              part="source-textarea"
              spellcheck="false"
              autocapitalize="off"
              autocomplete="off"
              wrap="off"
              .value=${this.value}
              @input=${this.onInput}
              @scroll=${this.onScroll}
              @keydown=${(e: KeyboardEvent) => {
                if (e.key === 'Escape') {
                  e.stopPropagation();
                  this.emit('wysiwyg-source-cancel');
                }
              }}
            ></textarea>
          </div>
        </div>
        <div
          class="gutter"
          part="gutter"
          role="separator"
          aria-orientation="vertical"
          aria-label="Resize source and preview"
          title="Drag to resize · double-click to reset"
          @pointerdown=${this.startSplitDrag}
          @dblclick=${this.resetSplit}
        ></div>
        <div class="pane pane--preview" part="preview">
          ${this.draft.trim()
            ? html`<nile-wysiwyg-preview .content=${preview}></nile-wysiwyg-preview>`
            : html`<span class="preview-empty">Nothing to preview</span>`}
        </div>
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'nile-wysiwyg-source-view': NileWysiwygSourceView;
  }
}