{% extends "base.html" %}

{% block title %}Cascade Detector — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Cascade Detector</h1>
    <p class="subtitle">Extended Kalman Filter state — system health prediction and circuit breaker</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('cascade')" title="Help">? Help</button>
</div>

<div class="cascade-layout">

  <!-- ── Current EKF State (full width) ───────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Current EKF State
      <span id="detector-type-badge" style="margin-left:0.75rem;font-size:0.78rem;font-weight:600;padding:2px 10px;border-radius:4px;display:inline-block;text-transform:none;letter-spacing:0;"></span>
    </h2>
    <div id="ekf-gauges" style="display:flex;flex-direction:column;gap:0.75rem;margin-bottom:1rem;">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading state…</div>
    </div>
    <div style="font-size:0.82rem;color:var(--text-dim);">
      Covariance trace:
      <span id="covariance-trace" style="color:var(--text);font-weight:600;margin-left:0.4rem;">—</span>
    </div>
  </div>

  <!-- ── State History Chart (full width) ─────────────────────────── -->
  <div class="chart-card full-width">
    <h2>5-Session State Window</h2>
    <div style="position:relative;height:280px;">
      <canvas id="state-history-chart"></canvas>
    </div>
    <p style="font-size:0.75rem;color:var(--text-dim);margin-top:0.75rem;">
      Rolling 5-session window per subsystem. Refreshes every 5 seconds.
    </p>
  </div>

  <!-- ── Active Warnings (half width) ─────────────────────────────── -->
  <div class="chart-card">
    <h2>Active Warnings</h2>
    <div id="active-warnings">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading warnings…</div>
    </div>
  </div>

  <!-- ── Circuit Breaker Status (half width) ───────────────────────── -->
  <div class="chart-card">
    <h2>Circuit Breaker Status</h2>
    <div id="circuit-breaker-status">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading circuit breaker…</div>
    </div>
  </div>

  <!-- ── Warning History (full width) ─────────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Warning History</h2>
    <div id="warning-history-wrap">
      <div style="color:var(--text-dim);font-size:0.85rem;padding:0.5rem;">Loading history…</div>
    </div>
  </div>

</div><!-- /.cascade-layout -->
{% endblock %}


{% block scripts %}
<script>
/* ================================================================
   Cascade Detector — EKF state, warnings, circuit breaker, history
   ================================================================ */

// ── Utility ───────────────────────────────────────────────────────
function escHtml(str) {
  return String(str || '').replace(/[&<>"']/g, function(c) {
    return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
  });
}

// ── Chart.js defaults ─────────────────────────────────────────────
Chart.defaults.color = '#6b7280';
Chart.defaults.borderColor = '#1e293b';
Chart.defaults.font.family = '"Inter", "Segoe UI", system-ui, sans-serif';

// ── Subsystem config ──────────────────────────────────────────────
const SUBSYSTEMS = ['gate', 'retrieval', 'storage', 'associations', 'domains'];
const SUBSYSTEM_COLORS = ['#4a9eff', '#a855f7', '#ff6b35', '#22c55e', '#f59e0b'];

function healthColor(v) {
  if (v >= 0.7) return '#22c55e';
  if (v >= 0.4) return '#f59e0b';
  return '#ef4444';
}

// ── EKF State Gauges ──────────────────────────────────────────────
function renderEKFGauges(state, covariance_trace) {
  const container = document.getElementById('ekf-gauges');
  if (!container) return;
  const values = state || {};
  container.innerHTML = SUBSYSTEMS.map(function(name, i) {
    const v   = typeof values[name] === 'number' ? values[name] : 0;
    const pct = Math.round(Math.min(Math.max(v, 0), 1) * 100);
    const color = healthColor(v);
    return `<div style="display:flex;align-items:center;gap:1rem;">
      <span style="width:100px;font-size:0.82rem;color:var(--text-dim);text-transform:capitalize;flex-shrink:0;">${escHtml(name)}</span>
      <div style="flex:1;background:var(--border);border-radius:4px;height:10px;overflow:hidden;">
        <div style="width:${pct}%;height:100%;background:${color};border-radius:4px;transition:width .4s;"></div>
      </div>
      <span style="width:40px;text-align:right;font-size:0.8rem;color:${color};font-weight:600;">${v.toFixed(2)}</span>
    </div>`;
  }).join('');

  const traceEl = document.getElementById('covariance-trace');
  if (traceEl) traceEl.textContent = typeof covariance_trace === 'number' ? covariance_trace.toFixed(4) : '—';
}

