{% extends 'base.html' %}
{% block title %}Analytics — Shiba Meals{% endblock %}
{% block page_title %}Analytics{% endblock %}
{% block content %}
<div class="page-title">Sales Analytics</div>
<div class="page-sub">Product trends · Revenue · Margin · Wastage · Period comparison</div>

<div style="display:flex;gap:.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap">
  <label class="form-label" style="margin:0">Period:</label>
  <select id="period-select" style="width:auto" onchange="loadAnalytics()">
    <option value="7">Last 7 days</option>
    <option value="14" selected>Last 14 days</option>
    <option value="30">Last 30 days</option>
    <option value="60">Last 60 days</option>
  </select>
  <span id="analytics-status" style="font-size:.78rem;color:var(--text3)"></span>
</div>

<!-- KPI Row -->
<div class="grid-4" id="kpi-row" style="margin-bottom:.875rem">
  <div class="metric blue"><div class="metric-label">Total Revenue</div><div class="metric-value" id="kpi-revenue">—</div><div class="metric-sub">KES · period</div></div>
  <div class="metric green"><div class="metric-label">Top Product</div><div class="metric-value" id="kpi-top-product" style="font-size:1rem;word-break:break-word">—</div><div class="metric-sub" id="kpi-top-rev">—</div></div>
  <div class="metric amber"><div class="metric-label">Units Sold (est.)</div><div class="metric-value" id="kpi-units">—</div><div class="metric-sub">period total</div></div>
  <div class="metric"><div class="metric-label">Avg Daily Revenue</div><div class="metric-value" id="kpi-avg-daily">—</div><div class="metric-sub">KES/day</div></div>
</div>

<!-- Revenue Trend Chart -->
<div class="card">
  <div class="card-title">Daily Revenue Trend</div>
  <div style="position:relative;height:220px;width:100%">
    <canvas id="revenue-chart"></canvas>
  </div>
</div>

<!-- Top Products + Wastage side by side -->
<div class="grid-2">
<div class="card">
  <div class="card-title">Top Products by Revenue</div>
  <div style="position:relative;height:300px;width:100%">
    <canvas id="product-chart"></canvas>
  </div>
</div>
<div class="card">
  <div class="card-title">Wastage by Product (period)
    <span style="float:right;font-size:.72rem;color:var(--text3);font-weight:400">Red = over threshold</span>
  </div>
  <div id="wastage-panel"><div style="color:var(--text3);padding:.5rem">Loading…</div></div>
</div>
</div>

<!-- Category Breakdown -->
<div class="grid-2">
<div class="card">
  <div class="card-title">Revenue by Category</div>
  <div style="position:relative;height:240px">
    <canvas id="category-chart"></canvas>
  </div>
</div>
<div class="card">
  <div class="card-title">Units Sold by Category</div>
  <div style="position:relative;height:240px">
    <canvas id="units-chart"></canvas>
  </div>
</div>
</div>

<!-- Product Table with Margin -->
<div class="card">
  <div class="card-title">All Products — Period Performance</div>
  <div class="table-wrap">
  <table id="product-table">
    <tr><th>#</th><th>Product</th><th>Category</th><th>Units Sold</th><th>Revenue (KES)</th><th>Margin %</th><th>Revenue Share</th></tr>
  </table>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
{% endblock %}
{% block scripts %}
<script>
var revenueChart, productChart, categoryChart, unitsChart;
var COLORS = ['#e85d26','#1a6e42','#1a4a8c','#9a5200','#5c2d96','#b83224','#1a1a2e','#2a9d8f','#e9c46a','#264653'];

function destroyCharts(){
  [revenueChart, productChart, categoryChart, unitsChart].forEach(function(c){ if(c) c.destroy(); });
}

async function loadAnalytics(){
  var days=document.getElementById('period-select').value;
  var status=document.getElementById('analytics-status');
  status.textContent='Loading…';
  try{
    var data=await api('/api/analytics?days='+days);
    renderAnalytics(data, parseInt(days));

    // Load wastage separately
    var wdays=parseInt(days);
    var wdata=await api('/api/wastage/summary?days='+wdays);
    renderWastage(wdata);

    status.textContent='Updated: '+new Date().toLocaleTimeString('en-KE',{hour:'2-digit',minute:'2-digit'});
  }catch(e){status.textContent='Failed to load';console.error(e);}
}

function renderWastage(data){
  var panel=document.getElementById('wastage-panel');
  if(!panel) return;
  if(!data||!data.length){panel.innerHTML='<div class="alert alert-success">✓ No wastage recorded in this period.</div>';return;}
  var html='<div class="table-wrap"><table><tr><th>Product</th><th>Wasted</th><th>% of Dispatched</th><th>Revenue Lost</th></tr>';
  data.forEach(function(w){
    var alertClass=w.alert?'badge-red':'badge-amber';
    html+=`<tr ${w.alert?'style="background:var(--red-bg)"':''}><td style="font-weight:600">${w.product}</td><td>${w.wastage}</td><td><span class="badge ${alertClass}">${w.pct}%${w.alert?' ⚠':''}</span></td><td style="color:var(--red)">KES ${w.revenue_lost.toLocaleString()}</td></tr>`;
  });
  html+='</table></div>';
  var total=data.reduce(function(a,w){return a+w.revenue_lost;},0);
  html+=`<div style="text-align:right;font-size:.82rem;color:var(--red);font-weight:600;margin-top:.5rem">Total revenue lost to wastage: KES ${total.toLocaleString()}</div>`;
  panel.innerHTML=html;
}

