const rows = [
    { label: 'Basic', emojiId: 'emojiBasic', emoji: '❌' },
    { label: 'Summary', emojiId: 'emojiSummary', emoji: '❌' },
    { label: 'Training', emojiId: 'emojiTraining', emoji: '❌' },
    { label: 'Genetics', emojiId: 'emojiGenetics', emoji: '❌' },
    { label: 'Achievements', emojiId: 'emojiAchievements', emoji: '❌' },
    { label: 'Health', emojiId: 'emojiHealth', emoji: '❌' },
];
// Warten, bis das DOM vollständig geladen ist
document.addEventListener("DOMContentLoaded", function () {
    const banner = document.querySelector('.horse_banner');
    if (banner) {
        const div = document.createElement('div');
        div.className = 'collector_ui';
        Object.assign(div.style, {
            position: 'absolute',
            right: '-220px',
            top: '20px',
            zIndex: '1',
            padding: '10px',
            backgroundColor: '#FFFFFFD9',
            width: '180px',
            minHeight: '50px',
            display: 'flex',
            flexDirection: 'column',
            gap: '10px'
        });
        const serverIsRunning = checkServerStatus(div);
        // Container für die Buttons
        const buttonContainer = document.createElement('div');
        Object.assign(buttonContainer.style, {
            display: 'flex',
            gap: '5px',
            justifyContent: 'space-between',
            width: '100%'
        });
        // Textbox für Notizen  
        const notesTextbox = document.createElement('textarea');
        notesTextbox.id = 'notesTextbox';
        notesTextbox.placeholder = 'Notes...';
        notesTextbox.type = 'text';
        Object.assign(notesTextbox.style, {
            width: '100%',
            minHeight: '30px',
            padding: '0px',
            fontSize: '14px',
            border: '1px solid #ccc',
            borderRadius: '5px',
            resize: 'vertical'
        });
        // Update Horse Button
        const updateHorseButton = document.createElement('button');
        updateHorseButton.textContent = 'Update';
        Object.assign(updateHorseButton.style, {
            padding: '10px 15px',
            flex: '3',
            backgroundColor: '#ffa200',
            color: '#fff',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
            transition: 'background-color 0.3s ease'
        });
        updateHorseButton.addEventListener("click", function () {
            chrome.runtime.sendMessage({ action: "updateHorseData" });
        });
        updateHorseButton.addEventListener('mouseenter', function () {
            updateHorseButton.style.backgroundColor = '#bf8700';
        });
        updateHorseButton.addEventListener('mouseleave', function () {
            updateHorseButton.style.backgroundColor = '#ffa200';
        });

        // Delete Horse Button
        const deleteHorseButton = document.createElement('button');
        deleteHorseButton.textContent = 'X';
        Object.assign(deleteHorseButton.style, {
            padding: '5px',
            flex: '1',
            backgroundColor: '#ff0000',
            color: '#fff',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
            textAlign: 'center',
            transition: 'background-color 0.3s ease'
        });
        deleteHorseButton.addEventListener("click", function () {
            chrome.runtime.sendMessage({ action: "deleteHorse" });
        });
        deleteHorseButton.addEventListener('mouseenter', function () {
            deleteHorseButton.style.backgroundColor = '#bf0000';
        });
        deleteHorseButton.addEventListener('mouseleave', function () {
            deleteHorseButton.style.backgroundColor = '#ff0000';
        });

        // Buttons zum Container hinzufügen
        buttonContainer.appendChild(updateHorseButton);
        buttonContainer.appendChild(deleteHorseButton);

        // Buttons oben hinzufügen
        div.appendChild(buttonContainer);

        // Labels mit Checkboxen hinzufügen
        const labelContainer = document.createElement('div');
        Object.assign(labelContainer.style, {
            display: 'flex',
            flexDirection: 'column',
            gap: '10px'
        });

        // Labels mit Checkboxen hinzufügen
        const labels = [
            { name: "RAB", id: "RAB" },
            { name: "Seal", id: "Seal" },
            { name: "Flaxen", id: "Flaxen" },
            { name: "Sooty", id: "Sooty" },
            { name: "Pangare", id: "Pangare" },
            { name: "Sabino", id: "Sabino" }
        ];

        labels.forEach(label => {
            const labelRow = document.createElement('div');
            Object.assign(labelRow.style, {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                gap: '5px'
            });

            const labelText = document.createElement('label');
            labelText.textContent = label.name;
            Object.assign(labelText.style, {
                flex: '1',
                fontSize: '14px',
                color: '#333'
            });

            const checkboxContainer = document.createElement('div');
            Object.assign(checkboxContainer.style, {
                display: 'flex',
                gap: '5px'
            });

            // Erste Checkbox
            const checkbox1 = document.createElement('input');
            checkbox1.type = 'checkbox';
            checkbox1.id = `checkbox${label.id}1`; // ID mit Suffix 1

            // Zweite Checkbox
            const checkbox2 = document.createElement('input');
            checkbox2.type = 'checkbox';
            checkbox2.id = `checkbox${label.id}2`; // ID mit Suffix 2

            checkboxContainer.appendChild(checkbox1);
            checkboxContainer.appendChild(checkbox2);

            labelRow.appendChild(labelText);
            labelRow.appendChild(checkboxContainer);

            labelContainer.appendChild(labelRow);
        });


        // Überprüfen, ob der Tab "Genetics" gewählt ist, und Labels aktivieren/deaktivieren
        function updateLabelStates() {
            const isGeneticsTab = getTabselText() === "Genetics";
            Array.from(labelContainer.querySelectorAll('input')).forEach(input => {
                input.disabled = !isGeneticsTab;
                input.style.opacity = isGeneticsTab ? '1' : '0.5';
            });
            Array.from(labelContainer.querySelectorAll('label')).forEach(label => {
                label.style.color = isGeneticsTab ? '#333' : '#aaa';
            });
            if (!isGeneticsTab)
            {
                document.querySelector('#optionalColorTextbox').disabled = true;
                document.querySelector('#optionalColorTextbox').style.opacity = '0.5';
            }
            else
            {
                document.querySelector('#optionalColorTextbox').disabled = false;
                document.querySelector('#optionalColorTextbox').style.opacity = '1';
            }
        }


        // Tabelle erstellen
        const table = document.createElement('div');
        Object.assign(table.style, {
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            gap: '12px'
        });

        // Zeilen für Tabelle hinzufügen (bleibt unverändert)
        rows.forEach(row => {
            const rowDiv = document.createElement('div');
            Object.assign(rowDiv.style, {
                display: 'flex',
                justifyContent: 'space-between',
                width: '100%'
            });

            const labelCell = document.createElement('div');
            labelCell.textContent = row.label;
            labelCell.style.flex = '1';

            const emojiCell = document.createElement('div');
            const emojiSpan = document.createElement('span');
            emojiSpan.id = row.emojiId;
            emojiSpan.textContent = row.emoji;
            emojiCell.appendChild(emojiSpan);
            emojiCell.style.flex = '0';

            rowDiv.appendChild(labelCell);
            rowDiv.appendChild(emojiCell);
            table.appendChild(rowDiv);
        });
        
        div.appendChild(notesTextbox);
        div.appendChild(table);
        // Labels und Checkboxen zum Div hinzufügen
        div.appendChild(labelContainer);
        // Textbox für optionale Farbe
        const optionalColorTextbox = document.createElement('textarea');
        optionalColorTextbox.type = 'text';
        optionalColorTextbox.placeholder = 'Additional Color...';
        optionalColorTextbox.id = 'optionalColorTextbox';
        Object.assign(optionalColorTextbox.style, {
            width: '100%',
            height: '30px',
            padding: '0px',
            fontSize: '14px',
            border: '1px solid #ccc',
            borderRadius: '5px',
            resize: 'vertical'
        });
        div.appendChild(optionalColorTextbox);

        // Linie hinzufügen
        const line = document.createElement('hr');
        Object.assign(line.style, {
            width: '100%',
            border: '0',
            height: '1px',
            backgroundColor: '#ddd',
            margin: '10px 0'
        });

        const legendTitle = document.createElement('div');
        legendTitle.textContent = 'Legend:';
        Object.assign(legendTitle.style, {
            fontWeight: 'bold',
            fontSize: '14px',
            color: '#555'
        });

        const legendTexts = [
            { emoji: '✅', text: 'Loaded' },
            { emoji: '☑️', text: 'Dynamic' },
            { emoji: '🔄', text: 'Needs Refresh' },
            { emoji: '❌', text: 'Not Loaded' },
        ];
        const legend = document.createElement('div');
        Object.assign(legend.style, {
            display: 'flex',
            flexDirection: 'column',
            gap: '5px',
            fontSize: '12px',
            color: '#333'
        });

        legendTexts.forEach(item => {
            const legendRow = document.createElement('div');
            Object.assign(legendRow.style, {
                display: 'flex',
                alignItems: 'center',
                gap: '5px'
            });

            const emoji = document.createElement('span');
            emoji.textContent = item.emoji;
            emoji.style.fontSize = '14px';

            const text = document.createElement('span');
            text.textContent = item.text;

            legendRow.appendChild(emoji);
            legendRow.appendChild(text);
            legend.appendChild(legendRow);
        });

        div.appendChild(line);
        div.appendChild(legendTitle);
        div.appendChild(legend);
        banner.appendChild(div);

        // Tab-Wechsel überwachen
        document.addEventListener("click", updateLabelStates);
        updateLabelStates(); // Initialer Zustand

        const horseId = document.querySelector('.right:nth-child(2)').innerText.replace('#', '');
        if (serverIsRunning)
            updateLoadStateUI(horseId);
    }
});
async function checkServerStatus(div) {
    const serverIsRunning = await pingServer();
    if (!serverIsRunning){
        // Erstelle das Overlay
        const overlay = document.createElement('div');
        
        // Style für das Overlay
        overlay.style.position = 'absolute';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.width = '100%';
        overlay.style.height = '100%';
        overlay.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
        overlay.style.display = 'flex';
        overlay.style.justifyContent = 'center';
        overlay.style.alignItems = 'center';
        overlay.style.zIndex = '9999';
        
        // Erstelle den Text
        const text = document.createElement('div');
        text.innerText = 'Server not running ❌';
        text.style.color = 'black';
        text.style.fontSize = '1.5em';
        text.style.fontWeight = 'bold';
        
        // Text in das Overlay einfügen
        overlay.appendChild(text);
        div.appendChild(overlay);
        return false;
    }
    return true;
}
// Funktion zur Ermittlung des Tabs
function getTabselText() {
    return document.querySelector('div.tabsel')?.textContent?.trim() || "Unknown";
}
async function updateLoadStateUI(horseId) {
    const loadState = await getHorseLoadStateAPIAsync(horseId);
    if (!loadState) {
        console.info("Failed to retrieve load state.");
        return;
    }

    // Mappe die LoadState-Werte auf die UI-Emojis
    const loadStateMapping = {
        Basic: loadState.basicInfoLoaded ? (loadState.basicInfoNeedsRefresh ? '🔄' : '✅') : '❌',
        Summary: loadState.summaryLoaded ? (loadState.summaryNeedsRefresh ? '🔄' : '✅') : '❌',
        Training: loadState.trainingLoaded ? (loadState.trainingNeedsRefresh ? '🔄' : '✅') : '❌',
        Genetics: loadState.geneticsLoaded ? (loadState.geneticsNeedsRefresh ? '🔄' : '✅') : '❌',
        Achievements: loadState.achievementsLoaded ? (loadState.achievementsNeedsRefresh ? '🔄' : '☑️') : '❌',
        Health: loadState.healthLoaded ? (loadState.healthNeedsRefresh ? '🔄' : '✅') : '❌',
    };
    // Aktualisiere die Rows in der UI
    rows.forEach(row => {
        const emojiElement = document.getElementById(row.emojiId);
        if (emojiElement && loadStateMapping[row.label]) {
            emojiElement.textContent = loadStateMapping[row.label]; // Setze das Emoji basierend auf dem Ladezustand
        }
    });
    const colors = await getColorsAPIAsync(horseId);
    if (colors) {
        // Update die Checkboxen basierend auf den Farben
        updateColors(colors);
    }
    const notes = await getHorseNotesAPIAsync(horseId);
    if (notes) {
        // Update die Notizen
        document.querySelector('#notesTextbox').value = notes;
    }
}
function updateColors(colors) {
    const mappings = {
        RAB: '#checkboxRAB',
        Seal: '#checkboxSeal',
        Flaxen: '#checkboxFlaxen',
        Sooty: '#checkboxSooty',
        Pangare: '#checkboxPangare',
        Sabino: '#checkboxSabino'
    };

    Object.entries(mappings).forEach(([key, baseId]) => {
        const checkbox1 = document.querySelector(`${baseId}1`);
        const checkbox2 = document.querySelector(`${baseId}2`);

        if (colors[key]) {
            // Farben in der Form "RAB/RAB", "RAB/n", "n/RAB", "n/n"
            const [left, right] = colors[key].split('/');

            // Aktualisiere Checkboxen basierend auf den Werten
            if (checkbox1) checkbox1.checked = left !== 'n';
            if (checkbox2) checkbox2.checked = right !== 'n';
        } else {
            // Wenn keine Farben vorhanden, Checkboxen deaktivieren
            if (checkbox1) checkbox1.checked = false;
            if (checkbox2) checkbox2.checked = false;
        }
    });
    if ("Custom" in colors)
    {
        document.querySelector('#optionalColorTextbox').value = colors["Custom"];
    }
}
function updateSingleLoadStateUI(loadStateKey, isLoaded, needsRefresh) {
    // Mappe das LoadState-Schlüssel auf das Emoji
    const loadStateMapping = {
        true: needsRefresh ? '☑️' : '✅', // Geladen, aber möglicherweise veraltet
        false: '❌'                     // Nicht geladen
    };

    // Suche die passende Row basierend auf dem Schlüssel
    const row = rows.find(row => row.label === loadStateKey);
    if (!row) {
        console.error(`Row for ${loadStateKey} not found.`);
        return;
    }

    // Aktualisiere das Emoji in der UI
    const emojiElement = document.getElementById(row.emojiId);
    if (emojiElement) {
        emojiElement.textContent = loadStateMapping[isLoaded]; // Setze das Emoji entsprechend des Status
    } else {
        console.error(`Emoji element for ${loadStateKey} not found.`);
    }
}