{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrahead %}
{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
  .dashboard-container {
    padding: 10px 0;
  }
  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline-color, #ccc);
  }
  .period-selector a {
    padding: 6px 12px;
    margin-left: 4px;
    border: 1px solid var(--hairline-color, #ccc);
    border-radius: 4px;
    text-decoration: none;
    color: var(--body-fg, #333);
    background: var(--darkened-bg, #f8f9fa);
    font-size: 0.85rem;
  }
  .period-selector a.active {
    background: var(--primary, #79aec8);
    color: #fff;
    border-color: var(--primary, #79aec8);
  }
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 25px;
  }
  .kpi-card {
    background: var(--darkened-bg, #f8f9fa);
    color: var(--body-fg, #333);
    border: 1px solid var(--hairline-color, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  }
  .kpi-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--secondary-fg, #666);
    font-weight: 600;
  }
  .kpi-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--link-fg, #447e9b);
    margin-top: 6px;
  }
  .kpi-sub {
    font-size: 0.8rem;
    margin-top: 4px;
    color: var(--secondary-fg, #888);
  }
  .charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
  }
  @media (max-width: 900px) {
    .charts-grid { grid-template-columns: 1fr; }
  }
  .chart-box {
    background: var(--darkened-bg, #f8f9fa);
    border: 1px solid var(--hairline-color, #e0e0e0);
    border-radius: 8px;
    padding: 16px;
  }
  .chart-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 12px;
    color: var(--body-fg, #333);
  }
  .tables-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
  }
  @media (max-width: 900px) {
    .tables-grid { grid-template-columns: 1fr; }
  }
  .alert-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.75rem;
  }
  .alert-CRITICAL { background: rgba(220, 53, 69, 0.2); color: #dc3545; }
  .alert-WARNING { background: rgba(255, 193, 7, 0.2); color: var(--warning-fg, #b45d00); }
  .alert-INFO { background: rgba(13, 110, 253, 0.2); color: var(--accent, #0d6efd); }
</style>
{% endblock %}

{% block content %}
<div class="dashboard-container">
  <div class="dashboard-header">
    <div>
      <h1 style="margin:0; font-size: 1.6rem; color: var(--body-fg);">{{ title }}</h1>
      <span style="color: var(--secondary-fg); font-size: 0.9rem;">{{ subtitle }}</span>
    </div>
    <div class="period-selector" style="display: flex; gap: 6px; align-items: center;">
      <a href="{% url 'admin:django_suap_auth_audit_auditevent_changelist' %}" style="margin-right: 12px; font-weight: bold;">
        ⬅ Lista de Eventos
      </a>
      <a href="?period=24h" class="{% if period == '24h' %}active{% endif %}">Últimas 24h</a>
      <a href="?period=7d" class="{% if period == '7d' %}active{% endif %}">Últimos 7 dias</a>
      <a href="?period=30d" class="{% if period == '30d' %}active{% endif %}">Últimos 30 dias</a>
    </div>
  </div>

  <!-- KPIs -->
  <div class="kpi-grid">
    <div class="kpi-card">
      <div class="kpi-title">Total de Logins SUAP</div>
      <div class="kpi-value">{{ total_logins }}</div>
      <div class="kpi-sub">Taxa de sucesso: {{ success_rate }}%</div>
    </div>
    <div class="kpi-card">
      <div class="kpi-title">Acessos a APIs Ninja</div>
      <div class="kpi-value">{{ api_count }}</div>
      <div class="kpi-sub">Requisições v1 e v2 auditadas</div>
    </div>
    <div class="kpi-card">
      <div class="kpi-title">Sessões Impersonate</div>
      <div class="kpi-value">{{ impersonate_count }}</div>
      <div class="kpi-sub">Uso "em nome de" por Superusuários</div>
    </div>
    <div class="kpi-card">
      <div class="kpi-title">Alertas de Segurança</div>
      <div class="kpi-value" style="color: {% if security_alerts_count > 0 %}#dc3545{% else %}var(--link-fg){% endif %};">
        {{ security_alerts_count }}
      </div>
      <div class="kpi-sub">Anomalias detectadas no período</div>
    </div>
  </div>

  <!-- Gráficos -->
  <div class="charts-grid">
    <div class="chart-box">
      <div class="chart-title">Evolução Temporal de Acessos</div>
      <canvas id="timelineChart" height="120"></canvas>
    </div>
    <div class="chart-box">
      <div class="chart-title">Distribuição por Categoria</div>
      <canvas id="categoryChart" height="240"></canvas>
    </div>
  </div>

  <!-- Tabelas Resumo -->
  <div class="tables-grid">
    <div class="chart-box">
      <div class="chart-title">Top Superusuários (Impersonate)</div>
      <table style="width: 100%; border-collapse: collapse;">
        <thead>
          <tr style="border-bottom: 1px solid var(--hairline-color); text-align: left;">
            <th style="padding: 8px;">Superusuário</th>
            <th style="padding: 8px; text-align: right;">Ações</th>
          </tr>
        </thead>
        <tbody>
          {% for item in top_impersonators %}
          <tr style="border-bottom: 1px solid var(--hairline-color);">
            <td style="padding: 8px;">{{ item.impersonator_identifier }}</td>
            <td style="padding: 8px; text-align: right; font-weight: bold;">{{ item.total }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="2" style="padding: 12px; color: var(--secondary-fg);">Nenhum uso de impersonate no período.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="chart-box">
      <div class="chart-title">Endpoints Ninja mais Acessados</div>
      <table style="width: 100%; border-collapse: collapse;">
        <thead>
          <tr style="border-bottom: 1px solid var(--hairline-color); text-align: left;">
            <th style="padding: 8px;">Rota / Endpoint</th>
            <th style="padding: 8px; text-align: right;">Requisições</th>
          </tr>
        </thead>
        <tbody>
          {% for item in top_endpoints %}
          <tr style="border-bottom: 1px solid var(--hairline-color);">
            <td style="padding: 8px; font-family: monospace;">{{ item.request_path }}</td>
            <td style="padding: 8px; text-align: right; font-weight: bold;">{{ item.total }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="2" style="padding: 12px; color: var(--secondary-fg);">Nenhum acesso de API registrado.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Tabela de Alertas de Segurança Recentes -->
  <div class="chart-box">
    <div class="chart-title">Alertas de Segurança Recentes</div>
    <table style="width: 100%; border-collapse: collapse;">
      <thead>
        <tr style="border-bottom: 1px solid var(--hairline-color); text-align: left;">
          <th style="padding: 8px;">Data / Hora</th>
          <th style="padding: 8px;">Gravidade</th>
          <th style="padding: 8px;">Tipo do Alerta</th>
          <th style="padding: 8px;">Detalhes</th>
        </tr>
      </thead>
      <tbody>
        {% for alert in recent_alerts %}
        <tr style="border-bottom: 1px solid var(--hairline-color);">
          <td style="padding: 8px; font-size: 0.85rem;">{{ alert.timestamp|date:"d/m/Y H:i:s" }}</td>
          <td style="padding: 8px;"><span class="alert-badge alert-{{ alert.severity }}">{{ alert.get_severity_display }}</span></td>
          <td style="padding: 8px; font-weight: bold;">{{ alert.event_type }}</td>
          <td style="padding: 8px; font-size: 0.85rem; font-family: monospace;">{{ alert.metadata.rule }}: {{ alert.metadata.details }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="4" style="padding: 12px; color: var(--secondary-fg);">Nenhum alerta de segurança disparado no período.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{{ chart_labels|json_script:"chart-labels-data" }}
{{ chart_logins|json_script:"chart-logins-data" }}
{{ chart_api|json_script:"chart-api-data" }}
{{ chart_impersonates|json_script:"chart-impersonates-data" }}

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    const textColor = isDark ? '#e0e0e0' : '#333333';
    const gridColor = isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.08)';

    const labels = JSON.parse(document.getElementById('chart-labels-data').textContent);
    const loginsData = JSON.parse(document.getElementById('chart-logins-data').textContent);
    const apiData = JSON.parse(document.getElementById('chart-api-data').textContent);
    const impersonatesData = JSON.parse(document.getElementById('chart-impersonates-data').textContent);

    // Timeline Chart
    new Chart(document.getElementById('timelineChart'), {
      type: 'line',
      data: {
        labels: labels,
        datasets: [
          { label: 'Logins SUAP', data: loginsData, borderColor: '#417690', backgroundColor: 'rgba(65, 118, 144, 0.15)', fill: true, tension: 0.3 },
          { label: 'APIs Ninja', data: apiData, borderColor: '#28a745', backgroundColor: 'rgba(40, 167, 69, 0.15)', fill: true, tension: 0.3 },
          { label: 'Impersonates', data: impersonatesData, borderColor: '#ffc107', backgroundColor: 'rgba(255, 193, 7, 0.15)', fill: true, tension: 0.3 }
        ]
      },
      options: {
        responsive: true,
        plugins: { legend: { labels: { color: textColor } } },
        scales: {
          x: { ticks: { color: textColor }, grid: { color: gridColor } },
          y: { ticks: { color: textColor }, grid: { color: gridColor }, beginAtZero: true }
        }
      }
    });

    // Category Doughnut Chart
    new Chart(document.getElementById('categoryChart'), {
      type: 'doughnut',
      data: {
        labels: ['Logins SUAP', 'APIs Ninja', 'Impersonate', 'Alertas'],
        datasets: [{
          data: [{{ total_logins }}, {{ api_count }}, {{ impersonate_count }}, {{ security_alerts_count }}],
          backgroundColor: ['#417690', '#28a745', '#ffc107', '#dc3545']
        }]
      },
      options: {
        responsive: true,
        plugins: { legend: { position: 'bottom', labels: { color: textColor } } }
      }
    });
  });
</script>
{% endblock %}