{% extends 'base.html' %}

{% block title %}Datenverwaltung - NooK Feedback{% endblock %}

{% block content %}
<h1 class="h3 mb-4">Datenverwaltung</h1>

<div class="row g-4">
    <!-- Export Section -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">Daten exportieren</h5>
            </div>
            <div class="card-body">
                <p>Exportiert alle Daten aus der Datenbank als JSON-Datei:</p>
                <ul>
                    <li>Events</li>
                    <li>Talks & Speakers</li>
                    <li>Event Feedback</li>
                    <li>Talk Feedback</li>
                    <li>People Counts</li>
                    <li>How-Heard Optionen</li>
                </ul>
                <a href="{{ url_for('data_mgmt.export_data_route') }}" class="btn btn-primary">
                    📥 Jetzt exportieren
                </a>
                <p class="form-text mt-2">Die Datei wird automatisch heruntergeladen.</p>
            </div>
        </div>
    </div>

    <!-- Import Section -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">Daten importieren</h5>
            </div>
            <div class="card-body">
                <p>Importiert Daten aus einer JSON-Datei zurück in die Datenbank.</p>
                
                <form id="importForm" method="post" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="importFile" class="form-label">JSON-Datei auswählen</label>
                        <input type="file" class="form-control" id="importFile" name="file" accept=".json" required>
                    </div>
                    
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="clearExisting" name="clear_existing">
                        <label class="form-check-label text-danger" for="clearExisting">
                            ⚠️ Alle existierenden Daten vorher löschen
                        </label>
                        <div class="form-text">
                            Wenn aktiviert: Alle aktuellen Daten werden GELÖSCHT, bevor die neuen importiert werden.
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-success">
                        📤 Importieren
                    </button>
                </form>

                <div id="importStatus" class="mt-3"></div>
            </div>
        </div>
    </div>
</div>

<div class="alert alert-info mt-4">
    <h5>💡 Hinweise</h5>
    <ul class="mb-0">
        <li><strong>Export:</strong> Erstellt eine vollständige Sicherung aller Daten im JSON-Format</li>
        <li><strong>Import (Standard):</strong> Fügt Daten hinzu oder aktualisiert existierende (anhand der IDs)</li>
        <li><strong>Import mit "Löschen":</strong> Ersetzt die komplette Datenbank durch die Import-Datei</li>
        <li><strong>Backup empfohlen:</strong> Vor einem Import sollte immer ein Export gemacht werden</li>
    </ul>
</div>

{% endblock %}

{% block extra_js %}
<script>
document.getElementById('importForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const statusDiv = document.getElementById('importStatus');
    const fileInput = document.getElementById('importFile');
    const clearCheckbox = document.getElementById('clearExisting');
    
    if (!fileInput.files[0]) {
        statusDiv.innerHTML = '<div class="alert alert-danger">Bitte eine Datei auswählen.</div>';
        return;
    }
    
    // Show loading
    statusDiv.innerHTML = '<div class="alert alert-info">Import läuft...</div>';
    
    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    
    const url = clearCheckbox.checked 
        ? '{{ url_for("data_mgmt.import_data_route") }}?clear_existing=true'
        : '{{ url_for("data_mgmt.import_data_route") }}';
    
    try {
        const response = await fetch(url, {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (response.ok && result.success) {
            statusDiv.innerHTML = `
                <div class="alert alert-success">
                    ✅ ${result.message}
                    ${result.clear_existing ? '<br><em>Alle alten Daten wurden gelöscht.</em>' : ''}
                </div>
            `;
            fileInput.value = '';
            clearCheckbox.checked = false;
        } else {
            statusDiv.innerHTML = `
                <div class="alert alert-danger">
                    ❌ Fehler beim Import: ${result.error || 'Unbekannter Fehler'}
                </div>
            `;
        }
    } catch (error) {
        statusDiv.innerHTML = `
            <div class="alert alert-danger">
                ❌ Fehler beim Import: ${error.message}
            </div>
        `;
    }
});
</script>
{% endblock %}