/**
 * WYSIWYG integration tests with character-by-character typing.
 *
 * Every keystroke is sent individually with a delay, matching real
 * user behavior. Assertions check intermediate DOM states to verify
 * transforms fire at the right moments.
 *
 * Run: node test/integration/test_wysiwyg.js
 */
const { Builder, By, Key } = require('selenium-webdriver');
const firefox = require('selenium-webdriver/firefox');
const { createServer } = require('./server');

let server, driver;
const DELAY = 30;

async function setup() {
    server = createServer(9997);
    await server.start();
    const options = new firefox.Options().addArguments('--headless');
    driver = await new Builder().forBrowser('firefox').setFirefoxOptions(options).build();
    await driver.get(server.url);
    await driver.wait(async () => driver.executeScript('return window.__ribbitReady === true'), 10000);
}

async function teardown() {
    if (driver) { await driver.quit(); }
    if (server) { await server.stop(); }
}

async function resetEditor() {
    await driver.executeScript(`
        var e = window.__ribbitEditor;
        e.wysiwyg();
        e.element.innerHTML = '<p><br></p>';
    `);
    await driver.findElement(By.id('ribbit')).click();
    await driver.sleep(50);
}

/**
 * Send a single character and wait for the editor to process it.
 */
async function typeChar(character) {
    await driver.actions().sendKeys(character).perform();
    await driver.sleep(DELAY);
}

/**
 * Type a string one character at a time with delay between each.
 */
async function typeString(text) {
    for (const character of text) {
        await typeChar(character);
    }
}

async function getHTML() {
    return driver.executeScript('return document.getElementById("ribbit").innerHTML');
}

async function getMarkdown() {
    return driver.executeScript('return window.__ribbitEditor.getMarkdown()');
}

let passed = 0, failed = 0;
const errors = [];

function assert(condition, message) {
    if (!condition) { throw new Error(message); }
}

async function test(name, fn) {
    try {
        await fn();
        passed++;
        console.log(`  ✓ ${name}`);
    } catch (error) {
        failed++;
        errors.push(name);
        console.log(`  ✗ ${name}`);
        console.log(`    ${error.message}`);
    }
}

