{% extends "base.html" %}

{% block title %}Working Memory Buffer — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Working Memory Buffer</h1>
    <p class="subtitle">Pinned memories, habituation suppression, and access patterns</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('buffer')" title="Help">? Help</button>
</div>

<div class="buffer-layout">

  <!-- ── 1. Buffer Composition (full-width) ─────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Buffer Composition
      <span id="buf-turn-counter" style="font-size:0.78rem;color:var(--text-dim);font-weight:400;margin-left:0.75rem;text-transform:none;letter-spacing:0;"></span>
    </h2>
    <div id="buf-composition-content">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading buffer…</div>
    </div>
  </div>

  <!-- ── 2. Access Heatmap (full-width) ─────────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Access Heatmap</h2>
    <div style="position:relative;height:280px;">
      <canvas id="access-heatmap-chart"></canvas>
    </div>
  </div>

  <!-- ── 3. Habituation (half-width) ────────────────────────────────── -->
  <div class="chart-card">
    <h2>Habituation</h2>
    <div id="habituation-content">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading habituation data…</div>
    </div>
  </div>

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

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


{% block scripts %}
<script>
/* ================================================================
   Working Memory Buffer — polling + Chart.js
   ================================================================ */

// ── Utility ───────────────────────────────────────────────────────
function escHtml(str) {
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

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

// ── Badge helpers ─────────────────────────────────────────────────
function memBadge(id, color) {
  return `<span style="display:inline-block;font-family:monospace;font-size:0.72rem;padding:2px 7px;border-radius:4px;background:${color}22;color:${color};border:1px solid ${color}55;margin:2px;">${escHtml(String(id).slice(0, 8))}</span>`;
}

function sectionBadges(ids, color) {
  if (!ids || ids.length === 0) return '<span style="color:var(--text-dim);font-size:0.82rem;">—</span>';
  return ids.map(id => memBadge(id, color)).join('');
}

// ── 1. Buffer Composition ─────────────────────────────────────────
function renderBufferComposition(data) {
  const el = document.getElementById('buf-composition-content');
  const tc = document.getElementById('buf-turn-counter');
  if (!el) return;

  const buf = data.buffer || data;
  const pinned        = buf.pinned        || [];
  const auto_promoted = buf.auto_promoted || [];
  const just_written  = buf.just_written  || [];
  const recent        = (buf.recent       || []).slice(0, 10);
  const turn          = buf.turn_counter  != null ? buf.turn_counter : (data.turn_counter != null ? data.turn_counter : null);
  const soft_cap      = buf.soft_cap      != null ? buf.soft_cap     : (data.soft_cap     != null ? data.soft_cap     : null);

  if (tc) {
    const parts = [];
    if (turn    != null) parts.push(`Turn ${escHtml(String(turn))}`);
    if (soft_cap != null) parts.push(`Soft cap: ${escHtml(String(soft_cap))}`);
    tc.textContent = parts.join(' · ');
  }

  const sections = [
    { label: 'PINNED',         ids: pinned,        color: '#22d3ee' },
    { label: 'AUTO-PROMOTED',  ids: auto_promoted, color: '#22c55e' },
    { label: 'JUST WRITTEN',   ids: just_written,  color: '#4a9eff' },
    { label: 'RECENT (top 10)', ids: recent,        color: '#6b7280' },
  ];

  el.innerHTML = sections.map(s => `
    <div style="display:flex;align-items:flex-start;gap:0.75rem;padding:0.5rem 0;border-bottom:1px solid var(--border);">
      <span style="flex-shrink:0;width:130px;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);padding-top:4px;">${escHtml(s.label)}</span>
      <div style="flex:1;">${sectionBadges(s.ids, s.color)}</div>
      <span style="flex-shrink:0;font-size:0.72rem;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:1px 8px;color:var(--text-dim);">${s.ids.length}</span>
    </div>`).join('');
}

// ── 2. Access Heatmap chart ───────────────────────────────────────
let accessHeatmapChart = null;

function initAccessHeatmapChart() {
  const ctx = document.getElementById('access-heatmap-chart');
  if (!ctx) return;
  accessHeatmapChart = new Chart(ctx, {
    type: 'bar',
    data: { labels: [], datasets: [{ label: 'Access count', data: [], backgroundColor: '#4a9eff', borderWidth: 0, borderRadius: 4 }] },
    options: {
      indexAxis: 'y',
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 400 },
      scales: {
        x: { grid: { color: '#1e293b' }, ticks: { color: '#6b7280' }, beginAtZero: true },
        y: { grid: { color: 'transparent' }, ticks: { color: '#c8d6e5', font: { size: 11, family: 'monospace' } } },
      },
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: '#111118', borderColor: '#1e293b', borderWidth: 1,
          titleColor: '#c8d6e5', bodyColor: '#6b7280',
        },
      },
    },
  });
}

