{% extends 'dashboard_base.html' %}
{% set title = 'Executive' %}
{% set heading = 'Executive Dashboard' %}

{% block dashboard_body %}

<style>
  /* lock all chart blocks to a consistent, compact height */
  .chart-wrap { position: relative; height: 240px; }
  @media (min-width: 1400px) { .chart-wrap { height: 220px; } } /* optional tighter on xl */
</style>

<div class="row g-3">
  <!-- Headcount -->
  <div class="col-12 col-md-3">
    <div class="card kpi-card shadow-sm p-3">
      <div class="kpi-label">Headcount</div>
      <div id="kpi-headcount" class="kpi-value">–</div>
    </div>
  </div>

  <!-- Total Net Pay -->
  <div class="col-12 col-md-3">
    <div class="card kpi-card shadow-sm p-3">
      <div class="kpi-label">Total Net Pay ({{ month or '—' }})</div>
      <div id="kpi-total-net" class="kpi-value">–</div>
    </div>
  </div>

  <!-- Separations -->
  <div class="col-12 col-md-3">
    <div class="card kpi-card shadow-sm p-3">
      <div class="kpi-label">Separations ({{ month or '—' }})</div>
      <div id="kpi-sep" class="kpi-value">–</div>
    </div>
  </div>
</div>

<!-- Gender Ratio Charts -->
<div class="row g-3 mt-1">
  <div class="col-12 col-lg-6">
    <div class="card shadow-sm p-3">
      <div class="d-flex justify-content-between align-items-center">
        <h6 class="mb-0">Gender Ratio (Overall)</h6>
      </div>
      <div class="chart-wrap"><canvas id="chart-gender-overall"></canvas></div>
    </div>
  </div>
  <div class="col-12 col-lg-6">
    <div class="card shadow-sm p-3">
      <div class="d-flex justify-content-between align-items-center">
        <h6 class="mb-0">Gender Ratio by Department</h6>
      </div>
      <div class="chart-wrap"><canvas id="chart-gender-by-dept"></canvas></div>
    </div>
  </div>
</div>

<!-- Payroll Trend + Dept Headcount -->
<div class="row g-3 mt-1">
  <div class="col-12 col-lg-6">
    <div class="card shadow-sm p-3">
      <div class="d-flex justify-content-between align-items-center">
        <h6 class="mb-0">Payroll Trend (last 6 months)</h6>
      </div>
      <div class="chart-wrap"><canvas id="chart-payroll-trend"></canvas></div>
    </div>
  </div>
  <div class="col-12 col-lg-6">
    <div class="card shadow-sm p-3">
      <div class="d-flex justify-content-between align-items-center">
        <h6 class="mb-0">Headcount by Department</h6>
      </div>
      <div class="chart-wrap"><canvas id="chart-dept-hc"></canvas></div>
    </div>
  </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>

<script>
window.addEventListener('load', async function () {
  // Overlay "No data" if dataset is empty
  function ensureDataOrNote(canvas, labels, values) {
    const hasLabels = Array.isArray(labels) && labels.length > 0;
    const hasValues = !values || (Array.isArray(values) && values.some(v => Number(v) > 0));
    if (hasLabels && hasValues) return true;

    const ctx = canvas.getContext('2d');
    const rect = canvas.getBoundingClientRect();
    const w = rect.width, h = rect.height;
    ctx.clearRect(0, 0, w, h);
    ctx.font = '14px system-ui, -apple-system, Segoe UI, Roboto, sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('No data', w / 2, h / 2);
    return false;
  }

  async function jget(url) {
    const r = await fetch(url);
    if (!r.ok) { console.error('Fetch failed', url, r.status); return {}; }
    return r.json();
  }

  // ----- KPIs -----
  const k = await jget('/dashboard/api/executive/kpis' + window.location.search);
  const totalNet = Number(k.total_net || 0);
  document.getElementById('kpi-headcount').textContent = String(k.headcount ?? '0');
  document.getElementById('kpi-total-net').textContent = totalNet.toLocaleString('en-IN', { style:'currency', currency:'INR' });
  document.getElementById('kpi-sep').textContent = String(k.separations ?? '0');

  // ----- Payroll trend -----
  const trend = await jget('/dashboard/api/executive/payroll_trend' + window.location.search);
  const trendEl = document.getElementById('chart-payroll-trend');
  const trendVals = (trend.values || []).map(Number);
  if (ensureDataOrNote(trendEl, trend.labels, trendVals)) {
    new Chart(trendEl, {
      type: 'line',
      data: { labels: trend.labels || [], datasets: [{ label: 'Net Pay', data: trendVals, tension: 0.25, fill: false }] },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true } }
      }
    });
  }

  // ----- Dept headcount -----
  const dept = Array.isArray(k.dept_counts) ? k.dept_counts : [];
  const deptLabels = dept.map(d => d.label);
  const deptValues = dept.map(d => Number(d.value || 0));
  const deptEl = document.getElementById('chart-dept-hc');
  if (ensureDataOrNote(deptEl, deptLabels, deptValues)) {
    new Chart(deptEl, {
      type: 'bar',
      data: { labels: deptLabels, datasets: [{ label: 'Headcount', data: deptValues }] },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { ticks: { autoSkip: false } }, y: { beginAtZero: true, precision: 0 } },
        datasets: { bar: { maxBarThickness: 26 } }
      }
    });
  }

  // ----- Gender ratio (overall) -----
  const gOverall = await jget('/dashboard/api/executive/gender_ratio_overall');
  const gEl = document.getElementById('chart-gender-overall');
  const gLabels = ['Male','Female','Other'];
  const gValues = [Number(gOverall.male||0), Number(gOverall.female||0), Number(gOverall.other||0)];
  if (ensureDataOrNote(gEl, gLabels, gValues)) {
    new Chart(gEl, {
      type: 'doughnut',
      data: { labels: gLabels, datasets: [{ data: gValues }] },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '65%',
        plugins: { legend: { position: 'bottom' } }
      }
    });
  }

  // ----- Gender ratio by department (stacked bar) -----
  const gDept = await jget('/dashboard/api/executive/gender_ratio_by_dept');
  const gbEl = document.getElementById('chart-gender-by-dept');
  const male = (gDept.male || []).map(Number);
  const female = (gDept.female || []).map(Number);
  const other = (gDept.other || []).map(Number);
  if (ensureDataOrNote(gbEl, gDept.labels, male)) {
    new Chart(gbEl, {
      type: 'bar',
      data: {
        labels: gDept.labels || [],
        datasets: [
          { label: 'Male',   data: male },
          { label: 'Female', data: female },
          { label: 'Other',  data: other }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: { x: { stacked: true }, y: { stacked: true, beginAtZero: true, precision: 0 } },
        plugins: { legend: { position: 'bottom' } },
        datasets: { bar: { maxBarThickness: 26 } }
      }
    });
  }
});
</script>
{% endblock %}