document.addEventListener('DOMContentLoaded', function() {
    // Handle file uploads
    const uploadForm = document.getElementById('uploadForm');
    const fileInput = document.getElementById('fileInput');
    
    uploadForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (fileInput.files.length === 0) {
            alert('Bitte wählen Sie mindestens eine Datei zum Hochladen aus');
return;
}

// Show connection information
function showConnectionInfo() {
    fetch('/network')
    .then(response => response.json())
    .then(data => {
        const info = `
        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4 rounded">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i data-feather="info" class="text-yellow-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800">Verbindungsinformation</h3>
                    <div class="mt-2 text-sm text-yellow-700">
                        <p>IP: ${data.ip}</p>
                        <p>Port: ${data.port}</p>
                        <p>URL: <a href="${data.url}" class="underline">${data.url}</a></p>
                    </div>
                </div>
            </div>
        </div>
        `;
        document.querySelector('main').insertAdjacentHTML('afterbegin', info);
        feather.replace();
    });
}

// Initialize connection info
document.addEventListener('DOMContentLoaded', function() {
    showConnectionInfo();
    
    // Add new features
    document.querySelector('main').insertAdjacentHTML('beforeend', `
        <div class="bg-white rounded-xl shadow-lg p-6 max-w-4xl mx-auto mt-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-4">Weitere Funktionen</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-gray-50 p-4 rounded-lg text-center">
                    <i data-feather="folder-plus" class="mx-auto text-blue-500 w-8 h-8 mb-2"></i>
                    <h3 class="font-medium">Neuer Ordner</h3>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg text-center">
                    <i data-feather="users" class="mx-auto text-green-500 w-8 h-8 mb-2"></i>
                    <h3 class="font-medium">Freigaben</h3>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg text-center">
                    <i data-feather="settings" class="mx-auto text-purple-500 w-8 h-8 mb-2"></i>
                    <h3 class="font-medium">Einstellungen</h3>
                </div>
            </div>
        </div>
    `);
    feather.replace();
});
const formData = new FormData();
        for (let i = 0; i < fileInput.files.length; i++) {
            formData.append('files', fileInput.files[i]);
        }
        
        fetch('/upload', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Dateien erfolgreich hochgeladen!');
                showConnectionInfo();
refreshFileList();
            } else {
                alert('Fehler beim Hochladen: ' + data.message);
}
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Fehler beim Hochladen der Dateien');
});
    });
    
    // Initial file list load
    refreshFileList();
});

function refreshFileList() {
    fetch('/files')
    .then(response => response.json())
    .then(files => {
        const fileList = document.getElementById('fileList');
        
        if (files.length === 0) {
            fileList.innerHTML = '<p class="text-gray-500 italic">Noch keine Dateien hochgeladen</p>';
return;
        }
        
        let html = '';
        files.forEach(file => {
            html += `
                <div class="file-entry bg-white p-3 rounded-lg shadow-sm flex justify-between items-center">
                    <div class="flex items-center">
                        <i data-feather="file" class="text-gray-500 mr-2"></i>
                        <span class="text-gray-700">${file.name}</span>
                    </div>
                    <div class="flex space-x-2">
                        <a href="/download/${file.name}" class="text-blue-500 hover:text-blue-700">
                            <i data-feather="download"></i>
                        </a>
                        <button onclick="deleteFile('${file.name}')" class="text-red-500 hover:text-red-700">
                            <i data-feather="trash-2"></i>
                        </button>
                    </div>
                </div>
            `;
        });
        
        fileList.innerHTML = html;
        feather.replace();
    });
}
function deleteFile(filename) {
    if (confirm(`Sind Sie sicher, dass Sie ${filename} löschen möchten?`)) {
fetch(`/delete/${filename}`, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                refreshFileList();
            } else {
                alert('Fehler beim Löschen: ' + data.message);
}
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Fehler beim Löschen der Datei');
});
    }
}