{% extends "base.html" %}

{% block title %}Dream Cycles — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Dream Cycles</h1>
    <p class="subtitle">Slow-wave consolidation, REM recombination, and dawn resets</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('dreaming')" title="Help">? Help</button>
</div>

<div class="dreaming-layout">

  <!-- ── Last Dream Cycle (full width) ────────────────────────────── -->
  <div class="chart-card full-width" id="last-dream-card">
    <h2>Last Dream Cycle</h2>
    <div id="last-dream-body">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading…</div>
    </div>
  </div>

  <!-- ── Dream History Chart (full width) ─────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Dream History</h2>
    <div style="position:relative;height:260px;">
      <canvas id="dream-history-chart"></canvas>
    </div>
    <p style="font-size:0.75rem;color:var(--text-dim);margin-top:0.75rem;">
      Edges decayed and syntheses stored per session. Last 20 sessions. Refreshes every 30 seconds.
    </p>
  </div>

  <!-- ── REM Efficiency (half width) ──────────────────────────────── -->
  <div class="chart-card" id="rem-efficiency-card">
    <h2>REM Efficiency</h2>
    <div style="position:relative;height:220px;display:flex;align-items:center;justify-content:center;">
      <canvas id="rem-donut-chart"></canvas>
    </div>
    <div id="rem-legend" style="display:flex;gap:1rem;flex-wrap:wrap;margin-top:0.75rem;font-size:0.78rem;"></div>
  </div>

  <!-- ── Slow Wave Stats (half width) ──────────────────────────────── -->
  <div class="chart-card" id="slow-wave-stats-card">
    <h2>Slow Wave — All-time Totals</h2>
    <div id="slow-wave-stats-body">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading…</div>
    </div>
  </div>

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


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

// ── Last Dream Cycle ──────────────────────────────────────────────
let lastDreamData = null;

function renderLastDreamCycle(data) {
  const el = document.getElementById('last-dream-body');
  if (!el) return;

  const last = data.last_cycle;
  if (!last) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No dream cycles recorded yet.</div>';
    return;
  }

  const sw = last.slow_wave || {};
  const rem = last.rem || {};

  const banditsLabel = sw.bandits_downscaled
    ? '<span style="display:inline-block;padding:1px 8px;border-radius:10px;font-size:0.75rem;background:#34d39920;color:var(--green);border:1px solid var(--green);">Yes</span>'
    : '<span style="display:inline-block;padding:1px 8px;border-radius:10px;font-size:0.75rem;background:#ff2d5520;color:var(--red);border:1px solid var(--red);">No</span>';

  const attempted = Number(rem.syntheses_attempted) || 0;
  const stored    = Number(rem.syntheses_stored) || 0;
  const successRate = attempted > 0 ? Math.round((stored / attempted) * 100) : 0;

  el.innerHTML = `
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">
      <div>
        <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);margin-bottom:0.75rem;font-weight:600;">Slow Wave</div>
        <div class="stat-row"><span class="stat-label">Edges Decayed</span><span class="stat-value blue">${sw.edges_decayed != null ? escHtml(sw.edges_decayed) : '—'}</span></div>
        <div class="stat-row"><span class="stat-label">Edges Pruned</span><span class="stat-value orange">${sw.edges_pruned != null ? escHtml(sw.edges_pruned) : '—'}</span></div>
        <div class="stat-row"><span class="stat-label">Edges Remaining</span><span class="stat-value">${sw.edges_remaining != null ? escHtml(sw.edges_remaining) : '—'}</span></div>
        <div class="stat-row"><span class="stat-label">Bandits Downscaled</span><span>${banditsLabel}</span></div>
      </div>
      <div>
        <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);margin-bottom:0.75rem;font-weight:600;">REM</div>
        <div class="stat-row"><span class="stat-label">Pairs Evaluated</span><span class="stat-value">${rem.pairs_evaluated != null ? escHtml(rem.pairs_evaluated) : '—'}</span></div>
        <div class="stat-row"><span class="stat-label">Syntheses Attempted</span><span class="stat-value">${rem.syntheses_attempted != null ? escHtml(rem.syntheses_attempted) : '—'}</span></div>
        <div class="stat-row"><span class="stat-label">Syntheses Stored</span><span class="stat-value" style="color:var(--green);">${rem.syntheses_stored != null ? escHtml(rem.syntheses_stored) : '—'}</span></div>
        <div class="stat-row"><span class="stat-label">Syntheses Discarded</span><span class="stat-value red">${rem.syntheses_discarded != null ? escHtml(rem.syntheses_discarded) : '—'}</span></div>
        <div class="stat-row"><span class="stat-label">Success Rate</span><span class="stat-value purple">${successRate}%</span></div>
      </div>
    </div>
    <div style="margin-top:1rem;padding-top:0.75rem;border-top:1px solid var(--border);font-size:0.82rem;color:var(--text-dim);">
      Duration: <strong style="color:var(--text);">${last.duration_s != null ? Number(last.duration_s).toFixed(1) + 's' : '—'}</strong>
    </div>`;

  updateRemDonut(rem);
}

// ── REM Efficiency Donut ──────────────────────────────────────────
let remDonutChart = null;

function initRemDonut() {
  const ctx = document.getElementById('rem-donut-chart');
  if (!ctx) return;
  remDonutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ['Stored', 'Discarded', 'Not Attempted'],
      datasets: [{
        data: [0, 0, 1],
        backgroundColor: ['#34d39944', '#ff2d5544', '#6b728044'],
        borderColor:     ['#34d399',   '#ff2d55',   '#6b7280'],
        borderWidth: 2,
      }],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      cutout: '62%',
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: '#111118',
          borderColor: '#1e293b',
          borderWidth: 1,
          titleColor: '#c8d6e5',
          bodyColor: '#6b7280',
        },
      },
    },
  });
}

