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

{% block title %}Server Logs{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .log-entry {
            border-left: 4px solid #ddd;
            padding: 10px;
            margin-bottom: 10px;
            background: #f9f9f9;
        }
        .log-entry.ERROR { border-left-color: #dc3545; background: #f8d7da; }
        .log-entry.WARNING { border-left-color: #ffc107; background: #fff3cd; }
        .log-entry.ADMIN { border-left-color: #6f42c1; background: #e2d9f3; }
        .log-entry.CONNECTION { border-left-color: #17a2b8; background: #d1ecf1; }
        .log-entry.COMBAT { border-left-color: #fd7e14; background: #ffeaa7; }
        .log-entry.CHAT { border-left-color: #28a745; background: #d4edda; }
        
        .log-timestamp {
            font-size: 0.9em;
            color: #666;
        }
        .log-type {
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.8em;
        }
        .log-player {
            color: #007bff;
            font-weight: bold;
        }
        .log-steam {
            color: #6c757d;
            font-size: 0.9em;
        }
        .log-message {
            margin-top: 5px;
            word-break: break-word;
        }
        
        .stats-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .stats-number {
            font-size: 2em;
            font-weight: bold;
            color: #007bff;
        }
        
        .filter-form {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .pagination {
            justify-content: center;
            margin-top: 20px;
        }
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">
                <i class="fas fa-server"></i> Server Logs
                <small class="text-muted">SCUM Server Monitoring</small>
            </h1>
        </div>
    </div>

    <!-- Statistiken -->
    <div class="row mb-4">
        <div class="col-md-2">
            <div class="stats-card text-center">
                <div class="stats-number">{{ stats.total }}</div>
                <div class="text-muted">Gesamt Logs</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="stats-card text-center">
                <div class="stats-number">{{ stats.recent }}</div>
                <div class="text-muted">Letzte Stunde</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="stats-card text-center">
                <div class="stats-number">{{ stats.types|length }}</div>
                <div class="text-muted">Log-Typen</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="stats-card text-center">
                <div class="stats-number">{{ stats.players|length }}</div>
                <div class="text-muted">Aktive Spieler</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="stats-card text-center">
                <div class="stats-number">{{ stats.files|length }}</div>
                <div class="text-muted">Log-Dateien</div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="stats-card text-center">
                <div class="stats-number">{{ stats.actions|length }}</div>
                <div class="text-muted">Aktionen</div>
            </div>
        </div>
    </div>

    <!-- Online-Spieler Statistik-Badge und Liste -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="stats-card">
                <div class="d-flex align-items-center mb-2">
                    <span class="stats-number me-3" style="color: #28a745;">{{ onlinePlayers|length }}</span>
                    <span class="text-muted">aktuell online</span>
                </div>
                {% if onlinePlayers is not empty %}
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Spielername</th>
                                    <th>SteamID</th>
                                    <th>Login-Zeit</th>
                                    <th>IP</th>
                                    <th>Koordinaten</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for player in onlinePlayers %}
                                    <tr>
                                        <td>{{ player.playerName ?: '-' }}</td>
                                        <td>{{ player.steamId }}</td>
                                        <td>{{ player.lastLogin ? player.lastLogin|date('d.m.Y H:i:s') : '-' }}</td>
                                        <td>{{ player.ip ?: '-' }}</td>
                                        <td>
                                            {% if player.coordinates %}
                                                X: {{ player.coordinates.x|default('-') }}, Y: {{ player.coordinates.y|default('-') }}{% if player.coordinates.z is not null %}, Z: {{ player.coordinates.z|default('-') }}{% endif %}
                                            {% else %}-{% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-muted">Zurzeit ist kein Spieler online.</div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Filter -->
    <div class="row">
        <div class="col-12">
            <div class="filter-form">
                <form method="GET" class="row g-3">
                    <div class="col-md-2">
                        <label for="type" class="form-label">Log-Typ</label>
                        <select name="type" id="type" class="form-select">
                            <option value="">Alle Typen</option>
                            {% for type in logTypes %}
                                <option value="{{ type }}" {% if filters.type == type %}selected{% endif %}>{{ type }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="player" class="form-label">Spieler</label>
                        <input type="text" name="player" id="player" class="form-control" value="{{ filters.player }}" placeholder="Spielername">
                    </div>
                    <div class="col-md-2">
                        <label for="file" class="form-label">Datei</label>
                        <select name="file" id="file" class="form-select">
                            <option value="">Alle Dateien</option>
                            {% for file in files %}
                                <option value="{{ file }}" {% if filters.file == file %}selected{% endif %}>{{ file }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="action" class="form-label">Aktion</label>
                        <select name="action" id="action" class="form-select">
                            <option value="">Alle Aktionen</option>
                            {% for action in actions %}
                                <option value="{{ action }}" {% if filters.action == action %}selected{% endif %}>{{ action }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">&nbsp;</label>
                        <div>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-filter"></i> Filtern
                            </button>
                            <a href="{{ path('server_logs_index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Zurücksetzen
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Logs -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-list"></i> Server Logs
                        <span class="badge bg-primary">{{ totalLogs }} Einträge</span>
                    </h5>
                </div>
                <div class="card-body">
                    {% if logs is empty %}
                        <div class="text-center py-5">
                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                            <h4>Keine Logs gefunden</h4>
                            <p class="text-muted">Versuche andere Filter-Einstellungen oder führe den Log-Fetch-Command aus.</p>
                            <a href="{{ path('server_logs_index') }}" class="btn btn-primary">Alle Logs anzeigen</a>
                        </div>
                    {% else %}
                        {% for log in logs %}
                            <div class="log-entry {{ log.logType }}">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <span class="log-timestamp">
                                            <i class="fas fa-clock"></i> {{ log.timestamp|date('d.m.Y H:i:s') }}
                                        </span>
                                        <span class="log-type bg-{{ log.logType|lower }}">{{ log.logType }}</span>
                                        {% if log.action %}
                                            <span class="badge bg-secondary">{{ log.action }}</span>
                                        {% endif %}
                                        {% if log.playerName %}
                                            <span class="log-player">
                                                <i class="fas fa-user"></i> {{ log.playerName }}
                                            </span>
                                        {% endif %}
                                        {% if log.steamId %}
                                            <span class="log-steam">
                                                <i class="fab fa-steam"></i> {{ log.steamId }}
                                            </span>
                                        {% endif %}
                                    </div>
                                    <div>
                                        <small class="text-muted">{{ log.filename }}</small>
                                    </div>
                                </div>
                                <div class="log-message">{{ log.logMessage }}</div>
                                {% if log.metadata and log.metadata.coordinates is defined and log.metadata.coordinates %}
                                    <small class="text-muted">
                                        <i class="fas fa-map-marker-alt"></i> 
                                        {{ log.metadata.coordinates.x|round(2) }}, {{ log.metadata.coordinates.y|round(2) }}, {{ log.metadata.coordinates.z|round(2) }}
                                    </small>
                                {% endif %}
                            </div>
                        {% endfor %}

                        <!-- Pagination -->
                        {% if totalPages > 1 %}
                            <nav aria-label="Log pagination">
                                <ul class="pagination">
                                    {% if currentPage > 1 %}
                                        <li class="page-item">
                                            <a class="page-link" href="{{ path('server_logs_index', app.request.query.all|merge({'page': currentPage - 1})) }}">
                                                <i class="fas fa-chevron-left"></i> Zurück
                                            </a>
                                        </li>
                                    {% endif %}
                                    
                                    {% for page in 1..totalPages %}
                                        {% if page == currentPage %}
                                            <li class="page-item active">
                                                <span class="page-link">{{ page }}</span>
                                            </li>
                                        {% elseif page <= 3 or page > totalPages - 3 or (page >= currentPage - 2 and page <= currentPage + 2) %}
                                            <li class="page-item">
                                                <a class="page-link" href="{{ path('server_logs_index', app.request.query.all|merge({'page': page})) }}">{{ page }}</a>
                                            </li>
                                        {% elseif page == 4 and currentPage > 6 %}
                                            <li class="page-item disabled">
                                                <span class="page-link">...</span>
                                            </li>
                                        {% elseif page == totalPages - 3 and currentPage < totalPages - 5 %}
                                            <li class="page-item disabled">
                                                <span class="page-link">...</span>
                                            </li>
                                        {% endif %}
                                    {% endfor %}
                                    
                                    {% if currentPage < totalPages %}
                                        <li class="page-item">
                                            <a class="page-link" href="{{ path('server_logs_index', app.request.query.all|merge({'page': currentPage + 1})) }}">
                                                Weiter <i class="fas fa-chevron-right"></i>
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // Auto-refresh alle 30 Sekunden
        setTimeout(function() {
            location.reload();
        }, 30000);
        
        // Filter-Form automatisch absenden bei Änderungen
        document.querySelectorAll('.filter-form select, .filter-form input').forEach(function(element) {
            element.addEventListener('change', function() {
                document.querySelector('.filter-form form').submit();
            });
        });
    </script>
{% endblock %}