{% extends "base.html" %}

{% block title %}Dimensional Folding — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Dimensional Folding</h1>
    <p class="subtitle">Operational regime — BOOTSTRAP, LEARNING, MATURE — and anomaly-triggered unfolds</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('folding')" title="Help">? Help</button>
</div>

<div class="folding-layout">

  <!-- ── Current Regime (full width) ──────────────────────────────── -->
  <div class="chart-card full-width" id="folding-regime-card">
    <h2>Current Regime</h2>
    <div id="folding-regime-body">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading…</div>
    </div>
  </div>

  <!-- ── Folded Stats (half width) ─────────────────────────────────── -->
  <div class="chart-card" id="folded-stats-card">
    <h2>Folded Stats</h2>
    <div id="folded-stats-body">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading…</div>
    </div>
  </div>

  <!-- ── Forced Unfold Events (half width) ─────────────────────────── -->
  <div class="chart-card" id="forced-unfold-card">
    <h2>Forced Unfold Events</h2>
    <div id="forced-unfold-body">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading…</div>
    </div>
  </div>

  <!-- ── Anomaly History Chart (full width) ────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Anomaly History — Rolling Window</h2>
    <div style="position:relative;height:280px;">
      <canvas id="anomaly-history-chart"></canvas>
    </div>
    <p style="font-size:0.75rem;color:var(--text-dim);margin-top:0.75rem;">
      Rolling anomaly score per subsystem over the last 10 sessions. Refreshes every 5 seconds.
    </p>
  </div>

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