function renderAnalytics(data, days){
  destroyCharts();
  var daily=data.daily_revenue||[];
  var products=data.product_sales||[];

  // KPIs
  var totalRev=daily.reduce(function(a,d){return a+d.revenue;},0);
  var totalUnits=products.reduce(function(a,p){return a+p.sold;},0);
  var avgDaily=days>0?Math.round(totalRev/days):0;
  document.getElementById('kpi-revenue').textContent='KES '+Math.round(totalRev).toLocaleString();
  document.getElementById('kpi-units').textContent=totalUnits.toLocaleString();
  document.getElementById('kpi-avg-daily').textContent='KES '+avgDaily.toLocaleString();
  if(products.length){
    document.getElementById('kpi-top-product').textContent=products[0].name;
    document.getElementById('kpi-top-rev').textContent='KES '+products[0].revenue.toLocaleString();
  }

  // Revenue trend
  var labels=daily.map(function(d){return d.date.slice(5);});
  revenueChart=new Chart(document.getElementById('revenue-chart'),{
    type:'line',
    data:{labels:labels,datasets:[{label:'Revenue (KES)',data:daily.map(function(d){return d.revenue;}),borderColor:'#e85d26',backgroundColor:'rgba(232,93,38,0.08)',pointBackgroundColor:'#e85d26',pointRadius:4,tension:0.35,fill:true}]},
    options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false},tooltip:{callbacks:{label:function(ctx){return 'KES '+ctx.parsed.y.toLocaleString();}}}},scales:{y:{beginAtZero:true,ticks:{callback:function(v){return 'KES '+v.toLocaleString();}}},x:{ticks:{maxTicksLimit:10}}}}
  });

  // Top products horizontal bar
  var topN=Math.min(products.length,15);
  productChart=new Chart(document.getElementById('product-chart'),{
    type:'bar',
    data:{labels:products.slice(0,topN).map(function(p){return p.name;}),datasets:[{label:'Revenue (KES)',data:products.slice(0,topN).map(function(p){return p.revenue;}),backgroundColor:products.slice(0,topN).map(function(_,i){return COLORS[i%COLORS.length]+'cc';}),borderColor:products.slice(0,topN).map(function(_,i){return COLORS[i%COLORS.length];}),borderWidth:1}]},
    options:{indexAxis:'y',responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false},tooltip:{callbacks:{label:function(ctx){return 'KES '+ctx.parsed.x.toLocaleString();}}}},scales:{x:{beginAtZero:true,ticks:{callback:function(v){return 'KES '+v.toLocaleString();}}}}}
  });

  // Category aggregation
  var catRevMap={},catUnitsMap={};
  products.forEach(function(p){catRevMap[p.category]=(catRevMap[p.category]||0)+p.revenue;catUnitsMap[p.category]=(catUnitsMap[p.category]||0)+p.sold;});
  var cats=Object.keys(catRevMap);
  categoryChart=new Chart(document.getElementById('category-chart'),{
    type:'doughnut',
    data:{labels:cats,datasets:[{data:cats.map(function(c){return catRevMap[c];}),backgroundColor:cats.map(function(_,i){return COLORS[i%COLORS.length]+'cc';}),borderWidth:2,borderColor:'#fff'}]},
    options:{responsive:true,maintainAspectRatio:false,plugins:{tooltip:{callbacks:{label:function(ctx){return ctx.label+': KES '+ctx.raw.toLocaleString();}}}}}
  });
  unitsChart=new Chart(document.getElementById('units-chart'),{
    type:'doughnut',
    data:{labels:cats,datasets:[{data:cats.map(function(c){return catUnitsMap[c];}),backgroundColor:cats.map(function(_,i){return COLORS[i%COLORS.length]+'99';}),borderWidth:2,borderColor:'#fff'}]},
    options:{responsive:true,maintainAspectRatio:false,plugins:{tooltip:{callbacks:{label:function(ctx){return ctx.label+': '+ctx.raw.toLocaleString()+' units';}}}}}
  });

  // Product table with margin
  var rows='<tr><th>#</th><th>Product</th><th>Category</th><th>Units Sold</th><th>Revenue (KES)</th><th>Margin %</th><th>Revenue Share</th></tr>';
  products.forEach(function(p,i){
    var share=totalRev>0?Math.round(p.revenue/totalRev*100):0;
    var mp=p.margin_pct||0;
    rows+=`<tr>
      <td style="color:var(--text3)">${i+1}</td>
      <td style="font-weight:600">${p.name}</td>
      <td><span class="badge badge-gray">${p.category}</span></td>
      <td>${p.sold.toLocaleString()}</td>
      <td>KES ${p.revenue.toLocaleString()}</td>
      <td><span class="badge ${mp>=70?'badge-green':mp>=40?'badge-amber':'badge-red'}">${mp}%</span></td>
      <td>
        <div style="display:flex;align-items:center;gap:6px">
          <div style="height:6px;width:${Math.max(4,share)}px;max-width:80px;background:var(--accent);border-radius:3px"></div>
          <span>${share}%</span>
        </div>
      </td>
    </tr>`;
  });
  if(!products.length) rows+='<tr><td colspan="7" style="color:var(--text3);font-style:italic">No sales data for this period.</td></tr>';
  document.getElementById('product-table').innerHTML=rows;
}

window.addEventListener('load',function(){loadAnalytics();});
</script>
{% endblock %}