{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<div id="dashboard-page" class="p-6">
  <div class="flex items-center justify-between mb-5">
    <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">Dashboard</h2>
  </div>

  {# ── Date range filter for revenue/order charts ── #}
  <form id="dashboard-date-form" method="get" class="flex items-center gap-3 mb-4">
    <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Period:</label>
    <input type="date" name="date_from" id="dash-date-from" value="{{ dash_filters.date_from or '' }}"
           class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
    <span class="text-xs text-gray-400 dark:text-gray-500">to</span>
    <input type="date" name="date_to" id="dash-date-to" value="{{ dash_filters.date_to or '' }}"
           class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
    <button type="submit" id="date-apply-btn"
            class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
      Apply
    </button>
    {% if dash_filters.date_from or dash_filters.date_to %}
    <a href="{{ url_for('dashboard') }}" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 underline">Clear</a>
    {% endif %}
    <a href="/api/dashboard/export-csv?date_from={{ dash_filters.date_from or '' }}&date_to={{ dash_filters.date_to or '' }}"
       class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors ml-auto">
      <span class="material-symbols-outlined text-base">download</span>
      Export CSV
    </a>
  </form>
  <script>document.addEventListener('DOMContentLoaded', function() { initDatePresets('dashboard-date-form', 'dash-date-from', 'dash-date-to'); });</script>

  {# ── Ticket summary cards ── #}
  <div id="ticket-stats" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4" data-testid="stat-total">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Total Tickets</p>
      <p class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">{{ stats.total }}</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4" data-testid="stat-unread">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Unread</p>
      <p class="text-2xl font-bold text-brand-600 dark:text-brand-400 mt-1">{{ stats.unread }}</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4" data-testid="stat-open">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Open</p>
      <p class="text-2xl font-bold text-yellow-600 dark:text-yellow-400 mt-1">{{ stats.open }}</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4" data-testid="stat-avg-response">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Avg Response (3mo)</p>
      <p class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">
        {% if stats.avg_response_hours is not none %}{{ stats.avg_response_hours }}h{% else %}&mdash;{% endif %}
      </p>
    </div>
  </div>

  {# ── Revenue + Period cards ── #}
  {% if revenue_stats and revenue_stats.total_orders > 0 %}
  <div id="revenue-stats" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-gradient-to-br from-emerald-500 to-emerald-700 rounded-xl p-4 text-white" data-testid="stat-period-revenue">
      <p class="text-xs font-medium text-emerald-100 uppercase tracking-wider">Net Revenue</p>
      <p class="text-2xl font-bold mt-1">&euro;{{ revenue_stats.total_revenue }}</p>
      <p class="text-xs text-emerald-200 mt-1">Avg &euro;{{ revenue_stats.avg_order_value }}/order</p>
    </div>
    <div class="bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl p-4 text-white" data-testid="stat-period-orders">
      <p class="text-xs font-medium text-blue-100 uppercase tracking-wider">Period Orders</p>
      <p class="text-2xl font-bold mt-1">{{ revenue_stats.total_orders }}</p>
    </div>
    <div class="bg-gradient-to-br from-violet-500 to-violet-700 rounded-xl p-4 text-white" data-testid="stat-new-tickets">
      <p class="text-xs font-medium text-violet-100 uppercase tracking-wider">New Tickets</p>
      <p class="text-2xl font-bold mt-1">{{ period_ticket_stats.new_tickets }}</p>
    </div>
    <div class="bg-gradient-to-br from-amber-500 to-amber-700 rounded-xl p-4 text-white" data-testid="stat-inbound-msgs">
      <p class="text-xs font-medium text-amber-100 uppercase tracking-wider">Inbound Messages</p>
      <p class="text-2xl font-bold mt-1">{{ period_ticket_stats.inbound_messages }}</p>
    </div>
  </div>
  <p class="text-xs text-gray-400 dark:text-gray-500 mb-4 -mt-2">Values may slightly differ from the Addons website.</p>
  {% endif %}

  {# ── Charts section ── #}
  {% if revenue_stats and revenue_stats.total_orders > 0 %}
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    {# Orders & Revenue trend #}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
      <div class="flex items-center justify-between mb-3">
        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Orders & Revenue Trend</h3>
        <div class="flex items-center gap-3 text-xs">
          <label class="flex items-center gap-1 cursor-pointer">
            <span class="w-2.5 h-2.5 rounded-full" style="background:#6366f1"></span>
            <input type="checkbox" class="sr-only" data-chart-toggle="0" checked> <span class="text-gray-600 dark:text-gray-400">Orders</span>
          </label>
          <label class="flex items-center gap-1 cursor-pointer">
            <span class="w-2.5 h-2.5 rounded-full" style="background:#10b981"></span>
            <input type="checkbox" class="sr-only" data-chart-toggle="1" checked> <span class="text-gray-600 dark:text-gray-400">Products</span>
          </label>
          <label class="flex items-center gap-1 cursor-pointer">
            <span class="w-2.5 h-2.5 rounded-full" style="background:#f59e0b"></span>
            <input type="checkbox" class="sr-only" data-chart-toggle="2" checked> <span class="text-gray-600 dark:text-gray-400">Business Care</span>
          </label>
          <label class="flex items-center gap-1 cursor-pointer">
            <span class="w-2.5 h-2.5 rounded-full" style="background:#6b7280"></span>
            <input type="checkbox" class="sr-only" data-chart-toggle="3"> <span class="text-gray-600 dark:text-gray-400">Total</span>
          </label>
        </div>
      </div>
      <canvas id="ordersRevenueChart" height="200"></canvas>
    </div>

    {# Top Products by Revenue #}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Top Products by Revenue</h3>
      <canvas id="productChart" height="200"></canvas>
    </div>

    {# Top Countries by Orders #}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Top Countries by Orders</h3>
      <canvas id="geoChart" height="200"></canvas>
    </div>

    {# Customer Value Segments #}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Customer Value Segments</h3>
      <canvas id="segmentChart" height="200"></canvas>
    </div>
  </div>
  {% endif %}

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    {# ── Status breakdown ── #}
    <div id="status-breakdown" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">By Status</h3>
      <div class="space-y-2">
        {% set max_status = [stats.open, stats.in_progress, stats.waiting_customer, stats.closed]|max or 1 %}
        <div class="flex items-center gap-3">
          <span class="w-24 text-xs text-gray-600 dark:text-gray-400">Open</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-yellow-400 h-5 rounded-full" style="width: {{ (stats.open / max_status * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.open }}</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-24 text-xs text-gray-600 dark:text-gray-400">In Progress</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-blue-400 h-5 rounded-full" style="width: {{ (stats.in_progress / max_status * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.in_progress }}</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-24 text-xs text-gray-600 dark:text-gray-400">Waiting</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-orange-400 h-5 rounded-full" style="width: {{ (stats.waiting_customer / max_status * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.waiting_customer }}</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-24 text-xs text-gray-600 dark:text-gray-400">Closed</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-green-400 h-5 rounded-full" style="width: {{ (stats.closed / max_status * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.closed }}</span>
        </div>
      </div>
    </div>

    {# ── Priority breakdown ── #}
    <div id="priority-breakdown" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">By Priority</h3>
      <div class="space-y-2">
        {% set max_prio = [stats.p1, stats.p2, stats.p3, stats.p4]|max or 1 %}
        <div class="flex items-center gap-3">
          <span class="w-24 text-xs text-gray-600 dark:text-gray-400">P1 - Critical</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-red-500 h-5 rounded-full" style="width: {{ (stats.p1 / max_prio * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.p1 }}</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-24 text-xs text-gray-600 dark:text-gray-400">P2 - High</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-orange-500 h-5 rounded-full" style="width: {{ (stats.p2 / max_prio * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.p2 }}</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-24 text-xs text-gray-600 dark:text-gray-400">P3 - Normal</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-yellow-500 h-5 rounded-full" style="width: {{ (stats.p3 / max_prio * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.p3 }}</span>
        </div>
        <div class="flex items-center gap-3">
          <span class="w-24 text-xs text-gray-600 dark:text-gray-400">P4 - Low</span>
          <div class="flex-1 bg-gray-100 dark:bg-gray-700 rounded-full h-5 overflow-hidden">
            <div class="bg-gray-400 h-5 rounded-full" style="width: {{ (stats.p4 / max_prio * 100)|round }}%"></div>
          </div>
          <span class="w-8 text-xs text-gray-700 dark:text-gray-300 text-right font-medium">{{ stats.p4 }}</span>
        </div>
      </div>
    </div>
  </div>

  {# ── Support expiration alerts ── #}
  {% if expiring %}
  <div id="expiring-section" class="mt-6 bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-700 rounded-xl p-5">
    <h3 class="text-sm font-semibold text-red-700 dark:text-red-400 mb-3 flex items-center gap-1.5">
      <span class="material-symbols-outlined text-lg">warning</span>
      Expired Support ({{ expiring|length }} open ticket{{ 's' if expiring|length != 1 }})
    </h3>
    <div class="space-y-1">
      {% for t in expiring %}
      <a href="{{ url_for('ticket_get', ticket_id=t.id) }}" class="flex items-center justify-between text-sm text-red-800 dark:text-red-400 hover:text-red-600 dark:hover:text-red-200 py-1">
        <span class="truncate">#{{ t.id }} &mdash; {{ t.subject }}</span>
        <span class="text-xs text-red-500 dark:text-red-400 whitespace-nowrap ml-3">
          {% if t.expire_date %}expired {{ t.expire_date }}{% else %}expired{% endif %}
        </span>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {# ── Recent activity ── #}
  <div id="recent-activity" class="mt-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="px-5 py-3 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Recent Activity</h3>
    </div>
    <table id="recent-activity-table" class="w-full text-sm">
      <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
        {% for t in recent %}
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
          <td class="px-5 py-2.5">
            <a href="{{ url_for('ticket_get', ticket_id=t.id) }}" class="text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 font-medium">#{{ t.id }}</a>
          </td>
          <td class="px-5 py-2.5 text-gray-900 dark:text-gray-100 truncate max-w-xs">{{ t.subject }}</td>
          <td class="px-5 py-2.5 whitespace-nowrap">
            {% if t.status == 'open' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-400">Open</span>
            {% elif t.status == 'in_progress' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-500/10 text-blue-800 dark:text-blue-400">In Progress</span>
            {% elif t.status == 'waiting_customer' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 dark:bg-orange-500/10 text-orange-800 dark:text-orange-400">Waiting</span>
            {% elif t.status == 'closed' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-400">Closed</span>
            {% endif %}
          </td>
          <td class="px-5 py-2.5 whitespace-nowrap">
            {% if t.priority == 'p1' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-500/10 text-red-800 dark:text-red-400">P1</span>
            {% elif t.priority == 'p2' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 dark:bg-orange-500/10 text-orange-800 dark:text-orange-400">P2</span>
            {% elif t.priority == 'p3' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-400">P3</span>
            {% else %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">P4</span>
            {% endif %}
          </td>
          <td class="px-5 py-2.5 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
            {{ t.last_activity_at.strftime('%Y-%m-%d %H:%M') if t.last_activity_at else '-' }}
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="5" class="px-5 py-8 text-center text-sm text-gray-400 dark:text-gray-500">No tickets yet.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

{# ── Chart.js initialization ── #}
{% if revenue_stats and revenue_stats.total_orders > 0 %}
<script>
// Chart.js dark mode color helper
function getChartColors() {
  var isDark = document.documentElement.classList.contains('dark');
  return {
    text: isDark ? '#d1d5db' : '#374151',
    grid: isDark ? 'rgba(75,85,99,0.3)' : 'rgba(0,0,0,0.1)',
    tick: isDark ? '#9ca3af' : '#6b7280',
  };
}

var _allCharts = [];

function updateChartColors() {
  var c = getChartColors();
  _allCharts.forEach(function(chart) {
    if (!chart || !chart.options) return;
    // Update scale colors
    Object.keys(chart.options.scales || {}).forEach(function(key) {
      var scale = chart.options.scales[key];
      if (scale.ticks) scale.ticks.color = c.tick;
      if (scale.grid) scale.grid.color = c.grid;
      if (scale.title) scale.title.color = c.text;
    });
    // Update legend color
    if (chart.options.plugins && chart.options.plugins.legend && chart.options.plugins.legend.labels) {
      chart.options.plugins.legend.labels.color = c.text;
    }
    chart.update('none');
  });
}

document.addEventListener('DOMContentLoaded', function() {
  var cc = getChartColors();

  // Orders & Revenue trend (dual Y-axis, 4 datasets)
  const otLabels = {{ orders_time.labels | tojson }};
  const otOrders = {{ orders_time.order_counts | tojson }};
  const otRevProducts = {{ orders_time.revenue_products | tojson }};
  const otRevBC = {{ orders_time.revenue_bc | tojson }};
  const otRevTotal = {{ orders_time.revenue_total | tojson }};

  if (document.getElementById('ordersRevenueChart')) {
    // Load saved toggle state
    const toggleKeys = ['orders', 'products', 'bc', 'total'];
    let savedToggles = { orders: true, products: true, bc: true, total: false };
    try {
      const stored = localStorage.getItem('dashboard_chart_toggles');
      if (stored) savedToggles = JSON.parse(stored);
    } catch(e) {}

    const orChart = new Chart(document.getElementById('ordersRevenueChart'), {
      type: 'line',
      data: {
        labels: otLabels,
        datasets: [
          {
            label: 'Orders',
            data: otOrders,
            borderColor: '#6366f1',
            backgroundColor: 'rgba(99,102,241,0.1)',
            fill: true,
            tension: 0.3,
            yAxisID: 'y',
            hidden: !savedToggles.orders,
          },
          {
            label: 'Products',
            data: otRevProducts,
            borderColor: '#10b981',
            backgroundColor: 'rgba(16,185,129,0.1)',
            fill: true,
            tension: 0.3,
            yAxisID: 'y1',
            hidden: !savedToggles.products,
          },
          {
            label: 'Business Care',
            data: otRevBC,
            borderColor: '#f59e0b',
            backgroundColor: 'rgba(245,158,11,0.1)',
            fill: true,
            tension: 0.3,
            yAxisID: 'y1',
            hidden: !savedToggles.bc,
          },
          {
            label: 'Total Revenue',
            data: otRevTotal,
            borderColor: '#6b7280',
            backgroundColor: 'transparent',
            borderDash: [5, 5],
            fill: false,
            tension: 0.3,
            yAxisID: 'y1',
            hidden: !savedToggles.total,
          }
        ]
      },
      options: {
        responsive: true,
        interaction: { mode: 'index', intersect: false },
        scales: {
          y: { type: 'linear', position: 'left', title: { display: true, text: 'Orders', color: cc.text }, beginAtZero: true, ticks: { color: cc.tick }, grid: { color: cc.grid } },
          y1: { type: 'linear', position: 'right', title: { display: true, text: 'Revenue (€)', color: cc.text }, beginAtZero: true, grid: { drawOnChartArea: false }, ticks: { color: cc.tick } },
          x: { ticks: { color: cc.tick }, grid: { color: cc.grid } },
        },
        plugins: { legend: { display: false } }
      }
    });
    _allCharts.push(orChart);

    // Apply saved state to checkboxes
    document.querySelectorAll('[data-chart-toggle]').forEach(cb => {
      const idx = parseInt(cb.dataset.chartToggle);
      const key = toggleKeys[idx];
      cb.checked = savedToggles[key] !== false;
      // Style: dim label when unchecked
      if (!cb.checked) cb.closest('label').classList.add('opacity-40');
    });

    // Toggle handler
    document.querySelectorAll('[data-chart-toggle]').forEach(cb => {
      cb.addEventListener('change', function() {
        const idx = parseInt(this.dataset.chartToggle);
        const key = toggleKeys[idx];
        orChart.data.datasets[idx].hidden = !this.checked;
        orChart.update();
        this.closest('label').classList.toggle('opacity-40', !this.checked);
        savedToggles[key] = this.checked;
        try { localStorage.setItem('dashboard_chart_toggles', JSON.stringify(savedToggles)); } catch(e) {}
      });
    });
  }

  // Top Products by Revenue (horizontal bar)
  const prodData = {{ product_perf | tojson }};
  if (document.getElementById('productChart') && prodData.length) {
    var pChart = new Chart(document.getElementById('productChart'), {
      type: 'bar',
      data: {
        labels: prodData.map(p => p.name.length > 25 ? p.name.slice(0,22) + '...' : p.name),
        datasets: [{
          label: 'Revenue',
          data: prodData.map(p => parseFloat(p.revenue)),
          backgroundColor: ['#6366f1','#8b5cf6','#a78bfa','#c4b5fd','#ddd6fe','#ede9fe','#f5f3ff','#818cf8','#4f46e5','#4338ca'],
        }]
      },
      options: {
        indexAxis: 'y',
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
          x: { beginAtZero: true, title: { display: true, text: 'Revenue', color: cc.text }, ticks: { color: cc.tick }, grid: { color: cc.grid } },
          y: { ticks: { color: cc.tick }, grid: { color: cc.grid } },
        }
      }
    });
    _allCharts.push(pChart);
  }

  // Top Countries by Orders (bar)
  const geoData = {{ geography | tojson }};
  if (document.getElementById('geoChart') && geoData.length) {
    var gChart = new Chart(document.getElementById('geoChart'), {
      type: 'bar',
      data: {
        labels: geoData.map(g => g.country),
        datasets: [{
          label: 'Orders',
          data: geoData.map(g => g.orders),
          backgroundColor: '#3b82f6',
        }]
      },
      options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: {
          y: { beginAtZero: true, title: { display: true, text: 'Orders', color: cc.text }, ticks: { color: cc.tick }, grid: { color: cc.grid } },
          x: { ticks: { color: cc.tick }, grid: { color: cc.grid } },
        }
      }
    });
    _allCharts.push(gChart);
  }

  // Customer Value Segments (doughnut)
  const segData = {{ value_segments | tojson }};
  if (document.getElementById('segmentChart') && (segData.high + segData.medium + segData.low) > 0) {
    var sChart = new Chart(document.getElementById('segmentChart'), {
      type: 'doughnut',
      data: {
        labels: ['High (>500)', 'Medium (100-500)', 'Low (<100)'],
        datasets: [{
          data: [segData.high, segData.medium, segData.low],
          backgroundColor: ['#10b981', '#f59e0b', '#94a3b8'],
        }]
      },
      options: {
        responsive: true,
        plugins: { legend: { position: 'bottom', labels: { color: cc.text } } }
      }
    });
    _allCharts.push(sChart);
  }
});

</script>
{% endif %}
{% endblock %}