{% extends 'admin_base.html.twig' %}

{% block title %}System-Logs{% endblock %}
{% block header_title %}System-Logs{% endblock %}

{% block stylesheets %}
<style>
    .log-card {
        background: #f8f9fc;
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .log-table {
        font-size: 0.85rem;
    }
    
    .log-table thead th {
        background: linear-gradient(135deg, #1a1d2e 0%, #252938 100%);
        color: #fff;
        font-weight: 600;
        border: none;
        padding: 0.75rem;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .log-table tbody tr {
        transition: all 0.2s;
    }
    
    .log-table tbody tr:hover {
        background: #f8f9fc;
    }
    
    .log-table tbody td {
        vertical-align: middle;
        padding: 0.75rem;
        border-bottom: 1px solid #e3e6f0;
    }
    
    .log-level-badge {
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
    }
    
    .log-category-badge {
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-weight: 500;
        font-size: 0.7rem;
        background: #e3e6f0;
        color: #5a5c69;
    }
    
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .filter-section {
        background: white;
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    }
    
    .log-details {
        max-height: 200px;
        overflow-y: auto;
        background: #f8f9fa;
        padding: 0.5rem;
        border-radius: 4px;
        font-size: 0.8rem;
    }
    
    .context-display {
        max-height: 150px;
        overflow-y: auto;
        background: #f8f9fa;
        padding: 0.5rem;
        border-radius: 4px;
        font-size: 0.8rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Stats Overview -->
    <div class="row">
        <div class="col-12">
            <div class="stats-card">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h4 class="mb-0">📊 System-Logs Übersicht</h4>
                        <p class="mb-0 opacity-75">Überwachung aller System-Ereignisse</p>
                    </div>
                    <div class="text-end">
                        <button class="btn btn-light btn-sm" onclick="refreshStats()">
                            <i class="fas fa-sync-alt me-1"></i>Aktualisieren
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Section -->
    <div class="filter-section">
        <div class="row g-3">
            <div class="col-md-2">
                <label class="form-label fw-semibold">Kategorie</label>
                <select class="form-select form-select-sm" id="categoryFilter">
                    <option value="">Alle Kategorien</option>
                    <option value="email">📧 E-Mail</option>
                    <option value="appointment">📅 Termine</option>
                    <option value="payment">💰 Zahlungen</option>
                    <option value="user">👤 Benutzer</option>
                    <option value="system">⚙️ System</option>
                    <option value="security">🔒 Sicherheit</option>
                    <option value="course">🎓 Kurse</option>
                    <option value="waiting_list">📋 Warteliste</option>
                    <option value="outlook">📊 Outlook</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold">Level</label>
                <select class="form-select form-select-sm" id="levelFilter">
                    <option value="">Alle Levels</option>
                    <option value="info">ℹ️ Info</option>
                    <option value="success">✅ Success</option>
                    <option value="warning">⚠️ Warning</option>
                    <option value="error">❌ Error</option>
                    <option value="debug">🐛 Debug</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold">Entity-Typ</label>
                <select class="form-select form-select-sm" id="entityTypeFilter">
                    <option value="">Alle Typen</option>
                    <option value="Appointment">Termin</option>
                    <option value="Availability">Kurs</option>
                    <option value="User">Benutzer</option>
                    <option value="WaitingList">Warteliste</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold">Von Datum</label>
                <input type="date" class="form-control form-control-sm" id="dateFromFilter">
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold">Bis Datum</label>
                <input type="date" class="form-control form-control-sm" id="dateToFilter">
            </div>
            <div class="col-md-2">
                <label class="form-label fw-semibold">Suche</label>
                <input type="text" class="form-control form-control-sm" id="searchFilter" placeholder="Nachricht suchen...">
            </div>
        </div>
        <div class="row g-3 mt-2">
            <div class="col-md-12">
                <button class="btn btn-primary btn-sm" onclick="applyFilters()">
                    <i class="fas fa-filter me-1"></i>Filter anwenden
                </button>
                <button class="btn btn-outline-secondary btn-sm" onclick="clearFilters()">
                    <i class="fas fa-times me-1"></i>Filter zurücksetzen
                </button>
                <button class="btn btn-success btn-sm" onclick="exportLogs()">
                    <i class="fas fa-download me-1"></i>CSV Export
                </button>
                <button class="btn btn-warning btn-sm" onclick="showCleanupModal()">
                    <i class="fas fa-broom me-1"></i>Alte Logs bereinigen
                </button>
                <button class="btn btn-info btn-sm" onclick="showImportModal()">
                    <i class="fas fa-upload me-1"></i>System-Logs importieren
                </button>
            </div>
        </div>
    </div>

    <!-- Logs Table -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-lg">
                <div class="card-header bg-white border-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0 fw-semibold">
                            <i class="fas fa-list me-2 text-primary"></i>Log-Einträge
                        </h5>
                        <div class="d-flex gap-2">
                            <span class="badge bg-primary" id="logCount">0 Einträge</span>
                            <button class="btn btn-sm btn-outline-primary" onclick="loadLogs()">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table log-table mb-0">
                            <thead>
                                <tr>
                                    <th>Zeitstempel</th>
                                    <th>Kategorie</th>
                                    <th>Level</th>
                                    <th>Nachricht</th>
                                    <th>Entity</th>
                                    <th>Benutzer</th>
                                    <th>Aktionen</th>
                                </tr>
                            </thead>
                            <tbody id="logsTableBody">
                                <tr>
                                    <td colspan="7" class="text-center py-5">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="visually-hidden">Lädt...</span>
                                        </div>
                                        <p class="mt-3 text-muted">Lade Logs...</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Log Details Modal -->
<div class="modal fade" id="logDetailsModal" tabindex="-1" aria-labelledby="logDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="logDetailsModalLabel">
                    <i class="fas fa-info-circle me-2"></i>Log-Details
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="logDetailsContent">
                <!-- Wird dynamisch befüllt -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<!-- Cleanup Modal -->
<div class="modal fade" id="cleanupModal" tabindex="-1" aria-labelledby="cleanupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title" id="cleanupModalLabel">
                    <i class="fas fa-broom me-2"></i>Alte Logs bereinigen
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Diese Aktion löscht alle Log-Einträge, die älter als die angegebene Anzahl von Tagen sind.</p>
                <div class="form-group">
                    <label for="cleanupDays" class="form-label">Tage aufbewahren:</label>
                    <input type="number" class="form-control" id="cleanupDays" value="90" min="7" max="365">
                    <small class="form-text text-muted">Mindestens 7 Tage müssen aufbewahrt werden.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-warning" onclick="performCleanup()">Bereinigen</button>
            </div>
        </div>
    </div>
</div>

<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="importModalLabel">
                    <i class="fas fa-upload me-2"></i>System-Logs importieren
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Importiert System-Logs aus verschiedenen Quellen in das zentrale Log-System.</p>
                
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="importSource" class="form-label">Log-Quelle:</label>
                        <select class="form-select" id="importSource">
                            <option value="all">Alle Quellen</option>
                            <option value="symfony">Symfony-Logs (dev.log, prod.log)</option>
                            <option value="php">PHP-Error-Logs</option>
                            <option value="apache">Apache-Logs</option>
                            <option value="nginx">Nginx-Logs</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="importDays" class="form-label">Tage zurück:</label>
                        <input type="number" class="form-control" id="importDays" value="1" min="1" max="30">
                    </div>
                </div>
                
                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" id="importForce">
                    <label class="form-check-label" for="importForce">
                        Bereits importierte Logs überschreiben
                    </label>
                </div>
                
                <div class="alert alert-info mt-3">
                    <h6><i class="fas fa-info-circle me-2"></i>Verfügbare Log-Quellen:</h6>
                    <ul class="mb-0">
                        <li><strong>Symfony:</strong> var/log/dev.log, var/log/prod.log</li>
                        <li><strong>PHP:</strong> PHP Error Log, PHP-FPM Logs</li>
                        <li><strong>Apache:</strong> /var/log/apache2/error.log, /var/log/httpd/error_log</li>
                        <li><strong>Nginx:</strong> /var/log/nginx/error.log</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-info" onclick="performImport()">
                    <i class="fas fa-upload me-1"></i>Import starten
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
    let currentFilters = {};
    let currentPage = 0;
    const pageSize = 50;

    document.addEventListener('DOMContentLoaded', function() {
        loadLogs();
        loadStats();
        
        // Auto-refresh alle 30 Sekunden
        setInterval(loadLogs, 30000);
    });

    async function loadLogs() {
        try {
            const params = new URLSearchParams({
                ...currentFilters,
                limit: pageSize,
                offset: currentPage * pageSize
            });

            const response = await fetch(`{{ path('admin_logs_api_list') }}?${params}`);
            const data = await response.json();

            if (data.success) {
                displayLogs(data.logs);
                document.getElementById('logCount').textContent = `${data.total} Einträge`;
            } else {
                showAlert('❌ Fehler beim Laden der Logs', 'danger');
            }
        } catch (error) {
            console.error('Error loading logs:', error);
            showAlert('❌ Netzwerkfehler beim Laden der Logs', 'danger');
        }
    }

    function displayLogs(logs) {
        const tbody = document.getElementById('logsTableBody');
        
        if (logs.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">Keine Logs gefunden</h5>
                        <p class="text-muted">Es wurden keine Log-Einträge gefunden, die den Filterkriterien entsprechen.</p>
                    </td>
                </tr>
            `;
            return;
        }

        tbody.innerHTML = logs.map(log => `
            <tr>
                <td>
                    <small class="text-muted">${log.createdAtFormatted}</small>
                </td>
                <td>
                    <span class="log-category-badge">
                        <i class="${log.categoryIcon} me-1"></i>${log.category}
                    </span>
                </td>
                <td>
                    <span class="badge log-level-badge bg-${log.levelColor}">
                        ${log.level}
                    </span>
                </td>
                <td>
                    <div class="fw-medium">${log.message}</div>
                    ${log.details ? `<small class="text-muted">${log.details}</small>` : ''}
                </td>
                <td>
                    ${log.entityType && log.entityId ? 
                        `<span class="badge bg-light text-dark">${log.entityType} #${log.entityId}</span>` : 
                        '<span class="text-muted">-</span>'
                    }
                </td>
                <td>
                    ${log.userEmail ? 
                        `<small>${log.userEmail}</small>` : 
                        '<span class="text-muted">-</span>'
                    }
                </td>
                <td>
                    <button class="btn btn-sm btn-outline-primary" onclick="showLogDetails(${log.id})" title="Details anzeigen">
                        <i class="fas fa-eye"></i>
                    </button>
                </td>
            </tr>
        `).join('');
    }

    async function showLogDetails(logId) {
        try {
            const response = await fetch(`{{ path('admin_logs_api_details', {'id': '__ID__'}) }}`.replace('__ID__', logId));
            const data = await response.json();

            if (data.success) {
                const log = data.log;
                const content = `
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Grundinformationen</h6>
                            <table class="table table-sm">
                                <tr><td><strong>ID:</strong></td><td>${log.id}</td></tr>
                                <tr><td><strong>Kategorie:</strong></td><td><span class="badge bg-light text-dark">${log.category}</span></td></tr>
                                <tr><td><strong>Level:</strong></td><td><span class="badge bg-${log.levelColor}">${log.level}</span></td></tr>
                                <tr><td><strong>Nachricht:</strong></td><td>${log.message}</td></tr>
                                <tr><td><strong>Zeitstempel:</strong></td><td>${log.createdAtFormatted}</td></tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h6>Zusätzliche Informationen</h6>
                            <table class="table table-sm">
                                <tr><td><strong>Entity-Typ:</strong></td><td>${log.entityType || '-'}</td></tr>
                                <tr><td><strong>Entity-ID:</strong></td><td>${log.entityId || '-'}</td></tr>
                                <tr><td><strong>Benutzer:</strong></td><td>${log.userEmail || '-'}</td></tr>
                                <tr><td><strong>IP-Adresse:</strong></td><td>${log.ipAddress || '-'}</td></tr>
                                <tr><td><strong>Aktion:</strong></td><td>${log.action || '-'}</td></tr>
                            </table>
                        </div>
                    </div>
                    ${log.details ? `
                        <div class="mt-3">
                            <h6>Details</h6>
                            <div class="log-details">${log.details}</div>
                        </div>
                    ` : ''}
                    ${log.context && Object.keys(log.context).length > 0 ? `
                        <div class="mt-3">
                            <h6>Kontext</h6>
                            <div class="context-display">${log.formattedContext}</div>
                        </div>
                    ` : ''}
                    ${log.userAgent ? `
                        <div class="mt-3">
                            <h6>User Agent</h6>
                            <div class="log-details">${log.userAgent}</div>
                        </div>
                    ` : ''}
                `;

                document.getElementById('logDetailsContent').innerHTML = content;
                const modal = new bootstrap.Modal(document.getElementById('logDetailsModal'));
                modal.show();
            } else {
                showAlert('❌ Fehler beim Laden der Log-Details', 'danger');
            }
        } catch (error) {
            console.error('Error loading log details:', error);
            showAlert('❌ Netzwerkfehler beim Laden der Log-Details', 'danger');
        }
    }

    function applyFilters() {
        currentFilters = {
            category: document.getElementById('categoryFilter').value,
            level: document.getElementById('levelFilter').value,
            entity_type: document.getElementById('entityTypeFilter').value,
            date_from: document.getElementById('dateFromFilter').value,
            date_to: document.getElementById('dateToFilter').value,
            search: document.getElementById('searchFilter').value
        };

        // Entferne leere Filter
        Object.keys(currentFilters).forEach(key => {
            if (!currentFilters[key]) {
                delete currentFilters[key];
            }
        });

        currentPage = 0;
        loadLogs();
    }

    function clearFilters() {
        document.getElementById('categoryFilter').value = '';
        document.getElementById('levelFilter').value = '';
        document.getElementById('entityTypeFilter').value = '';
        document.getElementById('dateFromFilter').value = '';
        document.getElementById('dateToFilter').value = '';
        document.getElementById('searchFilter').value = '';
        
        currentFilters = {};
        currentPage = 0;
        loadLogs();
    }

    async function exportLogs() {
        try {
            const params = new URLSearchParams(currentFilters);
            const url = `{{ path('admin_logs_api_export') }}?${params}`;
            window.open(url, '_blank');
        } catch (error) {
            console.error('Error exporting logs:', error);
            showAlert('❌ Fehler beim Exportieren der Logs', 'danger');
        }
    }

    function showCleanupModal() {
        const modal = new bootstrap.Modal(document.getElementById('cleanupModal'));
        modal.show();
    }

    async function performCleanup() {
        const days = document.getElementById('cleanupDays').value;
        
        if (!days || days < 7) {
            showAlert('❌ Mindestens 7 Tage müssen angegeben werden', 'danger');
            return;
        }

        try {
            const response = await fetch('{{ path('admin_logs_api_cleanup') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `days=${days}`
            });

            const data = await response.json();

            if (data.success) {
                showAlert(`✅ ${data.message}`, 'success');
                const modal = bootstrap.Modal.getInstance(document.getElementById('cleanupModal'));
                modal.hide();
                loadLogs();
            } else {
                showAlert('❌ Fehler: ' + (data.error || 'Unbekannter Fehler'), 'danger');
            }
        } catch (error) {
            console.error('Error cleaning up logs:', error);
            showAlert('❌ Netzwerkfehler beim Bereinigen der Logs', 'danger');
        }
    }

    async function loadStats() {
        try {
            const response = await fetch('{{ path('admin_logs_api_stats') }}');
            const data = await response.json();

            if (data.success) {
                // Stats können hier angezeigt werden, falls gewünscht
                console.log('Log stats loaded:', data.stats);
            }
        } catch (error) {
            console.error('Error loading stats:', error);
        }
    }

    function refreshStats() {
        loadStats();
        loadLogs();
    }

    function showImportModal() {
        const modal = new bootstrap.Modal(document.getElementById('importModal'));
        modal.show();
    }

    async function performImport() {
        const source = document.getElementById('importSource').value;
        const days = document.getElementById('importDays').value;
        const force = document.getElementById('importForce').checked;

        if (!days || days < 1) {
            showAlert('❌ Mindestens 1 Tag muss angegeben werden', 'danger');
            return;
        }

        try {
            showAlert('🔄 System-Logs werden importiert...', 'info');

            const response = await fetch('{{ path('admin_logs_api_import') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `source=${source}&days=${days}&force=${force ? '1' : '0'}`
            });

            const data = await response.json();

            if (data.success) {
                showAlert(`✅ ${data.message}`, 'success');
                const modal = bootstrap.Modal.getInstance(document.getElementById('importModal'));
                modal.hide();
                loadLogs();
            } else {
                showAlert('❌ Fehler: ' + (data.error || 'Unbekannter Fehler'), 'danger');
            }
        } catch (error) {
            console.error('Error importing logs:', error);
            showAlert('❌ Netzwerkfehler beim Importieren der Logs', 'danger');
        }
    }

    function showAlert(message, type) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
        alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        document.body.appendChild(alertDiv);

        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.parentNode.removeChild(alertDiv);
            }
        }, 5000);
    }
</script>
{% endblock %}