{% extends "client/layout.html" %}

{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block topbar_badge %}
  {% if client_name %}
  <div class="topbar-badge">
    <span class="badge-dot"></span>
    {{ client_name }}
  </div>
  {% endif %}
{% endblock %}

{% block nav_dashboard_active %}active{% endblock %}

{% block sidebar_categories %}
{% if category_list %}
  {% for cat in category_list %}
  <a class="nav-sub-item"
     href="/client/reports?cat={{ cat | urlencode }}"
     data-cat="{{ cat }}">
    <span class="sub-dot"></span>
    <span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;">{{ cat }}</span>
    <span class="sub-count">{{ categories[cat]|length }}</span>
  </a>
  {% endfor %}
{% endif %}
{% endblock %}

{% block extra_css %}
<style>
/* ══════════════════════════════════════════════
   DASHBOARD LAYOUT
══════════════════════════════════════════════ */
.db-root{
  padding:28px 28px 40px;
  overflow-y:auto;
  height:calc(100vh - var(--topbar-h));
  scrollbar-width:thin;
  scrollbar-color: rgba(12,122,110,0.2) transparent;
}
.db-root::-webkit-scrollbar{ width:5px; }
.db-root::-webkit-scrollbar-thumb{ background:rgba(12,122,110,0.2); border-radius:10px; }

/* ── Header ── */
.db-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;
}
.db-header-left h2{
  font-family:var(--font-display);
  font-size:22px;font-weight:700;color:var(--text);letter-spacing:-0.3px;
}
.db-header-left p{
  font-size:12px;color:var(--text3);margin-top:3px;
}
.db-refresh-btn{
  display:flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:var(--r);
  border:1px solid rgba(12,122,110,0.2);
  background:rgba(12,122,110,0.06);color:var(--primary);
  font-size:12px;font-weight:600;cursor:pointer;
  transition:all 0.2s;font-family:var(--font-sans);
}
.db-refresh-btn:hover{ background:rgba(12,122,110,0.12); box-shadow:0 0 0 3px rgba(12,122,110,0.08); }
.db-refresh-btn svg{ width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2; }
.db-refresh-btn:disabled{ opacity:0.5; cursor:not-allowed; }

/* ── Cache badge ── */
.cache-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;
  letter-spacing:0.05em;margin-left:10px;
  font-family:var(--font-display);text-transform:uppercase;
}
.cache-badge.fresh{
  background:rgba(12,122,110,0.10);color:var(--primary);
}
.cache-badge.live{
  background:rgba(200,80,20,0.10);color:#C25010;
}
.cache-badge .badge-dot{
  width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;
}

/* ── KPI Cards ── */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;
  margin-bottom:24px;
}
.kpi-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:0;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  box-shadow:0 4px 20px rgba(12,122,110,0.10);
}
.kpi-card:hover{
  border-color:rgba(12,122,110,0.25);
  box-shadow:0 6px 24px rgba(12,122,110,0.12);
  transform:translateY(-2px);
}
.kpi-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--primary2),var(--primary3));
  opacity:0;transition:opacity 0.2s;
}
.kpi-card:hover::before{ opacity:1; }
.kpi-card::after{
  content:'';position:absolute;bottom:0;right:0;
  width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle,rgba(12,122,110,0.06) 0%,transparent 70%);
  pointer-events:none;
}
.kpi-card-hd{
  padding:10px 14px;
  font-family:var(--font-display);
  font-size:.62rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi-card-bd{
  padding:16px 16px 14px;
  flex:1;display:flex;flex-direction:column;gap:4px;
}
.kpi-value{
  font-size:1.75rem;font-weight:700;
  font-family:var(--font-mono);
  line-height:1.1;letter-spacing:-1px;margin-top:0;
}
.kpi-sub{
  font-size:11px;color:var(--text3);margin-top:1px;
}

/* ── Section Label ── */
.section-label{
  font-family:var(--font-display);
  font-size:10px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text3);
  margin:4px 0 12px;
  display:flex;align-items:center;gap:10px;
}
.section-label::after{ content:'';flex:1;height:1px;background:var(--border); }
.section-dot{
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary2));flex-shrink:0;
}

