{% extends "base.html" %}
{% block title %}Lifecycle Chrysalis — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Lifecycle Chrysalis</h1>
    <p class="subtitle">Maturation rings — how memories evolve over time</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('lifecycle')" title="Help">? Help</button>
</div>

<div class="lifecycle-layout">
  <div class="chrysalis-container">
    <canvas id="lifecycle-chart"></canvas>
  </div>

  <div class="lifecycle-stats"
       hx-get="/api/lifecycle-distribution"
       hx-trigger="load, every 10s"
       hx-swap="innerHTML"
       hx-target="this">
    <div class="stat-row"><span>Loading…</span></div>
  </div>
</div>

<div class="lifecycle-legend">
  <div class="legend-item"><span class="dot" style="background:#ff6b35"></span>Probation — new, unverified</div>
  <div class="legend-item"><span class="dot" style="background:#4a9eff"></span>Confirmed — reinforced by use</div>
  <div class="legend-item"><span class="dot" style="background:#a855f7"></span>Permanent — chronic, always loaded</div>
  <div class="legend-item"><span class="dot" style="background:#ff2d55"></span>Safety-Critical — always bootstrapped</div>
</div>
{% endblock %}

{% block scripts %}
<script>
let lifecycleChart = null;

function initChart(data) {
  const ctx = document.getElementById("lifecycle-chart").getContext("2d");
  const labels = ["Probation", "Confirmed", "Permanent", "Safety-Critical"];
  const values = [data.probation || 0, data.confirmed || 0, data.permanent || 0, data.safety_critical || 0];
  const colors = ["#ff6b35", "#4a9eff", "#a855f7", "#ff2d55"];

  if (lifecycleChart) {
    lifecycleChart.data.datasets[0].data = values;
    lifecycleChart.update();
    return;
  }

  lifecycleChart = new Chart(ctx, {
    type: "polarArea",
    data: {
      labels,
      datasets: [{
        data: values,
        backgroundColor: colors.map(c => c + "99"),
        borderColor: colors,
        borderWidth: 2,
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { labels: { color: "#c8d6e5" } },
        title: { display: false },
      },
      scales: {
        r: {
          ticks: { color: "#6b7280", backdropColor: "transparent" },
          grid: { color: "#1e293b" },
        }
      }
    }
  });
}

function renderStats(data) {
  const container = document.querySelector(".lifecycle-stats");
  if (!container) return;
  container.innerHTML = `
    <div class="stat-row"><span class="stat-label">Total</span><span class="stat-value">${data.total}</span></div>
    <div class="stat-row"><span class="stat-label">Probation</span><span class="stat-value orange">${data.probation}</span></div>
    <div class="stat-row"><span class="stat-label">Confirmed</span><span class="stat-value blue">${data.confirmed}</span></div>
    <div class="stat-row"><span class="stat-label">Permanent</span><span class="stat-value purple">${data.permanent}</span></div>
    <div class="stat-row"><span class="stat-label">Safety-Critical</span><span class="stat-value red">${data.safety_critical}</span></div>
    <hr class="divider"/>
    <div class="stat-row"><span class="stat-label">Promotion Rate</span><span class="stat-value">${data.promotion_rate}%</span></div>
    <div class="stat-row"><span class="stat-label">Pruning Rate</span><span class="stat-value">${data.pruning_rate}%</span></div>
  `;
  initChart(data);
}

// Initial load + HTMX refresh hook
fetch("/api/lifecycle-distribution").then(r => r.json()).then(renderStats);
document.body.addEventListener("htmx:afterSwap", function(evt) {
  if (evt.detail.target.classList.contains("lifecycle-stats")) {
    try { renderStats(JSON.parse(evt.detail.xhr.responseText)); } catch(e) {}
  }
});
</script>
{% endblock %}