document.addEventListener('DOMContentLoaded', function() {
    const presetContainer = document.getElementById('preset-container');
    const addNewPresetButton = document.getElementById('add-new-preset');
    const newPresetNameInput = document.getElementById('new-preset-name');
    const newPresetUrlInput = document.getElementById('new-preset-url');
    let currentPlayingItem = null; // Variable zum Speichern des aktuell spielenden Elements

    const exportButton = document.getElementById('export-button');
    const importButton = document.getElementById('import-button');
    const loadPresetsLink = document.getElementById('load-presets-link'); // Der neue Link zum Laden der Presets-Datei
    exportButton.addEventListener('click', exportPresets);
    importButton.addEventListener('click', importPresets);
    loadPresetsLink.addEventListener('click', loadPresetsFromFile); // Event für den Link

    loadExistingPresets();

    new Sortable(presetContainer, {
        animation: 250,
        ghostClass: 'ghost',
        handle: '.move-button', // Nur das Verschieben-Symbol erlaubt das Verschieben
        onEnd: () => {
            savePresetOrder();
        }
    });

    addNewPresetButton.addEventListener('click', () => {
        const presetName = newPresetNameInput.value.trim();
        const presetUrl = newPresetUrlInput.value.trim();

        if (presetName && presetUrl) {
            addNewPreset(presetName, presetUrl);
            savePresetToLocalStorage(presetName, presetUrl);
            newPresetNameInput.value = '';
            newPresetUrlInput.value = '';
        } else {
            alert("Bitte geben Sie einen Namen und eine URL ein.");
        }
    });

    function loadExistingPresets() {
        const presets = JSON.parse(localStorage.getItem('presets')) || [];
        presets.forEach(preset => {
            addNewPreset(preset.name, preset.url);
        });
    }

    function addNewPreset(name, url) {
        const presetItem = document.createElement('div');
        presetItem.classList.add('preset-item');
        presetItem.dataset.streamUrl = url;

        presetItem.innerHTML = `
            <h3>${name}</h3>
            <div class="button-container">
                <button class="move-button">
                    <i class="fas fa-arrows-alt"></i> <!-- Verschieben-Symbol -->
                </button>
                <button class="edit-button">
                    <i class="fas fa-edit"></i> <!-- Stift-Symbol für Bearbeiten -->
                </button>
                <button class="delete-button">
                    <i class="fas fa-trash-alt"></i> <!-- Papierkorb-Symbol für Löschen -->
                </button>
            </div>
        `;

        presetItem.querySelector('.edit-button').addEventListener('click', (event) => {
            event.stopPropagation();
            editPreset(presetItem, name, url);
        });

        presetItem.querySelector('.delete-button').addEventListener('click', (event) => {
            event.stopPropagation();
            deletePreset(presetItem);
        });

        presetItem.querySelector('.move-button').addEventListener('click', (event) => {
            event.stopPropagation(); // Verhindert, dass das Verschieben-Symbol das gesamte Preset aktiviert
        });

        presetItem.addEventListener('click', (event) => {
            if (event.target !== presetItem.querySelector('.edit-button') && 
                event.target !== presetItem.querySelector('.delete-button') && 
                event.target !== presetItem.querySelector('.move-button')) {
                playStream(url, presetItem);
            }
        });

        presetContainer.appendChild(presetItem);
    }

    function editPreset(item, currentName, currentUrl) {
        const newName = prompt("Neuer Name:", currentName);
        const newUrl = prompt("Neue URL:", currentUrl);

        if (newName !== null && newUrl !== null) {
            item.querySelector('h3').textContent = newName;
            item.dataset.streamUrl = newUrl;
            savePresetOrder();
        }
    }

    function deletePreset(item) {
        if (confirm("Möchten Sie diesen Sender wirklich löschen?")) {
            presetContainer.removeChild(item);
            savePresetOrder();
        }
    }

    function savePresetToLocalStorage(name, url) {
        const presets = JSON.parse(localStorage.getItem('presets')) || [];
        presets.push({ name, url });
        localStorage.setItem('presets', JSON.stringify(presets));
    }

    function savePresetOrder() {
        const presetItems = Array.from(presetContainer.children);
        const presets = presetItems.map(item => ({
            name: item.querySelector('h3').textContent,
            url: item.dataset.streamUrl
        }));
        localStorage.setItem('presets', JSON.stringify(presets));
    }

    function playStream(url, item) {
        if (currentPlayingItem) {
            const currentAudio = currentPlayingItem.querySelector('audio');
            if (currentAudio) {
                currentAudio.pause();
                currentAudio.remove();
            }
            currentPlayingItem.classList.remove('playing');
        }

        const audioElement = new Audio(url);
        audioElement.autoplay = true;
        audioElement.loop = true;
        audioElement.volume = 0.5;
        audioElement.onerror = function() {
            alert('Fehler beim Laden des Streams: ' + url);
        };
        item.appendChild(audioElement);
        item.classList.add('playing');

        currentPlayingItem = item;
        currentStationName.textContent = item.querySelector('h3').textContent;
    }

    function exportPresets() {
        const presets = JSON.parse(localStorage.getItem('presets')) || [];
        const json = JSON.stringify(presets, null, 2);

        const blob = new Blob([json], { type: 'application/json' });
        const url = URL.createObjectURL(blob);

        const a = document.createElement('a');
        a.href = url;
        a.download = 'webradio_presets.json';
        a.click();

        URL.revokeObjectURL(url);
    }
    
    function importPresets() {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.json';
        input.addEventListener('change', (event) => {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    try {
                        const importedPresets = JSON.parse(e.target.result);
                        if (Array.isArray(importedPresets)) {
                            // Speichere die importierten Presets im Local Storage
                            localStorage.setItem('presets', JSON.stringify(importedPresets));
                        
                            // Leere den Preset-Container und lade die neuen Presets
                            presetContainer.innerHTML = '';
                            importedPresets.forEach(preset => {
                                if (preset.name && preset.url) { // Prüfe, ob die Presets gültig sind
                                    addNewPreset(preset.name, preset.url);
                                } else {
                                    console.warn("Ungültiger Preset-Eintrag übersprungen:", preset);
                                }
                            });

                            alert("Presets erfolgreich importiert.");
                        } else {
                            throw new Error("Das importierte Format ist ungültig. Es wird ein Array erwartet.");
                        }
                    } catch (error) {
                        alert("Fehler beim Importieren der Presets: " + error.message);
                    }
                };
                reader.readAsText(file);
            }
        });
        input.click();
    }

    const stopButton = document.querySelector('.stop-button');
    const progressBar = document.getElementById('progress-bar');
    const currentStationName = document.getElementById('current-station-name');

    stopButton.addEventListener('click', () => {
        if (currentPlayingItem) {
            const audioElement = currentPlayingItem.querySelector('audio');
            audioElement.pause();
            audioElement.currentTime = 0;
            currentPlayingItem.classList.remove('playing');
            currentPlayingItem = null;
            currentStationName.textContent = 'Kein Sender ausgewählt.';
        }
    });

    function loadPresetsFromFile(event) {
        event.preventDefault();

        fetch('/webradio_presets.json')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Datei konnte nicht geladen werden');
                }
                return response.json();
            })
            .then(data => {
                localStorage.setItem('presets', JSON.stringify(data));
                presetContainer.innerHTML = '';
                data.forEach(preset => addNewPreset(preset.name, preset.url));
                alert('Presets erfolgreich geladen.');
            })
            .catch(error => {
                alert('Fehler beim Laden der Presets: ' + error.message);
            });
    }
});