/* ── Chart Grid ── */
.charts-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:18px;
}
.charts-grid-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:18px;
  margin-bottom:18px;
}

/* ── Chart Card ── */
.chart-card{
  background:linear-gradient(160deg,#ffffff 0%,#f4f8ff 50%,#eef4fc 100%);
  border:1px solid rgba(12,122,110,0.13);
  border-radius:16px;
  padding:22px 22px 18px;
  display:flex;flex-direction:column;gap:0;
  box-shadow:
    0 4px 20px rgba(12,122,110,0.08),
    0 1px 4px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.90);
  position:relative;overflow:hidden;
  transition:box-shadow 0.25s, border-color 0.25s, transform 0.2s;
}
.chart-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--primary2),var(--primary3));
  opacity:1;
}
.chart-card::after{
  content:'';position:absolute;
  bottom:-60px;right:-60px;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(12,122,110,0.06) 0%,transparent 70%);
  pointer-events:none;
}
.chart-card:hover{
  box-shadow:
    0 8px 32px rgba(12,122,110,0.12),
    0 2px 8px rgba(0,0,0,0.05);
  border-color:rgba(12,122,110,0.22);
  transform:translateY(-2px);
}
.chart-card.full-width{ grid-column:1/-1; }

.chart-card-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:16px;position:relative;z-index:1;
}
.chart-title{
  font-size:13.5px;font-weight:700;color:var(--text);
  font-family:var(--font-display);letter-spacing:0.01em;
}
.chart-sub{
  font-size:11px;color:var(--text3);margin-top:3px;
  font-family:var(--font-mono);
}

.chart-canvas-wrap{
  position:relative;
  flex:1;
  min-height:200px;
}
canvas{display:block;width:100%!important;}

/* ── Insight Box ── */
.insight-box{
  margin-top:14px;
  padding:11px 14px;
  background:rgba(12,122,110,0.05);
  border-left:3px solid var(--primary);
  border-radius:0 8px 8px 0;
  font-size:11.5px;color:var(--text2);line-height:1.75;
  min-height:40px;
  position:relative;z-index:1;
}
.insight-box.loading{
  background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  border-left-color:var(--border2);
  color:transparent;
}
/* Fade-in when insight arrives */
.insight-box.arrived{
  animation:insightIn 0.4s ease both;
}
@keyframes insightIn{
  from{opacity:0;transform:translateY(4px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Recent Projects Table ── */
.table-section-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(12,122,110,0.06);
  margin-bottom:32px;
  position:relative;
}
.table-section-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--primary2),var(--primary3));
}
.table-section-header{
  padding:16px 20px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface2);
}
.table-section-title{
  font-size:13.5px;font-weight:700;color:var(--text);
  font-family:var(--font-display);
}
.table-section-sub{
  font-size:11px;color:var(--text3);margin-top:2px;
}
.table-wrap{ overflow-x:auto; }
.dash-table{
  width:100%;border-collapse:collapse;font-size:12.5px;
}
.dash-table thead th{
  padding:11px 16px;
  text-align:left;
  font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:0.6px;
  background:var(--surface2);border-bottom:1px solid var(--border);
  font-family:var(--font-display);
  white-space:nowrap;
}
.dash-table tbody tr{
  border-bottom:1px solid var(--border);
  transition:background 0.15s;
}
.dash-table tbody tr:last-child{ border-bottom:none; }
.dash-table tbody tr:hover{ background:rgba(12,122,110,0.04); }
.dash-table tbody td{
  padding:11px 16px;color:var(--text2);
  white-space:nowrap;
}
.dash-table tbody td:first-child{ color:var(--text);font-weight:600; }
.dash-table tbody td:nth-child(3){
  font-family:var(--font-mono);font-size:11px;
}
.proj-code-pill{
  background:rgba(12,122,110,0.08);
  color:var(--primary);border-radius:6px;
  padding:2px 8px;font-family:var(--font-mono);font-size:11px;font-weight:600;
  display:inline-block;
}

