import { fixture, expect } from '@open-wc/testing';
import { html } from 'lit';
import '../index';
import { TextSelection } from 'prosemirror-state';
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;
}

/** A compact table-based email with cell padding and a 600px container. */
const EMAIL_FIXTURE =
  '<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">' +
  '<tr><td align="center" style="padding:32px 12px;">' +
  '<table role="presentation" width="600" style="width:100%; max-width:600px; background-color:#ffffff; border:1px solid #d9dee4;">' +
  '<tr><td style="padding:28px 40px; background-color:#1f3a5f;">' +
  '<p style="margin:0; font-family:Georgia, serif; color:#ffffff;">Company Name</p>' +
  '</td></tr>' +
  '<tr><td style="padding:36px 40px; font-family:Arial, sans-serif; color:#2b2f36;">' +
  '<p style="margin:0 0 18px 0;">Hello there.</p>' +
  '</td></tr>' +
  '</table></td></tr></table>';

/** A full standalone HTML document, the kind that lands in text/plain. */
const FULL_DOC =
  '<!doctype html><html><body>' +
  '<table role="presentation"><tr><td style="padding:16px">Pasted cell</td></tr></table>' +
  '</body></html>';

/** Fire a paste through the ProseMirror view's handlePaste prop. */
function firePaste(el: NileWysiwygEditor, data: Record<string, string>) {
  const view = el.pmView!;
  const dt = new DataTransfer();
  for (const [type, value] of Object.entries(data)) dt.setData(type, value);
  const event = new ClipboardEvent('paste', { clipboardData: dt });
  return view.someProp('handlePaste', f => f(view, event, view.state.tr.doc.slice(0)));
}

describe('nile-wysiwyg-editor email-fidelity: property reflection', () => {
  it('1. defaults emailFidelity to false', async () => {
    const el = await editorFixture();
    expect(el.emailFidelity).to.equal(false);
    expect(el.hasAttribute('email-fidelity')).to.equal(false);
  });

  it('2. reflects the property to the kebab attribute', async () => {
    const el = await editorFixture();
    el.emailFidelity = true;
    await el.updateComplete;
    expect(el.hasAttribute('email-fidelity')).to.equal(true);
  });

  it('3. reads the attribute into the property', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
    );
    expect(el.emailFidelity).to.equal(true);
  });
});

describe('nile-wysiwyg-editor email-fidelity: value parsing', () => {
  it('4. keeps cell padding in value with the flag on', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
    );
    el.value = EMAIL_FIXTURE;
    await el.updateComplete;
    const doc = new DOMParser().parseFromString(el.value, 'text/html');
    const padded = Array.from(doc.querySelectorAll<HTMLElement>('td')).some(
      td => td.style.padding !== '' || td.style.paddingTop !== ''
    );
    expect(padded, 'a td keeps padding').to.equal(true);
  });

  it('5. strips cell padding in value with the flag off', async () => {
    const el = await editorFixture();
    el.value = EMAIL_FIXTURE;
    await el.updateComplete;
    expect(el.value).to.not.include('padding');
  });

  it('6. re-parses value when the flag toggles on', async () => {
    const el = await editorFixture();
    el.value = EMAIL_FIXTURE;
    await el.updateComplete;
    expect(el.value).to.not.include('padding');

    el.emailFidelity = true;
    el.value = EMAIL_FIXTURE;
    await el.updateComplete;
    expect(el.value).to.match(/padding/);
  });
});

