/* ============================================================
   SENTINEL — Analytics View
   ============================================================ */
Views.analytics = async function(container) {
  container.innerHTML = Utils.loading();
  try {
    const [summary, weekly, trend, compliance] = await Promise.all([
      API.get('/analytics/summary'),
      API.get('/analytics/weekly'),
      API.get('/analytics/trend', { hours: 24 }),
      API.get('/analytics/compliance'),
    ]);

    const resRate = summary.resolution_rate || 0;
    const zones = await API.get('/zones');

    container.innerHTML = `
      <div class="stat-grid">
        <div class="stat-tile warn">
          <div class="stat-label">Incidents (30 days)</div>
          <div class="stat-value">${summary.total}</div>
          <div class="stat-sub">${summary.resolved} resolved</div>
        </div>
        <div class="stat-tile accent">
          <div class="stat-label">Resolution Rate</div>
          <div class="stat-value">${resRate}%</div>
          <div class="stat-sub">${summary.avg_response_min || '—'}m avg response</div>
        </div>
        <div class="stat-tile info">
          <div class="stat-label">Avg Response Time</div>
          <div class="stat-value">${summary.avg_response_min || '—'}m</div>
          <div class="stat-sub">Last 30 days</div>
        </div>
        <div class="stat-tile danger">
          <div class="stat-label">Active Zones</div>
          <div class="stat-value">${zones.length}</div>
          <div class="stat-sub">${zones.filter(z=>z.risk_score>=60).length} high risk</div>
        </div>
      </div>

      <div class="g-2">
        <!-- 24h trend chart -->
        <div class="card">
          <div class="card-header">
            <div class="card-accent ca-warn"></div>
            <span class="card-title">24-Hour Incident Trend</span>
          </div>
          <div class="card-body" style="padding:12px 8px 8px">
            <canvas id="chart-trend" height="160"></canvas>
          </div>
        </div>

        <!-- Weekly chart -->
        <div class="card">
          <div class="card-header">
            <div class="card-accent ca-danger"></div>
            <span class="card-title">Weekly Incident Volume</span>
          </div>
          <div class="card-body" style="padding:12px 8px 8px">
            <canvas id="chart-weekly" height="160"></canvas>
          </div>
        </div>
      </div>

      <div class="g-2">
        <!-- Incident types -->
        <div class="card">
          <div class="card-header">
            <div class="card-accent ca-warn"></div>
            <span class="card-title">Incident Type Breakdown</span>
          </div>
          <div class="card-body">
            ${(summary.by_type || []).map(t => {
              const pct = summary.total > 0 ? Math.round(t.count / summary.total * 100) : 0;
              return `
                <div class="score-row">
                  <span class="score-name fs-12">${t.name}</span>
                  ${Utils.scoreBar(pct, 'var(--warn)')}
                  <span class="score-num">${t.count}</span>
                </div>`;
            }).join('') || Utils.empty('No data')}
          </div>
        </div>

        <!-- Patrol compliance -->
        <div class="card">
          <div class="card-header">
            <div class="card-accent ca-green"></div>
            <span class="card-title">Patrol Compliance (7 days)</span>
          </div>
          <div class="card-body">
            ${(compliance || []).map(c => {
              const pct = Math.min(100, c.total_checkpoints * 4); // 25 checkpoints = 100%
              const color = pct >= 80 ? 'var(--accent2)' : pct >= 60 ? 'var(--warn)' : 'var(--danger)';
              return `
                <div class="score-row mb-8">
                  <div class="score-name">
                    <div class="fs-12 fw-6">${c.name}</div>
                    <div class="font-mono fs-9 text-dim">${c.unit_name}</div>
                  </div>
                  ${Utils.scoreBar(pct, color)}
                  <span class="score-num">${c.total_checkpoints}</span>
                </div>`;
            }).join('') || Utils.empty('No patrol data')}
          </div>
        </div>
      </div>

      <!-- Zone risk summary -->
      <div class="card">
        <div class="card-header">
          <div class="card-accent ca-danger"></div>
          <span class="card-title">Zone Risk Summary</span>
        </div>
        <div class="card-body">
          <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px">
            ${zones.sort((a,b)=>b.risk_score-a.risk_score).map(z => `
              <div class="flex items-center gap-10" style="padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:3px">
                <div style="width:5px;height:40px;border-radius:2px;background:${Utils.riskColor(z.risk_score)};flex-shrink:0"></div>
                <div style="flex:1;min-width:0">
                  <div class="fw-6 fs-13">${z.name}</div>
                  <div class="font-mono fs-10 text-dim">${z.incidents_24h||0} incidents 24h · ${z.active_incidents||0} active</div>
                </div>
                ${Utils.riskGaugeSVG(z.risk_score, 52)}
              </div>
            `).join('')}
          </div>
        </div>
      </div>
    `;

    // Draw charts
    drawTrendChart(trend);
    drawWeeklyChart(weekly);

  } catch(e) {
    container.innerHTML = `<div class="card card-body" style="color:var(--danger)">Analytics load failed: ${e.message}</div>`;
  }
};

