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

{% block title %}Brevo Analytics Dashboard{% endblock %}

{% block extrahead %}
{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
  }
  .stat-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  .stat-card h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #666;
    font-weight: normal;
  }
  .stat-card .value {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }
  .stat-card canvas {
    height: 40px !important;
  }
  .date-range-filter {
    margin: 20px 0;
  }
  .date-range-filter a {
    display: inline-block;
    padding: 8px 16px;
    margin-right: 10px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
  }
  .date-range-filter a.active {
    background: #417690;
    color: white;
    border-color: #417690;
  }
  .date-range-filter a:hover {
    background: #e8e8e8;
  }
  .date-range-filter a.active:hover {
    background: #2e5d77;
  }
  .dashboard-actions {
    margin: 30px 0;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 4px;
  }
  .dashboard-actions a {
    display: inline-block;
    padding: 10px 20px;
    background: #417690;
    color: white;
    text-decoration: none;
    border-radius: 4px;
  }
  .dashboard-actions a:hover {
    background: #2e5d77;
  }
  .no-data {
    padding: 40px;
    text-align: center;
    color: #666;
    background: #f8f8f8;
    border-radius: 4px;
    margin: 20px 0;
  }
</style>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">Home</a>
  &rsaquo; Brevo Analytics Dashboard
</div>
{% endblock %}

{% block content %}
{% if messages %}
<ul class="messagelist">
  {% for message in messages %}
  <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
  {% endfor %}
</ul>
{% endif %}

<div class="date-range-filter">
  <strong>Date Range:</strong>
  <a href="?range=24h" {% if date_range == '24h' %}class="active"{% endif %}>24 Hours</a>
  <a href="?range=7d" {% if date_range == '7d' %}class="active"{% endif %}>7 Days</a>
  <a href="?range=30d" {% if date_range == '30d' %}class="active"{% endif %}>30 Days</a>
</div>

{% if stats %}
<div class="stats-grid">
  <div class="stat-card">
    <h3>Total Sent</h3>
    <div class="value">{{ stats.total_sent|default:"0" }}</div>
    <canvas id="sent-sparkline"></canvas>
  </div>

  <div class="stat-card">
    <h3>Delivery Rate</h3>
    <div class="value">{{ stats.delivery_rate|floatformat:1|default:"0.0" }}%</div>
    <canvas id="delivery-sparkline"></canvas>
  </div>

  <div class="stat-card">
    <h3>Bounce Rate</h3>
    <div class="value">{{ stats.bounce_rate|floatformat:1|default:"0.0" }}%</div>
    <canvas id="bounce-sparkline"></canvas>
  </div>

  <div class="stat-card">
    <h3>Avg Delivery Time</h3>
    <div class="value">{{ stats.avg_delivery_time|floatformat:1|default:"0.0" }}s</div>
    <canvas id="time-sparkline"></canvas>
  </div>
</div>

<script>
  // Sparkline configuration
  const sparklineConfig = {
    type: 'line',
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: { enabled: false }
      },
      scales: {
        x: { display: false },
        y: { display: false }
      },
      elements: {
        point: { radius: 0 },
        line: { tension: 0.4, borderWidth: 2 }
      }
    }
  };

  // Initialize sparklines
  {% if stats.sent_trend %}
  new Chart(document.getElementById('sent-sparkline'), {
    ...sparklineConfig,
    data: {
      labels: Array({{ stats.sent_trend|length }}).fill(''),
      datasets: [{
        data: {{ stats.sent_trend|safe }},
        borderColor: '#417690',
        backgroundColor: 'rgba(65, 118, 144, 0.1)',
        fill: true
      }]
    }
  });
  {% endif %}

  {% if stats.delivery_trend %}
  new Chart(document.getElementById('delivery-sparkline'), {
    ...sparklineConfig,
    data: {
      labels: Array({{ stats.delivery_trend|length }}).fill(''),
      datasets: [{
        data: {{ stats.delivery_trend|safe }},
        borderColor: '#28a745',
        backgroundColor: 'rgba(40, 167, 69, 0.1)',
        fill: true
      }]
    }
  });
  {% endif %}

  {% if stats.bounce_trend %}
  new Chart(document.getElementById('bounce-sparkline'), {
    ...sparklineConfig,
    data: {
      labels: Array({{ stats.bounce_trend|length }}).fill(''),
      datasets: [{
        data: {{ stats.bounce_trend|safe }},
        borderColor: '#dc3545',
        backgroundColor: 'rgba(220, 53, 69, 0.1)',
        fill: true
      }]
    }
  });
  {% endif %}

  {% if stats.sent_trend %}
  new Chart(document.getElementById('time-sparkline'), {
    ...sparklineConfig,
    data: {
      labels: Array({{ stats.sent_trend|length }}).fill(''),
      datasets: [{
        data: {{ stats.sent_trend|safe }},
        borderColor: '#ffc107',
        backgroundColor: 'rgba(255, 193, 7, 0.1)',
        fill: true
      }]
    }
  });
  {% endif %}
</script>

<div class="dashboard-actions">
  <h2>Actions</h2>
  <p>View detailed email delivery information and search for specific recipients.</p>
  <a href="{% url 'admin:brevo_analytics_email_list' %}?range={{ date_range }}">View Email List &rarr;</a>
</div>

{% else %}
<div class="no-data">
  <h2>No Data Available</h2>
  <p>Unable to load analytics data at this time. Please check your configuration or try again later.</p>
</div>
{% endif %}

{% endblock %}