{% block scripts %}
<script>
/* ================================================================
   Dimensional Folding — 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';

// ── Regime badge helpers ──────────────────────────────────────────
const REGIME_STYLES = {
  BOOTSTRAP: { color: 'var(--text-dim)', bg: '#6b728022', border: '#6b728066' },
  LEARNING:  { color: '#f5c518',         bg: '#f5c51822', border: '#f5c518' },
  MATURE:    { color: '#22d3ee',         bg: '#22d3ee22', border: '#22d3ee' },
};

function regimeBadge(regime) {
  const key = (regime || 'BOOTSTRAP').toUpperCase();
  const s = REGIME_STYLES[key] || REGIME_STYLES['BOOTSTRAP'];
  return `<span style="display:inline-block;padding:0.4rem 1.4rem;border-radius:20px;font-size:1.2rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:${s.color};background:${s.bg};border:1px solid ${s.border};">${escHtml(key)}</span>`;
}

function subsystemBadge(name, folded) {
  if (folded) {
    return `<span style="display:inline-block;padding:2px 10px;border-radius:12px;font-size:0.75rem;font-weight:500;color:var(--text-dim);background:var(--bg3);border:1px solid var(--border);opacity:0.6;">${escHtml(name)}</span>`;
  }
  return `<span style="display:inline-block;padding:2px 10px;border-radius:12px;font-size:0.75rem;font-weight:600;color:var(--green);background:#34d39920;border:1px solid var(--green);">${escHtml(name)}</span>`;
}

// ── Render Current Regime ─────────────────────────────────────────
function renderRegime(data) {
  const el = document.getElementById('folding-regime-body');
  if (!el) return;

  const regime = (data.regime || 'BOOTSTRAP').toUpperCase();
  const active = data.active_subsystems  || [];
  const folded = data.folded_subsystems  || [];
  const converged = data.morphogens_converged;
  const sessionCount = data.session_count;
  const memoryCount  = data.memory_count;

  const convLabel = converged
    ? '<span style="color:var(--green);font-weight:600;">Yes</span>'
    : '<span style="color:#f5c518;font-weight:600;">No</span>';

  const activeBadges = active.length
    ? active.map(s => subsystemBadge(s, false)).join(' ')
    : '<span style="color:var(--text-dim);font-size:0.82rem;">None</span>';

  const foldedBadges = folded.length
    ? folded.map(s => subsystemBadge(s, true)).join(' ')
    : '<span style="color:var(--text-dim);font-size:0.82rem;">None</span>';

  el.innerHTML = `
    <div style="display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-bottom:1.25rem;">
      ${regimeBadge(regime)}
      <div style="display:flex;gap:2rem;flex-wrap:wrap;">
        <div>
          <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);">Sessions</div>
          <div style="font-size:1.3rem;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;">${sessionCount != null ? escHtml(sessionCount) : '—'}</div>
        </div>
        <div>
          <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);">Memories</div>
          <div style="font-size:1.3rem;font-weight:700;color:var(--purple);font-variant-numeric:tabular-nums;">${memoryCount != null ? escHtml(memoryCount) : '—'}</div>
        </div>
        <div>
          <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);">Morphogens Converged</div>
          <div style="font-size:0.92rem;margin-top:0.2rem;">${convLabel}</div>
        </div>
      </div>
    </div>
    <div style="display:flex;gap:2rem;flex-wrap:wrap;">
      <div>
        <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:0.4rem;">Active Subsystems</div>
        <div style="display:flex;flex-wrap:wrap;gap:0.4rem;">${activeBadges}</div>
      </div>
      <div>
        <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:0.4rem;">Folded (Inactive)</div>
        <div style="display:flex;flex-wrap:wrap;gap:0.4rem;">${foldedBadges}</div>
      </div>
    </div>`;
}

// ── Render Folded Stats table ─────────────────────────────────────
function renderFoldedStats(data) {
  const el = document.getElementById('folded-stats-body');
  if (!el) return;
  // subsystem_stats (array) or folded_stats (dict) — handle both
  let subsystems = data.subsystem_stats || [];
  if (!subsystems.length && data.folded_stats) {
    const active = new Set(data.active_subsystems || []);
    subsystems = Object.entries(data.folded_stats).map(([name, stat]) => ({
      name, folded_stat: stat, folded: !active.has(name),
    }));
  }
  if (!subsystems.length) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No subsystem data available.</div>';
    return;
  }
  const rows = subsystems.map(s => {
    const statusLabel = s.folded
      ? '<span style="color:var(--text-dim);">Folded</span>'
      : '<span style="color:var(--green);">Active</span>';
    const stat = s.folded_stat != null ? escHtml(s.folded_stat) : '&mdash;';
    return `<tr>
      <td style="padding:0.45rem 0.65rem;color:var(--text);">${escHtml(s.name)}</td>
      <td style="padding:0.45rem 0.65rem;font-variant-numeric:tabular-nums;color:var(--text-dim);">${stat}</td>
      <td style="padding:0.45rem 0.65rem;">${statusLabel}</td>
    </tr>`;
  }).join('');
  el.innerHTML = `
    <table style="width:100%;border-collapse:collapse;font-size:0.83rem;">
      <thead><tr>
        <th style="padding:0.4rem 0.65rem;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">Subsystem</th>
        <th style="padding:0.4rem 0.65rem;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">Folded Stat</th>
        <th style="padding:0.4rem 0.65rem;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">Status</th>
      </tr></thead>
      <tbody>${rows}</tbody>
    </table>`;
}

// ── Render Forced Unfold Events ───────────────────────────────────
function renderForcedUnfolds(data) {
  const el = document.getElementById('forced-unfold-body');
  if (!el) return;
  const events = data.forced_unfold_events || data.unfold_events || [];
  if (!events.length) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;padding:1.5rem;text-align:center;">No forced unfolds recorded.</div>';
    return;
  }
  const rows = events.map(ev => `
    <tr>
      <td style="padding:0.45rem 0.65rem;color:var(--text);">${escHtml(ev.subsystem || '—')}</td>
      <td style="padding:0.45rem 0.65rem;font-variant-numeric:tabular-nums;color:var(--text-dim);">${ev.session_triggered != null ? escHtml(ev.session_triggered) : '—'}</td>
      <td style="padding:0.45rem 0.65rem;font-variant-numeric:tabular-nums;color:var(--red);">${ev.z_score != null ? Number(ev.z_score).toFixed(3) : '—'}</td>
    </tr>`).join('');
  el.innerHTML = `
    <table style="width:100%;border-collapse:collapse;font-size:0.83rem;">
      <thead><tr>
        <th style="padding:0.4rem 0.65rem;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">Subsystem</th>
        <th style="padding:0.4rem 0.65rem;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">Session</th>
        <th style="padding:0.4rem 0.65rem;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">Z-Score</th>
      </tr></thead>
      <tbody>${rows}</tbody>
    </table>`;
}

// ── Anomaly History Chart ─────────────────────────────────────────
let anomalyChart = null;

const SUBSYSTEM_COLORS = [
  '#4a9eff', '#a855f7', '#ff6b35', '#34d399', '#ff2d55', '#22d3ee', '#f5c518', '#e879f9',
];

function initAnomalyChart() {
  const ctx = document.getElementById('anomaly-history-chart');
  if (!ctx) return;
  anomalyChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['1','2','3','4','5','6','7','8','9','10'],
      datasets: [],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 400 },
      scales: {
        x: {
          title: { display: true, text: 'Session Index', color: '#6b7280', font: { size: 11 } },
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280' },
        },
        y: {
          beginAtZero: true,
          title: { display: true, text: 'Anomaly Score', color: '#6b7280', font: { size: 11 } },
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280' },
        },
      },
      plugins: {
        legend: {
          position: 'top',
          labels: { color: '#c8d6e5', padding: 14, font: { size: 11 } },
        },
        tooltip: {
          backgroundColor: '#111118',
          borderColor: '#1e293b',
          borderWidth: 1,
          titleColor: '#c8d6e5',
          bodyColor: '#6b7280',
        },
      },
    },
  });
}

function updateAnomalyChart(data) {
  if (!anomalyChart) return;
  const windows = data.anomaly_windows || data.anomaly_history || {};
  const entries = Object.entries(windows);

  anomalyChart.data.datasets = entries.map(([name, values], i) => {
    const color = SUBSYSTEM_COLORS[i % SUBSYSTEM_COLORS.length];
    const pts = (values || []).slice(-10);
    return {
      label: name,
      data: pts,
      borderColor: color,
      backgroundColor: color + '18',
      borderWidth: 2,
      pointRadius: 3,
      tension: 0.3,
      fill: false,
    };
  });

  anomalyChart.data.labels = Array.from({ length: 10 }, (_, i) => String(i + 1));
  anomalyChart.update();
}

// ── Primary fetch ─────────────────────────────────────────────────
async function loadFoldingState() {
  try {
    const resp = await fetch('/api/folding-state');
    if (!resp.ok) return;
    const data = await resp.json();
    renderRegime(data);
    renderFoldedStats(data);
    renderForcedUnfolds(data);
    updateAnomalyChart(data);
  } catch (e) {
    console.warn('Folding: folding-state load failed', e);
  }
}

// ── Boot ──────────────────────────────────────────────────────────
initAnomalyChart();

loadFoldingState();
setInterval(loadFoldingState, 5000);
</script>
{% endblock %}