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

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

{% block extra_css %}
<style>
    .log-table th {
        background-color: #f8f9fa;
        border-top: none;
        font-weight: 600;
        color: #495057;
    }
    
    .log-severity {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: bold;
        text-transform: uppercase;
    }
    
    .log-severity.critical { background-color: #ff6b6b; color: white; }
    .log-severity.high { background-color: #ffa726; color: white; }
    .log-severity.medium { background-color: #ffd54f; color: #333; }
    .log-severity.low { background-color: #66bb6a; color: white; }
    
    .log-action {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: bold;
        background-color: #e9ecef;
        color: #495057;
    }
    
    .filters-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }
    
    .stats-badge {
        display: inline-block;
        padding: 8px 12px;
        border-radius: 6px;
        font-weight: bold;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    
    .stats-badge.total { background-color: #007bff; color: white; }
    .stats-badge.today { background-color: #28a745; color: white; }
    .stats-badge.critical { background-color: #dc3545; color: white; }
    .stats-badge.error { background-color: #fd7e14; 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-list text-primary"></i>
                    Logs do Sistema
                </h1>
                <div>
                    <a href="{% url 'system_logs:dashboard' %}" class="btn btn-secondary">
                        <i class="fas fa-chart-line"></i> Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Estatísticas Rápidas -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="stats-badge total">
                <i class="fas fa-database"></i> Total: {{ total_logs }}
            </div>
            <div class="stats-badge today">
                <i class="fas fa-calendar-day"></i> Hoje: {{ today_logs }}
            </div>
            <div class="stats-badge critical">
                <i class="fas fa-exclamation-triangle"></i> Críticos: {{ critical_logs }}
            </div>
            <div class="stats-badge error">
                <i class="fas fa-bug"></i> Erros: {{ error_logs }}
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="filters-card">
        <div class="card-body">
            <form method="get" class="row">
                <div class="col-md-2">
                    <label for="action" class="form-label">Ação</label>
                    <select name="action" id="action" class="form-select">
                        <option value="">Todas</option>
                        {% for action_code, action_name in action_choices %}
                        <option value="{{ action_code }}" {% if current_filters.action == action_code %}selected{% endif %}>
                            {{ action_name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="col-md-2">
                    <label for="severity" class="form-label">Severidade</label>
                    <select name="severity" id="severity" class="form-select">
                        <option value="">Todas</option>
                        {% for severity_code, severity_name in severity_choices %}
                        <option value="{{ severity_code }}" {% if current_filters.severity == severity_code %}selected{% endif %}>
                            {{ severity_name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="col-md-2">
                    <label for="date_from" class="form-label">Data Início</label>
                    <input type="date" name="date_from" id="date_from" class="form-control" 
                           value="{{ current_filters.date_from|default:'' }}">
                </div>
                
                <div class="col-md-2">
                    <label for="date_to" class="form-label">Data Fim</label>
                    <input type="date" name="date_to" id="date_to" class="form-control" 
                           value="{{ current_filters.date_to|default:'' }}">
                </div>
                
                <div class="col-md-3">
                    <label for="search" class="form-label">Buscar</label>
                    <input type="text" name="search" id="search" class="form-control" 
                           placeholder="Descrição, usuário, IP..." 
                           value="{{ current_filters.search|default:'' }}">
                </div>
                
                <div class="col-md-1">
                    <label class="form-label">&nbsp;</label>
                    <div>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i>
                        </button>
                        <a href="{% url 'system_logs:list' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Tabela de Logs -->
    <div class="card">
        <div class="card-body">
            {% if page_obj %}
            <div class="table-responsive">
                <table class="table table-hover log-table">
                    <thead>
                        <tr>
                            <th>Data/Hora</th>
                            <th>Usuário</th>
                            <th>Ação</th>
                            <th>Severidade</th>
                            <th>Descrição</th>
                            <th>IP</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for log in page_obj %}
                        <tr>
                            <td>
                                <small class="text-muted">{{ log.timestamp|date:"d/m/Y H:i:s" }}</small>
                            </td>
                            <td>
                                <strong>{{ log.user.get_full_name|default:log.user.username|default:"Anônimo" }}</strong>
                            </td>
                            <td>
                                <span class="log-action">{{ log.get_action_display }}</span>
                            </td>
                            <td>
                                <span class="log-severity {{ log.severity|lower }}">{{ log.get_severity_display }}</span>
                            </td>
                            <td>
                                <div class="text-truncate" style="max-width: 300px;" title="{{ log.description }}">
                                    {{ log.description }}
                                </div>
                            </td>
                            <td>
                                <small class="text-muted">{{ log.ip_address|default:"-" }}</small>
                            </td>
                            <td>
                                <a href="{% url 'system_logs:detail' log.id %}" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Paginação -->
            {% if page_obj.has_other_pages %}
            <nav aria-label="Paginação de logs">
                <ul class="pagination justify-content-center">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                            <i class="fas fa-angle-double-left"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                            <i class="fas fa-angle-left"></i>
                        </a>
                    </li>
                    {% endif %}

                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">{{ num }}</a>
                        </li>
                        {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                            <i class="fas fa-angle-right"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">
                            <i class="fas fa-angle-double-right"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}

            <div class="text-center text-muted">
                Mostrando {{ page_obj.start_index }} a {{ page_obj.end_index }} de {{ page_obj.paginator.count }} logs
            </div>

            {% else %}
            <div class="text-center py-5">
                <i class="fas fa-search fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">Nenhum log encontrado</h5>
                <p class="text-muted">Tente ajustar os filtros de busca.</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Auto-submit do formulário quando os filtros mudarem
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        const selects = form.querySelectorAll('select');
        const inputs = form.querySelectorAll('input[type="date"]');
        
        selects.forEach(select => {
            select.addEventListener('change', () => form.submit());
        });
        
        inputs.forEach(input => {
            input.addEventListener('change', () => form.submit());
        });
    });
</script>
{% endblock %}