// ── Detector Type Badge ───────────────────────────────────────────
function renderDetectorBadge(detector_type) {
  const badge = document.getElementById('detector-type-badge');
  if (!badge) return;
  const isEKF = (detector_type || '').toLowerCase().includes('ekf') ||
                (detector_type || '').toLowerCase().includes('cascade');
  if (isEKF) {
    badge.style.cssText = 'background:#00d2d322;color:#00d2d3;border:1px solid #00d2d355;margin-left:0.75rem;font-size:0.78rem;font-weight:600;padding:2px 10px;border-radius:4px;display:inline-block;text-transform:none;letter-spacing:0;';
    badge.textContent = 'EKF Active';
  } else {
    badge.style.cssText = 'background:#f59e0b22;color:#f59e0b;border:1px solid #f59e0b55;margin-left:0.75rem;font-size:0.78rem;font-weight:600;padding:2px 10px;border-radius:4px;display:inline-block;text-transform:none;letter-spacing:0;';
    badge.textContent = 'Circuit Breaker';
  }
}

// ── State History Chart ───────────────────────────────────────────
let stateHistoryChart = null;

function initStateHistoryChart() {
  const ctx = document.getElementById('state-history-chart');
  if (!ctx) return;
  stateHistoryChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['S1','S2','S3','S4','S5'],
      datasets: SUBSYSTEMS.map(function(name, i) {
        return {
          label: name.charAt(0).toUpperCase() + name.slice(1),
          data: [null, null, null, null, null],
          borderColor: SUBSYSTEM_COLORS[i],
          backgroundColor: SUBSYSTEM_COLORS[i] + '15',
          borderWidth: 2,
          pointRadius: 3,
          tension: 0.35,
          fill: false,
        };
      }),
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 300 },
      scales: {
        x: {
          title: { display: true, text: 'Session', color: '#6b7280', font: { size: 11 } },
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280' },
        },
        y: {
          min: 0,
          max: 1,
          title: { display: true, text: 'Health (0–1)', color: '#6b7280', font: { size: 11 } },
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280', stepSize: 0.2 },
        },
      },
      plugins: {
        legend: {
          position: 'top',
          labels: { color: '#c8d6e5', padding: 14, font: { size: 11 } },
        },
        tooltip: {
          backgroundColor: '#111118',
          borderColor: '#1e293b',
          borderWidth: 1,
          titleColor: '#c8d6e5',
          bodyColor: '#6b7280',
        },
      },
    },
  });
}

function updateStateHistoryChart(history) {
  if (!stateHistoryChart || !history) return;
  // history: array of up to 5 session snapshots, each with subsystem values
  const sessions = history.slice(-5);
  const labels   = sessions.map(function(s, i) { return 'S' + (s.session || (i + 1)); });
  stateHistoryChart.data.labels = labels;
  SUBSYSTEMS.forEach(function(name, i) {
    stateHistoryChart.data.datasets[i].data = sessions.map(function(s) {
      return typeof s[name] === 'number' ? s[name] : null;
    });
  });
  stateHistoryChart.update();
}

// ── Active Warnings ───────────────────────────────────────────────
function renderActiveWarnings(warnings) {
  const el = document.getElementById('active-warnings');
  if (!el) return;
  if (!warnings || warnings.length === 0) {
    el.innerHTML = `<div style="display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;border-radius:var(--radius);background:#22c55e22;border:1px solid #22c55e55;color:#22c55e;font-size:0.85rem;font-weight:600;">
      System healthy — no cascade warnings
    </div>`;
    return;
  }
  el.innerHTML = warnings.map(function(w) {
    const sev = typeof w.severity === 'number' ? w.severity : 0;
    const pct = Math.round(Math.min(Math.max(sev, 0), 1) * 100);
    const impact = w.predicted_sessions_to_impact != null
      ? `Impact in ${w.predicted_sessions_to_impact} session${w.predicted_sessions_to_impact === 1 ? '' : 's'}`
      : null;
    return `<div style="background:var(--bg);border:1px solid #ef444444;border-radius:var(--radius);padding:0.85rem;margin-bottom:0.6rem;">
      <div style="font-weight:700;color:var(--text);margin-bottom:0.4rem;">${escHtml(w.affected_system || '—')}</div>
      <div style="font-size:0.78rem;color:var(--text-dim);margin-bottom:4px;">Severity</div>
      <div style="background:var(--border);border-radius:4px;height:6px;overflow:hidden;margin-bottom:0.5rem;">
        <div style="width:${pct}%;height:100%;background:#ef4444;border-radius:4px;transition:width .4s;"></div>
      </div>
      ${w.recommended_action ? `<div style="font-size:0.8rem;color:var(--text-dim);font-family:monospace;margin-bottom:0.3rem;">${escHtml(w.recommended_action)}</div>` : ''}
      ${impact ? `<div style="font-size:0.75rem;color:#f59e0b;margin-top:2px;">${escHtml(impact)}</div>` : ''}
    </div>`;
  }).join('');
}

