{% extends "base.html" %}

{% block title %}Apoptosis — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Apoptosis</h1>
    <p class="subtitle">Controlled cell death — pruned memories, triggers, and salvaged fragments</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('apoptosis')" title="Help">? Help</button>
</div>

<div class="apoptosis-layout">

  <!-- ── Stats Overview (full width) ──────────────────────────────── -->
  <div class="chart-card full-width" id="apoptosis-overview-card">
    <h2>Stats Overview</h2>
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;" id="apoptosis-stats-row">
      <div class="pipe-summary-card">
        <div class="pipe-summary-value" id="stat-total-pruned">—</div>
        <div class="pipe-summary-label">Total Pruned</div>
      </div>
      <div class="pipe-summary-card">
        <div class="pipe-summary-value" id="stat-fragments-created" style="color:var(--purple);">—</div>
        <div class="pipe-summary-label">Fragments Created</div>
      </div>
      <div class="pipe-summary-card">
        <div class="pipe-summary-value" id="stat-neighbors-flagged" style="color:var(--orange);">—</div>
        <div class="pipe-summary-label">Neighbors Flagged</div>
      </div>
    </div>
  </div>

  <!-- ── Trigger Distribution (half width) ────────────────────────── -->
  <div class="chart-card" id="trigger-dist-card">
    <h2>Trigger Distribution</h2>
    <div style="position:relative;height:220px;">
      <canvas id="trigger-dist-chart"></canvas>
    </div>
  </div>

  <!-- ── Vitality Distribution (half width) ───────────────────────── -->
  <div class="chart-card" id="vitality-dist-card">
    <h2>Vitality at Death — Distribution</h2>
    <div style="position:relative;height:220px;">
      <canvas id="vitality-dist-chart"></canvas>
    </div>
    <p style="font-size:0.75rem;color:var(--text-dim);margin-top:0.75rem;">
      Vitality score buckets (0.0 – 1.0) at the time of pruning.
    </p>
  </div>

  <!-- ── Recent Pruning Events (full width) ───────────────────────── -->
  <div class="chart-card full-width" id="pruning-events-card">
    <h2>Recent Pruning Events</h2>
    <div id="pruning-events-body">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading…</div>
    </div>
  </div>

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


{% block scripts %}
<script>
/* ================================================================
   Apoptosis — Chart.js charts + polling
   ================================================================ */

function escHtml(s) {
  return String(s == null ? '' : s)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

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

const TRIGGER_COLORS = {
  context_drift:  '#ff6b35',
  contradicted:   '#ff2d55',
  obsolescence:   '#6b7280',
};

function triggerBadge(reason) {
  const color = TRIGGER_COLORS[reason] || '#6b7280';
  const bg = color + '22';
  const border = color + '55';
  return `<span style="display:inline-block;padding:1px 8px;border-radius:10px;font-size:0.75rem;font-weight:600;color:${color};background:${bg};border:1px solid ${border};">${escHtml(reason || '—')}</span>`;
}

// ── Trigger Distribution Chart ────────────────────────────────────
let triggerChart = null;

function initTriggerChart() {
  const ctx = document.getElementById('trigger-dist-chart');
  if (!ctx) return;
  triggerChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['context_drift', 'contradicted', 'obsolescence'],
      datasets: [{
        label: 'Count',
        data: [0, 0, 0],
        backgroundColor: [
          'rgba(255,107,53,0.55)',
          'rgba(255,45,85,0.55)',
          'rgba(107,114,128,0.55)',
        ],
        borderColor: [
          '#ff6b35',
          '#ff2d55',
          '#6b7280',
        ],
        borderWidth: 1,
        borderRadius: 4,
        indexAxis: 'y',
      }],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      indexAxis: 'y',
      animation: { duration: 400 },
      scales: {
        x: {
          beginAtZero: true,
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280', precision: 0 },
        },
        y: {
          grid: { display: false },
          ticks: { color: '#c8d6e5', font: { size: 12 } },
        },
      },
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: '#111118',
          borderColor: '#1e293b',
          borderWidth: 1,
          titleColor: '#c8d6e5',
          bodyColor: '#6b7280',
        },
      },
    },
  });
}

function updateTriggerChart(counts) {
  if (!triggerChart) return;
  triggerChart.data.datasets[0].data = [
    counts.context_drift  || 0,
    counts.contradicted   || 0,
    counts.obsolescence   || 0,
  ];
  triggerChart.update();
}

// ── Vitality Distribution Chart ───────────────────────────────────
let vitalityChart = null;

