// simulation speed
const TICKS_PER_SECOND = 12;
const MS_PER_TICK = 1_000 / TICKS_PER_SECOND;

// one per page
const CANVAS_SELECTOR = '#arena canvas';
const TICK_BUTTON_SELECTOR = '#tick';
const BENCH_BUTTON_SELECTOR = '#bench';
const BLINKEN_BUTTON_SELECTOR = '#blinken';

// one per bot
const SRC_SELECT_SELECTOR = '#src-select';
const COMPILE_BUTTON_SELECTOR = '#compile';
const WORDLIST_SELECTOR = '#wordlist';
const STACK_SELECTOR = '#stack';
const CALLSTACK_SELECTOR = '#callstack';
const VARS_SELECTOR = '#vars';
const SRC_SELECTOR = '#src';
const IP_SELECTOR = '#wordlist .ip';

function selectorForIP(word, offset) {
    return `#wordlist x-bytecode[x-index='${word}'] x-op[x-index='${offset}']`;
}

function wordlistElts(wordlist) {
    return wordlist.map((bc, i) => {
        const bcElt = document.createElement('x-bytecode');
        bcElt.setAttribute('x-index', i);
        bc.forEach((op, i) => {
            const opElt = document.createElement('x-op');
            opElt.setAttribute('x-index', i);
            opElt.textContent = op;
            bcElt.appendChild(opElt);
        })
        return bcElt;
    })
}

function initWordlist() {
    const sel = selectorForIP(0, 0);
    document.querySelectorAll(sel).forEach(e => {
        e.classList.add('ip')
    });
}

function renderStack(vmstack) {
    document.querySelectorAll(STACK_SELECTOR).forEach(e => {
        while (e.lastChild) {
            e.removeChild(e.lastChild);
        }
        vmstack.reverse()
            .forEach(datum => {
                const elt = document.createElement('li');
                elt.textContent = datum;
                e.appendChild(elt);
                return elt;
            });
    });
}

function renderCallStack(vmcallstack) {
    document.querySelectorAll(CALLSTACK_SELECTOR).forEach(e => {
        while (e.lastChild) {
            e.removeChild(e.lastChild);
        }
        vmcallstack.reverse()
            .forEach(datum => {
                const elt = document.createElement('li');
                elt.textContent = `${datum.word}@${datum.offset}`;
                e.appendChild(elt);
                return elt;
            });
    });
}

function renderVars(vmvars) {
    document.querySelectorAll(VARS_SELECTOR).forEach(e => {
        while (e.lastChild) {
            e.removeChild(e.lastChild);
        }

        ['out', 'heading', 'speed', 'doppler'].forEach(name => {
            const dt = document.createElement('dt');
            dt.textContent = name;
            e.appendChild(dt);

            const dd = document.createElement('dd');
            dd.textContent = vmvars[name];
            e.appendChild(dd);
        });
    });
}

function renderRobo(ctx, x, y) {
    ctx.fillStyle = 'rgb(200 0 0)';
    ctx.beginPath();
    ctx.arc(x, y, 25, 0, 2 * Math.PI);
    ctx.fill();
}

function renderArena(robos, delta=0.0) {
    // interpolation factor for smoother movement independent of tick
    // rate, but never tween more than 1 tick.
    const timeScale = Math.min(delta / MS_PER_TICK, 1.0);
    const canvas = document.querySelector(CANVAS_SELECTOR);
    const ctx = canvas.getContext('2d');

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    robos.forEach(robo => {
        const [velx, vely] = [
            robo.speedx, robo.speedy
        ].map(x => timeScale * x);

        const x = robo.x + velx;
        const y = robo.y + vely;
        //console.debug('bjc render robo', robo, velx, vely, x, y)
        renderRobo(ctx, x, y);
    });
}

const highRange = new Range();
const highlight = new Highlight(highRange);
CSS.highlights.set('exec', highlight);

function renderTextHighlight(vm) {
    const ip = vm.ip;
    const anno = vm.annos[ip.word][ip.offset];
    const src = document.querySelector(SRC_SELECTOR);

    // this assumes the text node is the first child, maybe it isn't?
    highRange.setStart(src.childNodes[0], anno.start);
    highRange.setEnd(src.childNodes[0], anno.end);
}