/* ── Error / empty state ── */
.db-error{
  text-align:center;padding:60px 20px;color:var(--text3);
}
.db-error svg{ width:40px;height:40px;stroke:var(--text3);fill:none;stroke-width:1.3;margin:0 auto 14px;display:block; }
.db-error p{ font-size:14px;line-height:1.7; }

/* ── Spinner ── */
.db-spinner-wrap{
  display:flex;align-items:center;justify-content:center;
  min-height:calc(100vh - var(--topbar-h) - 80px);
  flex-direction:column;gap:16px;color:var(--text3);font-size:13px;
}
.spinner{
  width:36px;height:36px;
  border:3px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{ to{transform:rotate(360deg)} }

/* ── Animate in ── */
.animate-fade-up{ animation:fadeup 0.4s ease both; }
@keyframes fadeup{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

/* ── Responsive ── */
@media(max-width:1100px){
  .charts-grid{ grid-template-columns:1fr; }
  .charts-grid-3{ grid-template-columns:1fr 1fr; }
}
@media(max-width:720px){
  .charts-grid-3{ grid-template-columns:1fr; }
  .db-root{ padding:16px 16px 32px; }
}
</style>
{% endblock %}

{% block content %}
<script id="rh-data" type="application/json">
{{ {
    "clientName": client_name,
    "folder": folder,
    "categories": categories,
    "catList": category_list
} | tojson }}
</script>
<script>
window.__RH__ = JSON.parse(document.getElementById('rh-data').textContent);
document.body.dataset.clientName = window.__RH__.clientName;
</script>

<div class="db-root" id="db-root">
  <!-- Spinner while chart data loads -->
  <div class="db-spinner-wrap" id="db-loading">
    <div class="spinner"></div>
    <span>Loading dashboard…</span>
  </div>

  <!-- Error state -->
  <div id="db-error" style="display:none;" class="db-error">
    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
    <p id="db-error-msg">Could not load dashboard data.</p>
  </div>

  <!-- Dashboard — hidden until chart data arrives -->
  <div id="db-content" style="display:none;" class="animate-fade-up">

    <!-- Header -->
    <div class="db-header">
      <div class="db-header-left">
        <h2>Market Research Dashboard</h2>
        <p id="db-last-updated">Loading…</p>
      </div>
      <button class="db-refresh-btn" id="refresh-btn" onclick="loadDashboard(true)">
        <svg viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
        Refresh
      </button>
    </div>

    <!-- KPI Cards -->
    <div class="section-label"><span class="section-dot"></span>Key Metrics</div>
    <div class="kpi-grid" id="kpi-grid"></div>

    <!-- Row 1: Monthly Trend (full width) -->
    <div class="section-label"><span class="section-dot"></span>Monthly Trend</div>
    <div class="charts-grid" style="grid-template-columns:1fr;">
      <div class="chart-card full-width">
        <div class="chart-card-header">
          <div>
            <div class="chart-title">Monthly Clicks &amp; Completes</div>
            <div class="chart-sub">Last 12 months</div>
          </div>
        </div>
        <div class="chart-canvas-wrap" style="min-height:260px;">
          <canvas id="chartMonthly"></canvas>
        </div>
        <div class="insight-box loading" id="ins-monthly">&nbsp;</div>
      </div>
    </div>

    <!-- Row 2: Status Pie + Country Bar -->
    <div class="section-label"><span class="section-dot"></span>Project Overview</div>
    <div class="charts-grid">
      <div class="chart-card">
        <div class="chart-card-header"><div>
          <div class="chart-title">Project Status</div>
          <div class="chart-sub">All active projects</div>
        </div></div>
        <div class="chart-canvas-wrap" style="min-height:230px;">
          <canvas id="chartStatus"></canvas>
        </div>
        <div class="insight-box loading" id="ins-status">&nbsp;</div>
      </div>
      <div class="chart-card">
        <div class="chart-card-header"><div>
          <div class="chart-title">Top Countries by Completes</div>
          <div class="chart-sub">Geographic distribution</div>
        </div></div>
        <div class="chart-canvas-wrap" style="min-height:230px;">
          <canvas id="chartCountries"></canvas>
        </div>
        <div class="insight-box loading" id="ins-countries">&nbsp;</div>
      </div>
    </div>

    <!-- Row 3: Funnel + Device + Project Type -->
    <div class="section-label"><span class="section-dot"></span>Quality &amp; Distribution</div>
    <div class="charts-grid-3">
      <div class="chart-card">
        <div class="chart-card-header"><div>
          <div class="chart-title">Survey Outcome Funnel</div>
          <div class="chart-sub">Quality &amp; fraud breakdown</div>
        </div></div>
        <div class="chart-canvas-wrap" style="min-height:210px;">
          <canvas id="chartFunnel"></canvas>
        </div>
        <div class="insight-box loading" id="ins-funnel">&nbsp;</div>
      </div>
      <div class="chart-card">
        <div class="chart-card-header"><div>
          <div class="chart-title">Device Type Split</div>
          <div class="chart-sub">Completes by device</div>
        </div></div>
        <div class="chart-canvas-wrap" style="min-height:210px;">
          <canvas id="chartDevice"></canvas>
        </div>
        <div class="insight-box loading" id="ins-device">&nbsp;</div>
      </div>
      <div class="chart-card">
        <div class="chart-card-header"><div>
          <div class="chart-title">Project Type Mix</div>
          <div class="chart-sub">Distribution by type</div>
        </div></div>
        <div class="chart-canvas-wrap" style="min-height:210px;">
          <canvas id="chartPtype"></canvas>
        </div>
        <div class="insight-box loading" id="ins-ptype">&nbsp;</div>
      </div>
    </div>

    <!-- Row 4: Top Suppliers + LOI -->
    <div class="section-label"><span class="section-dot"></span>Supplier &amp; Survey Metrics</div>
    <div class="charts-grid">
      <div class="chart-card">
        <div class="chart-card-header"><div>
          <div class="chart-title">Top Suppliers by Completes</div>
          <div class="chart-sub">Volume &amp; avg CPI</div>
        </div></div>
        <div class="chart-canvas-wrap" style="min-height:230px;">
          <canvas id="chartSuppliers"></canvas>
        </div>
        <div class="insight-box loading" id="ins-suppliers">&nbsp;</div>
      </div>
      <div class="chart-card">
        <div class="chart-card-header"><div>
          <div class="chart-title">LOI Distribution</div>
          <div class="chart-sub">Survey length buckets</div>
        </div></div>
        <div class="chart-canvas-wrap" style="min-height:230px;">
          <canvas id="chartLoi"></canvas>
        </div>
        <div class="insight-box loading" id="ins-loi">&nbsp;</div>
      </div>
    </div>

    <!-- Row 5: CPI vs IR Scatter (full width) -->
    <div class="section-label"><span class="section-dot"></span>CPI Analysis</div>
    <div class="charts-grid" style="grid-template-columns:1fr;">
      <div class="chart-card full-width">
        <div class="chart-card-header"><div>
          <div class="chart-title">CPI vs Incidence Rate (Last 50 Projects)</div>
          <div class="chart-sub">Each dot = one project</div>
        </div></div>
        <div class="chart-canvas-wrap" style="min-height:260px;">
          <canvas id="chartCpiIr"></canvas>
        </div>
        <div class="insight-box loading" id="ins-cpiir">&nbsp;</div>
      </div>
    </div>

    <!-- Recent Projects Table -->
    <div class="section-label"><span class="section-dot"></span>Recent Activity</div>
    <div class="table-section-card">
      <div class="table-section-header">
        <div class="table-section-title">Recent Projects</div>
        <div class="table-section-sub">Last 10 created</div>
      </div>
      <div class="table-wrap">
        <table class="dash-table">
          <thead>
            <tr>
              <th>Project</th><th>Code</th><th>Type</th>
              <th>IR %</th><th>LOI (min)</th><th>CPI ($)</th>
              <th>Sample</th><th>Created</th>
            </tr>
          </thead>
          <tbody id="recent-tbody">
            <tr><td colspan="8" style="text-align:center;color:var(--text3);padding:24px;">Loading…</td></tr>
          </tbody>
        </table>
      </div>
    </div>

  </div><!-- end #db-content -->
</div><!-- end .db-root -->
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>

<script>
/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD JS  —  two-phase load with SSE streaming insights
   ─────────────────────────────────────────────────────────────────────────
   Phase 1 : GET /api/dashboard-data        (~300ms first load, ~0ms cached)
             → charts + KPIs + table render immediately
   Phase 2 : EventSource /api/dashboard-insights-stream
             → each insight pops in as soon as LLM responds (~1-2s each)
             → on cache hit: ALL insights fill in instantly (~0ms)
   ─────────────────────────────────────────────────────────────────────────
   Refresh button passes ?refresh=1 to bust BOTH caches.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Colour palette ── */
const ACCENT  = '#10A896', ACCENT2 = '#0A8C5F';
const GREEN   = '#0A8C5F', RED = '#D63030';
const GOLD    = '#C47D12', PURPLE = '#7C28D0';
const ORANGE  = '#C2560A', TEAL = '#0C7AB0', PINK = '#B01838';

const PALETTE     = [ACCENT, GREEN, GOLD, PURPLE, TEAL, ORANGE, PINK, RED, '#4F46E5', '#0D9488'];
const GRID_COLOR  = 'rgba(0,0,0,0.06)';
const TICK_COLOR  = '#5A6E7F';
const LEGEND_COLOR = '#3D5166';

Chart.defaults.color       = LEGEND_COLOR;
Chart.defaults.font.family = "'Plus Jakarta Sans', sans-serif";
Chart.defaults.font.size   = 11;

const _charts = {};
function destroyChart(id){ if(_charts[id]){ _charts[id].destroy(); delete _charts[id]; } }

/* Light tooltip config */
const ttPlugin = {
  backgroundColor:'#ffffff',
  borderColor:'rgba(12,122,110,0.18)',
  borderWidth:1,
  titleColor:'#0D1B2A',
  bodyColor:'#3D5166',
  padding:12, cornerRadius:10,
  displayColors:true, boxWidth:10, boxHeight:10, boxPadding:4,
  shadowOffsetX:0, shadowOffsetY:4, shadowBlur:16, shadowColor:'rgba(0,0,0,0.10)',
};

/* ── KPI meta ── */
const KPI_META = {
  total_projects:       { label:'Total Projects',   sub:'all time'          },
  active_projects:      { label:'Live Projects',     sub:'currently live'    },
  total_completes:      { label:'Total Completes',   sub:'all time'          },
  avg_ir:               { label:'Avg IR',            sub:'% across projects' },
  avg_loi:              { label:'Avg LOI',           sub:'minutes'           },
  avg_cpi:              { label:'Avg CPI',           sub:'per complete'      },
  total_suppliers:      { label:'Active Suppliers',  sub:'panel providers'   },
  this_month_completes: { label:'This Month',        sub:'completes'         },
};
const KPI_COLORS = {
  total_projects:       {bg:'linear-gradient(135deg,#0C6B61,#0C7A6E)', vc:'var(--primary)'},
  active_projects:      {bg:'linear-gradient(135deg,#0A7050,#0A8C5F)', vc:'var(--green)'},
  total_completes:      {bg:'linear-gradient(135deg,#0C5F8A,#0C7AB0)', vc:'#0C7AB0'},
  avg_ir:               {bg:'linear-gradient(135deg,#5A1AAA,#7C28D0)', vc:'#7C28D0'},
  avg_loi:              {bg:'linear-gradient(135deg,#A07800,#D4A017)', vc:'#D4A017'},
  avg_cpi:              {bg:'linear-gradient(135deg,#0A7050,#10A896)', vc:'var(--primary2)'},
  total_suppliers:      {bg:'linear-gradient(135deg,#B02020,#D63030)', vc:'var(--red)'},
  this_month_completes: {bg:'linear-gradient(135deg,#0C6B61,#10A896)', vc:'var(--primary2)'},
};

function renderKPIs(kpis){
  const grid = document.getElementById('kpi-grid');
  grid.innerHTML = '';
  Object.entries(KPI_META).forEach(([key, meta])=>{
    const val = kpis[key];
    if(val === undefined) return;
    let display;
    if(key==='avg_ir'||key==='avg_loi') display = Number(val).toFixed(1);
    else if(key==='avg_cpi') display = Number(val).toFixed(2);
    else display = Number(val).toLocaleString();
    const colors = KPI_COLORS[key] || {bg:'linear-gradient(135deg,#0C6B61,#0C7A6E)', vc:'var(--primary)'};
    grid.innerHTML += `
    <div class="kpi-card">
      <div class="kpi-card-hd" style="background:${colors.bg}">${meta.label}</div>
      <div class="kpi-card-bd">
        <div class="kpi-value" style="color:${colors.vc}">${display}</div>
        <div class="kpi-sub">${meta.sub}</div>
      </div>
    </div>`;
  });
}

/* ── Chart builders ── */
function lineChart(id, labels, datasets){
  destroyChart(id);
  _charts[id] = new Chart(document.getElementById(id),{
    type:'line', data:{labels, datasets},
    options:{
      responsive:true, maintainAspectRatio:false,
      interaction:{mode:'index', intersect:false},
      plugins:{
        legend:{ position:'top', labels:{boxWidth:12, padding:20, color:LEGEND_COLOR, font:{weight:'600'}} },
        tooltip:ttPlugin
      },
      scales:{
        x:{ grid:{color:GRID_COLOR,drawBorder:false}, ticks:{color:TICK_COLOR,padding:6}, border:{color:'transparent'} },
        y:{ grid:{color:GRID_COLOR,drawBorder:false}, ticks:{color:TICK_COLOR,padding:6}, border:{color:'transparent'} }
      }
    }
  });
}

function barChart(id, labels, data, color, horizontal=false){
  destroyChart(id);
  _charts[id] = new Chart(document.getElementById(id),{
    type:'bar',
    data:{labels, datasets:[{data, backgroundColor:color||PALETTE, borderRadius:5, borderSkipped:false}]},
    options:{
      indexAxis: horizontal?'y':'x',
      responsive:true, maintainAspectRatio:false,
      plugins:{legend:{display:false}, tooltip:ttPlugin},
      scales:{
        x:{ grid:{color:horizontal?GRID_COLOR:'transparent',drawBorder:false}, ticks:{color:TICK_COLOR,padding:4}, border:{color:'transparent'} },
        y:{ grid:{color:horizontal?'transparent':GRID_COLOR,drawBorder:false}, ticks:{color:TICK_COLOR,padding:4}, border:{color:'transparent'} }
      }
    }
  });
}

function doughnutChart(id, labels, data){
  destroyChart(id);
  _charts[id] = new Chart(document.getElementById(id),{
    type:'doughnut',
    data:{labels, datasets:[{data, backgroundColor:PALETTE, borderWidth:2, borderColor:'#ffffff', hoverOffset:8}]},
    options:{
      responsive:true, maintainAspectRatio:false,
      plugins:{
        legend:{ position:'bottom', labels:{boxWidth:10, padding:14, color:LEGEND_COLOR} },
        tooltip:ttPlugin
      },
      cutout:'62%',
    }
  });
}

function scatterChart(id, data){
  destroyChart(id);
  _charts[id] = new Chart(document.getElementById(id),{
    type:'scatter',
    data:{datasets:[{
      label:'Projects',
      data: data.map(d=>({x:d.ir, y:d.cpi, label:d.name})),
      backgroundColor: ACCENT+'88', borderColor: ACCENT, borderWidth:1,
      pointRadius:6, pointHoverRadius:9,
    }]},
    options:{
      responsive:true, maintainAspectRatio:false,
      plugins:{
        legend:{display:false},
        tooltip:{...ttPlugin, callbacks:{ label: ctx=>`  IR: ${ctx.raw.x}%  CPI: $${ctx.raw.y.toFixed(2)}  — ${ctx.raw.label||''}` }}
      },
      scales:{
        x:{ title:{display:true,text:'Incidence Rate (%)',color:TICK_COLOR,font:{size:11}}, grid:{color:GRID_COLOR,drawBorder:false}, ticks:{color:TICK_COLOR}, border:{color:'transparent'} },
        y:{ title:{display:true,text:'CPI ($)',color:TICK_COLOR,font:{size:11}},            grid:{color:GRID_COLOR,drawBorder:false}, ticks:{color:TICK_COLOR}, border:{color:'transparent'} }
      }
    }
  });
}

function renderCharts(d){
  if(d.monthly?.length)
    lineChart('chartMonthly', d.monthly.map(r=>r.MonthName+' '+r.Year), [
      {label:'Clicks',    data:d.monthly.map(r=>r.ClickCount),    borderColor:ACCENT, backgroundColor:ACCENT+'20', fill:true, tension:0.42, borderWidth:2.5, pointRadius:4, pointHoverRadius:7, pointBackgroundColor:ACCENT},
      {label:'Completes', data:d.monthly.map(r=>r.CompleteCount), borderColor:GREEN,  backgroundColor:GREEN+'20',  fill:true, tension:0.42, borderWidth:2.5, pointRadius:4, pointHoverRadius:7, pointBackgroundColor:GREEN},
    ]);
  if(d.status_pie?.length)   doughnutChart('chartStatus',    d.status_pie.map(r=>r.status),           d.status_pie.map(r=>r.cnt));
  if(d.countries?.length)    barChart('chartCountries',      d.countries.map(r=>r.country),           d.countries.map(r=>r.completes), PALETTE, true);
  if(d.quality_funnel?.length) barChart('chartFunnel',       d.quality_funnel.map(r=>r.status_label), d.quality_funnel.map(r=>r.cnt), PALETTE);
  if(d.device_split?.length) doughnutChart('chartDevice',    d.device_split.map(r=>r.device),         d.device_split.map(r=>r.cnt));
  if(d.ptype_mix?.length)    doughnutChart('chartPtype',     d.ptype_mix.map(r=>r.ptype),             d.ptype_mix.map(r=>r.cnt));
  if(d.top_suppliers?.length) barChart('chartSuppliers',     d.top_suppliers.map(r=>r.supplier),      d.top_suppliers.map(r=>r.completes), PALETTE, true);
  if(d.loi_dist?.length)     barChart('chartLoi',            d.loi_dist.map(r=>r.bucket),             d.loi_dist.map(r=>r.cnt), PALETTE);
  if(d.cpi_ir?.length)       scatterChart('chartCpiIr',      d.cpi_ir);
}

/* ── SSE key → DOM id mapping ── */
const INSIGHT_ID_MAP = {
  monthly:        'ins-monthly',
  status_pie:     'ins-status',
  countries:      'ins-countries',
  quality_funnel: 'ins-funnel',
  device_split:   'ins-device',
  ptype_mix:      'ins-ptype',
  top_suppliers:  'ins-suppliers',
  loi_dist:       'ins-loi',
  cpi_ir:         'ins-cpiir',
};

/* Fill one insight box — called per SSE event */
function applyInsight(key, text){
  const elId = INSIGHT_ID_MAP[key];
  if(!elId) return;
  const el = document.getElementById(elId);
  if(!el) return;
  el.classList.remove('loading');
  el.classList.add('arrived');
  el.textContent = text || '— No insight available for this dataset. —';
}

/* Mark any still-loading boxes as unavailable (called on stream error/close) */
function clearLoadingInsights(){
  document.querySelectorAll('.insight-box.loading').forEach(el=>{
    el.classList.remove('loading');
    el.textContent = '— Insight unavailable —';
  });
}

/* ── Active EventSource handle (so we can close on refresh) ── */
let _insightES = null;

function startInsightStream(refresh=false){
  if(_insightES){ _insightES.close(); _insightES = null; }

  /* Reset all insight boxes to loading shimmer */
  document.querySelectorAll('.insight-box').forEach(el=>{
    el.classList.remove('arrived');
    el.classList.add('loading');
    el.textContent = '\u00a0';
  });

  const url = '/client/api/dashboard-insights-stream' + (refresh ? '?refresh=1' : '');
  const es  = new EventSource(url);
  _insightES = es;

  es.onmessage = (e) => {
    try {
      const msg = JSON.parse(e.data);
      if(msg.done){
        es.close();
        _insightES = null;
        clearLoadingInsights(); /* fill any that had empty results */
        return;
      }
      if(msg.error){
        console.warn('Insight stream error:', msg.error);
        es.close();
        clearLoadingInsights();
        return;
      }
      if(msg.key) applyInsight(msg.key, msg.text);
    } catch(err){
      console.warn('Insight parse error:', err);
    }
  };

  es.onerror = () => {
    console.warn('Insight SSE connection dropped.');
    es.close();
    _insightES = null;
    clearLoadingInsights();
  };
}

function renderTable(rows){
  const tbody = document.getElementById('recent-tbody');
  if(!rows?.length){
    tbody.innerHTML = '<tr><td colspan="8" style="text-align:center;color:var(--text3);padding:24px;">No projects found.</td></tr>';
    return;
  }
  tbody.innerHTML = rows.map(r=>`
    <tr>
      <td title="${r.ProjectName||''}">${(r.ProjectName||'–').substring(0,30)}${r.ProjectName?.length>30?'…':''}</td>
      <td><span class="proj-code-pill">${r.ProjectCode||'–'}</span></td>
      <td>${r.ProjectType||'–'}</td>
      <td>${r.IR!=null?Number(r.IR).toFixed(1)+'%':'–'}</td>
      <td>${r.AverageLOI!=null?Number(r.AverageLOI).toFixed(1):'–'}</td>
      <td>${r.ProjectCPI!=null?'$'+Number(r.ProjectCPI).toFixed(2):'–'}</td>
      <td>${r.SampleSize!=null?Number(r.SampleSize).toLocaleString():'–'}</td>
      <td>${r.CreateDate||'–'}</td>
    </tr>`).join('');
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN LOADER
   loadDashboard(refresh=false)  — called on page load
   loadDashboard(true)           — called by Refresh button (busts both caches)
═══════════════════════════════════════════════════════════════════════════ */
async function loadDashboard(refresh=false){
  if(_insightES){ _insightES.close(); _insightES = null; }

  document.getElementById('db-loading').style.display = 'flex';
  document.getElementById('db-content').style.display = 'none';
  document.getElementById('db-error').style.display   = 'none';
  document.getElementById('refresh-btn').disabled      = true;

  try {
    const url     = '/client/api/dashboard-data' + (refresh ? '?refresh=1' : '');
    const dataRes = await fetch(url);
    if(!dataRes.ok) throw new Error('HTTP ' + dataRes.status);
    const data = await dataRes.json();
    if(data.error) throw new Error(data.error);

    renderKPIs(data.kpis || {});
    renderCharts(data);
    renderTable(data.recent_projects || []);

    const now = new Date();
    document.getElementById('db-last-updated').textContent =
      'Updated ' + now.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});

    document.getElementById('db-loading').style.display = 'none';
    document.getElementById('db-content').style.display = 'block';
    document.getElementById('refresh-btn').disabled      = false;

    /* Phase 2 — stream insights via SSE */
    startInsightStream(refresh);

  } catch(e){
    document.getElementById('db-loading').style.display = 'none';
    document.getElementById('db-error').style.display   = 'block';
    document.getElementById('db-error-msg').textContent = 'Error: ' + e.message;
    document.getElementById('refresh-btn').disabled      = false;
    console.error('Dashboard load error:', e);
  }
}

document.addEventListener('DOMContentLoaded', function(){
  const sub = document.getElementById('reports-submenu');
  const btn = document.getElementById('nav-reports');
  if(sub) sub.classList.add('open');
  if(btn) btn.classList.add('open');
  loadDashboard();
});
</script>
{% endblock %}