function updateAccessHeatmap(data) {
  if (!accessHeatmapChart) return;
  const access = data.access_counts || data.buffer?.access_counts || {};
  const sorted = Object.entries(access)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 20);
  accessHeatmapChart.data.labels = sorted.map(([id]) => String(id).slice(0, 8));
  accessHeatmapChart.data.datasets[0].data = sorted.map(([, cnt]) => cnt);
  accessHeatmapChart.update();
}

// ── 3. Habituation ────────────────────────────────────────────────
function renderHabituation(data) {
  const el = document.getElementById('habituation-content');
  if (!el) return;
  const rawHab = data.habituation || data.buffer?.habituation || [];
  // API returns a list of {id, count, habituated} dicts — convert to [id, count] entries
  const entries = (Array.isArray(rawHab) ? rawHab.map(h => [h.id, h.count]) : Object.entries(rawHab))
    .sort((a, b) => b[1] - a[1]).slice(0, 15);
  const threshold = data.habituation_threshold || data.buffer?.habituation_threshold || 3;
  const suppressed = entries.filter(([, c]) => c >= threshold).length;

  if (entries.length === 0) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No habituation data.</div>';
    return;
  }

  el.innerHTML = `
    <div style="overflow-x:auto;">
      <table class="data-table">
        <thead>
          <tr>
            <th>Memory ID</th>
            <th>Habituation Count</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          ${entries.map(([id, count]) => {
            const isHab = count >= threshold;
            const statusBadge = isHab
              ? `<span style="background:#ef444422;color:#ef4444;border:1px solid #ef444466;padding:1px 6px;border-radius:4px;font-size:0.72rem;">Habituated</span>`
              : `<span style="background:#22c55e22;color:#22c55e;border:1px solid #22c55e66;padding:1px 6px;border-radius:4px;font-size:0.72rem;">Active</span>`;
            return `
              <tr>
                <td style="font-family:monospace;font-size:0.78rem;color:var(--text-dim);">${escHtml(String(id).slice(0, 8))}</td>
                <td style="font-variant-numeric:tabular-nums;">${escHtml(String(count))}</td>
                <td>${statusBadge}</td>
              </tr>`;
          }).join('')}
        </tbody>
      </table>
    </div>
    <p style="font-size:0.78rem;color:var(--text-dim);margin-top:0.75rem;">${suppressed} memor${suppressed !== 1 ? 'ies' : 'y'} currently suppressed</p>
  `;
}

// ── 4. Buffer Stats ───────────────────────────────────────────────
function renderBufferStats(data) {
  const el = document.getElementById('buffer-stats-content');
  if (!el) return;
  const buf = data.buffer || data;
  const pinned        = (buf.pinned        || []).length;
  const auto_promoted = (buf.auto_promoted || []).length;
  const just_written  = (buf.just_written  || []).length;
  const recent        = (buf.recent        || []).length;
  const total_buf     = pinned + auto_promoted + just_written + recent;
  const soft_cap      = buf.soft_cap     != null ? buf.soft_cap     : (data.soft_cap     != null ? data.soft_cap     : '—');
  const turn          = buf.turn_counter  != null ? buf.turn_counter : (data.turn_counter  != null ? data.turn_counter  : '—');
  const hab           = Object.keys(buf.habituation || data.habituation || {}).length;

  const rows = [
    { label: 'Buffer size',    value: `${total_buf} / ${soft_cap}` },
    { label: 'Pinned',         value: String(pinned) },
    { label: 'Auto-promoted',  value: String(auto_promoted) },
    { label: 'Just written',   value: String(just_written) },
    { label: 'Recent',         value: String(recent) },
    { label: 'Total turns',    value: String(turn) },
    { label: 'Habituated',     value: String(hab) },
  ];

  el.innerHTML = rows.map(r => `
    <div class="stat-row">
      <span class="stat-label">${escHtml(r.label)}</span>
      <span class="stat-value blue">${escHtml(r.value)}</span>
    </div>`).join('');
}

// ── Combined loader ───────────────────────────────────────────────
async function loadBufferState() {
  try {
    const resp = await fetch('/api/buffer-state');
    if (!resp.ok) return;
    const data = await resp.json();
    renderBufferComposition(data);
    renderBufferStats(data);
  } catch (e) {
    console.warn('Buffer: buffer-state load failed', e);
  }
}

async function loadBufferStateSlow() {
  try {
    const resp = await fetch('/api/buffer-state');
    if (!resp.ok) return;
    const data = await resp.json();
    updateAccessHeatmap(data);
    renderHabituation(data);
  } catch (e) {
    console.warn('Buffer: buffer-state (slow) load failed', e);
  }
}

// ── Boot ──────────────────────────────────────────────────────────
initAccessHeatmapChart();

loadBufferState();
loadBufferStateSlow();

setInterval(loadBufferState,     3000);
setInterval(loadBufferStateSlow, 5000);
</script>
{% endblock %}