describe('nile-wysiwyg-editor email-fidelity: paste', () => {
  it('7. parses a text/plain-only HTML document when the flag is on', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
    );
    const handled = firePaste(el, { 'text/plain': FULL_DOC });
    expect(handled).to.equal(true);
    await el.updateComplete;
    expect(el.getHTML()).to.include('<table');
    expect(el.getHTML()).to.not.include('&lt;table');
  });

  it('8. inserts the HTML document literally when the flag is off', async () => {
    const el = await editorFixture();
    firePaste(el, { 'text/plain': FULL_DOC });
    await el.updateComplete;
    // No real table node — the markup is kept as literal text.
    expect(el.getHTML()).to.not.include('<table');
    expect(el.getText()).to.include('<table');
  });

  it('9. paste-as-plain-text wins over HTML detection', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor email-fidelity paste-as-plain-text></nile-wysiwyg-editor>`
    );
    firePaste(el, { 'text/plain': FULL_DOC });
    await el.updateComplete;
    expect(el.getHTML()).to.not.include('<table');
    expect(el.getText()).to.include('<table');
  });

  it('10. markdown text still goes through markdown with the flag on', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
    );
    firePaste(el, { 'text/plain': '# Heading\n\nSome **bold** text.' });
    await el.updateComplete;
    const out = el.getHTML();
    expect(out).to.include('<h1>');
    expect(out).to.include('<strong>');
  });
});

/** Focuses the editor with the caret inside the first text that equals `text`. */
async function caretIn(el: NileWysiwygEditor, text: string) {
  const view = el.pmView!;
  let pos = -1;
  view.state.doc.descendants((node, at) => {
    if (pos === -1 && node.isText && node.text === text) pos = at + 1;
    return pos === -1;
  });
  view.focus();
  view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, pos)));
  await el.updateComplete;
  await new Promise(r => setTimeout(r, 50));
}

function tableMenuOpen(el: NileWysiwygEditor): boolean {
  return !!el.shadowRoot!.querySelector('nile-wysiwyg-table-menu')!.hasAttribute('open');
}

const DATA_TABLE = '<table><tr><td>data cell</td></tr></table>';
const LAYOUT_TABLE = '<table role="presentation"><tr><td><p>layout cell</p></td></tr></table>';
const DATA_IN_LAYOUT =
  '<table role="presentation"><tr><td><table><tr><td>inner data</td></tr></table></td></tr></table>';

describe('nile-wysiwyg-editor: table menu visibility', () => {
  it('11. shows in a data table by default', async () => {
    const el = await editorFixture(html`<nile-wysiwyg-editor .value=${DATA_TABLE}></nile-wysiwyg-editor>`);
    await caretIn(el, 'data cell');
    expect(tableMenuOpen(el)).to.equal(true);
  });

  it('12. no-table-menu hides it', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor no-table-menu .value=${DATA_TABLE}></nile-wysiwyg-editor>`
    );
    expect(el.noTableMenu).to.equal(true);
    await caretIn(el, 'data cell');
    expect(tableMenuOpen(el)).to.equal(false);
  });

  it('13. toggling noTableMenu while focused closes and reopens it', async () => {
    const el = await editorFixture(html`<nile-wysiwyg-editor .value=${DATA_TABLE}></nile-wysiwyg-editor>`);
    await caretIn(el, 'data cell');
    el.noTableMenu = true;
    await el.updateComplete;
    expect(tableMenuOpen(el)).to.equal(false);
    el.noTableMenu = false;
    await el.updateComplete;
    expect(tableMenuOpen(el)).to.equal(true);
  });

  it('14. email-fidelity hides it inside a layout table', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor email-fidelity .value=${LAYOUT_TABLE}></nile-wysiwyg-editor>`
    );
    await caretIn(el, 'layout cell');
    expect(tableMenuOpen(el)).to.equal(false);
  });

  it('15. without email-fidelity a layout table still shows it (unchanged)', async () => {
    const el = await editorFixture(html`<nile-wysiwyg-editor .value=${LAYOUT_TABLE}></nile-wysiwyg-editor>`);
    await caretIn(el, 'layout cell');
    expect(tableMenuOpen(el)).to.equal(true);
  });

  it('16. email-fidelity still shows it in a data table nested in a layout table', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor email-fidelity .value=${DATA_IN_LAYOUT}></nile-wysiwyg-editor>`
    );
    await caretIn(el, 'inner data');
    expect(tableMenuOpen(el)).to.equal(true);
  });
});

