code 3.0.27

// ==UserScript==
// @name         Torn PDA Race Config GUI - v3.0.26 - DOM Readiness Polling Fix
// @version      3.0.26
// @description  PDA GUI to configure Torn racing parameters... - Version 3.0.26 - DOM Readiness Polling Fix
// @author       GNSC4
// @match        https://www.torn.com/loader.php?sid=racing*
// @grant        none
// @updateURL    https://raw.githubusercontent.com/GNSC4/torn-race-config-gui/main/torn-race-config-gui-v3.0.26-DomReadyPollFix.user.js
// @downloadURL  https://raw.githubusercontent.com/GNSC4/torn-race-config-gui/main/torn-race-config-gui-v3.0.26-DomReadyPollFix.user.js
// @run-at       document-end
// @require      https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js
// ==/UserScript==

(function() {
    'use strict';

    let guiInitialized = false;
    let domCheckAttempts = 0; // Counter for DOM check attempts - v3.0.26
    const MAX_DOM_CHECK_ATTEMPTS = 100; // Maximum DOM check attempts - v3.0.26

    const style = document.createElement('style');
    style.textContent = `
            #tcLogo { pointer-events: none; }
            .gui-button {
                color: #ddd;
                background-color: #555;
                border: 1px solid #777;
                border-radius: 3px;
                padding: 8px 15px;
                cursor: pointer;
                margin-top: 5px;
                margin-right: 5px;
                transition: background-color 0.3s ease;
                font-size: 0.9em;
                display: inline-block;
                text-decoration: none;
            }

            .gui-button:hover,
            .preset-button:hover,
            .remove-preset:hover,
            .close-button:hover,
            #closeGUIButton:hover,
            #toggleRaceGUIButton:hover,
            #setNowButton:hover,
            #quickPresetButtonsContainer > .quick-race-button:hover,
            div.content-title > h4 > #toggleRaceGUIButton:hover {
                background-color: #777;
            }

            div.content-title > h4 > #toggleRaceGUIButton {
                background-color: #555;
                border: 1px solid #777;
            }


            #raceConfigGUI {
                position: fixed;
                top: 85px;
                left: 20px;
                background-color: #222;
                color: #ddd;
                border: 1px solid #555;
                padding: 20px;
                z-index: 1000;
                font-family: sans-serif;
                border-radius: 10px;
                max-width: 420px;
                display: none; /* --- GUI STARTS HIDDEN - v3.0.23 --- */
            }

            #raceConfigGUI h2, #raceConfigGUI h3, #raceConfigGUI h4 {
                color: #eee;
                margin-top: 0;
                margin-bottom: 15px;
                text-align: center;
            }

            #raceConfigGUI label {
                display: block;
                margin-bottom: 5px;
                color: #ccc;
            }

            #raceConfigGUI input[type="text"],
            #raceConfigGUI input[type="number"],
            #raceConfigGUI input[type="date"],
            #raceConfigGUI input[type="time"],
            #raceConfigGUI select {
                padding: 9px;
                margin-bottom: 0px;
                border: 1px solid #555;
                background-color: #444;
                color: #eee !important;
                border-radius: 7px;
                width: calc(100% - 24px);
            }

            #raceConfigGUI input:focus,
            #raceConfigGUI select:focus {
                border-color: #888;
                box-shadow: 0 0 6px rgba(136, 136, 136, 0.5);
            }


            #raceConfigGUI .presets-section {
                margin-bottom: 20px;
                padding-bottom: 15px;
                border-bottom: 1px solid #eee;
            }

            #raceConfigGUI .presets-section:last-child {
                border-bottom: 0px solid #eee;
            }

            #raceConfigGUI .config-section:last-child {
                border-bottom: 0px solid #eee;
            }


            #raceConfigGUI .config-section h4,
            #raceConfigGUI .car-select-section h4,
            #raceConfigGUI .presets-section h4 {
                border-top: 1px solid #555;
                padding-top: 12px;
                font-size: 1.4em;
                margin-bottom: 18px;
            }


            #raceConfigGUI #createRaceButton {
                display: inline-block !important;
                text-align: center !important;
                white-space: nowrap !important;
                overflow: visible !important;
                width: 90% !important;
                max-width: 250px !important;
                padding: 10px 15px !important;
                font-size: 1.1em !important;
                color: #eee !important;
                background-color: #555 !important;
                border: 1px solid #777 !important;
            }

            #raceConfigGUI #createRaceButton:hover,
            #raceConfigGUI #closeGUIButton:hover,
            #raceConfigGUI #setNowButton:hover {
                background-color: #777;
            }

            #raceConfigGUI #setNowButton:hover {
                background-color: #888;
            }


            #raceConfigGUI .preset-button,
            #raceConfigGUI .remove-preset,
            #raceConfigGUI .close-button {
                padding: 10px 15px;
                margin-top: 5px;
                margin-right: 5px;
                border: none;
                border-radius: 5px;
                color: #fff;
                background-color: #666;
                cursor: pointer;
                transition: background-color 0.3s ease;
                font-size: 0.9em;
                display: inline-block;
                text-decoration: none;
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
                overflow-wrap: break-word;
            }


            #raceConfigGUI .preset-buttons-container {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-bottom: 15px;
                align-items: flex-start;
                max-width: calc(100% - 20px);
            }

            #raceConfigGUI .preset-button-container {
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 20px;
                text-align: center;
                position: relative;
            }

            #raceConfigGUI .presets-section .preset-buttons-container .preset-button:hover {
                background-color: #777;
            }


            #raceConfigGUI .remove-preset {
                background-color: #955;
                color: #eee;
                padding: 5px 10px;
                border-radius: 50%;
                font-size: 0.8em;
                line-height: 1;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 20px;
                height: 20px;
                text-decoration: none;
                position: absolute;
                top: 0px;
                right: -5px;
                float: none;
            }

            #raceConfigGUI .remove-preset:hover {
                background-color: #c77;
            }


            #raceConfigGUI #closeGUIButton {
                position: absolute;
                top: 10px;
                right: 10px;
                border-radius: 50%;
                width: 25px;
                height: 25px;
                padding: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 1em;
                line-height: 1;
            }

            #raceConfigGUI #statusMessageBox {
                margin-top: 15px;
                padding: 10px;
                border: 1px solid #777;
                border-radius: 5px;
                background-color: #333;
                color: #ddd;
                text-align: center;
                font-size: 0.9em;
            }

            #raceConfigGUI #statusMessageBox.error,
            #raceConfigGUI #statusMessageBox.success {
                background-color: #522;
                border-color: #944;
                color: #eee;
            }

            #raceConfigGUI #statusMessageBox.success {
                background-color: #252;
                border-color: #494;
                color: #efe;
            }

            #raceConfigGUI .api-key-section {
                margin-bottom: 20px;
                text-align: center;
            }

            #raceConfigGUI .config-params-section {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
                gap: 15px;
                margin-bottom: 20px;
            }

            #raceConfigGUI .config-params-section label {
                text-align: left;
            }

            #raceConfigGUI .config-params-section input[type="text"],
            #raceConfigGUI .config-params-section select,
            #raceConfigGUI .config-params-section input[type="number"] {
                width: 100%;
            }

            #raceConfigGUI .config-params-section .driver-input-container {
                display: inline-block;
                width: 49%;
                margin-right: 1%;
                margin-bottom: 0px;
            }

            #raceConfigGUI .config-params-section .driver-input-container:nth-child(even) {
                margin-right: 0;
            }


            #raceConfigGUI .config-params-section .driver-input-container:last-child {
                margin-right: 0;
            }

            #raceConfigGUI .config-params-section .driver-input-container input[type="number"] {
                width: calc(100% - 22px);
            }

            #raceConfigGUI .config-section > div {
                margin-bottom: 12px;
                display: flex;
                align-items: center;
            }

            #raceConfigGUI .config-section label {
                margin-bottom: 0;
                margin-right: 10px;
                width: auto;
                flex-shrink: 0;
                text-align: right;
                min-width: 110px;
            }


            @media (max-width: 768px) {
                #raceConfigGUI {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 95%;
                    max-height: 90%;
                    overflow-y: auto;
                    padding: 15px;
                    margin: 2.5%;
                    border-radius: 15px;
                }

                #raceConfigGUI h2, #raceConfigGUI h4 {
                    font-size: 1.5em;
                }


                #raceConfigGUI button,
                #raceConfigGUI #toggleRaceGUIButton,
                #raceConfigGUI .preset-button,
                #raceConfigGUI .remove-preset,
                #raceConfigGUI .gui-button,
                #raceConfigGUI .close-button {
                    padding: 12px 20px;
                    font-size: 1.1em;
                    margin: 5px 8px 5px 0;
                }

                #raceConfigGUI input[type="text"],
                #raceConfigGUI select {
                    padding: 12px;
                    font-size: 1.1em;
                }

                #raceConfigGUI .config-params-section {
                    grid-template-columns: 1fr;
                }

                #raceConfigGUI .config-params-section .driver-input-container {
                    display: block;
                    width: 100%;
                    margin-right: 0;
                }


                #raceConfigGUI .car-select-section {
                    flex-direction: column;
                    align-items: stretch;
                }

                #raceConfigGUI .car-select-section label {
                    margin-right: 0;
                    margin-bottom: 5px;
                    text-align: center;
                }

                #raceConfigGUI .car-select-section select {
                    margin-right: 0;
                    margin-bottom: 10px;
                }

                #raceConfigGUI .car-select-section button#updateCarsButton {
                    margin-right: 0;
                    width: 100%;
                }

                #quickPresetButtonsContainer {
                    text-align: center;
                    max-width: 95%;
                }

                .quick-race-button {
                    margin: 5px;
                }

                .preset-button-container {
                    text-align: center;
                }


                body {
                    background-color: #181818;
                    color: #ddd;
                }

                a {
                    color: #8da9c4;
                }

                a:hover {
                    color: #b0cddb;
                }

                div.race-container {
                    background-color: #282828 !important;
                    color: #ddd !important;
                }

                .race-body, .race-head {
                    background-color: #333 !important;
                    color: #eee !important;
                }

                .race-list-row {
                    border-bottom: 1px solid #444 !important;
                }

                .race-details-wrap {
                    background-color: #3a3a3a !important;
                    color: #ddd !important;
                }

                .race-bet-section {
                    background-color: #444 !important;
                    color: #ddd !important;
                }

                .race-bet-input {
                    background-color: #555 !important;
                    color: #eee !important;
                    border-color: #666 !important;
                }

                .race-bet-button {
                    background-color: #666 !important;
                    color: #fff !important;
                }

                .race-bet-button:hover {
                    background-color: #777 !important;
                }

                .race-content-section {
                    background-color: #333 !important;
                    color: #eee !important;
                }
        `;
    document.head.appendChild(style);


    function createRaceConfigGUI() {
        let gui = document.createElement('div');
        gui.id = 'raceConfigGUI';
        gui.innerHTML = `
            <div style="text-align: center; margin-bottom: 15px;">
                <img id="tcLogo" src="https://www.torn.com/images/v2/main/logo-black.svg" alt="Torn City Logo" style="height: 25px; margin-bottom: 10px;">
                <h2>Race Configuration</h2>
            </div>

            <div class="api-key-section">
                <h4>API Key</h4>
                <input type="text" id="apiKeyInput" placeholder="Enter your API Key">
                <button id="saveApiKeyButton" class="gui-button">Save API Key</button>
            </div>

            <div class="config-section">
                <h4>Race Settings</h4>

                <div><label for="trackSelect">Track</label>
                    <select id="trackSelect">
                        <option value="6">6 - Uptown</option>
                        <option value="1">1 - Industrial</option>
                        <option value="2">2 - Dudek</option>
                        <option value="3">3 - Parkland</option>
                        <option value="4">4 - Dirt Track</option>
                        <option value="5">5 - Speedway</option>
                    </select></div>

                <div><label for="lapsInput">Laps:</label>
                    <input type="number" id="lapsInput" value="100" min="1" max="999"></div>

                <div class="config-params-section">
                    <div class="driver-input-container"><label for="minDriversInput">Min Drivers:</label>
                        <input type="number" id="minDriversInput" value="2" min="2" max="10"></div>
                    <div class="driver-input-container"><label for="maxDriversInput">Max Drivers</label>
                        <input type="number" id="maxDriversInput" value="2" min="2" max="10"></div>
                </div>

                <div><label for="raceNameInput">Race Name:</label>
                    <input type="text" id="raceNameInput" placeholder="Race Name Optional"></div>

                <div><label for="passwordInput">Password (optional)</label>
                    <input type="text" id="passwordInput" placeholder="Race Password Optional"></div>

                <div><label for="betAmountInput">(Max 10M, Optional<br>Bet Amount for Race)</label>
                    <input type="number" id="betAmountInput" value="0" min="0" max="10000000"></div>

                <div class="time-config">
                    <label>Race Start Time (TCT 24hr):</label>
                    <div>
                        <select id="hourSelect"></select> :
                        <select id="minuteSelect"></select>
                        <button id="setNowButton" class="gui-button" style="padding: 5px 10px; font-size: 0.8em; margin-left: 5px; margin-right: 0px; vertical-align: baseline;">NOW</button>
                        <span style="font-size: 0.8em; color: #ccc; margin-left: 5px;">(TCT, 1 min interval)</span>
                    </div>
                </div>
            </div>


            <div class="car-select-section config-section">
                <h4>Car Selection</h4>
                <div>
                    <label for="carIdInput">Car ID:</label>
                    <div style="display: flex; align-items: center;">
                        <input type="text" id="carIdInput" placeholder="Enter Car ID or use dropdown below" style="margin-right: 5px;">
                        <button id="changeCarButton" class="gui-button" style="padding: 8px 10px; font-size: 0.8em; margin-top: 0px; margin-right: 0px; vertical-align: baseline; display: none;">Change Car</button> </div>
                </div>

                <div>
                    <label for="carDropdown">Car:</label>
                    <select id="carDropdown">
                        <option value="">Select a car...</option>
                    </select>
                </div>
                <div style="text-align: center; margin-top: 10px;">
                    <button id="updateCarsButton" class="gui-button" style="width: 80%; max-width: 200px; display: block; margin: 0 auto;">Update Cars</button>
                    <div id="carStatusMessage" style="font-size: 0.8em; color: #aaa; margin-top: 5px;"></div>
                </div>
            </div>


            <div class="presets-section config-section">
                <h4>Presets</h4>
                <div id="presetButtonsContainer" class="preset-buttons-container">
                    </div>

                <div>
                    <button id="savePresetButton" class="gui-button" style="width: 80%; max-width: 200px; display: block; margin: 10px auto 5px auto;">Save Preset</button>
                    <button id="clearPresetsButton" class="gui-button" style="width: 80%; max-width: 200px; display: block; margin: 5px auto 10px auto;">Clear Presets</button>
                </div>
                <div id="statusMessageBox" style="display:none;">Status Message</div>
            </div>


            <div style="text-align: center; margin-top: 20px; color: #888; font-size: 0.8em;">
                Script created by GNSC4 (<a href="https://www.torn.com/profiles.php?XID=268863" target="_blank" style="color: #888; text-decoration: none;">268863</a>)-v3.0.13<br>
                <a href="https://github.com/GNSC4/torn-race-config-gui" target="_blank" style="color: #888; text-decoration: none;">v3.0.16 - No GM Functions</a>
            </div>
            <button type="button" id="closeGUIButton" class="close-button" title="Close GUI">×</button>
        `;
        return gui;
    }


    function initializeGUI(gui) {
        loadApiKey();
        populateTimeDropdowns();
        updateCarDropdown();
        loadPresets();

        // --- Initialize GUI Elements AFTER GUI is in DOM and perform null checks - v3.0.24 ---
        const apiKeyInput = document.getElementById('apiKeyInput');
        const saveApiKeyButton = document.getElementById('saveApiKeyButton');
        const trackSelect = document.getElementById('trackSelect');
        const lapsInput = document.getElementById('lapsInput');
        const minDriversInput = document.getElementById('minDriversInput');
        const maxDriversInput = document.getElementById('maxDriversInput');
        const raceNameInput = document.getElementById('raceNameInput');
        const passwordInput = document.getElementById('passwordInput');
        const betAmountInput = document.getElementById('betAmountInput');
        const hourSelect = document.getElementById('hourSelect');
        const minuteSelect = document.getElementById('minuteSelect');
        const setNowButton = document.getElementById('setNowButton');
        const carIdInput = document.getElementById('carIdInput');
        const changeCarButton = document.getElementById('changeCarButton');
        const carDropdown = document.getElementById('carDropdown');
        const updateCarsButton = document.getElementById('updateCarsButton');
        const carStatusMessage = document.getElementById('carStatusMessage');
        const savePresetButton = document.getElementById('savePresetButton');
        const clearPresetsButton = document.getElementById('clearPresetsButton');
        const presetButtonsContainer = document.getElementById('presetButtonsContainer');
        const statusMessageBox = document.getElementById('statusMessageBox');
        const createRaceButton = document.getElementById('createRaceButton');
        const closeGUIButton = document.getElementById('closeGUIButton');
        // --- End of GUI Element Initialization ---


        if (saveApiKeyButton) { // --- Null check before adding listener - v3.0.24 ---
            saveApiKeyButton.addEventListener('click', () => {
                saveApiKey();
            });
        } else {
            console.error("Error: saveApiKeyButton element not found in initializeGUI"); // --- Error Log - v3.0.24 ---
        }


        if (setNowButton) { // --- Null check before adding listener - v3.0.24 ---
            setNowButton.addEventListener('click', () => {
                setTimeToNow();
            });
        } else {
             console.error("Error: setNowButton element not found in initializeGUI"); // --- Error Log - v3.0.24 ---
        }


        if (updateCarsButton) { // --- Null check before adding listener - v3.0.24 ---
            updateCarsButton.addEventListener('click', () => {
                updateCarList();
            });
        } else {
            console.error("Error: updateCarsButton element not found in initializeGUI"); // --- Error Log - v3.0.24 ---
        }


        if (carDropdown) { // --- Null check before adding listener - v3.0.24 ---
            carDropdown.addEventListener('change', () => {
                carIdInput.value = carDropdown.value;
            });
        }  else {
            console.error("Error: carDropdown element not found in initializeGUI"); // --- Error Log - v3.0.24 ---
        }


        if (savePresetButton) { // --- Null check before adding listener - v3.0.24 ---
            savePresetButton.addEventListener('click', () => {
                savePreset();
            });
        } else {
            console.error("Error: savePresetButton element not found in initializeGUI"); // --- Error Log - v3.0.24 ---
        }


        if (clearPresetsButton) { // --- Null check before adding listener - v3.0.24 ---
            clearPresetsButton.addEventListener('click', () => {
                clearPresets();
            });
        } else {
            console.error("Error: clearPresetsButton element not found in initializeGUI"); // --- Error Log - v3.0.24 ---
        }


        if (createRaceButton) { // --- Null check before adding listener - v3.0.24 ---
            createRaceButton.addEventListener('click', () => {
                createRace();
            });
        } else {
            console.error("Error: createRaceButton element not found in initializeGUI"); // --- Error Log - v3.0.24 ---
        }


        if (closeGUIButton) { // --- Null check before adding listener - v3.0.24 ---
            closeGUIButton.addEventListener('click', () => {
                toggleRaceGUI();
            });
        } else {
            console.error("Error: closeGUIButton element not found in initializeGUI"); // --- Error Log - v3.0.24 ---
        }


        dragElement(gui);

        displayPresets();
        updateQuickPresetsDisplay();

        displayStatusMessage('GUI Loaded', 'success');
        setTimeout(() => displayStatusMessage('', ''), 3000);

    }

    function createToggleButton() {
        const button = document.createElement('button');
        button.id = 'toggleRaceGUIButton';
        button.className = 'gui-button';
        button.textContent = 'Race Config PDA';
        button.style.position = 'relative';
        button.style.zIndex = '999';

        button.addEventListener('click', toggleRaceGUI);

        // --- Robustly find the title element - v3.0.24 ---
        let titleElement = document.querySelector('div.content-title > h4');
        if (!titleElement) {
            titleElement = document.querySelector('div.body > div.content-title > h4'); // --- Alternative selector - v3.0.24 ---
        }


        if (titleElement) {
            titleElement.appendChild(button);
        } else {
            console.error("Error: Could not find title element to append toggle button."); // --- Error Log - v3.0.24 ---
            document.body.appendChild(button); // Fallback: append to body - v3.0.24
        }
        return button;
    }

    function toggleRaceGUI() {
        const gui = document.getElementById('raceConfigGUI');
        if (gui) {
            gui.style.display = gui.style.display === 'none' ? '' : 'none';
        } else {
            initializeGUI(raceConfigGUI); // Re-initialize if somehow removed from DOM - v3.0.23 - Important for correct setup
            raceConfigGUI.style.display = ''; // Ensure it's visible after re-initialization - v3.0.23
        }
    }

    function dragElement(elmnt) {
        var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        if (document.getElementById(elmnt.id + "Header")) {
            document.getElementById(elmnt.id + "Header").onmousedown = dragMouseDown;
        } else {
            elmnt.onmousedown = dragMouseDown;
        }

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

    function loadApiKey() {
        const apiKeyInput = document.getElementById('apiKeyInput');
        if (apiKeyInput) {
            apiKeyInput.value = get_value('torn_api_key') || '';
        }
    }

    function saveApiKey() {
        const apiKey = document.getElementById('apiKeyInput').value;
        set_value('torn_api_key', apiKey);
        displayStatusMessage('API Key Saved', 'success');
        setTimeout(() => displayStatusMessage('', ''), 3000);
    }

    function displayStatusMessage(message, type = '') {
        const statusMessageBox = document.getElementById('statusMessageBox');
        if (!statusMessageBox) return;

        statusMessageBox.textContent = message;
        statusMessageBox.style.display = message ? 'block' : 'none';

        statusMessageBox.className = ' ';
        if (type === 'error' || type === 'success') {
            statusMessageBox.classList.add(type);
        }
    }

    function savePreset() {
        const presetName = prompt("Enter a name for this preset:");
        if (!presetName) {
            displayStatusMessage('Preset name cannot be empty.', 'error');
            setTimeout(() => displayStatusMessage('', ''), 3000);
            return;
        }

        const presetData = {
            track: document.getElementById('trackSelect').value,
            laps: document.getElementById('lapsInput').value,
            minDrivers: document.getElementById('minDriversInput').value,
            maxDrivers: document.getElementById('maxDriversInput').value,
            raceName: document.getElementById('raceNameInput').value,
            password: document.getElementById('passwordInput').value,
            betAmount: document.getElementById('betAmountInput').value,
            hour: document.getElementById('hourSelect').value,
            minute: document.getElementById('minuteSelect').value,
            carId: document.getElementById('carIdInput').value
        };
        let presets = loadPresets();
        presets[presetName] = presetData;
        set_value('race_presets', presets);
        displayPresets();
        updateQuickPresetsDisplay();
        displayStatusMessage(`Preset "${presetName}" saved.`, 'success');
        setTimeout(() => displayStatusMessage('', ''), 3000);
    }

    function loadPresets() {
        return get_value('race_presets') || {};
    }

    function loadAllPresets() {
        return loadPresets() || {};
    }

    function displayPresets() {
        const presets = loadPresets();
        const container = document.getElementById('presetButtonsContainer');
        if (!container) return;

        container.innerHTML = '';

        if (Object.keys(presets).length === 0) {
            container.textContent = 'No presets saved yet.';
            return;
        }

        Object.keys(presets).forEach(presetName => {
            const presetButtonContainer = document.createElement('div');
            presetButtonContainer.className = 'preset-button-container';
            container.appendChild(presetButtonContainer);

            const presetButton = document.createElement('button');
            presetButton.className = 'preset-button';
            presetButton.textContent = presetName;
            presetButton.title = `Apply preset: ${presetName}`;
            presetButton.addEventListener('click', () => applyPreset(presetName));
            presetButtonContainer.appendChild(presetButton);

            const removeButton = document.createElement('a');
            removeButton.className = 'remove-preset';
            removeButton.href = '#';
            removeButton.textContent = '×';
            removeButton.title = `Remove preset: ${presetName}`;
            removeButton.addEventListener('click', (event) => {
                event.preventDefault();
                removePreset(presetName);
            });
            presetButtonContainer.appendChild(removeButton);

        });
    }

    function applyPreset(presetName) {
        const presets = loadPresets();
        const preset = presets[presetName];
        if (preset) {
            document.getElementById('trackSelect').value = preset.track;
            document.getElementById('lapsInput').value = preset.laps;
            document.getElementById('minDriversInput').value = preset.minDrivers;
            document.getElementById('maxDriversInput').value = preset.maxDrivers;
            document.getElementById('raceNameInput').value = preset.raceName;
            document.getElementById('passwordInput').value = preset.password;
            document.getElementById('betAmountInput').value = preset.betAmount;
            document.getElementById('hourSelect').value = preset.hour;
            document.getElementById('minuteSelect').value = preset.minute;
            document.getElementById('carIdInput').value = preset.carId;

            displayStatusMessage(`Preset "${presetName}" applied.`, 'success');
            setTimeout(() => displayStatusMessage('', ''), 3000);

        } else {
            displayStatusMessage(`Preset "${presetName}" not found.`, 'error');
            setTimeout(() => displayStatusMessage('', ''), 3000);
        }
    }

    function removePreset(presetName) {
        if (!confirm(`Are you sure you want to remove preset "${presetName}"?`)) {
            return;
        }
        let presets = loadPresets();
        delete presets[presetName];
        set_value('race_presets', presets);
        displayPresets();
        updateQuickPresetsDisplay();
        displayStatusMessage(`Preset "${presetName}" removed.`, 'success');
        setTimeout(() => displayStatusMessage('', ''), 3000);
    }

    function clearPresets() {
        if (confirm("Are you sure you want to clear ALL saved presets?")) {
            set_value('race_presets', {});
            displayPresets();
            updateQuickPresetsDisplay();
            displayStatusMessage('All presets cleared.', 'success');
            setTimeout(() => displayStatusMessage('', ''), 3000);
        }
    }

    function updateQuickPresetsDisplay() {
        const presets = loadAllPresets();
        const quickPresetsContainer = document.getElementById('quickPresetButtonsContainer');

        if (!quickPresetsContainer) return;

        quickPresetsContainer.innerHTML = '';

        const quickPresets = [
            { name: "Quick Uptown 10 Laps", config: { track: '6', laps: '10' } },
            { name: "Quick Speedway 50 Laps", config: { track: '5', laps: '50' } },
        ];

        if (quickPresets.length > 0) {
            quickPresets.forEach(quickPreset => {
                const button = document.createElement('button');
                button.className = 'gui-button quick-race-button';
                button.textContent = quickPreset.name;
                button.title = `Quick Race: ${quickPreset.name}`;
                button.addEventListener('click', () => applyQuickPreset(quickPreset.config));
                quickPresetsContainer.appendChild(button);
            });
        } else {
            quickPresetsContainer.textContent = 'No quick presets defined.';
        }
    }

    function applyQuickPreset(config) {
        if (config) {
            document.getElementById('trackSelect').value = config.track || document.getElementById('trackSelect').options[0].value;
            document.getElementById('lapsInput').value = config.laps || 100;

            displayStatusMessage('Quick preset applied.', 'success');
            setTimeout(() => displayStatusMessage('', ''), 3000);
        } else {
            displayStatusMessage('Quick preset config error.', 'error');
            setTimeout(() => displayStatusMessage('', ''), 3000);
        }
    }

    function populateTimeDropdowns() {
        const hourSelect = document.getElementById('hourSelect');
        const minuteSelect = document.getElementById('minuteSelect');

        if (!hourSelect || !minuteSelect) return;

        for (let i = 0; i <= 23; i++) {
            const option = document.createElement('option');
            option.value = String(i).padStart(2, '0');
            option.textContent = String(i).padStart(2, '0');
            hourSelect.appendChild(option);
        }

        for (let i = 0; i <= 59; i++) {
            if (i % 1 === 0) {
                const option = document.createElement('option');
                option.value = String(i).padStart(2, '0');
                option.textContent = String(i).padStart(2, '0');
                minuteSelect.appendChild(option);
            }
        }
    }

    function setTimeToNow() {
        const hourSelect = document.getElementById('hourSelect');
        const minuteSelect = document.getElementById('minuteSelect');

        if (!hourSelect || !minuteSelect) return;

        const now = moment.utc();

        hourSelect.value = String(now.hour()).padStart(2, '0');
        minuteSelect.value = String(now.minute()).padStart(2, '0');
    }

    async function updateCarList() {
        const apiKey = get_value('torn_api_key');
        const carDropdown = document.getElementById('carDropdown');
        const carStatusMessage = document.getElementById('carStatusMessage');


        if (!apiKey) {
            carStatusMessage.textContent = 'API Key Required';
            carStatusMessage.style.color = 'red';
            return;
        }

        carStatusMessage.textContent = 'Updating Cars...';
        carStatusMessage.style.color = '#aaa';
        carDropdown.disabled = true;
        updateCarsButton.disabled = true;


        try {
            const response = await GM.xmlHttpRequest({
                url: `https://api.torn.com/torn/?selections=vehicles&key=${apiKey}&v=5`,
                method: 'GET',
                onload: function (response) {
                    if (response.status === 200) {
                        const data = JSON.parse(response.responseText);
                        if (data.error) {
                            carStatusMessage.textContent = `API Error: ${data.error.error}`;
                            carStatusMessage.style.color = 'red';
                        } else if (data.vehicles) {
                            populateCarDropdown(data.vehicles);
                            carStatusMessage.textContent = 'Cars Updated';
                            carStatusMessage.style.color = '#efe';
                        } else {
                            carStatusMessage.textContent = 'No car data received.';
                            carStatusMessage.style.color = 'orange';
                        }
                    } else {
                        carStatusMessage.textContent = `HTTP Error: ${response.status}`;
                        carStatusMessage.style.color = 'red';
                    }
                    carDropdown.disabled = false;
                    updateCarsButton.disabled = false;
                    setTimeout(() => { carStatusMessage.textContent = ''; }, 3000);
                },
                onerror: function (error) {
                    carStatusMessage.textContent = `Request failed: ${error.statusText}`;
                    carStatusMessage.style.color = 'red';
                    carDropdown.disabled = false;
                    updateCarsButton.disabled = false;
                    setTimeout(() => { carStatusMessage.textContent = ''; }, 5000);
                }
            });


        } catch (error) {
            carStatusMessage.textContent = `Error updating cars: ${error.message}`;
            carStatusMessage.style.color = 'red';
            carDropdown.disabled = false;
            updateCarsButton.disabled = false;
            setTimeout(() => { carStatusMessage.textContent = ''; }, 5000);
        }
    }

    function populateCarDropdown(vehicles) {
        const carDropdown = document.getElementById('carDropdown');
        if (!carDropdown) return;

        carDropdown.innerHTML = '<option value="">Select a car...</option>';
        const sortedVehicles = Object.values(vehicles).sort((a, b) => a.name.localeCompare(b.name));

        sortedVehicles.forEach(car => {
            if (car.leased !== '1') {
                const option = document.createElement('option');
                option.value = car.ID;
                option.textContent = `${car.name} (ID: ${car.ID})`;
                carDropdown.appendChild(option);
            }
        });
    }

    function updateCarDropdown() {
        updateCarList();
    }


    async function createRace() {
        const apiKey = get_value('torn_api_key');
        if (!apiKey) {
            displayStatusMessage('API Key is required to create race.', 'error');
            setTimeout(() => displayStatusMessage('', ''), 3000);
            return;
        }

        const trackId = document.getElementById('trackSelect').value;
        const laps = document.getElementById('lapsInput').value;
        const minDrivers = document.getElementById('minDriversInput').value;
        const maxDrivers = document.getElementById('maxDriversInput').value;
        const raceName = document.getElementById('raceNameInput').value;
        const password = document.getElementById('passwordInput').value;
        const betAmount = document.getElementById('betAmountInput').value;
        const raceHour = document.getElementById('hourSelect').value;
        const raceMinute = document.getElementById('minuteSelect').value;
        const carId = document.getElementById('carIdInput').value;

        let startTime = '';
        if (raceHour && raceMinute) {
            startTime = `${raceHour}:${raceMinute}`;
        }

        const params = new URLSearchParams();
        params.append('trackID', trackId);
        params.append('laps', laps);
        params.append('min_driver', minDrivers);
        params.append('max_driver', maxDrivers);
        if (raceName) params.append('name', raceName);
        if (password) params.append('password', password);
        if (betAmount > 0) params.append('bet_amount', betAmount);
        if (startTime) params.append('start_time', startTime);
        if (carId) params.append('vehicleID', carId);
        params.append('key', apiKey);
        params.append('v', 5);

        displayStatusMessage('Creating Race...', 'info');

        try {
            const response = await GM.xmlHttpRequest({
                url: 'https://api.torn.com/torn/racing/races',
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                data: params.toString(),
                onload: function (response) {
                    if (response.status === 200) {
                        const data = JSON.parse(response.responseText);
                        if (data.error) {
                            displayStatusMessage(`API Error: ${data.error.error}`, 'error');
                        } else if (data.race_id) {
                            const raceLink = `https://www.torn.com/racing.php#/view/${data.race_id}`;
                            displayStatusMessage(`Race Created! <a href="${raceLink}" target="_blank">View Race</a>`, 'success');
                        } else {
                            displayStatusMessage('Race creation response error.', 'error');
                        }
                    } else {
                        displayStatusMessage(`HTTP Error: ${response.status}`, 'error');
                    }
                    setTimeout(() => displayStatusMessage('', ''), 5000);
                },
                onerror: function (error) {
                    displayStatusMessage(`Request failed: ${error.statusText}`, 'error');
                    setTimeout(() => displayStatusMessage('', ''), 5000);
                }
            });


        } catch (error) {
            displayStatusMessage(`Error creating race: ${error.message}`, 'error');
            setTimeout(() => displayStatusMessage('', ''), 5000);
        }
    }

    function set_value(key, value) {
        try {
            localStorage.setItem(key, JSON.stringify(value));
        } catch (e) {
            console.error('Error saving value to localStorage:', e);
        }
    }

    function get_value(key, defaultValue) {
        try {
            const storedValue = localStorage.getItem(key);
            if (storedValue === null) {
                return defaultValue;
            }
            return JSON.parse(storedValue);
        } catch (e) {
            console.error('Error reading value from localStorage:', e);
            return defaultValue;
        }
    }

    (() => {
        'use strict';

        if (guiInitialized) {
            console.warn('GUI Initialization skipped - already initialized.');
            return;
        }
        guiInitialized = true;

        let raceConfigGUI = createRaceConfigGUI();
        raceConfigGUI.style.display = 'none';
        document.body.appendChild(raceConfigGUI);


        function checkDomReady() { // --- DOM Readiness Polling Function - v3.0.26 ---
            domCheckAttempts++;
            if (domCheckAttempts > MAX_DOM_CHECK_ATTEMPTS) {
                console.error("Fatal error: createRaceButton element not found after multiple attempts. GUI initialization failed."); // --- Fatal Error Log - v3.0.26 ---
                return; // Stop polling after max attempts
            }

            const createRaceButton = document.getElementById('createRaceButton');
            if (createRaceButton) {
                initializeGUI(raceConfigGUI); // Initialize GUI when element is found - v3.0.26
                createToggleButton(); // Create toggle button AFTER GUI is initialized - v3.0.24, v3.0.26
            } else {
                setTimeout(checkDomReady, 50); // Poll again after 50ms if not found - v3.0.26
            }
        }

        checkDomReady(); // Start polling for DOM readiness - v3.0.26


    })();

})();