import { fixture, expect, oneEvent } from '@open-wc/testing';
import { html } from 'lit';
import { TextSelection } from 'prosemirror-state';
import '../index';
import type { NileWysiwygEditor } from './nile-wysiwyg-editor';

async function editorFixture(template = html`<nile-wysiwyg-editor></nile-wysiwyg-editor>`) {
  const el = await fixture<NileWysiwygEditor>(template);
  await el.updateComplete;
  return el;
}

function selectAll(el: NileWysiwygEditor) {
  const view = el.pmView!;
  const selection = TextSelection.create(view.state.doc, 1, view.state.doc.content.size - 1);
  view.dispatch(view.state.tr.setSelection(selection));
}

describe('nile-wysiwyg-editor', () => {
  it('mounts a ProseMirror view inside its shadow root', async () => {
    const el = await editorFixture();
    expect(el.pmView).to.exist;
    expect(el.shadowRoot!.querySelector('.ProseMirror')).to.exist;
  });

  it('round-trips value in and out', async () => {
    const el = await editorFixture();
    el.value = '<p>hello <strong>world</strong></p>';
    await el.updateComplete;
    expect(el.getHTML()).to.equal('<p>hello <strong>world</strong></p>');
  });

  it('sanitizes hostile content set via value', async () => {
    const el = await editorFixture();
    el.value = '<p>ok</p><script>alert(1)</script><p onclick="x()">click</p>';
    await el.updateComplete;
    expect(el.getHTML()).to.not.include('script');
    expect(el.getHTML()).to.not.include('onclick');
  });

  it('emits nile-input on document changes', async () => {
    const el = await editorFixture();
    const view = el.pmView!;
    setTimeout(() => view.dispatch(view.state.tr.insertText('typed', 1)));
    const event = await oneEvent(el, 'nile-input');
    expect(event.detail.value).to.equal('<p>typed</p>');
    expect(event.detail.content).to.equal('<p>typed</p>');
    expect(el.value).to.equal('<p>typed</p>');
  });

  it('emits a debounced nile-change', async () => {
    const el = await editorFixture();
    const view = el.pmView!;
    setTimeout(() => view.dispatch(view.state.tr.insertText('x', 1)));
    const event = await oneEvent(el, 'nile-change');
    expect(event.detail.value).to.equal('<p>x</p>');
  });

  it('applies commands via execCommand', async () => {
    const el = await editorFixture();
    el.value = '<p>format me</p>';
    await el.updateComplete;
    selectAll(el);
    expect(el.execCommand('bold')).to.equal(true);
    expect(el.getHTML()).to.equal('<p><strong>format me</strong></p>');
    expect(el.isCommandActive('bold')).to.equal(true);
  });

  it('insertHTML inserts sanitized content at the selection', async () => {
    const el = await editorFixture();
    el.insertHTML('<strong>safe</strong><script>bad()</script>');
    expect(el.getHTML()).to.equal('<p><strong>safe</strong></p>');
  });

  it('respects disabled and readonly', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor disabled></nile-wysiwyg-editor>`
    );
    const content = el.shadowRoot!.querySelector('.ProseMirror')!;
    expect(content.getAttribute('contenteditable')).to.equal('false');

    el.disabled = false;
    el.readonly = true;
    await el.updateComplete;
    expect(content.getAttribute('contenteditable')).to.equal('false');
    // Readonly hides the toolbar.
    expect(el.shadowRoot!.querySelector('nile-wysiwyg-toolbar')).to.not.exist;

    el.readonly = false;
    await el.updateComplete;
    expect(content.getAttribute('contenteditable')).to.equal('true');
  });

  it('hides the toolbar with toolbar="none"', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor toolbar="none"></nile-wysiwyg-editor>`
    );
    expect(el.shadowRoot!.querySelector('nile-wysiwyg-toolbar')).to.not.exist;
  });

  it('renders placeholder decoration when empty', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor placeholder="Type here"></nile-wysiwyg-editor>`
    );
    const empty = el.shadowRoot!.querySelector('.nile-wysiwyg__empty');
    expect(empty).to.exist;
    expect(empty!.getAttribute('data-placeholder')).to.equal('Type here');
  });

  it('keeps single-line documents to one paragraph', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor singleline></nile-wysiwyg-editor>`
    );
    el.value = '<p>one</p><p>two</p><p>three</p>';
    await el.updateComplete;
    expect(el.pmView!.state.doc.childCount).to.equal(1);
  });

  it('executes toolbar commands dispatched as wysiwyg-command events', async () => {
    const el = await editorFixture();
    el.value = '<p>toolbar</p>';
    await el.updateComplete;
    selectAll(el);
    const toolbar = el.shadowRoot!.querySelector('nile-wysiwyg-toolbar')!;
    toolbar.dispatchEvent(
      new CustomEvent('wysiwyg-command', {
        detail: { name: 'italic' },
        bubbles: true,
        composed: true,
      })
    );
    expect(el.getHTML()).to.equal('<p><em>toolbar</em></p>');
  });

  it('participates in forms with name, required, and reset', async () => {
    const form = await fixture<HTMLFormElement>(html`
      <form>
        <nile-wysiwyg-editor name="notes" required></nile-wysiwyg-editor>
      </form>
    `);
    const el = form.querySelector<NileWysiwygEditor>('nile-wysiwyg-editor')!;
    await el.updateComplete;

    expect(el.checkValidity()).to.equal(false);

    el.setContent('<p>filled</p>');
    expect(el.checkValidity()).to.equal(true);
    expect(new FormData(form).get('notes')).to.equal('<p>filled</p>');

    form.reset();
    await el.updateComplete;
    expect(el.getHTML()).to.equal('');
    expect(el.checkValidity()).to.equal(false);
  });

  it('uploads image files through uploadHandler with a placeholder', async () => {
    const el = await editorFixture();
    let uploadedName = '';
    el.uploadHandler = async file => {
      uploadedName = file.name;
      // Placeholder should be visible while the upload is pending.
      await new Promise(resolve => setTimeout(resolve, 30));
      return { src: 'https://cdn.x.dev/uploaded.png', alt: 'uploaded' };
    };
    const file = new File(['x'], 'pic.png', { type: 'image/png' });
    const pending = el.insertImageFile(file);
    await new Promise(resolve => setTimeout(resolve, 10));
    expect(
      el.shadowRoot!.querySelector('.nile-wysiwyg__upload-placeholder'),
      'placeholder while uploading'
    ).to.exist;
    await pending;
    expect(uploadedName).to.equal('pic.png');
    expect(el.getHTML()).to.include('https://cdn.x.dev/uploaded.png');
    expect(el.shadowRoot!.querySelector('.nile-wysiwyg__upload-placeholder')).to.not.exist;
  });

  it('lets nile-image-upload-request listeners own the upload', async () => {
    const el = await editorFixture();
    el.addEventListener('nile-image-upload-request', (e: Event) => {
      e.preventDefault();
      (e as CustomEvent).detail.insert('https://custom.x.dev/own.png', 'mine');
    });
    await el.insertImageFile(new File(['x'], 'a.png', { type: 'image/png' }));
    expect(el.getHTML()).to.include('https://custom.x.dev/own.png');
    expect(el.getHTML()).to.include('alt="mine"');
  });

  it('falls back to base64 embedding without a handler', async () => {
    const el = await editorFixture();
    await el.insertImageFile(new File(['x'], 'a.png', { type: 'image/png' }));
    expect(el.getHTML()).to.include('data:image/png;base64');
  });

  it('emits nile-image-upload-error when the handler rejects', async () => {
    const el = await editorFixture();
    el.uploadHandler = async () => {
      throw new Error('boom');
    };
    setTimeout(() => el.insertImageFile(new File(['x'], 'a.png', { type: 'image/png' })));
    const event = await oneEvent(el, 'nile-image-upload-error');
    expect(event.detail.error.message).to.equal('boom');
    expect(el.getHTML()).to.equal('');
  });

  it('inserts tables from the table picker command event', async () => {
    const el = await editorFixture();
    const toolbar = el.shadowRoot!.querySelector('nile-wysiwyg-toolbar')!;
    toolbar.dispatchEvent(
      new CustomEvent('wysiwyg-command', {
        detail: { name: 'insertTable', attrs: { rows: 2, cols: 3 } },
        bubbles: true,
        composed: true,
      })
    );
    expect(el.getHTML()).to.include('<table');
    expect(el.pmView!.state.doc.firstChild!.childCount).to.equal(2);
  });

  it('shows mention suggestions and inserts a mention node', async () => {
    const el = await editorFixture();
    el.mentions = {
      '@': [
        { key: 'u1', label: 'Ada' },
        { key: 'u2', label: 'Alan' },
        { key: 'u3', label: 'Grace' },
      ],
    };
    const view = el.pmView!;
    view.dispatch(view.state.tr.insertText('@a', 1));
    await el.updateComplete;

    const list = el.shadowRoot!.querySelector('nile-wysiwyg-suggest-list')!;
    expect(list.open).to.equal(true);
    expect(list.items.map(i => i.label)).to.deep.equal(['Ada', 'Alan', 'Grace']);

    view.dispatch(view.state.tr.insertText('d'));
    await el.updateComplete;
    expect(list.items.map(i => i.label)).to.deep.equal(['Ada']);

    setTimeout(() => list.selectCurrent());
    const selected = await oneEvent(el, 'nile-mention-select');
    expect(selected.detail).to.deep.include({ trigger: '@', key: 'u1', label: 'Ada' });
    expect(el.getHTML()).to.include('data-mention-key="u1"');
    expect(el.getHTML()).to.include('@Ada');
  });

  it('inserts the highlighted mention on Enter (keymap must not steal it)', async () => {
    const el = await editorFixture();
    el.mentions = {
      '@': [
        { key: 'u1', label: 'Ada' },
        { key: 'u2', label: 'Alan' },
      ],
    };
    const view = el.pmView!;
    view.dispatch(view.state.tr.insertText('@a', 1));
    await el.updateComplete;

    // Navigate with ArrowDown, then commit with Enter — real key events.
    const press = (key: string) =>
      view.dom.dispatchEvent(
        new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true })
      );
    press('ArrowDown');
    await el.updateComplete;
    press('Enter');
    await el.updateComplete;

    expect(el.getHTML()).to.include('data-mention-key="u2"');
    expect(el.getHTML()).to.include('@Alan');
    // Enter must not have split the paragraph.
    expect(el.pmView!.state.doc.childCount).to.equal(1);
  });

  it('applies the highlighted slash command on Enter', async () => {
    const el = await editorFixture();
    const view = el.pmView!;
    view.dispatch(view.state.tr.insertText('/head', 1));
    await el.updateComplete;
    view.dom.dispatchEvent(
      new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
    );
    await el.updateComplete;
    expect(el.pmView!.state.doc.firstChild!.type.name).to.equal('heading');
    expect(el.pmView!.state.doc.childCount).to.equal(1);
  });

  it('dismisses the suggestion popup on Escape', async () => {
    const el = await editorFixture();
    el.mentions = { '@': [{ key: 'u1', label: 'Ada' }] };
    const view = el.pmView!;
    view.dispatch(view.state.tr.insertText('@a', 1));
    await el.updateComplete;
    const list = el.shadowRoot!.querySelector('nile-wysiwyg-suggest-list')!;
    expect(list.open).to.equal(true);
    view.dom.dispatchEvent(
      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })
    );
    await el.updateComplete;
    expect(list.open).to.equal(false);
    // Enter now behaves normally again (splits the paragraph).
    view.dom.dispatchEvent(
      new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
    );
    expect(el.pmView!.state.doc.childCount).to.equal(2);
  });

  it('lets nile-mention-query listeners provide async items', async () => {
    const el = await editorFixture();
    el.mentions = { '@': [] };
    el.addEventListener('nile-mention-query', (e: Event) => {
      const { query, provide } = (e as CustomEvent).detail;
      provide([{ key: `srv-${query}`, label: `Server ${query}` }]);
    });
    const view = el.pmView!;
    view.dispatch(view.state.tr.insertText('@bo', 1));
    await el.updateComplete;
    const list = el.shadowRoot!.querySelector('nile-wysiwyg-suggest-list')!;
    expect(list.open).to.equal(true);
    expect(list.items).to.deep.equal([{ key: 'srv-bo', label: 'Server bo' }]);
  });

  it('opens slash commands at the start of a block and applies one', async () => {
    const el = await editorFixture();
    const view = el.pmView!;
    view.dispatch(view.state.tr.insertText('/head', 1));
    await el.updateComplete;
    const list = el.shadowRoot!.querySelector('nile-wysiwyg-suggest-list')!;
    expect(list.open).to.equal(true);
    expect(list.items[0].label).to.equal('Heading 1');
    list.selectCurrent();
    await el.updateComplete;
    expect(el.pmView!.state.doc.firstChild!.type.name).to.equal('heading');
    // The "/head" query text was consumed.
    expect(el.getText()).to.equal('');
  });

  it('honors no-slash-commands', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor no-slash-commands></nile-wysiwyg-editor>`
    );
    const view = el.pmView!;
    view.dispatch(view.state.tr.insertText('/head', 1));
    await el.updateComplete;
    const list = el.shadowRoot!.querySelector('nile-wysiwyg-suggest-list')!;
    expect(list.open).to.equal(false);
  });

  it('applies markdown mark input rules while typing', async () => {
    const el = await editorFixture();
    el.value = '<p>**bold*</p>';
    await el.updateComplete;
    const view = el.pmView!;
    const end = view.state.doc.content.size - 1;
    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, end)));
    const handled = view.someProp('handleTextInput', f =>
      f(view, end, end, '*', () => view.state.tr.insertText('*', end, end))
    );
    expect(handled).to.equal(true);
    expect(el.getHTML()).to.equal('<p><strong>bold</strong></p>');
  });

  /** Types `text` one character at a time through handleTextInput, like a user. */
  function typeChars(el: NileWysiwygEditor, text: string) {
    const view = el.pmView!;
    for (const ch of text) {
      const { from, to } = view.state.selection;
      const handled = view.someProp('handleTextInput', f =>
        f(view, from, to, ch, () => view.state.tr.insertText(ch, from, to))
      );
      if (!handled) view.dispatch(view.state.tr.insertText(ch, from, to));
    }
  }

  function selectText(el: NileWysiwygEditor, text: string) {
    const view = el.pmView!;
    let from = -1;
    view.state.doc.descendants((node, pos) => {
      if (from === -1 && node.isText && node.text!.includes(text)) {
        from = pos + node.text!.indexOf(text);
      }
    });
    view.dispatch(
      view.state.tr.setSelection(TextSelection.create(view.state.doc, from, from + text.length))
    );
  }

  it('typing over a fully linked selection keeps the link', async () => {
    const el = await editorFixture();
    el.value = '<p>Before <a href="https://x.test">Get discount</a> after</p>';
    await el.updateComplete;
    selectText(el, 'discount');
    typeChars(el, 'deal');
    expect(el.getHTML()).to.equal('<p>Before <a href="https://x.test">Get deal</a> after</p>');
  });

  it('keeps the link and inner marks when retyping a button label', async () => {
    const el = await editorFixture();
    el.value =
      '<p><a href="#"><strong><span style="color: rgb(255, 255, 255);">Get discount</span></strong></a></p>';
    await el.updateComplete;
    selectText(el, 'Get discount');
    typeChars(el, 'Shop');
    expect(el.getHTML()).to.equal(
      '<p><a href="#"><strong><span style="color: rgb(255, 255, 255);">Shop</span></strong></a></p>'
    );
  });

  it('does not extend a link when typing after it without retyping', async () => {
    const el = await editorFixture();
    el.value = '<p><a href="https://x.test">link</a></p>';
    await el.updateComplete;
    const view = el.pmView!;
    const end = view.state.doc.content.size - 1;
    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, end)));
    typeChars(el, 'X');
    expect(el.getHTML()).to.equal('<p><a href="https://x.test">link</a>X</p>');
  });

  it('ends the retype run when the caret moves', async () => {
    const el = await editorFixture();
    el.value = '<p><a href="https://x.test">old</a> tail</p>';
    await el.updateComplete;
    selectText(el, 'old');
    typeChars(el, 'new');
    selectText(el, 'tail');
    typeChars(el, 'end');
    expect(el.getHTML()).to.equal('<p><a href="https://x.test">new</a> end</p>');
  });

  it('does not keep a link when the selection is only partly linked', async () => {
    const el = await editorFixture();
    el.value = '<p>pre <a href="https://x.test">link</a></p>';
    await el.updateComplete;
    selectText(el, 'pre ');
    // Extend the selection over the link too: start is outside the link.
    const view = el.pmView!;
    const { from } = view.state.selection;
    view.dispatch(
      view.state.tr.setSelection(TextSelection.create(view.state.doc, from, view.state.doc.content.size - 1))
    );
    typeChars(el, 'Z');
    expect(el.getHTML()).to.equal('<p>Z</p>');
  });

  for (const seq of ['---', '***', '___']) {
    it(`turns "${seq}" in an empty paragraph into a horizontal rule`, async () => {
      const el = await editorFixture();
      el.value = '<p></p>';
      await el.updateComplete;
      const view = el.pmView!;
      view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, 1)));
      typeChars(el, `${seq}next`);
      expect(el.getHTML()).to.equal('<hr><p>next</p>');
    });
  }

  it('leaves "---" alone when the paragraph has other text', async () => {
    const el = await editorFixture();
    el.value = '<p>a</p>';
    await el.updateComplete;
    const view = el.pmView!;
    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, 2)));
    typeChars(el, '---');
    expect(el.getHTML()).to.equal('<p>a---</p>');
  });

  it('finds and replaces through the public API', async () => {
    const el = await editorFixture();
    el.value = '<p>red fox, red barn</p>';
    await el.updateComplete;
    expect(el.find('red')).to.equal(2);
    el.replace('blue');
    expect(el.getHTML()).to.include('blue fox, red barn');
    el.replaceAll('green');
    expect(el.getHTML()).to.include('blue fox, green barn');
  });

  it('toggles source view and re-sanitizes applied HTML', async () => {
    const el = await editorFixture();
    el.value = '<p>original</p>';
    await el.updateComplete;
    el.toggleSourceView();
    await el.updateComplete;
    const source = el.shadowRoot!.querySelector('nile-wysiwyg-source-view')!;
    expect(source).to.exist;
    await source.updateComplete;
    expect(source.currentValue).to.equal('<p>original</p>');

    // Simulate editing the textarea (its input event drives the draft).
    const textarea = source.shadowRoot!.querySelector('textarea')!;
    textarea.value = '<p>edited</p><script>alert(1)</script>';
    textarea.dispatchEvent(new Event('input'));
    el.toggleSourceView();
    await el.updateComplete;
    expect(el.shadowRoot!.querySelector('nile-wysiwyg-source-view')).to.not.exist;
    expect(el.getHTML()).to.equal('<p>edited</p>');
  });

  it('emits nile-word-count and supports getWordCount', async () => {
    const el = await editorFixture();
    const view = el.pmView!;
    setTimeout(() => view.dispatch(view.state.tr.insertText('three little words', 1)));
    const event = await oneEvent(el, 'nile-word-count');
    expect(event.detail).to.deep.equal({ words: 3, characters: 18 });
    expect(el.getWordCount()).to.deep.equal({ words: 3, characters: 18 });
  });

  it('emits nile-autosave on the configured interval', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor autosave-interval="40"></nile-wysiwyg-editor>`
    );
    const view = el.pmView!;
    view.dispatch(view.state.tr.insertText('save me', 1));
    const event = await oneEvent(el, 'nile-autosave');
    expect(event.detail.value).to.equal('<p>save me</p>');
  });

  it('renders checklist items with working checkboxes', async () => {
    const el = await editorFixture();
    el.value =
      '<ul data-task-list="true"><li data-task-item="true" data-checked="false"><p>buy milk</p></li></ul>';
    await el.updateComplete;
    const checkbox = el.shadowRoot!.querySelector<HTMLInputElement>(
      '.nile-wysiwyg__task-item input[type="checkbox"]'
    )!;
    expect(checkbox).to.exist;
    expect(checkbox.checked).to.equal(false);

    checkbox.checked = true;
    checkbox.dispatchEvent(new Event('change'));
    await el.updateComplete;
    expect(el.getHTML()).to.include('data-checked="true"');
  });

  it('opens the emoji picker on ":xx" and inserts the character', async () => {
    const el = await editorFixture();
    const view = el.pmView!;
    view.dispatch(view.state.tr.insertText('great :fir', 1));
    await el.updateComplete;
    const list = el.shadowRoot!.querySelector('nile-wysiwyg-suggest-list')!;
    expect(list.open).to.equal(true);
    expect(list.items[0].key).to.equal('fire');
    list.selectCurrent();
    await el.updateComplete;
    expect(el.getText()).to.equal('great 🔥');
    expect(list.open).to.equal(false);
  });

  it('respects no-emoji', async () => {
    const el = await editorFixture(html`<nile-wysiwyg-editor no-emoji></nile-wysiwyg-editor>`);
    const view = el.pmView!;
    view.dispatch(view.state.tr.insertText(':fir', 1));
    await el.updateComplete;
    expect(el.shadowRoot!.querySelector('nile-wysiwyg-suggest-list')!.open).to.equal(false);
  });

  it('blocks typing past maxlength and shows the counter', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor maxlength="5"></nile-wysiwyg-editor>`
    );
    const view = el.pmView!;
    view.dispatch(view.state.tr.insertText('12345', 1));
    await el.updateComplete;
    const counter = el.shadowRoot!.querySelector('.nile-wysiwyg__counter')!;
    expect(counter.textContent!.trim()).to.equal('5 / 5');
    expect(counter.classList.contains('over')).to.equal(true);

    // Further input is rejected at the transaction level.
    view.someProp('handleTextInput', f =>
      f(view, 6, 6, 'x', () => view.state.tr.insertText('x', 6, 6))
    );
    view.dispatch; // no-op; just read state
    expect(el.getText()).to.equal('12345');
  });

  it('offers snippets in the slash menu and inserts their HTML', async () => {
    const el = await editorFixture();
    el.snippets = [
      { key: 'sig', label: 'Signature', html: '<p>Regards,<br><strong>Birat</strong></p>' },
    ];
    const view = el.pmView!;
    view.dispatch(view.state.tr.insertText('/sig', 1));
    await el.updateComplete;
    const list = el.shadowRoot!.querySelector('nile-wysiwyg-suggest-list')!;
    expect(list.open).to.equal(true);
    expect(list.items[0]).to.deep.include({ key: 'snippet:sig', label: 'Signature' });
    list.selectCurrent();
    await el.updateComplete;
    expect(el.getHTML()).to.include('<strong>Birat</strong>');
    expect(el.getText()).to.not.include('/sig');
  });

  it('reflects sticky-toolbar for the sticky CSS hook', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor sticky-toolbar></nile-wysiwyg-editor>`
    );
    expect(el.hasAttribute('sticky-toolbar')).to.equal(true);
    const toolbar = el.shadowRoot!.querySelector('nile-wysiwyg-toolbar')!;
    expect(getComputedStyle(toolbar).position).to.equal('sticky');
  });

  it('renders highlighted tokens inside code blocks', async () => {
    const el = await editorFixture();
    el.value =
      '<pre data-language="javascript"><code>const x = "hello"; // note</code></pre>';
    await el.updateComplete;
    const tokens = el.shadowRoot!.querySelectorAll('.ProseMirror pre [class*="hljs-"]');
    expect(tokens.length).to.be.greaterThan(2);
    expect(el.shadowRoot!.querySelector('.hljs-string')!.textContent).to.equal('"hello"');
  });

  it('shows the language picker inside a code block and applies changes', async () => {
    const el = await editorFixture();
    el.value = '<pre><code>select 1 from dual</code></pre>';
    await el.updateComplete;
    const view = el.pmView!;
    view.dom.dispatchEvent(new FocusEvent('focus'));
    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, 3)));
    await el.updateComplete;

    const menu = el.shadowRoot!.querySelector('nile-wysiwyg-code-menu')!;
    expect(menu.open).to.equal(true);
    menu.dispatchEvent(
      new CustomEvent('wysiwyg-command', {
        detail: { name: 'setCodeBlockLanguage', attrs: { language: 'sql' } },
        bubbles: true,
        composed: true,
      })
    );
    expect(el.getHTML()).to.include('data-language="sql"');
  });

  it('keeps the language picker open while it has focus', async () => {
    const el = await editorFixture();
    el.value = '<pre><code>select 1</code></pre>';
    await el.updateComplete;
    const view = el.pmView!;
    view.dom.dispatchEvent(new FocusEvent('focus'));
    view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, 2)));
    await el.updateComplete;
    const menu = el.shadowRoot!.querySelector('nile-wysiwyg-code-menu')!;
    expect(menu.open).to.equal(true);

    // Clicking the picker blurs the editor with focus moving into chrome —
    // the menu must stay open so the option list can show.
    view.dom.dispatchEvent(new FocusEvent('blur', { relatedTarget: menu }));
    await el.updateComplete;
    expect(menu.open).to.equal(true);

    // Blurring to outside the editor closes it.
    view.dom.dispatchEvent(new FocusEvent('blur'));
    await el.updateComplete;
    expect(menu.open).to.equal(false);
  });

  it('inserts embeds through the panel flow', async () => {
    const el = await editorFixture();
    const panel = el.shadowRoot!.querySelector('nile-wysiwyg-embed-panel')!;
    panel.dispatchEvent(
      new CustomEvent('wysiwyg-embed-apply', {
        detail: { src: 'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ', provider: 'youtube' },
        bubbles: true,
        composed: true,
      })
    );
    expect(el.getHTML()).to.include('data-embed-provider="youtube"');
    expect(el.shadowRoot!.querySelector('.nile-wysiwyg__embed iframe')).to.exist;
  });

  it('makes embeds interactive once selected (click-to-select, then play)', async () => {
    const el = await editorFixture();
    el.value =
      '<p>before</p><div data-embed-provider="youtube"><iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"></iframe></div>';
    await el.updateComplete;
    const iframe = el.shadowRoot!.querySelector<HTMLIFrameElement>('.nile-wysiwyg__embed iframe')!;
    expect(getComputedStyle(iframe).pointerEvents).to.equal('none');

    // Select the embed node — the iframe becomes interactive.
    const view = el.pmView!;
    const { NodeSelection } = await import('prosemirror-state');
    let embedPos = -1;
    view.state.doc.descendants((node, pos) => {
      if (node.type.name === 'embed' && embedPos < 0) embedPos = pos;
      return embedPos < 0;
    });
    view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, embedPos)));
    await el.updateComplete;
    expect(getComputedStyle(iframe).pointerEvents).to.equal('auto');
  });

  it('turns pasted provider URLs into embeds', async () => {
    const el = await editorFixture();
    const view = el.pmView!;
    const event = new ClipboardEvent('paste', { clipboardData: new DataTransfer() });
    event.clipboardData!.setData('text/plain', 'https://vimeo.com/123456789');
    const handled = view.someProp('handlePaste', f => f(view, event, view.state.tr.doc.slice(0)));
    expect(handled).to.equal(true);
    expect(el.getHTML()).to.include('player.vimeo.com/video/123456789');
  });

  it('strips hostile iframes set via value but keeps provider embeds', async () => {
    const el = await editorFixture();
    el.value =
      '<iframe src="https://evil.example.com/x"></iframe>' +
      '<div data-embed-provider="vimeo"><iframe src="https://player.vimeo.com/video/123456789"></iframe></div>';
    await el.updateComplete;
    const html = el.getHTML();
    expect(html).to.not.include('evil.example.com');
    expect(html).to.include('player.vimeo.com');
  });

  it('setContent accepts ProseMirror JSON', async () => {
    const el = await editorFixture();
    el.setContent({
      type: 'doc',
      content: [
        {
          type: 'paragraph',
          content: [{ type: 'text', text: 'from json' }],
        },
      ],
    });
    expect(el.getHTML()).to.equal('<p>from json</p>');
    expect(el.getText()).to.equal('from json');
  });

  describe('export & import', () => {
    it('getInlineStyledHTML folds styles inline and drops classes', async () => {
      const el = await editorFixture();
      el.setContent('<p><strong>bold</strong> plain</p>');
      await el.updateComplete;
      const out = el.getInlineStyledHTML();
      expect(out).to.include('<p');
      expect(out).to.include('bold');
      expect(out).to.not.include('class=');
      expect(out).to.not.include('contenteditable');
    });

    it('getInlineStyledHTML is empty for an empty document', async () => {
      const el = await editorFixture();
      expect(el.getInlineStyledHTML()).to.equal('');
    });

    it('exportToWord and exportToPdf are no-ops on an empty document', async () => {
      const el = await editorFixture();
      let clicked = false;
      const orig = HTMLAnchorElement.prototype.click;
      HTMLAnchorElement.prototype.click = function () {
        clicked = true;
      };
      try {
        el.exportToWord();
        el.exportInlineHtml();
      } finally {
        HTMLAnchorElement.prototype.click = orig;
      }
      expect(clicked).to.be.false;
    });

    it('exportToWord triggers a download for non-empty content', async () => {
      const el = await editorFixture();
      el.setContent('<p>hello</p>');
      await el.updateComplete;
      let downloadName = '';
      const orig = HTMLAnchorElement.prototype.click;
      HTMLAnchorElement.prototype.click = function () {
        downloadName = this.getAttribute('download') ?? '';
      };
      try {
        el.name = 'my-report';
        el.exportToWord();
      } finally {
        HTMLAnchorElement.prototype.click = orig;
      }
      expect(downloadName).to.equal('my-report.doc');
    });

    it('importFromWord normalizes Word list paragraphs into real lists', async () => {
      const el = await editorFixture();
      const wordHtml =
        '<p class="MsoListParagraph" style="mso-list:l0 level1 lfo1">' +
        '<span style="mso-list:Ignore">1.</span>First</p>' +
        '<p class="MsoListParagraph" style="mso-list:l0 level1 lfo1">' +
        '<span style="mso-list:Ignore">2.</span>Second</p>';
      el.importFromWord(wordHtml);
      await el.updateComplete;
      const out = el.getHTML();
      expect(out).to.include('<ol');
      expect(out).to.include('First');
      expect(out).to.include('Second');
      expect(out).to.not.include('mso-');
    });
  });

  describe('productivity features', () => {
    it('changeCase transforms the selection', async () => {
      const el = await editorFixture();
      el.setContent('<p>hello world</p>');
      await el.updateComplete;
      selectAll(el);
      el.changeCase('upper');
      expect(el.getHTML()).to.equal('<p>HELLO WORLD</p>');
    });

    it('insertMergeField inserts a placeholder chip', async () => {
      const el = await editorFixture();
      el.setContent('<p>Hi </p>');
      await el.updateComplete;
      const view = el.pmView!;
      view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, 4)));
      el.insertMergeField('first_name', 'First name');
      expect(el.getHTML()).to.include('data-merge-field="first_name"');
    });

    it('insertMath inserts a math node with LaTeX', async () => {
      const el = await editorFixture();
      el.setContent('<p></p>');
      await el.updateComplete;
      const view = el.pmView!;
      view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, 1)));
      el.insertMath('E = mc^2', 'inline');
      expect(el.getHTML()).to.include('data-math="E = mc^2"');
    });

    it('mathRenderer draws formulas as HTML in the view', async () => {
      const el = await editorFixture();
      el.mathRenderer = (latex: string) => `<b class="rendered">${latex}</b>`;
      el.setContent('<p><span data-math="x^2">x^2</span></p>');
      await el.updateComplete;
      expect(el.shadowRoot!.querySelector('.nile-wysiwyg__math .rendered')).to.exist;
    });

    it('toggleFormatPainter arms and reflects in toolbar state', async () => {
      const el = await editorFixture();
      el.setContent('<p><strong>bold</strong> plain</p>');
      await el.updateComplete;
      const view = el.pmView!;
      view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, 1, 5)));
      el.toggleFormatPainter();
      // Selecting "plain" applies the copied bold and disarms.
      view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, 6, 11)));
      await el.updateComplete;
      expect(el.getHTML()).to.equal('<p><strong>bold</strong> <strong>plain</strong></p>');
    });

    it('emits nile-autosave after the interval when content changed', async () => {
      const el = await editorFixture();
      el.autosaveInterval = 30;
      await el.updateComplete;
      el.setContent('<p>changed</p>');
      const event = await oneEvent(el, 'nile-autosave');
      expect(event.detail.value).to.include('changed');
      el.autosaveInterval = 0;
    });
  });

  describe('allowedStyles (section F)', () => {
    it('F1. parses the allowed-styles attribute into a Record', async () => {
      const el = await editorFixture(
        html`<nile-wysiwyg-editor
          allowed-styles="td: letter-spacing; p: letter-spacing"
        ></nile-wysiwyg-editor>`
      );
      expect(el.allowedStyles).to.deep.equal({
        td: ['letter-spacing'],
        p: ['letter-spacing'],
      });
    });

    it('F2. re-parses the current value when allowedStyles is set', async () => {
      const el = await editorFixture(
        html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
      );
      el.value = '<p style="letter-spacing:0.5px">hi</p>';
      await el.updateComplete;
      // Not allowed yet → extension prop not kept.
      expect(el.getHTML()).to.not.include('letter-spacing');
      el.allowedStyles = { p: ['letter-spacing'] };
      await el.updateComplete;
      expect(el.getHTML()).to.include('letter-spacing');
    });

    it('F3. warns once per bad entry and never throws', async () => {
      const el = await editorFixture(
        html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
      );
      const warn = console.warn;
      let count = 0;
      console.warn = () => {
        count += 1;
      };
      try {
        el.allowedStyles = { td: ['position'], foo: ['x'] };
        await el.updateComplete;
      } finally {
        console.warn = warn;
      }
      expect(count).to.be.greaterThan(0);
    });

    it('F4. the allowed-styles attribute is not reflected', async () => {
      const el = await editorFixture(
        html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
      );
      el.allowedStyles = { td: ['letter-spacing'] };
      await el.updateComplete;
      expect(el.getAttribute('allowed-styles')).to.equal(null);
    });
  });

  describe('email-fidelity live table view', () => {
    it('applies every declaration of the table text style to the live table', async () => {
      const el = await editorFixture(
        html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
      );
      el.value =
        '<table role="presentation" style="font-family: Verdana, sans-serif; color: #112233; font-size: 18px"><tr><td><p>x</p></td></tr></table>';
      await el.updateComplete;
      const table = el.shadowRoot!.querySelector('.ProseMirror table') as HTMLTableElement;
      expect(table.style.fontFamily).to.include('Verdana');
      expect(table.style.color).to.equal('rgb(17, 34, 51)');
      expect(table.style.fontSize).to.equal('18px');
    });

    it('lifts the column-resize min-width off nested layout tables', async () => {
      const el = await editorFixture(
        html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
      );
      el.value =
        '<table role="presentation" style="width: 100%"><tr><td><table role="presentation" style="width: 100%"><tr><td><p>a</p></td><td><p>b</p></td><td><p>c</p></td></tr></table></td></tr></table>';
      await el.updateComplete;
      const tables = el.shadowRoot!.querySelectorAll('.ProseMirror table');
      const inner = tables[1] as HTMLTableElement;
      expect(inner.hasAttribute('data-layout-table')).to.equal(true);
      expect(getComputedStyle(inner).minWidth).to.equal('0px');
    });
  });

  describe('long mention names', () => {
    const LONG = [
      'source.JobAssignmentAdditionalJobDetailsJobFunction',
      'source.JobAssignmentAdditionalJobDetailsJobFunctionCode',
      'source.JobAssignmentAdditionalJobDetailsJobFunctionEffectiveStartDate',
    ];

    it('shows long suggestions in full: wrapped, no sideways scroll, full name as a tooltip', async () => {
      const el = await editorFixture();
      el.mentions = { $: LONG.map(key => ({ key, label: key })) };
      const view = el.pmView!;
      view.dispatch(view.state.tr.insertText('$source.Job', 1));
      await el.updateComplete;
      const list = el.shadowRoot!.querySelector('nile-wysiwyg-suggest-list')!;
      await list.updateComplete;
      expect(list.open).to.equal(true);
      const box = list.shadowRoot!.querySelector('.list') as HTMLElement;
      expect(box.scrollWidth).to.be.at.most(box.clientWidth);
      const labels = [...list.shadowRoot!.querySelectorAll('.item .label')] as HTMLElement[];
      expect(labels.map(l => l.textContent)).to.deep.equal(LONG);
      expect(labels.map(l => l.title)).to.deep.equal(LONG);
      for (const label of labels) expect(label.scrollWidth).to.be.at.most(label.clientWidth + 1);
    });

    it('wraps a long mention chip inside a narrow table cell', async () => {
      const el = await editorFixture(
        html`<nile-wysiwyg-editor email-fidelity style="width: 600px"></nile-wysiwyg-editor>`
      );
      const key =
        'source.ManagerOfManagerSecondLevelSupervisorOrganizationalAssignmentBusinessEmailElectronicAddressPrimary';
      el.value = `<table role="presentation" style="width: 100%"><tr><td style="width: 50%"><p>Label</p></td><td style="width: 50%"><p><span class="nile-wysiwyg__mention" data-mention-trigger="$" data-mention-key="${key}" data-mention-label="${key}">$${key}</span></p></td></tr></table>`;
      await el.updateComplete;
      const chip = el.shadowRoot!.querySelector('.ProseMirror .nile-wysiwyg__mention') as HTMLElement;
      const cell = chip.closest('td')!;
      expect(chip.getBoundingClientRect().right).to.be.at.most(cell.getBoundingClientRect().right + 1);
      expect(chip.getBoundingClientRect().height).to.be.greaterThan(30);
    });

    it('keeps a short mention chip on one line', async () => {
      const el = await editorFixture();
      el.value =
        '<p><span class="nile-wysiwyg__mention" data-mention-trigger="$" data-mention-key="source.FirstName" data-mention-label="source.FirstName">$source.FirstName</span></p>';
      await el.updateComplete;
      const chip = el.shadowRoot!.querySelector('.ProseMirror .nile-wysiwyg__mention') as HTMLElement;
      const lineHeight = parseFloat(getComputedStyle(chip).lineHeight) || 24;
      expect(chip.getBoundingClientRect().height).to.be.below(lineHeight * 1.6);
    });
  });

  describe('mention chip weight', () => {
    const chip = (key: string) =>
      `<span class="nile-wysiwyg__mention" data-mention-trigger="$" data-mention-key="${key}" data-mention-label="${key}">$${key}</span>`;
    const weightOf = (el: NileWysiwygEditor, key: string) =>
      getComputedStyle(
        el.shadowRoot!.querySelector(`.ProseMirror [data-mention-key="${key}"]`)!
      ).fontWeight;

    it('keeps its default weight in plain text but follows bold, headings and explicit weights', async () => {
      const el = await editorFixture(html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`);
      el.value =
        `<p>Dear <strong>${chip('first')}</strong>, ${chip('plain')}</p>` +
        `<h2>${chip('heading')}</h2>` +
        `<table><tr><td style="font-weight: normal">${chip('normalCell')}</td></tr></table>`;
      await el.updateComplete;
      expect(weightOf(el, 'plain')).to.equal('500');
      expect(weightOf(el, 'first')).to.equal('700');
      expect(Number(weightOf(el, 'heading'))).to.be.at.least(600);
      expect(weightOf(el, 'normalCell')).to.equal('400');
    });
  });
});