function drawTrendChart(trend) {
  const canvas = document.getElementById('chart-trend');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  const data = trend.incidents || [];
  const w = canvas.offsetWidth || 400;
  const h = 160;
  canvas.width = w;
  canvas.height = h;

  const pad = { t: 10, r: 10, b: 30, l: 30 };
  const chartW = w - pad.l - pad.r;
  const chartH = h - pad.t - pad.b;
  const maxVal = Math.max(...data.map(d => parseInt(d.incidents) || 0), 1);

  ctx.clearRect(0, 0, w, h);

  // Grid
  ctx.strokeStyle = 'rgba(28,32,48,1)';
  ctx.lineWidth = 1;
  for (let i = 0; i <= 4; i++) {
    const y = pad.t + (chartH / 4) * i;
    ctx.beginPath(); ctx.moveTo(pad.l, y); ctx.lineTo(w - pad.r, y); ctx.stroke();
    ctx.fillStyle = '#5a6480';
    ctx.font = '9px Share Tech Mono';
    ctx.fillText(Math.round(maxVal - (maxVal/4)*i), 2, y + 3);
  }

  if (data.length < 2) { ctx.fillStyle = '#5a6480'; ctx.font = '11px Share Tech Mono'; ctx.fillText('No data yet', w/2-30, h/2); return; }

  // Gradient fill
  const grad = ctx.createLinearGradient(0, pad.t, 0, h - pad.b);
  grad.addColorStop(0, 'rgba(255,59,59,0.3)');
  grad.addColorStop(1, 'rgba(255,59,59,0)');

  const points = data.map((d, i) => ({
    x: pad.l + (i / (data.length - 1)) * chartW,
    y: pad.t + chartH - ((parseInt(d.incidents)||0) / maxVal) * chartH,
  }));

  ctx.beginPath();
  ctx.moveTo(points[0].x, h - pad.b);
  points.forEach(p => ctx.lineTo(p.x, p.y));
  ctx.lineTo(points[points.length-1].x, h - pad.b);
  ctx.closePath();
  ctx.fillStyle = grad;
  ctx.fill();

  ctx.beginPath();
  points.forEach((p, i) => i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y));
  ctx.strokeStyle = '#ff3b3b';
  ctx.lineWidth = 2;
  ctx.stroke();

  // X labels
  ctx.fillStyle = '#5a6480';
  ctx.font = '9px Share Tech Mono';
  data.forEach((d, i) => {
    if (i % Math.ceil(data.length / 6) === 0) {
      const x = pad.l + (i / (data.length-1)) * chartW;
      ctx.fillText((d.hour_slot || '').slice(11, 16), x - 10, h - 8);
    }
  });
}

function drawWeeklyChart(weekly) {
  const canvas = document.getElementById('chart-weekly');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  const data = weekly || [];
  const w = canvas.offsetWidth || 400;
  const h = 160;
  canvas.width = w;
  canvas.height = h;

  const pad = { t: 10, r: 10, b: 30, l: 30 };
  const chartW = w - pad.l - pad.r;
  const chartH = h - pad.t - pad.b;
  const maxVal = Math.max(...data.map(d => parseInt(d.incidents)||0), 1);
  const barW = (chartW / (data.length || 1)) * 0.35;

  ctx.clearRect(0, 0, w, h);

  ctx.strokeStyle = 'rgba(28,32,48,1)'; ctx.lineWidth = 1;
  for (let i = 0; i <= 4; i++) {
    const y = pad.t + (chartH / 4) * i;
    ctx.beginPath(); ctx.moveTo(pad.l, y); ctx.lineTo(w - pad.r, y); ctx.stroke();
    ctx.fillStyle = '#5a6480'; ctx.font = '9px Share Tech Mono';
    ctx.fillText(Math.round(maxVal - (maxVal/4)*i), 2, y+3);
  }

  data.forEach((d, i) => {
    const x = pad.l + (i / data.length) * chartW + (chartW / data.length) * 0.15;
    const incH = ((parseInt(d.incidents)||0) / maxVal) * chartH;
    const resH = ((parseInt(d.resolved)||0) / maxVal) * chartH;

    // Incidents bar
    ctx.fillStyle = 'rgba(255,59,59,0.75)';
    ctx.fillRect(x, pad.t + chartH - incH, barW, incH);

    // Resolved bar
    ctx.fillStyle = 'rgba(0,201,122,0.75)';
    ctx.fillRect(x + barW + 2, pad.t + chartH - resH, barW, resH);

    // Label
    ctx.fillStyle = '#5a6480'; ctx.font = '9px Share Tech Mono';
    ctx.fillText((d.day_name || '').slice(0,3).toUpperCase(), x, h - 8);
  });

  // Legend
  ctx.fillStyle = 'rgba(255,59,59,0.75)'; ctx.fillRect(w - 120, 10, 10, 8);
  ctx.fillStyle = '#8896b0'; ctx.font = '9px Share Tech Mono'; ctx.fillText('Incidents', w - 107, 18);
  ctx.fillStyle = 'rgba(0,201,122,0.75)'; ctx.fillRect(w - 120, 22, 10, 8);
  ctx.fillStyle = '#8896b0'; ctx.fillText('Resolved', w - 107, 30);
}