{% extends 'dashboard/base.html' %}
{% load humanize %}
{% block title %}Analytics{% endblock %}
{% block page_title %}Analytics & Reports{% endblock %}

{% block content %}
<div class="page-header">
  <div class="breadcrumb"><a href="{% url 'dashboard:home' %}">Dashboard</a> <span>/</span> Analytics</div>
  <h1 class="page-title">Analytics & Reports</h1>
  <p class="page-subtitle">Sales performance and business insights</p>
</div>

<!-- KPI Cards -->
<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-icon gold"><i class="fas fa-naira-sign"></i></div>
    <div class="stat-info">
      <div class="stat-value">₦{{ total_revenue|floatformat:0|intcomma }}</div>
      <div class="stat-label">Total Revenue</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon green"><i class="fas fa-shopping-bag"></i></div>
    <div class="stat-info">
      <div class="stat-value">{{ total_orders }}</div>
      <div class="stat-label">Total Orders</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon blue"><i class="fas fa-chart-line"></i></div>
    <div class="stat-info">
      <div class="stat-value">{% if total_orders > 0 %}₦{{ avg_order|floatformat:0|intcomma }}{% else %}₦0{% endif %}</div>
      <div class="stat-label">Avg Order Value</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon purple"><i class="fas fa-percentage"></i></div>
    <div class="stat-info">
      <div class="stat-value">{% if total_orders > 0 %}{{ status_counts.delivered|default:0 }}{% else %}0{% endif %}</div>
      <div class="stat-label">Delivered Orders</div>
    </div>
  </div>
</div>

<div style="display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:20px">
  <!-- Revenue Chart -->
  <div class="card">
    <div class="card-header">
      <div class="card-title"><i class="fas fa-chart-area" style="color:var(--accent);margin-right:8px"></i>Monthly Revenue</div>
    </div>
    <div class="card-body">
      <canvas id="revenueChart" height="100"></canvas>
    </div>
  </div>

  <!-- Order Status Donut -->
  <div class="card">
    <div class="card-header"><div class="card-title">Order Status Breakdown</div></div>
    <div class="card-body">
      <canvas id="statusChart" height="180"></canvas>
      <div id="statusLegend" style="margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center"></div>
    </div>
  </div>
</div>

<!-- Top Products -->
<div class="card">
  <div class="card-header">
    <div class="card-title"><i class="fas fa-trophy" style="color:var(--accent);margin-right:8px"></i>Top Selling Products</div>
  </div>
  <div class="card-body" style="padding:0">
    <div class="table-wrap">
      <table class="data-table">
        <thead>
          <tr>
            <th>#</th>
            <th>Product Name</th>
            <th>Units Sold</th>
            <th>Revenue</th>
            <th>Share</th>
          </tr>
        </thead>
        <tbody>
          {% for p in top_products %}
          <tr>
            <td>
              <div style="width:26px;height:26px;border-radius:50%;
                {% if forloop.counter == 1 %}background:#f59e0b;
                {% elif forloop.counter == 2 %}background:#94a3b8;
                {% elif forloop.counter == 3 %}background:#cd7c49;
                {% else %}background:var(--bg);color:var(--muted);{% endif %}
                display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white">
                {{ forloop.counter }}
              </div>
            </td>
            <td style="font-weight:500">{{ p.product_name }}</td>
            <td>{{ p.units }}</td>
            <td>₦{{ p.revenue|floatformat:0|intcomma }}</td>
            <td>
              <div style="display:flex;align-items:center;gap:8px">
                <div style="flex:1;height:6px;background:var(--bg);border-radius:3px;min-width:60px">
                  <div style="width:{% widthratio p.units top_products.0.units 100 %}%;height:100%;background:var(--accent);border-radius:3px"></div>
                </div>
                <span style="font-size:11px;color:var(--muted)">{% widthratio p.units top_products.0.units 100 %}%</span>
              </div>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="5"><div class="empty-state" style="padding:30px"><i class="fas fa-chart-bar"></i><h3>No sales data yet</h3></div></td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const monthlyData = {{ monthly_data|safe }};
const statusCounts = {{ status_counts|safe }};

// Revenue line chart
new Chart(document.getElementById('revenueChart'), {
  type: 'line',
  data: {
    labels: monthlyData.map(d => d.label),
    datasets: [{
      label: 'Revenue (₦)',
      data: monthlyData.map(d => d.value),
      borderColor: '#c9a84c',
      backgroundColor: 'rgba(201,168,76,0.1)',
      borderWidth: 2.5,
      pointBackgroundColor: '#c9a84c',
      pointRadius: 4,
      fill: true,
      tension: 0.4,
    }]
  },
  options: {
    responsive: true,
    plugins: { legend: { display: false } },
    scales: {
      y: {
        beginAtZero: true,
        grid: { color: 'rgba(0,0,0,0.04)' },
        ticks: { callback: v => '₦' + (v >= 1000 ? (v/1000).toFixed(0)+'K' : v) }
      },
      x: { grid: { display: false } }
    }
  }
});

// Status donut chart
const statusColors = {
  pending:'#f59e0b', paid:'#3b82f6', processing:'#8b5cf6',
  shipped:'#06b6d4', delivered:'#10b981', cancelled:'#ef4444'
};
const labels = Object.keys(statusCounts);
const values = Object.values(statusCounts);
new Chart(document.getElementById('statusChart'), {
  type: 'doughnut',
  data: {
    labels,
    datasets: [{ data: values, backgroundColor: labels.map(l => statusColors[l] || '#94a3b8'), borderWidth: 2 }]
  },
  options: {
    responsive: true,
    cutout: '65%',
    plugins: { legend: { display: false } }
  }
});

// Custom legend
const legend = document.getElementById('statusLegend');
labels.forEach((label, i) => {
  if (values[i] > 0) {
    legend.innerHTML += `<div style="display:flex;align-items:center;gap:4px;font-size:11px">
      <div style="width:10px;height:10px;border-radius:2px;background:${statusColors[label]||'#94a3b8'}"></div>
      <span style="text-transform:capitalize">${label} (${values[i]})</span>
    </div>`;
  }
});
</script>
{% endblock %}