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 () {
    // Suche nach dem Element mit der Klasse 'horse_banner'
    const banner = document.querySelector('.horse_banner');
    if (banner) {
        // Erstelle das container div
        const div = document.createElement('div');
        div.className = 'collector_ui';
        Object.assign(div.style, {
            position: 'absolute',
            right: '-160px',
            top: '20px',
            zIndex: '1',
            padding: '10px',
            backgroundColor: '#FFFFFFD9',
            width: '120px',
            minHeight: '50px',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'flex-start',
            gap: '10px' // Abstand zwischen Button und Tabelle
        });

        // Erstelle den Button
        const updateHorseButton = document.createElement('updateHorseButton');
        updateHorseButton.textContent = 'Update Horse';
        Object.assign(updateHorseButton.style, {
            padding: '10px 15px',
            backgroundColor: '#ffa200',
            color: '#fff',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
            alignSelf: 'stretch', // Button auf volle Breite dehnen
            transition: 'background-color 0.3s ease' // Übergang für den Hover-Effekt
        });
        updateHorseButton.addEventListener("click", function() {
            chrome.runtime.sendMessage({ action: "updateHorseData" });
        });

        // Hover-Effekt hinzufügen
        updateHorseButton.addEventListener('mouseenter', function () {
            updateHorseButton.style.backgroundColor = '#bf8700'; // Hover-Farbe
        });
        updateHorseButton.addEventListener('mouseleave', function () {
            updateHorseButton.style.backgroundColor = '#ffa200'; // Originalfarbe
        });

        // Flex-Container für die Tabelle
        const table = document.createElement('div');
        Object.assign(table.style, {
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
            gap: '12px' // Abstand zwischen den Zeilen
        });
        // Erstelle Zeilen für jede Beschriftung
        rows.forEach(row => {
            const rowDiv = document.createElement('div');
            Object.assign(rowDiv.style, {
                display: 'flex',
                justifyContent: 'space-between', // Beschriftung links, Emoji rechts
                width: '100%'
            });

            // Linkes Element für die Beschriftung
            const labelCell = document.createElement('div');
            labelCell.textContent = row.label;
            labelCell.style.flex = '1'; // Beschriftung auf der linken Seite

            // Rechtes Element für das Emoji
            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'; // Emoji auf der rechten Seite

            // Zeile zur Tabelle hinzufügen
            rowDiv.appendChild(labelCell);
            rowDiv.appendChild(emojiCell);
            table.appendChild(rowDiv);
        });

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

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

        // Info-Text für die Legende hinzufügen
        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);
        });

        // Button oben hinzufügen, dann die Tabelle, Linie, und die Legende
        div.appendChild(updateHorseButton);
        div.appendChild(table);
        div.appendChild(line);
        div.appendChild(legendTitle);
        div.appendChild(legend);
        banner.appendChild(div);

        const horseId = document.querySelector('.right:nth-child(2)').innerText.replace('#', '');
        updateLoadStateUI(horseId);
    }
});
async function updateLoadStateUI(horseId) {
    const loadState = await getHorseLoadStateAPIAsync(horseId);
    if (!loadState) {
        console.error("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
        }
    });
}

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.`);
    }
}