function updateRemDonut(rem) {
  if (!remDonutChart) return;
  const stored    = Number(rem.syntheses_stored)    || 0;
  const discarded = Number(rem.syntheses_discarded) || 0;
  const attempted = Number(rem.syntheses_attempted) || 0;
  const evaluated = Number(rem.pairs_evaluated)     || 0;
  const notAttempted = Math.max(evaluated - attempted, 0);

  remDonutChart.data.datasets[0].data = [stored, discarded, notAttempted];
  remDonutChart.update();

  const legend = document.getElementById('rem-legend');
  if (legend) {
    legend.innerHTML = [
      { color: '#34d399', label: 'Stored', val: stored },
      { color: '#ff2d55', label: 'Discarded', val: discarded },
      { color: '#6b7280', label: 'Not Attempted', val: notAttempted },
    ].map(item =>
      `<span style="display:flex;align-items:center;gap:0.4rem;">
        <span style="width:10px;height:10px;border-radius:50%;background:${item.color};flex-shrink:0;"></span>
        <span style="color:var(--text-dim);">${item.label}</span>
        <strong style="color:var(--text);">${item.val}</strong>
      </span>`
    ).join('');
  }
}

// ── Dream History Chart ───────────────────────────────────────────
let dreamHistoryChart = null;

function initDreamHistoryChart() {
  const ctx = document.getElementById('dream-history-chart');
  if (!ctx) return;
  dreamHistoryChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [],
      datasets: [
        {
          label: 'Edges Decayed',
          data: [],
          backgroundColor: 'rgba(74,158,255,0.55)',
          borderColor: '#4a9eff',
          borderWidth: 1,
        },
        {
          label: 'Syntheses Stored',
          data: [],
          backgroundColor: 'rgba(168,85,247,0.55)',
          borderColor: '#a855f7',
          borderWidth: 1,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 400 },
      scales: {
        x: {
          title: { display: true, text: 'Session', color: '#6b7280', font: { size: 11 } },
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280', maxTicksLimit: 20 },
        },
        y: {
          beginAtZero: true,
          title: { display: true, text: 'Count', color: '#6b7280', font: { size: 11 } },
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280' },
        },
      },
      plugins: {
        legend: {
          position: 'top',
          labels: { color: '#c8d6e5', padding: 16, font: { size: 12 } },
        },
        tooltip: {
          backgroundColor: '#111118',
          borderColor: '#1e293b',
          borderWidth: 1,
          titleColor: '#c8d6e5',
          bodyColor: '#6b7280',
        },
      },
    },
  });
}

function updateDreamHistoryChart(history) {
  if (!dreamHistoryChart) return;
  const sessions = history.slice(-20);
  dreamHistoryChart.data.labels   = sessions.map((_, i) => 'S' + (i + 1));
  dreamHistoryChart.data.datasets[0].data = sessions.map(s => s.edges_decayed     || 0);
  dreamHistoryChart.data.datasets[1].data = sessions.map(s => s.syntheses_stored  || 0);
  dreamHistoryChart.update();
}

// ── Slow Wave All-time Stats ──────────────────────────────────────
function renderSlowWaveStats(data) {
  const el = document.getElementById('slow-wave-stats-body');
  if (!el) return;
  const totals = data.totals || {};
  el.innerHTML = `
    <div class="stat-row"><span class="stat-label">Total Dream Cycles Run</span><span class="stat-value blue">${totals.dream_cycles_run != null ? escHtml(totals.dream_cycles_run) : '—'}</span></div>
    <div class="stat-row"><span class="stat-label">Total Edges Decayed</span><span class="stat-value">${totals.edges_decayed != null ? escHtml(totals.edges_decayed) : '—'}</span></div>
    <div class="stat-row"><span class="stat-label">Total Edges Pruned</span><span class="stat-value orange">${totals.edges_pruned != null ? escHtml(totals.edges_pruned) : '—'}</span></div>
    <div class="stat-row"><span class="stat-label">Total Syntheses Attempted</span><span class="stat-value">${totals.syntheses_attempted != null ? escHtml(totals.syntheses_attempted) : '—'}</span></div>
    <div class="stat-row"><span class="stat-label">Total Syntheses Stored</span><span class="stat-value" style="color:var(--green);">${totals.syntheses_stored != null ? escHtml(totals.syntheses_stored) : '—'}</span></div>`;
}

// ── Primary fetch ─────────────────────────────────────────────────
async function loadDreamStats() {
  try {
    const resp = await fetch('/api/dream-stats');
    if (!resp.ok) return;
    const data = await resp.json();
    lastDreamData = data;
    renderLastDreamCycle(data);
    renderSlowWaveStats(data);
  } catch (e) {
    console.warn('Dreaming: dream-stats load failed', e);
  }
}

async function loadDreamHistory() {
  try {
    const resp = await fetch('/api/dream-history');
    if (!resp.ok) return;
    const data = await resp.json();
    updateDreamHistoryChart(data.history || []);
  } catch (e) {
    console.warn('Dreaming: dream-history load failed', e);
  }
}

// ── Boot ──────────────────────────────────────────────────────────
initRemDonut();
initDreamHistoryChart();

loadDreamStats();
loadDreamHistory();

setInterval(loadDreamStats,   15000);
setInterval(loadDreamHistory, 30000);
</script>
{% endblock %}