async function runTests() {
    console.log('\nWYSIWYG Integration Tests (char-by-char)\n');

    // ── Headings ──

    console.log('  Headings:');

    await test('# transforms to h1 after space', async () => {
        await resetEditor();
        await typeChar('#');
        let html = await getHTML();
        assert(!html.includes('<h1'), `Premature h1 after just #: ${html}`);

        await typeChar(' ');
        html = await getHTML();
        assert(html.includes('<h1'), `No h1 after "# ": ${html}`);

        await typeString('Hello');
        html = await getHTML();
        assert(html.includes('<h1') && html.includes('Hello'), `Missing content in h1: ${html}`);
    });

    await test('## transforms to h2 after space', async () => {
        await resetEditor();
        await typeString('##');
        let html = await getHTML();
        assert(!html.includes('<h2'), `Premature h2: ${html}`);

        await typeChar(' ');
        html = await getHTML();
        assert(html.includes('<h2'), `No h2 after "## ": ${html}`);
    });

    await test('enter after heading creates new paragraph', async () => {
        await resetEditor();
        await typeString('# Title');
        await typeChar(Key.ENTER);
        await typeString('body');
        const html = await getHTML();
        assert(html.includes('<h1'), `No h1: ${html}`);
        assert(html.includes('body'), `No body text: ${html}`);
    });

    // ── Bold ──

    console.log('  Bold:');

    await test('** does not transform without content', async () => {
        await resetEditor();
        await typeString('**');
        const html = await getHTML();
        assert(!html.includes('<strong'), `Premature strong after just **: ${html}`);
    });

    await test('**x starts speculative bold', async () => {
        await resetEditor();
        await typeString('**');
        await typeChar('x');
        const html = await getHTML();
        assert(html.includes('<strong'), `No strong after **x: ${html}`);
        assert(html.includes('data-speculative'), `Not speculative: ${html}`);
    });

    await test('**hello** completes bold', async () => {
        await resetEditor();
        await typeString('**hello');
        let html = await getHTML();
        assert(html.includes('data-speculative'), `Not speculative during typing: ${html}`);

        await typeString('**');
        html = await getHTML();
        assert(html.includes('<strong'), `No strong after closing: ${html}`);
        assert(!html.includes('data-speculative'), `Still speculative after closing: ${html}`);
        assert(html.includes('hello'), `Missing content: ${html}`);
    });

    await test('typing after **bold** goes outside strong', async () => {
        await resetEditor();
        await typeString('**bold**');
        await typeString(' after');
        const html = await getHTML();
        assert(html.includes('<strong'), `No strong: ${html}`);
        assert(html.includes('after'), `Missing "after" text: ${html}`);
        // "after" should NOT be inside <strong>
        const strongMatch = html.match(/<strong[^>]*>.*?<\/strong>/);
        if (strongMatch) {
            assert(!strongMatch[0].includes('after'),
                `"after" is inside strong — cursor not placed correctly: ${html}`);
        }
    });

    // ── Italic ──

    console.log('  Italic:');

    await test('*x starts speculative italic', async () => {
        await resetEditor();
        await typeChar('*');
        let html = await getHTML();
        assert(!html.includes('<em'), `Premature em after just *: ${html}`);

        await typeChar('x');
        html = await getHTML();
        assert(html.includes('<em'), `No em after *x: ${html}`);
        assert(html.includes('data-speculative'), `Not speculative: ${html}`);
    });

    await test('*hello* completes italic', async () => {
        await resetEditor();
        await typeString('*hello');
        let html = await getHTML();
        assert(html.includes('data-speculative'), `Not speculative: ${html}`);

        await typeChar('*');
        html = await getHTML();
        assert(html.includes('<em'), `No em: ${html}`);
        assert(!html.includes('data-speculative'), `Still speculative: ${html}`);
    });

    // ── Code ──

    console.log('  Code:');

    await test('`hello` completes code span', async () => {
        await resetEditor();
        await typeString('`hello`');
        const html = await getHTML();
        assert(html.includes('<code'), `No code: ${html}`);
        assert(!html.includes('data-speculative'), `Still speculative: ${html}`);
        assert(html.includes('hello'), `Missing content: ${html}`);
    });

    // ── Nested inline ──

    console.log('  Nested inline:');

    await test('**bold *italic* still typing bold', async () => {
        await resetEditor();

        // Type **
        await typeString('**');
        let html = await getHTML();
        assert(!html.includes('<strong'), `Premature strong after **: ${html}`);

        // Type b — speculative bold starts
        await typeChar('b');
        html = await getHTML();
        assert(html.includes('<strong'), `No strong after **b: ${html}`);
        assert(html.includes('data-speculative'), `Not speculative: ${html}`);

        // Type "old " — still speculative bold
        await typeString('old ');
        html = await getHTML();
        assert(html.includes('data-speculative'), `Lost speculative during bold: ${html}`);

        // Type * — just a * inside the speculative bold
        await typeChar('*');
        html = await getHTML();
        assert(html.includes('data-speculative'), `Lost speculative after *: ${html}`);

        // Type "italic" — speculative italic should nest inside speculative bold
        await typeString('italic');
        html = await getHTML();
        // Should have both strong and em
        assert(html.includes('<strong'), `Lost strong: ${html}`);

        // Type * — closes italic, bold still speculative
        await typeChar('*');
        html = await getHTML();
        assert(html.includes('<em'), `No em after closing *: ${html}`);
        assert(html.includes('italic'), `Missing italic content: ${html}`);
        // Bold should still be speculative (unclosed)
        assert(html.includes('data-speculative'), `Bold not speculative anymore: ${html}`);
    });

    await test('**bold** and *italic* on same line', async () => {
        await resetEditor();
        await typeString('**bold**');
        let html = await getHTML();
        assert(html.includes('<strong'), `No strong: ${html}`);
        assert(!html.includes('data-speculative'), `Still speculative: ${html}`);

        await typeString(' and ');
        await typeString('*italic*');
        html = await getHTML();
        assert(html.includes('<strong'), `Lost strong: ${html}`);
        assert(html.includes('<em'), `No em: ${html}`);
        assert(html.includes('italic'), `Missing italic content: ${html}`);
    });

    // ── Lists ──

    console.log('  Lists:');

    await test('- space transforms to unordered list', async () => {
        await resetEditor();
        await typeChar('-');
        let html = await getHTML();
        assert(!html.includes('<ul'), `Premature ul after just -: ${html}`);

        await typeChar(' ');
        html = await getHTML();
        assert(html.includes('<ul') || html.includes('<li'), `No list after "- ": ${html}`);

        await typeString('item');
        html = await getHTML();
        assert(html.includes('item'), `Missing content: ${html}`);
    });

    await test('1. space transforms to ordered list', async () => {
        await resetEditor();
        await typeString('1.');
        let html = await getHTML();
        assert(!html.includes('<ol'), `Premature ol: ${html}`);

        await typeChar(' ');
        html = await getHTML();
        assert(html.includes('<ol') || html.includes('<li'), `No list after "1. ": ${html}`);
    });

    // ── Blockquote ──

    console.log('  Blockquote:');

    await test('> space transforms to blockquote', async () => {
        await resetEditor();
        await typeChar('>');
        let html = await getHTML();
        assert(!html.includes('<blockquote'), `Premature blockquote: ${html}`);

        await typeChar(' ');
        html = await getHTML();
        assert(html.includes('<blockquote'), `No blockquote after "> ": ${html}`);
    });

    await test('enter inside blockquote adds new line', async () => {
        await resetEditor();
        await typeString('> first line');
        let html = await getHTML();
        assert(html.includes('<blockquote'), `No blockquote: ${html}`);

        await typeChar(Key.ENTER);
        await typeString('second line');
        html = await getHTML();

        // Both lines must be inside the same blockquote
        const blockquoteCount = (html.match(/<blockquote/g) || []).length;
        assert(blockquoteCount === 1, `Expected 1 blockquote, got ${blockquoteCount}: ${html}`);
        assert(html.includes('first line'), `Missing first line: ${html}`);
        assert(html.includes('second line'), `Missing second line: ${html}`);
        // The two lines must be separate — not merged into one string
        assert(!html.includes('first linesecond'), `Lines merged without break: ${html}`);

        // Markdown should be "> foo\n> bar" — continuation, no blank lines
        const markdown = await getMarkdown();
        assert(markdown.includes('> first line'), `Missing > first line in markdown: ${markdown}`);
        assert(markdown.includes('> second line'), `Missing > second line in markdown: ${markdown}`);
        assert(!markdown.includes('>\n>'), `Unwanted blank > line in markdown: ${markdown}`);
    });

    await test('blockquote paragraphs survive mode round-trip', async () => {
        await resetEditor();
        await typeString('> foo');
        await typeChar(Key.ENTER);
        await typeString('bar');
        await driver.sleep(50);

        // Switch to source and back to wysiwyg twice
        await driver.executeScript('window.__ribbitEditor.edit()');
        await driver.sleep(50);
        await driver.executeScript('window.__ribbitEditor.wysiwyg()');
        await driver.sleep(50);
        await driver.executeScript('window.__ribbitEditor.edit()');
        await driver.sleep(50);

        const markdown = await driver.executeScript('return document.getElementById("ribbit").textContent');
        assert(markdown.includes('> foo'), `Missing > foo: ${markdown}`);
        assert(markdown.includes('> bar'), `Missing > bar — second line lost its prefix: ${markdown}`);
    });

    await test('double enter exits blockquote', async () => {
        await resetEditor();
        await typeString('> quoted');
        await typeChar(Key.ENTER);
        await typeChar(Key.ENTER);
        await typeString('after');
        const html = await getHTML();
        assert(html.includes('<blockquote'), `No blockquote: ${html}`);
        assert(html.includes('quoted'), `Missing quoted text: ${html}`);
        assert(html.includes('after'), `Missing text after blockquote: ${html}`);
        // "after" should NOT be inside the blockquote
        const afterBlockquote = html.indexOf('</blockquote');
        const afterText = html.indexOf('after');
        assert(afterText > afterBlockquote, `"after" is inside blockquote: ${html}`);
    });

    // ── Horizontal rule ──

    console.log('  Horizontal rule:');

    await test('--- transforms to hr', async () => {
        await resetEditor();
        await typeString('--');
        let html = await getHTML();
        assert(!html.includes('<hr'), `Premature hr: ${html}`);

        await typeChar('-');
        await driver.sleep(50);
        html = await getHTML();
        assert(html.includes('<hr'), `No hr after ---: ${html}`);
    });

    // ── Round-trip ──

    console.log('  Round-trip:');

    await test('**hello** round-trips to markdown', async () => {
        await resetEditor();
        await typeString('**hello**');
        await driver.sleep(50);
        const markdown = await getMarkdown();
        assert(markdown.includes('**hello**'), `Expected **hello** in: ${markdown}`);
    });

    await test('# Title round-trips to markdown', async () => {
        await resetEditor();
        await typeString('# Title');
        await driver.sleep(50);
        const markdown = await getMarkdown();
        assert(markdown.includes('# Title'), `Expected # Title in: ${markdown}`);
    });

    await test('mode switch preserves content', async () => {
        await resetEditor();
        await typeString('**bold**');
        await typeString(' and ');
        await typeString('*italic*');
        await driver.sleep(50);

        await driver.executeScript('window.__ribbitEditor.view()');
        await driver.sleep(50);
        await driver.executeScript('window.__ribbitEditor.wysiwyg()');
        await driver.sleep(50);

        const html = await getHTML();
        assert(html.includes('<strong'), `Bold lost after mode switch: ${html}`);
        assert(html.includes('<em'), `Italic lost after mode switch: ${html}`);
    });

    // ── Speculative closing ──

    console.log('  Speculative closing:');

    await test('right arrow closes speculative', async () => {
        await resetEditor();
        await typeString('**hello');
        await driver.sleep(50);
        let html = await getHTML();
        assert(html.includes('data-speculative'), `No speculative: ${html}`);

        await typeChar(Key.ARROW_RIGHT);
        await driver.sleep(50);
        html = await getHTML();
        assert(!html.includes('data-speculative'), `Speculative not closed: ${html}`);
    });

    await test('click outside closes speculative', async () => {
        await resetEditor();
        await typeString('**hello');
        await driver.sleep(50);
        let html = await getHTML();
        assert(html.includes('data-speculative'), `No speculative: ${html}`);

        // Add an element outside the editor and click it
        await driver.executeScript(`
            if (!document.getElementById('outside')) {
                var btn = document.createElement('button');
                btn.id = 'outside';
                btn.textContent = 'outside';
                btn.style.display = 'block';
                btn.style.padding = '20px';
                document.body.appendChild(btn);
            }
        `);
        await driver.findElement(By.id('outside')).click();
        await driver.sleep(100);
        html = await getHTML();
        assert(!html.includes('data-speculative'), `Speculative not closed: ${html}`);
    });

    console.log('  Enter behavior:');

    await test('block pattern after Enter splits and transforms', async () => {
        await resetEditor();
        await typeString('foo');
        await typeChar(Key.ENTER);
        await typeString('> bar');
        await driver.sleep(50);
        const html = await getHTML();
        assert(html.includes('<blockquote'), `> after Enter did not create blockquote: ${html}`);
        assert(html.includes('foo'), `Lost content before split: ${html}`);
        assert(html.includes('bar'), `Lost content after split: ${html}`);
    });

    await test('single Enter in paragraph inserts line break', async () => {
        await resetEditor();
        await typeString('line one');
        await typeChar(Key.ENTER);
        await typeString('line two');
        const markdown = await getMarkdown();
        // Single Enter = one \n, not \n\n
        assert(markdown.includes('line one'), `Missing line one: ${markdown}`);
        assert(markdown.includes('line two'), `Missing line two: ${markdown}`);
        assert(!markdown.includes('line one\n\nline two'), `Got paragraph break instead of line break: ${markdown}`);
    });

    await test('double Enter in paragraph creates new block', async () => {
        await resetEditor();
        await typeString('first paragraph');
        await typeChar(Key.ENTER);
        await typeChar(Key.ENTER);
        await typeString('second paragraph');
        const html = await getHTML();
        // Double Enter = new <p>, so two separate paragraphs
        const paragraphCount = (html.match(/<p[\s>]/g) || []).length;
        assert(paragraphCount >= 2, `Expected 2+ paragraphs, got ${paragraphCount}: ${html}`);
    });

    await test('backspace at start of line after Enter joins lines', async () => {
        await resetEditor();
        await typeString('foo');
        await typeChar(Key.ENTER);
        await typeChar(Key.BACK_SPACE);
        await driver.sleep(50);
        const html = await getHTML();
        // The <br> should be removed, cursor at end of "foo"
        assert(!html.includes('<br'), `<br> not removed: ${html}`);
        assert(html.includes('foo'), `Content lost: ${html}`);
    });

    await test('single Enter in list item inserts line break', async () => {
        await resetEditor();
        await typeString('- line one');
        await typeChar(Key.ENTER);
        await typeString('line two');
        const markdown = await getMarkdown();
        // Both lines in the same list item
        assert(markdown.includes('- line one'), `Missing list marker: ${markdown}`);
        assert(markdown.includes('line two'), `Missing line two: ${markdown}`);
        // Should NOT create a second list item
        const markerCount = (markdown.match(/^- /gm) || []).length;
        assert(markerCount === 1, `Expected 1 list marker, got ${markerCount}: ${markdown}`);
    });

    await test('double Enter in list item creates new item', async () => {
        await resetEditor();
        await typeString('- first');
        await typeChar(Key.ENTER);
        await typeChar(Key.ENTER);
        await typeString('second');
        const markdown = await getMarkdown();
        const markerCount = (markdown.match(/^- /gm) || []).length;
        assert(markerCount === 2, `Expected 2 list markers, got ${markerCount}: ${markdown}`);
        assert(markdown.includes('- first'), `Missing first item: ${markdown}`);
        assert(markdown.includes('- second'), `Missing second item: ${markdown}`);
    });

    await test('double Enter on empty list item exits list', async () => {
        await resetEditor();
        await typeString('- item');
        await typeChar(Key.ENTER);
        await typeChar(Key.ENTER);
        await typeChar(Key.ENTER);
        await typeChar(Key.ENTER);
        await typeString('after list');
        const html = await getHTML();
        assert(html.includes('after list'), `Missing text after list: ${html}`);
        // "after list" should NOT be inside the <ul>
        const ulEnd = html.indexOf('</ul>');
        const afterPos = html.indexOf('after list');
        assert(afterPos > ulEnd, `"after list" is inside the list: ${html}`);
    });

    // ── Complex document ──

    console.log('  Complex document:');

    await test('multi-element document', async () => {
        await resetEditor();
        await typeString('# Title');
        await typeChar(Key.ENTER);
        await typeString('Some **bold** text.');
        await typeChar(Key.ENTER);
        await typeChar(Key.ENTER);
        await typeString('## Section');
        await typeChar(Key.ENTER);
        await typeString('- item one');

        await driver.sleep(100);
        const html = await getHTML();
        assert(html.includes('<h1'), `Missing h1: ${html}`);
        assert(html.includes('<strong'), `Missing strong: ${html}`);
        assert(html.includes('<h2'), `Missing h2: ${html}`);
        assert(html.includes('<li') || html.includes('<ul'), `Missing list: ${html}`);
    });

    console.log('  Strikethrough:');

    await test('~~text~~ transforms to <del>', async () => {
        await resetEditor();
        await typeString('~~gone~~');
        const html = await getHTML();
        assert(html.includes('<del'), `No <del>: ${html}`);
        assert(!html.includes('data-speculative'), `Still speculative: ${html}`);
        assert(html.includes('gone'), `Missing content: ${html}`);
    });

    await test('~~text shows speculative strikethrough', async () => {
        await resetEditor();
        await typeString('~~hel');
        const html = await getHTML();
        assert(html.includes('data-speculative'), `No speculative: ${html}`);
        assert(html.includes('<del'), `No <del>: ${html}`);
    });

    console.log('  Alternate syntax:');

    await test('~~~ transforms to fenced code', async () => {
        await resetEditor();
        await typeString('~~~');
        await driver.sleep(50);
        const html = await getHTML();
        assert(html.includes('<pre') || html.includes('<code'), `No code block: ${html}`);
    });

    await test('+ space transforms to unordered list', async () => {
        await resetEditor();
        await typeChar('+');
        let html = await getHTML();
        assert(!html.includes('<ul'), `Premature ul: ${html}`);

        await typeChar(' ');
        html = await getHTML();
        assert(html.includes('<ul') || html.includes('<li'), `No list after "+ ": ${html}`);
    });

    console.log('  Underscore emphasis:');

    await test('_text_ transforms to italic (shows * delimiters)', async () => {
        await resetEditor();
        await typeString('_hello_');
        const html = await getHTML();
        assert(html.includes('<em'), `No <em> after _hello_: ${html}`);
        assert(!html.includes('data-speculative'), `Still speculative: ${html}`);
    });

    await test('_text shows speculative italic', async () => {
        await resetEditor();
        await typeString('_hel');
        const html = await getHTML();
        assert(html.includes('<em'), `No <em> after _hel: ${html}`);
        assert(html.includes('data-speculative'), `Not speculative: ${html}`);
    });

    await test('__text__ transforms to bold', async () => {
        await resetEditor();
        await typeString('__hello__');
        const html = await getHTML();
        assert(html.includes('<strong'), `No <strong> after __hello__: ${html}`);
        assert(!html.includes('data-speculative'), `Still speculative: ${html}`);
    });

    console.log('  Backslash escapes:');

    await test('backslash is just a character in WYSIWYG', async () => {
        await resetEditor();
        await typeString('hello\\world');
        const html = await getHTML();
        assert(html.includes('hello') && html.includes('world'), `Missing content: ${html}`);
    });
}

(async () => {
    try {
        await setup();
        await runTests();
    } catch (error) {
        console.error('Setup failed:', error.message);
        failed++;
    } finally {
        console.log(`\n${passed}/${passed + failed} passed — ${failed} failed`);
        if (errors.length) {
            console.log('\nFailed:');
            errors.forEach(error => console.log(`  • ${error}`));
        }
        await teardown();
        process.exit(failed > 0 ? 1 : 0);
    }
})();