describe('nile-wysiwyg-editor email-fidelity: saved HTML matches the editor', () => {
  /** A table with no role="presentation" and no layout styles of its own. */
  const DATA_TABLE =
    '<table><tbody><tr><td><p>Employee Number:</p></td><td><p>1342</p></td></tr></tbody></table>';
  const AUTHORED =
    '<table style="width: 600px"><tbody><tr><td style="padding: 20px; vertical-align: middle">' +
    '<p style="margin: 0 0 12px 0">Kept</p></td></tr></tbody></table>';
  const LAYOUT =
    '<table role="presentation"><tbody><tr><td><p>layout cell</p></td></tr></tbody></table>';

  const parse = (out: string) => new DOMParser().parseFromString(out, 'text/html').body;

  async function load(value: string, fidelity = true) {
    const el = await editorFixture(
      fidelity
        ? html`<nile-wysiwyg-editor email-fidelity></nile-wysiwyg-editor>`
        : html`<nile-wysiwyg-editor></nile-wysiwyg-editor>`
    );
    el.value = value;
    await el.updateComplete;
    return el;
  }

  it('1. writes the editor table rendering into a data table that sets none', async () => {
    const el = await load(DATA_TABLE);
    const body = parse(el.getHTML());
    const table = body.querySelector('table')!;
    expect(table.getAttribute('cellpadding')).to.equal('0');
    expect(table.getAttribute('cellspacing')).to.equal('0');
    expect(table.style.width).to.equal('100%');
    expect(table.style.borderCollapse).to.equal('collapse');
    expect(table.style.tableLayout).to.equal('fixed');
    const td = body.querySelector('td')!;
    expect(td.style.padding).to.equal('6px 8px');
    expect(td.style.verticalAlign).to.equal('top');
    const p = body.querySelector('p')!;
    expect(p.style.marginTop).to.equal('0px');
    expect(p.style.marginBottom).to.equal('0px');
  });

  it('2. keeps values the content sets itself', async () => {
    const el = await load(AUTHORED);
    const body = parse(el.getHTML());
    expect(body.querySelector('table')!.style.width).to.equal('600px');
    const td = body.querySelector('td')!;
    expect(td.style.padding).to.equal('20px');
    expect(td.style.verticalAlign).to.equal('middle');
    expect(body.querySelector('p')!.style.margin).to.equal('0px 0px 12px');
  });

  it('3. leaves layout-table cells as authored, adding only cellpadding/cellspacing and collapse', async () => {
    const el = await load(LAYOUT);
    const body = parse(el.getHTML());
    const table = body.querySelector('table')!;
    expect(table.getAttribute('cellpadding')).to.equal('0');
    expect(table.style.borderCollapse).to.equal('collapse');
    expect(table.style.tableLayout).to.equal('');
    expect(table.style.width).to.equal('');
    const td = body.querySelector('td')!;
    expect(td.style.padding).to.equal('');
    expect(td.style.verticalAlign).to.equal('');
  });

  it('4. without email-fidelity the output is unchanged', async () => {
    const el = await load(DATA_TABLE, false);
    const out = el.getHTML();
    expect(out).to.not.include('cellpadding');
    expect(out).to.not.include('padding');
    expect(out).to.not.include('border-collapse');
  });

  it('5. is stable across save and reload', async () => {
    const first = await load(DATA_TABLE);
    const saved = first.getHTML();
    const second = await load(saved);
    expect(second.getHTML()).to.equal(saved);
    expect(second.value).to.equal(saved);
  });

  it('6. writes cell borders and the header fill in the colours the theme draws', async () => {
    const el = await editorFixture(
      html`<nile-wysiwyg-editor
        email-fidelity
        style="--nile-wysiwyg-table-border: rgb(1, 2, 3); --nile-wysiwyg-table-header-bg: rgb(4, 5, 6)"
      ></nile-wysiwyg-editor>`
    );
    el.value =
      '<table><tbody><tr><th><p>Attribute</p></th></tr><tr><td><p>Email</p></td></tr></tbody></table>';
    await el.updateComplete;
    const body = parse(el.getHTML());
    const td = body.querySelector('td')!;
    expect(td.style.borderTop).to.equal('1px solid rgb(1, 2, 3)');
    expect(td.style.borderLeft).to.equal('1px solid rgb(1, 2, 3)');
    const th = body.querySelector('th')!;
    expect(th.style.backgroundColor).to.equal('rgb(4, 5, 6)');
    expect(th.style.textAlign).to.equal('left');
    expect(th.style.fontWeight).to.equal('600');
    const again = await load(el.getHTML());
    expect(parse(again.getHTML()).querySelector('td')!.style.borderTop).to.equal(
      '1px solid rgb(1, 2, 3)'
    );
  });

  it('6b. keeps an imported cell border across two saves', async () => {
    const first = await load(
      '<table role="presentation"><tbody><tr><td style="border: 1px solid #d9dee4"><p>x</p></td></tr></tbody></table>'
    );
    const second = await load(first.getHTML());
    const td = parse(second.getHTML()).querySelector('td')!;
    expect(td.style.borderTop).to.equal('1px solid rgb(217, 222, 228)');
    expect(td.style.borderRight).to.equal('1px solid rgb(217, 222, 228)');
    expect(second.getHTML()).to.equal(first.getHTML());
  });

  it('7. writes no border when the theme draws none', async () => {
    const el = await load(DATA_TABLE);
    expect(el.getHTML()).to.not.include('border-top');
  });

  it('8. writes a resized column width onto its cells', async () => {
    const el = await load(
      '<table><tbody><tr><td data-colwidth="120"><p>a</p></td><td><p>b</p></td></tr></tbody></table>'
    );
    const tds = parse(el.getHTML()).querySelectorAll('td');
    expect((tds[0] as HTMLElement).style.width).to.equal('120px');
    expect((tds[1] as HTMLElement).style.width).to.equal('');
  });

  it('9. draws layout-table cells the way a mail client does, data cells as before', async () => {
    const el = await load(LAYOUT + DATA_TABLE);
    const cells = [...el.shadowRoot!.querySelectorAll('.ProseMirror td')] as HTMLElement[];
    const layoutCell = cells.find(c => c.textContent === 'layout cell')!;
    const dataCell = cells.find(c => c.textContent === '1342')!;
    expect(getComputedStyle(layoutCell).padding).to.equal('0px');
    expect(getComputedStyle(layoutCell).verticalAlign).to.equal('middle');
    expect(getComputedStyle(dataCell).padding).to.equal('6px 8px');
    expect(getComputedStyle(dataCell).verticalAlign).to.equal('top');
  });

  it('10. adds no editor-only margin around tables', async () => {
    const el = await load(DATA_TABLE);
    const wrapper = el.shadowRoot!.querySelector('.ProseMirror .tableWrapper') as HTMLElement;
    expect(getComputedStyle(wrapper).marginTop).to.equal('0px');
  });
});