{% extends "base.html" %}
{% block title %}Dashboard — Logatory{% endblock %}

{% block content %}
<h1 class="page-title">Dashboard</h1>

<!-- ── stat cards ──────────────────────────────────────────────────────── -->
<div class="stat-grid">
  <div class="stat-card">
    <div class="stat-label">Total Findings</div>
    <div class="stat-value c-accent">{{ f_summary.total }}</div>
    <div class="stat-delta">all time</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Critical Findings</div>
    <div class="stat-value c-critical">{{ f_summary.by_severity.get('critical', 0) }}</div>
    <div class="stat-delta">all time</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Error Types</div>
    <div class="stat-value c-high">{{ e_summary.total_error_types }}</div>
    <div class="stat-delta">unique patterns</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Occurrences</div>
    <div class="stat-value">{{ e_summary.total_occurrences }}</div>
    <div class="stat-delta">error events logged</div>
  </div>
</div>

<!-- ── chart + top rules ──────────────────────────────────────────────── -->
<div class="grid-2">
  <div class="card" style="padding:0">
    <div class="card-header">
      <span class="card-title">Activity — last 14 days</span>
    </div>
    <div style="padding:16px 8px 8px">
      <div id="trend-chart" class="chart-wrap"></div>
    </div>
  </div>

  <div class="table-card">
    <div class="table-header">
      <span class="table-title">Top Rules</span>
      <a href="/findings" class="btn btn-ghost btn-sm">All findings</a>
    </div>
    <div id="top-rules">
      {% include "partials/top_rules.html" %}
    </div>
  </div>
</div>

<!-- ── recent findings (24h) ──────────────────────────────────────────── -->
<div class="table-card">
  <div class="table-header">
    <span class="table-title">Recent Findings <span style="color:var(--text-muted);font-weight:400">(last 24 h)</span></span>
    <a href="/findings" class="btn btn-ghost btn-sm">View all</a>
  </div>
  <table>
    <thead>
      <tr>
        <th class="nowrap">Time (UTC)</th>
        <th>Rule</th>
        <th>Severity</th>
        <th>Source</th>
        <th>Message</th>
      </tr>
    </thead>
    <tbody>
      {% for r in recent %}
      <tr>
        <td class="mono nowrap">{{ r.created_at[:16] }}</td>
        <td class="mono">{{ r.rule_id }}</td>
        <td><span class="badge badge-{{ r.severity }}">{{ r.severity }}</span></td>
        <td class="mono truncate">{{ r.source }}</td>
        <td class="truncate">{{ r.message }}</td>
      </tr>
      {% else %}
      <tr><td colspan="5" class="td-empty">No findings in the last 24 h</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- ── trend chart script ──────────────────────────────────────────────── -->
<script>
(async function () {
  const el = document.getElementById('trend-chart');
  const chart = echarts.init(el, null, { renderer: 'canvas' });

  chart.showLoading({
    text: 'Loading...',
    maskColor: 'rgba(26,29,39,0.85)',
    textColor: '#94a3b8',
    spinnerRadius: 10,
    lineWidth: 2,
    color: '#6366f1',
  });

  // Build the last-14-days labels (MM-DD)
  const days = [];
  for (let i = 13; i >= 0; i--) {
    const d = new Date();
    d.setDate(d.getDate() - i);
    days.push(d.toISOString().slice(0, 10));
  }

  try {
    const resp = await fetch('/api/trend?days=14');
    const data = await resp.json();

    const errMap = {};
    data.errors.forEach(d => { errMap[d.day] = d.count; });

    const findMap = {};
    data.findings.forEach(d => {
      findMap[d.day] = (findMap[d.day] || 0) + d.count;
    });

    chart.hideLoading();
    chart.setOption({
      backgroundColor: 'transparent',
      grid: { top: 36, right: 24, bottom: 32, left: 42, containLabel: true },
      tooltip: {
        trigger: 'axis',
        backgroundColor: '#1a1d27',
        borderColor: '#2d3148',
        textStyle: { color: '#e2e8f0', fontSize: 12 },
        axisPointer: { lineStyle: { color: '#2d3148' } },
      },
      legend: {
        data: ['Error occurrences', 'Findings'],
        textStyle: { color: '#94a3b8', fontSize: 12 },
        right: 8, top: 4,
      },
      xAxis: {
        type: 'category',
        data: days.map(d => d.slice(5)),
        axisLine: { lineStyle: { color: '#2d3148' } },
        axisTick: { show: false },
        axisLabel: { color: '#94a3b8', fontSize: 11 },
        splitLine: { show: false },
      },
      yAxis: {
        type: 'value',
        minInterval: 1,
        splitLine: { lineStyle: { color: '#2d3148', type: 'dashed' } },
        axisLabel: { color: '#94a3b8', fontSize: 11 },
        axisLine: { show: false },
        axisTick: { show: false },
      },
      series: [
        {
          name: 'Error occurrences',
          type: 'line',
          data: days.map(d => errMap[d] || 0),
          smooth: 0.4,
          symbol: 'circle', symbolSize: 5,
          lineStyle: { color: '#f97316', width: 2 },
          itemStyle: { color: '#f97316', borderWidth: 0 },
          areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(249,115,22,0.18)' },
              { offset: 1, color: 'rgba(249,115,22,0.01)' },
            ]
          }},
        },
        {
          name: 'Findings',
          type: 'line',
          data: days.map(d => findMap[d] || 0),
          smooth: 0.4,
          symbol: 'circle', symbolSize: 5,
          lineStyle: { color: '#6366f1', width: 2 },
          itemStyle: { color: '#6366f1', borderWidth: 0 },
          areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(99,102,241,0.18)' },
              { offset: 1, color: 'rgba(99,102,241,0.01)' },
            ]
          }},
        },
      ],
    });
  } catch (e) {
    chart.hideLoading();
    chart.setOption({
      graphic: [{
        type: 'text',
        left: 'center', top: 'middle',
        style: { text: 'No trend data available yet', fill: '#94a3b8', fontSize: 13 },
      }],
    });
  }

  window.addEventListener('resize', () => chart.resize());
})();
</script>
{% endblock %}