{% extends "base.html" %}
{% block title %}Reports{% endblock %}

{% block extra_head %}
<style>
  .stat-card {
    border: none;
    border-radius: .75rem;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1) !important;
  }
  .stat-card .stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.1;
  }
  .stat-card .stat-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    opacity: .75;
  }
  .stat-icon {
    font-size: 2rem;
    opacity: .2;
  }
  .chart-container {
    position: relative;
    height: 320px;
  }
  .table-senders th { font-size: .85rem; }
  .table-senders td { font-size: .875rem; }
  .range-btn.active { font-weight: 700; }
</style>
{% endblock %}

{% block content %}

<!-- Header Row -->
<div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
  <h4 class="fw-bold mb-0">
    <i class="bi bi-bar-chart-line me-2 text-primary"></i>Reports
  </h4>

  <!-- Day Range Selector -->
  <div class="btn-group" role="group" aria-label="Date range">
    {% set current_days = days | default(7) | int %}
    <a href="{{ url_for('reports.index', days=7) }}"
       class="btn btn-outline-primary btn-sm range-btn {% if current_days == 7 %}active{% endif %}">
      7d
    </a>
    <a href="{{ url_for('reports.index', days=30) }}"
       class="btn btn-outline-primary btn-sm range-btn {% if current_days == 30 %}active{% endif %}">
      30d
    </a>
    <a href="{{ url_for('reports.index', days=90) }}"
       class="btn btn-outline-primary btn-sm range-btn {% if current_days == 90 %}active{% endif %}">
      90d
    </a>
  </div>
</div>

<!-- Summary Cards -->
<div class="row g-3 mb-4">

  <!-- Total -->
  <div class="col-6 col-md-4 col-xl">
    <div class="card stat-card shadow-sm bg-primary text-white h-100">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <div class="stat-value">{{ stats.total | default(0) | int }}</div>
          <div class="stat-label">Total</div>
        </div>
        <i class="bi bi-envelope-fill stat-icon"></i>
      </div>
    </div>
  </div>

  <!-- Clean -->
  <div class="col-6 col-md-4 col-xl">
    <div class="card stat-card shadow-sm bg-success text-white h-100">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <div class="stat-value">{{ stats.clean | default(0) | int }}</div>
          <div class="stat-label">Clean</div>
        </div>
        <i class="bi bi-shield-fill-check stat-icon"></i>
      </div>
    </div>
  </div>

  <!-- Spam -->
  <div class="col-6 col-md-4 col-xl">
    <div class="card stat-card shadow-sm bg-danger text-white h-100">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <div class="stat-value">{{ stats.spam | default(0) | int }}</div>
          <div class="stat-label">Spam</div>
        </div>
        <i class="bi bi-shield-fill-x stat-icon"></i>
      </div>
    </div>
  </div>

  <!-- Review -->
  <div class="col-6 col-md-4 col-xl">
    <div class="card stat-card shadow-sm bg-warning text-dark h-100">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <div class="stat-value">{{ stats.review | default(0) | int }}</div>
          <div class="stat-label">Review</div>
        </div>
        <i class="bi bi-exclamation-triangle-fill stat-icon"></i>
      </div>
    </div>
  </div>

  <!-- Released -->
  <div class="col-6 col-md-4 col-xl">
    <div class="card stat-card shadow-sm bg-secondary text-white h-100">
      <div class="card-body d-flex justify-content-between align-items-center">
        <div>
          <div class="stat-value">{{ stats.released | default(0) | int }}</div>
          <div class="stat-label">Released</div>
        </div>
        <i class="bi bi-send-fill stat-icon"></i>
      </div>
    </div>
  </div>

</div><!-- /summary cards -->

<div class="row g-3 mb-4">

  <!-- Daily Volume Chart -->
  <div class="col-lg-8">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header bg-white border-bottom py-2 d-flex align-items-center justify-content-between">
        <h6 class="mb-0 fw-bold">
          <i class="bi bi-bar-chart-fill me-2 text-primary"></i>
          Daily Mail Volume
          <span class="text-muted fw-normal small">(last {{ current_days }} days)</span>
        </h6>
        <div class="d-flex gap-2 small">
          <span class="badge" style="background:#198754;">Clean</span>
          <span class="badge" style="background:#dc3545;">Spam</span>
          <span class="badge" style="background:#ffc107;color:#000;">Review</span>
        </div>
      </div>
      <div class="card-body">
        <div class="chart-container">
          <canvas id="dailyVolumeChart"></canvas>
        </div>
      </div>
    </div>
  </div>

  <!-- Detection Rate Card -->
  <div class="col-lg-4">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header bg-white border-bottom py-2">
        <h6 class="mb-0 fw-bold">
          <i class="bi bi-pie-chart-fill me-2 text-warning"></i>Detection Summary
        </h6>
      </div>
      <div class="card-body d-flex flex-column">
        {% set total     = stats.total   | default(1) | int %}
        {% set clean_n   = stats.clean   | default(0) | int %}
        {% set spam_n    = stats.spam    | default(0) | int %}
        {% set review_n  = stats.review  | default(0) | int %}
        {% set released_n = stats.released | default(0) | int %}
        {% set total_safe = [total, 1] | max %}

        <!-- Clean rate -->
        <div class="mb-3">
          <div class="d-flex justify-content-between small mb-1">
            <span class="fw-semibold text-success">Clean</span>
            <span class="text-muted">{{ clean_n }} / {{ total }}
              ({{ '%d' % ((clean_n / total_safe) * 100) }}%)</span>
          </div>
          <div class="progress" style="height:10px;">
            <div class="progress-bar bg-success" style="width:{{ (clean_n / total_safe * 100) | round }}%"></div>
          </div>
        </div>

        <!-- Spam rate -->
        <div class="mb-3">
          <div class="d-flex justify-content-between small mb-1">
            <span class="fw-semibold text-danger">Spam</span>
            <span class="text-muted">{{ spam_n }} / {{ total }}
              ({{ '%d' % ((spam_n / total_safe) * 100) }}%)</span>
          </div>
          <div class="progress" style="height:10px;">
            <div class="progress-bar bg-danger" style="width:{{ (spam_n / total_safe * 100) | round }}%"></div>
          </div>
        </div>

        <!-- Review rate -->
        <div class="mb-3">
          <div class="d-flex justify-content-between small mb-1">
            <span class="fw-semibold text-warning">Review</span>
            <span class="text-muted">{{ review_n }} / {{ total }}
              ({{ '%d' % ((review_n / total_safe) * 100) }}%)</span>
          </div>
          <div class="progress" style="height:10px;">
            <div class="progress-bar bg-warning" style="width:{{ (review_n / total_safe * 100) | round }}%"></div>
          </div>
        </div>

        <!-- Released rate -->
        <div class="mb-3">
          <div class="d-flex justify-content-between small mb-1">
            <span class="fw-semibold text-secondary">Released</span>
            <span class="text-muted">{{ released_n }} / {{ total }}
              ({{ '%d' % ((released_n / total_safe) * 100) }}%)</span>
          </div>
          <div class="progress" style="height:10px;">
            <div class="progress-bar bg-secondary" style="width:{{ (released_n / total_safe * 100) | round }}%"></div>
          </div>
        </div>

        <div class="mt-auto pt-2 border-top">
          <p class="text-muted small mb-0 text-center">
            Period: last <strong>{{ current_days }}</strong> days
          </p>
        </div>
      </div>
    </div>
  </div>

