// 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
        });

        // Beschriftungen und Emoji-Elemente
        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: '❌' },
        ];

        // 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);
        });
        const infoTextLoaded = document.createElement('p');
        infoTextLoaded.textContent = '✅ Loaded';
        infoTextLoaded.justifyContent = 'space-between';
        infoTextLoaded.width = '100%';
        const infoTextDynamic = document.createElement('p');
        infoTextDynamic.textContent = '☑️ Dynamic';
        infoTextDynamic.justifyContent = 'space-between';
        infoTextDynamic.width = '100%';
        const infoTextNeedRefresh = document.createElement('p');
        infoTextNeedRefresh.textContent = '🔄 Needs Refresh';
        infoTextNeedRefresh.justifyContent = 'space-between';
        infoTextNeedRefresh.width = '100%';
        const infoTextNotLoaded = document.createElement('p');
        infoTextNotLoaded.textContent = '❌ Not Loaded';
        infoTextNotLoaded.justifyContent = 'space-between';
        infoTextNotLoaded.width = '100%';
        
        // Button oben hinzufügen, dann die Tabelle
        div.appendChild(updateHorseButton);
        div.appendChild(table);
        div.appendChild(infoTextLoaded);
        div.appendChild(infoTextDynamic);
        div.appendChild(infoTextNotLoaded);
        div.appendChild(infoTextNeedRefresh);
        banner.appendChild(div);
    }
});