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

{% block title %}Audit Dashboard{% endblock %}

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.css" rel="stylesheet">
<style>
    .metric-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);
    }
    
    .metric-card.security {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    .metric-card.activity {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    .metric-card.alerts {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }
    
    .metric-value {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .metric-label {
        font-size: 0.9rem;
        opacity: 0.9;
    }
    
    .chart-container {
        background: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }
    
    .alert-item {
        border-left: 4px solid #dc3545;
        padding: 10px 15px;
        margin-bottom: 10px;
        background: #f8f9fa;
        border-radius: 0 5px 5px 0;
    }
    
    .alert-item.warning {
        border-left-color: #ffc107;
    }
    
    .alert-item.info {
        border-left-color: #17a2b8;
    }
    
    .user-activity-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }
    
    .user-activity-item:last-child {
        border-bottom: none;
    }
    
    .activity-badge {
        background: #007bff;
        color: white;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.8rem;
    }
</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">
                <h2><i class="fas fa-shield-alt"></i> Audit Dashboard</h2>
                <div class="btn-group">
                    <a href="?days=7" class="btn btn-outline-primary {% if days == 7 %}active{% endif %}">7 Days</a>
                    <a href="?days=30" class="btn btn-outline-primary {% if days == 30 %}active{% endif %}">30 Days</a>
                    <a href="?days=90" class="btn btn-outline-primary {% if days == 90 %}active{% endif %}">90 Days</a>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Metrics Row -->
    <div class="row">
        <div class="col-md-3">
            <div class="metric-card">
                <div class="metric-value">{{ total_events|floatformat:0 }}</div>
                <div class="metric-label">Total Events</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card security">
                <div class="metric-value">{{ security_events|floatformat:0 }}</div>
                <div class="metric-label">Security Events</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card activity">
                <div class="metric-value">{{ active_users|floatformat:0 }}</div>
                <div class="metric-label">Active Users</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="metric-card alerts">
                <div class="metric-value">{{ open_alerts|floatformat:0 }}</div>
                <div class="metric-label">Open Alerts</div>
                {% if critical_alerts > 0 %}
                <small class="text-warning">{{ critical_alerts }} Critical</small>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Charts Row -->
    <div class="row">
        <div class="col-md-6">
            <div class="chart-container">
                <h5><span>📊</span> Event Types</h5>
                <canvas id="eventTypeChart" width="400" height="200"></canvas>
            </div>
        </div>
        <div class="col-md-6">
            <div class="chart-container">
                <h5><span>👥</span> Top Active Users</h5>
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Role</th>
                                <th>Activities</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for user in top_users %}
                            <tr>
                                <td>{{ user.user__first_name }} {{ user.user__last_name }}</td>
                                <td><span class="badge badge-secondary">{{ user.user__role|title }}</span></td>
                                <td><span class="activity-badge">{{ user.activity_count }}</span></td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="3" class="text-center text-muted">No data available</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Recent Security Events -->
    <div class="row">
        <div class="col-md-8">
            <div class="chart-container">
                <h5><span>⚠️</span> Recent Security Events</h5>
                {% for event in recent_security_events %}
                <div class="alert-item {% if event.severity == 'critical' %}{% elif event.severity == 'high' %}warning{% else %}info{% endif %}">
                    <div class="d-flex justify-content-between">
                        <div>
                            <strong>{{ event.user.get_full_name|default:"Anonymous" }}</strong> - {{ event.action }}
                            <br>
                            <small class="text-muted">{{ event.description|truncatechars:100 }}</small>
                        </div>
                        <div class="text-right">
                            <small>{{ event.timestamp|timesince }} ago</small>
                            {% if event.severity %}
                            <br>
                            <span class="badge badge-{% if event.severity == 'critical' %}danger{% elif event.severity == 'high' %}warning{% else %}info{% endif %}">
                                {{ event.severity|title }}
                            </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% empty %}
                <p class="text-muted text-center">No recent security events</p>
                {% endfor %}
            </div>
        </div>
        <div class="col-md-4">
            <div class="chart-container">
                <h5><span>⚙️</span> Quick Actions</h5>
                <div class="list-group list-group-flush">
                    <a href="{% url 'users:audit_trail_report' %}" class="list-group-item list-group-item-action">
                        <span>📋</span> View Audit Trail
                    </a>
                    <a href="{% url 'users:user_activity_analysis' %}" class="list-group-item list-group-item-action">
                        <span>📈</span> Activity Analysis
                    </a>
                    <a href="{% url 'users:security_compliance_report' %}" class="list-group-item list-group-item-action">
                        <i class="fas fa-shield-alt"></i> Security Compliance
                    </a>
                    <a href="{% url 'users:permission_usage_analytics' %}" class="list-group-item list-group-item-action">
                        <span>🔑</span> Permission Analytics
                    </a>
                    <a href="{% url 'users:security_alerts' %}" class="list-group-item list-group-item-action">
                        <span>🔔</span> Security Alerts
                        {% if open_alerts > 0 %}
                        <span class="badge badge-danger float-right">{{ open_alerts }}</span>
                        {% endif %}
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Event Type Chart
    const eventTypeCtx = document.getElementById('eventTypeChart').getContext('2d');
    const eventTypeData = {
        labels: [
            {% for event in event_breakdown %}
            '{{ event.event_type|title }}'{% if not forloop.last %},{% endif %}
            {% endfor %}
        ],
        datasets: [{
            data: [
                {% for event in event_breakdown %}
                {{ event.count }}{% if not forloop.last %},{% endif %}
                {% endfor %}
            ],
            backgroundColor: [
                '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
                '#FF9F40', '#FF6384', '#C9CBCF', '#4BC0C0', '#FF6384'
            ]
        }]
    };
    
    new Chart(eventTypeCtx, {
        type: 'doughnut',
        data: eventTypeData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
});
</script>
{% endblock %}