(function(global){
    'use strict';

    // make the modal draggable by its header
    function makeDraggable(modal, header){
        let dragging = false, startX, startY, origX, origY;

        header.addEventListener('mousedown', function(e){
            dragging = true;
            startX   = e.clientX;
            startY   = e.clientY;
            const rect = modal.getBoundingClientRect();
            origX    = rect.left;
            origY    = rect.top;
            e.preventDefault();
        });

        document.addEventListener('mousemove', function(e){
            if(!dragging) return;
            modal.style.left = origX + (e.clientX - startX) + 'px';
            modal.style.top  = origY + (e.clientY - startY) + 'px';
        });

        document.addEventListener('mouseup', function(){
            dragging = false;
        });
    }

    // create the styled modal with inputs, code area, and output box
    function createModal(){
        const modal = document.createElement('div');
        Object.assign(modal.style, {
            position:      'fixed',
            top:           '75px',
            left:          '65px',
            width:         '620px',
            backgroundColor:'#333',
            color:         '#fff',
            padding:       '10px',
            borderRadius:  '8px',
            zIndex:        '10000',
            userSelect:    'none'
        });

        // header bar
        const header = document.createElement('div');
        header.innerHTML = '<strong>Dice Tracker</strong>';
        Object.assign(header.style, {
            cursor:        'move',
            paddingBottom: '10px',
            borderBottom:  '1px solid #555'
        });
        modal.appendChild(header);

        // inputs container
        const form = document.createElement('div');
        form.style.display = 'flex';
        form.style.gap     = '10px';
        form.style.marginTop = '10px';

        function labeledInput(labelText, id){
            const wrapper = document.createElement('div');
            wrapper.style.width = '45%';
            wrapper.style.marginBottom = '10px';

            const label = document.createElement('label');
            label.textContent = labelText;
            label.style.display = 'block';
            label.style.marginBottom = '5px';
            wrapper.appendChild(label);

            const input = document.createElement('input');
            input.type = 'text';
            input.id   = id;
            Object.assign(input.style, {
                width:           '100%',
                backgroundColor: '#222',
                color:           '#fff',
                border:          '1px solid #555',
                padding:         '5px'
            });
            wrapper.appendChild(input);
            return wrapper;
        }

        form.appendChild(labeledInput('Base Bet', 'baseBet'));
        form.appendChild(labeledInput('Base Multiplier', 'baseMultiplier'));
        modal.appendChild(form);

        // run/stop button
        const runBtn = document.createElement('button');
        runBtn.id          = 'run-button';
        runBtn.textContent = 'Run';
        Object.assign(runBtn.style, {
            width:           '100%',
            marginTop:       '10px',
            padding:         '10px',
            backgroundColor: '#444',
            color:           '#fff',
            border:          '1px solid #555',
            cursor:          'pointer'
        });
        modal.appendChild(runBtn);

        // code textarea
        const codeArea = document.createElement('textarea');
        codeArea.id          = 'codeArea';
        codeArea.placeholder = '// your code here\n// use settings.baseBet & settings.baseMultiplier';
        Object.assign(codeArea.style, {
            width:           '600px',
            height:          '225px',
            marginTop:       '10px',
            backgroundColor: '#222',
            color:           '#fff',
            border:          '1px solid #555',
            padding:         '10px'
        });
        modal.appendChild(codeArea);

        // output box
        const outputBox = document.createElement('div');
        outputBox.id = 'output-box';
        Object.assign(outputBox.style, {
            width:           '100%',
            height:          '150px',
            overflowY:       'auto',
            marginTop:       '10px',
            backgroundColor: '#222',
            color:           '#fff',
            border:          '1px solid #555',
            padding:         '10px'
        });
        modal.appendChild(outputBox);

        document.body.appendChild(modal);
        makeDraggable(modal, header);
    }

    // write a line to the output box
    function output(msg){
        const box = document.getElementById('output-box');
        if(!box) return;
        const div = document.createElement('div');
        div.textContent = msg;
        box.appendChild(div);
        box.scrollTop = box.scrollHeight;
    }

    // clear all lines from the output box
    function clearOutput(){
        const box = document.getElementById('output-box');
        if(!box) return;
        box.innerHTML = '';
    }

    // expose to global scope for the main script to use
    global.createModal    = createModal;
    global.output         = output;
    global.clearOutput    = clearOutput;

})(window);