// dice-modal.js
(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;
        });
    }

    // helper to write 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;
    }

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

    // list all localStorage keys ending in .dice.js
    function getDiceScriptKeys(){
        return Object.keys(localStorage).filter(key => key.endsWith('.dice.js'));
    }

    // rebuild the dropdown of saved dice scripts
    function populateSavedScripts(){
        const dropdown = document.getElementById('scriptDropdown');
        dropdown.innerHTML = '';
        const defaultOpt = document.createElement('option');
        defaultOpt.textContent = 'Select script';
        defaultOpt.value = '';
        dropdown.appendChild(defaultOpt);
        getDiceScriptKeys().forEach(key => {
            const opt = document.createElement('option');
            opt.value = key;
            opt.textContent = key;
            dropdown.appendChild(opt);
        });
    }

    // save current codeArea under scriptNameInput + .dice.js
    function saveScript(){
        const nameInput = document.getElementById('scriptNameInput');
        let name = nameInput.value.trim();
        if(!name){
            output('Please enter a script name');
            return;
        }
        if(!name.endsWith('.dice.js')){
            name += '.dice.js';
        }
        const code = document.getElementById('codeArea').value;
        localStorage.setItem(name, code);
        output(`Saved ${name}`);
        populateSavedScripts();
    }

    // load selected script into codeArea
    function loadScript(){
        const dropdown = document.getElementById('scriptDropdown');
        const key = dropdown.value;
        if(!key) return;
        const code = localStorage.getItem(key);
        document.getElementById('codeArea').value = code;
        // remove the suffix in the input for clarity
        document.getElementById('scriptNameInput').value = key.replace(/\.dice\.js$/, '');
        output(`Loaded ${key}`);
    }

    // delete selected script
    function deleteScript(){
        const dropdown = document.getElementById('scriptDropdown');
        const key = dropdown.value;
        if(!key) return;
        localStorage.removeItem(key);
        output(`Deleted ${key}`);
        populateSavedScripts();
    }

    // build and attach the modal
    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);

        // script save/load controls
        const scriptControls = document.createElement('div');
        Object.assign(scriptControls.style, {
            display:       'flex',
            alignItems:    'center',
            gap:            '5px',
            marginTop:     '10px'
        });

        const scriptNameInput = document.createElement('input');
        scriptNameInput.id          = 'scriptNameInput';
        scriptNameInput.type        = 'text';
        scriptNameInput.placeholder = 'script name';
        Object.assign(scriptNameInput.style, {
            flex:            '1',
            backgroundColor: '#222',
            color:           '#fff',
            border:          '1px solid #555',
            padding:         '5px'
        });
        scriptControls.appendChild(scriptNameInput);

        const saveBtn = document.createElement('button');
        saveBtn.id          = 'saveScriptBtn';
        saveBtn.textContent = 'Save';
        Object.assign(saveBtn.style, {
            padding:         '5px 10px',
            backgroundColor: '#444',
            color:           '#fff',
            border:          '1px solid #555',
            cursor:          'pointer'
        });
        scriptControls.appendChild(saveBtn);

        const dropdown = document.createElement('select');
        dropdown.id = 'scriptDropdown';
        Object.assign(dropdown.style, {
            backgroundColor: '#222',
            color:           '#fff',
            border:          '1px solid #555',
            padding:         '5px'
        });
        scriptControls.appendChild(dropdown);

        const loadBtn = document.createElement('button');
        loadBtn.id          = 'loadScriptBtn';
        loadBtn.textContent = 'Load';
        Object.assign(loadBtn.style, {
            padding:         '5px 10px',
            backgroundColor: '#444',
            color:           '#fff',
            border:          '1px solid #555',
            cursor:          'pointer'
        });
        scriptControls.appendChild(loadBtn);

        const deleteBtn = document.createElement('button');
        deleteBtn.id          = 'deleteScriptBtn';
        deleteBtn.textContent = 'Delete';
        Object.assign(deleteBtn.style, {
            padding:         '5px 10px',
            backgroundColor: '#444',
            color:           '#fff',
            border:          '1px solid #555',
            cursor:          'pointer'
        });
        scriptControls.appendChild(deleteBtn);

        modal.appendChild(scriptControls);

        document.body.appendChild(modal);

        // wire up drag, save/load/delete, and dropdown population
        makeDraggable(modal, header);
        saveBtn.addEventListener('click',    saveScript);
        loadBtn.addEventListener('click',    loadScript);
        deleteBtn.addEventListener('click',  deleteScript);
        populateSavedScripts();
    }

    // expose createModal, output, clearOutput
    global.createModal = createModal;
    global.output     = output;
    global.clearOutput= clearOutput;

})(window);