// ── Circuit Breaker Status ────────────────────────────────────────
function renderCircuitBreaker(data) {
  const el = document.getElementById('circuit-breaker-status');
  if (!el) return;
  const cb  = data.circuit_breaker || {};
  const low_hit_count   = cb.low_hit_rate_count   ?? data.low_hit_sessions ?? 0;
  const high_corr_count = cb.high_correction_count ?? data.high_correction_sessions ?? 0;
  const detector_type   = data.detector_type || 'circuit_breaker';

  function counterBar(count, trigger, label) {
    const pct = Math.round(Math.min(count / Math.max(trigger, 1), 1) * 100);
    const color = pct >= 100 ? '#ef4444' : (pct >= 60 ? '#f59e0b' : '#22c55e');
    return `<div style="margin-bottom:0.85rem;">
      <div style="display:flex;justify-content:space-between;font-size:0.82rem;color:var(--text-dim);margin-bottom:4px;">
        <span>${escHtml(label)}</span>
        <span style="color:var(--text);">${count} / ${trigger} sessions</span>
      </div>
      <div style="background:var(--border);border-radius:4px;height:8px;overflow:hidden;">
        <div style="width:${pct}%;height:100%;background:${color};border-radius:4px;transition:width .4s;"></div>
      </div>
      <div style="font-size:0.72rem;color:var(--text-dim);margin-top:2px;">triggers at ${trigger} consecutive</div>
    </div>`;
  }

  const isEKF = detector_type.toLowerCase().includes('ekf') || detector_type.toLowerCase().includes('cascade');
  const badgeStyle = isEKF
    ? 'background:#00d2d322;color:#00d2d3;border:1px solid #00d2d355;'
    : 'background:#f59e0b22;color:#f59e0b;border:1px solid #f59e0b55;';
  const badgeLabel = isEKF ? 'EKF Active' : 'Circuit Breaker';

  el.innerHTML = `
    ${counterBar(low_hit_count, 3, 'Low hit rate')}
    ${counterBar(high_corr_count, 2, 'High correction rate')}
    <div style="margin-top:1rem;display:flex;align-items:center;gap:0.6rem;font-size:0.82rem;color:var(--text-dim);">
      Detector type:
      <span style="${badgeStyle}padding:2px 10px;border-radius:4px;font-size:0.78rem;font-weight:600;">${escHtml(badgeLabel)}</span>
    </div>`;
}

// ── Warning History ───────────────────────────────────────────────
function renderWarningHistory(history) {
  const wrap = document.getElementById('warning-history-wrap');
  if (!wrap) return;
  if (!history || history.length === 0) {
    wrap.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;padding:0.75rem 0;">No warning history recorded yet.</div>';
    return;
  }
  wrap.innerHTML = `<table class="data-table" style="width:100%;">
    <thead>
      <tr>
        <th>Session</th>
        <th>System</th>
        <th>Severity</th>
        <th>Action</th>
        <th>Impact</th>
      </tr>
    </thead>
    <tbody>${history.map(function(w) {
      const sev = typeof w.severity === 'number' ? w.severity.toFixed(2) : '—';
      return `<tr>
        <td>${escHtml(String(w.session ?? '—'))}</td>
        <td style="font-weight:600;">${escHtml(w.system || w.affected_system || '—')}</td>
        <td>${escHtml(sev)}</td>
        <td style="font-family:monospace;font-size:0.78rem;color:var(--text-dim);">${escHtml(w.action || w.recommended_action || '—')}</td>
        <td style="color:var(--text-dim);">${escHtml(String(w.impact || (w.predicted_sessions_to_impact != null ? w.predicted_sessions_to_impact : '—')))}</td>
      </tr>`;
    }).join('')}</tbody>
  </table>`;
}

// ── Fetch: cascade-state ──────────────────────────────────────────
async function loadCascadeState() {
  try {
    const resp = await fetch('/api/cascade-state');
    if (!resp.ok) return;
    const data = await resp.json();
    const state = data.state || {};
    renderEKFGauges(state, data.covariance_trace);
    renderDetectorBadge(data.detector_type);
    renderActiveWarnings(data.cascade_warnings || data.warnings || []);
    renderCircuitBreaker(data);
    // If state history is embedded in the response, update chart
    if (data.state_history) {
      updateStateHistoryChart(data.state_history);
    }
  } catch (e) {
    console.warn('Cascade: state load failed', e);
  }
}

// ── Fetch: cascade-history ────────────────────────────────────────
async function loadCascadeHistory() {
  try {
    const resp = await fetch('/api/cascade-history');
    if (!resp.ok) return;
    const data = await resp.json();
    renderWarningHistory(data.events || data.warnings || data.history || []);
    if (data.state_history) {
      updateStateHistoryChart(data.state_history);
    }
  } catch (e) {
    console.warn('Cascade: history load failed', e);
  }
}

// ── Boot ──────────────────────────────────────────────────────────
initStateHistoryChart();

loadCascadeState();
loadCascadeHistory();

setInterval(loadCascadeState,   5000);
setInterval(loadCascadeHistory, 30000);
</script>
{% endblock %}