</div><!-- /chart row -->

<!-- Top Senders Table -->
<div class="card border-0 shadow-sm">
  <div class="card-header bg-white border-bottom py-2">
    <h6 class="mb-0 fw-bold">
      <i class="bi bi-person-lines-fill me-2 text-info"></i>Top Senders
      <span class="text-muted fw-normal small">(top 20 by volume)</span>
    </h6>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover table-senders align-middle mb-0">
        <thead class="table-dark">
          <tr>
            <th class="ps-3" style="width:2.5rem;">#</th>
            <th>Sender</th>
            <th style="width:8rem;" class="text-end pe-3">Messages</th>
            <th style="width:9rem;" class="text-end pe-3">Avg Score</th>
          </tr>
        </thead>
        <tbody>
          {% if top_senders %}
            {% for sender in top_senders %}
            <tr>
              <td class="ps-3 text-muted small">{{ loop.index }}</td>
              <td class="font-monospace small">{{ sender.sender | default('unknown') }}</td>
              <td class="text-end pe-3 fw-semibold">{{ sender.count | default(0) }}</td>
              <td class="text-end pe-3">
                {% set avg = sender.avg_score | default(0) | float %}
                {% if avg < 4 %}
                  <span class="badge score-badge-low">{{ '%.2f' % avg }}</span>
                {% elif avg < 6 %}
                  <span class="badge score-badge-medium">{{ '%.2f' % avg }}</span>
                {% elif avg < 15 %}
                  <span class="badge score-badge-high">{{ '%.2f' % avg }}</span>
                {% else %}
                  <span class="badge score-badge-severe">{{ '%.2f' % avg }}</span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="4" class="text-center text-muted py-4">
                <i class="bi bi-person-x fs-2 d-block mb-2 text-secondary"></i>
                No sender data available for this period.
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Pass daily data to Chart.js -->
<script id="chartData" type="application/json">
{{ daily_data | tojson if daily_data is defined else '[]' }}
</script>

{% endblock %}

{% block extra_scripts %}
<script>
(function () {
  const rawData = JSON.parse(document.getElementById('chartData').textContent || '[]');

  const labels     = rawData.map(d => d.date   || d.day  || '');
  const cleanData  = rawData.map(d => d.clean  || 0);
  const spamData   = rawData.map(d => d.spam   || 0);
  const reviewData = rawData.map(d => d.review || 0);

  const ctx = document.getElementById('dailyVolumeChart');
  if (!ctx) return;

  new Chart(ctx.getContext('2d'), {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [
        {
          label: 'Clean',
          data: cleanData,
          backgroundColor: 'rgba(25, 135, 84, 0.85)',
          borderColor:     'rgba(25, 135, 84, 1)',
          borderWidth: 1
        },
        {
          label: 'Spam',
          data: spamData,
          backgroundColor: 'rgba(220, 53, 69, 0.85)',
          borderColor:     'rgba(220, 53, 69, 1)',
          borderWidth: 1
        },
        {
          label: 'Review',
          data: reviewData,
          backgroundColor: 'rgba(255, 193, 7, 0.85)',
          borderColor:     'rgba(255, 193, 7, 1)',
          borderWidth: 1
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        mode: 'index',
        intersect: false
      },
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          callbacks: {
            footer: function (items) {
              const total = items.reduce((sum, i) => sum + i.parsed.y, 0);
              return 'Total: ' + total;
            }
          }
        }
      },
      scales: {
        x: {
          stacked: true,
          grid: { display: false },
          ticks: { font: { size: 11 }, maxRotation: 45 }
        },
        y: {
          stacked: true,
          beginAtZero: true,
          grid: { color: 'rgba(0,0,0,.06)' },
          ticks: {
            font: { size: 11 },
            stepSize: 1,
            callback: v => Number.isInteger(v) ? v : null
          }
        }
      }
    }
  });
})();
</script>
{% endblock %}