function loadForth(taintedPath) {
    // ascii only + ‘-’, ‘_’, ‘.’, and ‘/’, but no ‘../’
    const path =
        taintedPath
            .replace(/[^-_A-Za-z./]/g, '')
            .replace(/\.\.\//g, '');
    fetch(`./samples/${path}`)
        .then(resp => {
            if (!resp.ok) {
                throw `http status ${resp.status}`
            }
            return resp.text()
        })
        .then(text => {
            document.querySelector(SRC_SELECTOR).textContent = text;
        })
        .catch(e => {
            console.error(`couldn't fetch ‘${path}’`, e);
        });
}

async function loaded() {
    const roboWorker = new Worker('robo.mjs', { type: 'module' });
    const robo = {
        worker: roboWorker,
        lastTick: undefined,
        x: 132,
        y: 25,
        heading: 0,
        speed: 0,
        speedx: 0,
        speedy: 0,
    };
    roboWorker.onmessage = e => {
        const { kind, res, vm } = e.data;
        switch (kind) {
        case 'compile':
            if (res) {
                let wordlistContainer = document.querySelector(WORDLIST_SELECTOR);
                console.debug('bjc new vm', vm);
                const wordlist = wordlistElts(vm.wordlist);
                wordlist.forEach(elt => wordlistContainer.appendChild(elt));
                initWordlist();
                renderStack(vm.stack);
                renderCallStack(vm.callstack);
                renderVars(vm.vars);
                renderTextHighlight(vm);

                renderArena([robo]);
            }
            break;
        case 'tick':
            const { word, offset } = vm.ip;
            document.querySelectorAll(IP_SELECTOR).forEach(e => e.classList.remove('ip'));
            const sel = selectorForIP(word, offset);
            document.querySelectorAll(sel).forEach(e => {
                e.classList.add('ip');
            });
            renderStack(vm.stack);
            renderCallStack(vm.callstack);
            renderVars(vm.vars);
            renderTextHighlight(vm);

            robo.lastTick = document.timeline.currentTime;
            robo.heading = vm.vars.heading;
            robo.speed = vm.vars.speed;
            const [speedx, speedy] = [
                Math.cos(2 * Math.PI * robo.heading / 360),
                Math.sin(2 * Math.PI * robo.heading / 360)
            ].map(x => robo.speed * x);
            robo.speedx = speedx;
            robo.speedy = speedy;
            robo.x += speedx;
            robo.y += speedy;
            renderArena([robo]);
            break;
        default:
            console.error('invalid message from robo worker', e.data);
        }
    };
    roboWorker.onerror = e => {
        console.error('error in roboWorker', e);
    };

    document.querySelectorAll(SRC_SELECT_SELECTOR).forEach(async sel => {
        sel.onchange = _ => loadForth(sel.value);
        loadForth(sel.value);
    });

    document.querySelector(COMPILE_BUTTON_SELECTOR).onclick = e => {
        console.debug('compile clicked', e);

        let wordlistContainer = document.querySelector(WORDLIST_SELECTOR);
        while (wordlistContainer.lastChild) {
            console.debug('removing child', wordlistContainer.lastChild)
            wordlistContainer.removeChild(wordlistContainer.lastChild);
        }

        // always add a newline until i decide what to do with the parser.
        const text = document.querySelector(SRC_SELECTOR).textContent + '\n';
        console.debug('compiling', text);
        roboWorker.postMessage({ kind: 'compile', text });
    };

    document.querySelector(TICK_BUTTON_SELECTOR).onclick = e => {
        console.debug('tick clicked', e);
        roboWorker.postMessage({ kind: 'tick' });
    };

    let blinkenRun = false;
    document.querySelector(BLINKEN_BUTTON_SELECTOR).onclick = e => {
        console.debug('blinken clicked', e);

        let lastTime = 0;
        function r(t, manual=false) {
            if (!blinkenRun) {
                return;
            }
            if (!manual) {
                window.requestAnimationFrame(r);
            }

            // we often get called with the same time stamp many times
            // in a row due to fingerprint-reduction tech.
            if (t > lastTime) {
                lastTime = t;
                const delta = robo.lastTick ? t - robo.lastTick : 0;
                renderArena([robo], delta);
            }
        }

        blinkenRun = !blinkenRun;
        if (blinkenRun) {
            e.target.textContent = 'haltenblinken';
            r(document.timeline.currentTime);
        } else {
            e.target.textContent = 'blinken';
        }
        const onTimeout = _ => {
            if (!blinkenRun) {
                return
            }
            setTimeout(onTimeout, MS_PER_TICK);

            roboWorker.postMessage({ kind: 'tick' });
        }
        setTimeout(onTimeout);
    }
    window.robo = robo;
}

document.addEventListener('DOMContentLoaded', loaded);