function initVitalityChart() {
  const ctx = document.getElementById('vitality-dist-chart');
  if (!ctx) return;

  const bucketLabels = [];
  for (let i = 0; i < 10; i++) {
    bucketLabels.push((i / 10).toFixed(1) + '–' + ((i + 1) / 10).toFixed(1));
  }

  // gradient red-to-yellow for bucket bars
  const colors = bucketLabels.map((_, i) => {
    const t = i / 9;
    const r = 255;
    const g = Math.round(45 + (107 - 45) * t);  // 45 (red) -> 107 (orange-ish)
    const b = 0;
    return `rgba(${r},${g},${b},0.60)`;
  });
  const borderColors = bucketLabels.map((_, i) => {
    const t = i / 9;
    const r = 255;
    const g = Math.round(45 + (107 - 45) * t);
    return `rgb(${r},${g},0)`;
  });

  vitalityChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: bucketLabels,
      datasets: [{
        label: 'Pruned Memories',
        data: new Array(10).fill(0),
        backgroundColor: colors,
        borderColor: borderColors,
        borderWidth: 1,
        borderRadius: 3,
      }],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 400 },
      scales: {
        x: {
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280', font: { size: 10 }, maxRotation: 45 },
        },
        y: {
          beginAtZero: true,
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280', precision: 0 },
        },
      },
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: '#111118',
          borderColor: '#1e293b',
          borderWidth: 1,
          titleColor: '#c8d6e5',
          bodyColor: '#6b7280',
        },
      },
    },
  });
}

function updateVitalityChart(vitalities) {
  if (!vitalityChart) return;
  const buckets = new Array(10).fill(0);
  vitalities.forEach(v => {
    const idx = Math.min(Math.floor(Number(v) * 10), 9);
    if (!isNaN(idx) && idx >= 0) buckets[idx]++;
  });
  vitalityChart.data.datasets[0].data = buckets;
  vitalityChart.update();
}

// ── Stats + Events render ─────────────────────────────────────────
function setEl(id, v) {
  const el = document.getElementById(id);
  if (el && v != null) el.textContent = v;
}

function renderApoptosisStats(data) {
  setEl('stat-total-pruned',     data.total_pruned           ?? 0);
  setEl('stat-fragments-created', data.fragments_created     ?? data.total_fragments ?? 0);
  setEl('stat-neighbors-flagged', data.neighbors_flagged     ?? data.total_neighbors_flagged ?? 0);
}

function renderPruningEvents(data) {
  const el = document.getElementById('pruning-events-body');
  if (!el) return;
  const events = data.recent_events || [];
  if (!events.length) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;padding:1.5rem;text-align:center;">No pruning events recorded.</div>';
    return;
  }
  const rows = events.map(ev => {
    const vitality = ev.vitality_at_death != null ? Number(ev.vitality_at_death).toFixed(3) : '—';
    const scarMark = ev.scar_created
      ? '<span style="color:var(--green);">&#x2713;</span>'
      : '<span style="color:var(--text-dim);">&ndash;</span>';
    return `<tr>
      <td style="padding:0.5rem 0.75rem;font-family:monospace;font-size:0.78rem;color:var(--text-dim);">${escHtml(String(ev.memory_id || '').slice(0, 8))}</td>
      <td style="padding:0.5rem 0.75rem;">${triggerBadge(ev.reason)}</td>
      <td style="padding:0.5rem 0.75rem;font-variant-numeric:tabular-nums;">${escHtml(vitality)}</td>
      <td style="padding:0.5rem 0.75rem;font-variant-numeric:tabular-nums;">${ev.fragments != null ? escHtml(ev.fragments) : '—'}</td>
      <td style="padding:0.5rem 0.75rem;text-align:center;">${scarMark}</td>
    </tr>`;
  }).join('');
  el.innerHTML = `
    <table style="width:100%;border-collapse:collapse;">
      <thead><tr>
        <th style="padding:0.45rem 0.75rem;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">Memory ID</th>
        <th style="padding:0.45rem 0.75rem;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">Reason</th>
        <th style="padding:0.45rem 0.75rem;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">Vitality at Death</th>
        <th style="padding:0.45rem 0.75rem;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">Fragments</th>
        <th style="padding:0.45rem 0.75rem;text-align:center;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">Scar Created</th>
      </tr></thead>
      <tbody style="font-size:0.82rem;">${rows}</tbody>
    </table>`;
}

// ── Primary fetch ─────────────────────────────────────────────────
async function loadApoptosisStats() {
  try {
    const resp = await fetch('/api/apoptosis-stats');
    if (!resp.ok) return;
    const data = await resp.json();
    renderApoptosisStats(data);
    renderPruningEvents(data);
    updateTriggerChart(data.trigger_counts || {});
    updateVitalityChart(data.vitality_at_death_values || data.vitalities || []);
  } catch (e) {
    console.warn('Apoptosis: stats load failed', e);
  }
}

// ── Boot ──────────────────────────────────────────────────────────
initTriggerChart();
initVitalityChart();

loadApoptosisStats();
setInterval(loadApoptosisStats, 10000);
</script>
{% endblock %}