{% extends "base.html" %}
{% block title %}Overview — Flask Showcase{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Overview</h1>
  <p class="page-subtitle">Key metrics and summary charts</p>
</div>

<!-- KPI cards -->
<div class="kpi-row">
  <div class="kpi-card">
    <span class="kpi-label">Revenue</span>
    <span class="kpi-value">{{ revenue }}</span>
    <span class="kpi-change positive">&#9650; 12%</span>
  </div>
  <div class="kpi-card">
    <span class="kpi-label">Users</span>
    <span class="kpi-value">{{ users }}</span>
    <span class="kpi-change positive">&#9650; 8%</span>
  </div>
  <div class="kpi-card">
    <span class="kpi-label">Sessions</span>
    <span class="kpi-value">{{ sessions }}</span>
    <span class="kpi-change positive">&#9650; 15%</span>
  </div>
  <div class="kpi-card">
    <span class="kpi-label">Avg Order</span>
    <span class="kpi-value">{{ avg_order }}</span>
    <span class="kpi-change negative">&#9660; 2%</span>
  </div>
</div>

<!-- Charts row -->
<div class="chart-row">
  <div class="card card-wide">
    <h3 class="card-title">Cumulative Revenue</h3>
    <div class="chart-box"><canvas id="revenueChart"></canvas></div>
  </div>
  <div class="card card-narrow">
    <h3 class="card-title">Sales by Category</h3>
    <div class="chart-box"><canvas id="categoryChart"></canvas></div>
  </div>
</div>

<!-- Second row -->
<div class="chart-row">
  <div class="card card-narrow">
    <h3 class="card-title">Sales by Region</h3>
    <div class="chart-box"><canvas id="regionChart"></canvas></div>
  </div>
  <div class="card card-wide">
    <h3 class="card-title">User Growth</h3>
    <div class="chart-box"><canvas id="usersChart"></canvas></div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
  const ACCENT = '#0072B5';
  const PALETTE = ['#0072B5','#00b894','#6c5ce7','#fdcb6e','#e17055','#00cec9','#d63031','#636e72'];

  // Revenue area chart
  fetch(PREFIX + '/api/time-series?metric=revenue')
    .then(r => r.json())
    .then(d => {
      new Chart(document.getElementById('revenueChart'), {
        type: 'line',
        data: {
          labels: d.labels,
          datasets: [{
            label: 'Revenue',
            data: d.values,
            borderColor: ACCENT,
            backgroundColor: ACCENT + '22',
            fill: true,
            tension: 0.3,
            pointRadius: 0,
            borderWidth: 2
          }]
        },
        options: chartOpts({y: {ticks: {callback: v => '$' + v.toLocaleString()}}})
      });
    });

  // Category bar chart
  const catLabels = {{ cat_labels | tojson }};
  const catValues = {{ cat_values | tojson }};
  new Chart(document.getElementById('categoryChart'), {
    type: 'doughnut',
    data: {
      labels: catLabels,
      datasets: [{data: catValues, backgroundColor: PALETTE.slice(0, catLabels.length), borderWidth: 0}]
    },
    options: {responsive: true, maintainAspectRatio: false, plugins: {legend: {position: 'bottom', labels: {padding: 14, font: {family: 'Inter'}}}}}
  });

  // Region doughnut
  const regLabels = {{ reg_labels | tojson }};
  const regValues = {{ reg_values | tojson }};
  new Chart(document.getElementById('regionChart'), {
    type: 'bar',
    data: {
      labels: regLabels,
      datasets: [{label: 'Sales', data: regValues, backgroundColor: PALETTE.slice(0, regLabels.length), borderRadius: 6, borderSkipped: false}]
    },
    options: chartOpts({y: {ticks: {callback: v => '$' + v.toLocaleString()}}}, false)
  });

  // Users line chart
  fetch(PREFIX + '/api/time-series?metric=users')
    .then(r => r.json())
    .then(d => {
      new Chart(document.getElementById('usersChart'), {
        type: 'line',
        data: {
          labels: d.labels,
          datasets: [{
            label: 'Users',
            data: d.values,
            borderColor: '#6c5ce7',
            backgroundColor: '#6c5ce722',
            fill: true,
            tension: 0.3,
            pointRadius: 0,
            borderWidth: 2
          }]
        },
        options: chartOpts()
      });
    });
})();
</script>
{% endblock %}