{% extends 'base.html' %}
{% load static %}

{% block title %}Dashboard de Logs do Sistema{% endblock %}

{% block extra_css %}
<style>
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .stats-card h3 {
        margin: 0;
        font-size: 2rem;
        font-weight: bold;
    }
    
    .stats-card p {
        margin: 5px 0 0 0;
        opacity: 0.9;
    }
    
    .severity-critical {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
    }
    
    .severity-high {
        background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
    }
    
    .severity-medium {
        background: linear-gradient(135deg, #ffd54f 0%, #ffc107 100%);
        color: #333;
    }
    
    .severity-low {
        background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
    }
    
    .log-item {
        background: white;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-left: 4px solid #667eea;
    }
    
    .log-item.critical {
        border-left-color: #ff6b6b;
    }
    
    .log-item.high {
        border-left-color: #ffa726;
    }
    
    .log-item.medium {
        border-left-color: #ffd54f;
    }
    
    .log-item.low {
        border-left-color: #66bb6a;
    }
    
    .log-timestamp {
        font-size: 0.85rem;
        color: #666;
    }
    
    .log-user {
        font-weight: bold;
        color: #333;
    }
    
    .log-action {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: bold;
        text-transform: uppercase;
    }
    
    .log-action.critical { background-color: #ff6b6b; color: white; }
    .log-action.high { background-color: #ffa726; color: white; }
    .log-action.medium { background-color: #ffd54f; color: #333; }
    .log-action.low { background-color: #66bb6a; color: white; }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">
                    <i class="fas fa-chart-line text-primary"></i>
                    Dashboard de Logs do Sistema
                </h1>
                <div>
                    <a href="{% url 'system_logs:list' %}" class="btn btn-primary">
                        <i class="fas fa-list"></i> Ver Todos os Logs
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Estatísticas Gerais -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="stats-card">
                <h3>{{ total_logs }}</h3>
                <p>Total de Logs</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <h3>{{ today_logs }}</h3>
                <p>Logs de Hoje</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <h3>{{ week_logs }}</h3>
                <p>Logs da Semana</p>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <h3>{{ month_logs }}</h3>
                <p>Logs do Mês</p>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Logs por Severidade -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-exclamation-triangle text-warning"></i>
                        Logs por Severidade
                    </h5>
                </div>
                <div class="card-body">
                    {% for severity_name, count in severity_stats.items %}
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>{{ severity_name }}</span>
                        <span class="badge badge-primary">{{ count }}</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Logs por Ação -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-tasks text-info"></i>
                        Logs por Ação
                    </h5>
                </div>
                <div class="card-body">
                    {% for action_name, count in action_stats.items %}
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>{{ action_name }}</span>
                        <span class="badge badge-info">{{ count }}</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Logs Recentes -->
        <div class="col-md-8 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-clock text-success"></i>
                        Logs Recentes
                    </h5>
                </div>
                <div class="card-body">
                    {% for log in recent_logs %}
                    <div class="log-item {{ log.severity|lower }}">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="flex-grow-1">
                                <div class="log-timestamp">{{ log.timestamp|date:"d/m/Y H:i:s" }}</div>
                                <div class="log-user">{{ log.user.get_full_name|default:log.user.username|default:"Usuário Anônimo" }}</div>
                                <div class="mt-1">{{ log.description|truncatechars:100 }}</div>
                            </div>
                            <div class="ml-3">
                                <span class="log-action {{ log.severity|lower }}">{{ log.get_action_display }}</span>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <p class="text-muted">Nenhum log encontrado.</p>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Logs Críticos -->
        <div class="col-md-4 mb-4">
            <div class="card border-danger">
                <div class="card-header bg-danger text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-exclamation-circle"></i>
                        Logs Críticos
                    </h5>
                </div>
                <div class="card-body">
                    {% for log in critical_logs %}
                    <div class="log-item critical">
                        <div class="log-timestamp">{{ log.timestamp|date:"d/m/Y H:i:s" }}</div>
                        <div class="log-user">{{ log.user.get_full_name|default:log.user.username|default:"Usuário Anônimo" }}</div>
                        <div class="mt-1">{{ log.description|truncatechars:80 }}</div>
                    </div>
                    {% empty %}
                    <p class="text-muted">Nenhum log crítico encontrado.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Atualizar dashboard a cada 30 segundos
    setInterval(function() {
        location.reload();
    }, 30000);
</script>
{% endblock %}