{% extends "base.html" %}

{% block title %}Morphogen Landscape — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Morphogen Landscape</h1>
    <p class="subtitle">Adaptive response curves, signal trajectories, and system state</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('morphogens')" title="Help">? Help</button>
</div>

<div class="morphogen-layout">

  <!-- ── System State Badge (full width top) ──────────────────────── -->
  <div class="chart-card full-width" id="state-card">
    <h2>System State</h2>
    <div style="display:flex; align-items:center; gap:2rem; flex-wrap:wrap;">
      <span id="state-badge" class="state-badge state-flow">FLOW</span>
      <div class="morph-values" id="morph-values">
        <div class="morph-val">
          <span class="morph-val-label">Information Richness</span>
          <span class="morph-val-num" id="mv-richness">—</span>
        </div>
        <div class="morph-val">
          <span class="morph-val-label">Retrieval Pressure</span>
          <span class="morph-val-num" id="mv-pressure">—</span>
        </div>
        <div class="morph-val">
          <span class="morph-val-label">Domain Density</span>
          <span class="morph-val-num" id="mv-density">—</span>
        </div>
      </div>
    </div>
  </div>

  <!-- ── Trajectory Chart (full width) ───────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Morphogen Trajectory</h2>
    <div style="position:relative; height:260px;">
      <canvas id="trajectory-chart"></canvas>
    </div>
    <p style="font-size:0.75rem;color:var(--text-dim);margin-top:0.75rem;">
      Historical signal levels across sessions. Refreshes every 30 seconds.
    </p>
  </div>

  <!-- ── Response Curves Panel ────────────────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Response Curves
      <span id="convergence-summary" style="font-size:0.8rem;color:var(--text-dim);font-weight:400;margin-left:0.75rem;text-transform:none;letter-spacing:0;"></span>
    </h2>
    <div class="curves-grid" id="curves-grid">
      <div style="color:var(--text-dim);font-size:0.85rem;padding:1rem;">Loading curves…</div>
    </div>
  </div>

  <!-- ── Bandit Arm Distribution ──────────────────────────────────── -->
  <div class="chart-card">
    <h2>Thompson Sampling — Arm Distribution</h2>
    <div id="bandit-bars">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading bandit stats…</div>
    </div>
  </div>

  <!-- ── Convergence Gauges Summary ───────────────────────────────── -->
  <div class="chart-card">
    <h2>Convergence Gauges</h2>
    <div id="convergence-gauges">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading gauges…</div>
    </div>
  </div>

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


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

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

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

// ── Trajectory Chart ─────────────────────────────────────────────
let trajectoryChart = null;

function initTrajectoryChart() {
  const ctx = document.getElementById('trajectory-chart');
  if (!ctx) return;
  trajectoryChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [],
      datasets: [
        {
          label: 'Information Richness',
          data: [],
          borderColor: '#4a9eff',
          backgroundColor: 'rgba(74,158,255,0.08)',
          borderWidth: 2,
          pointRadius: 3,
          tension: 0.35,
          fill: true,
        },
        {
          label: 'Retrieval Pressure',
          data: [],
          borderColor: '#a855f7',
          backgroundColor: 'rgba(168,85,247,0.08)',
          borderWidth: 2,
          pointRadius: 3,
          tension: 0.35,
          fill: true,
        },
        {
          label: 'Domain Density',
          data: [],
          borderColor: '#ff6b35',
          backgroundColor: 'rgba(255,107,53,0.08)',
          borderWidth: 2,
          pointRadius: 3,
          tension: 0.35,
          fill: true,
        },
      ],
    },
    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: 12 },
        },
        y: {
          min: 0,
          max: 1,
          title: { display: true, text: 'Signal Level', color: '#6b7280', font: { size: 11 } },
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280', stepSize: 0.2 },
        },
      },
      plugins: {
        legend: {
          position: 'top',
          labels: { color: '#c8d6e5', padding: 16, font: { size: 12 } },
        },
        tooltip: {
          backgroundColor: '#111118',
          borderColor: '#1e293b',
          borderWidth: 1,
          titleColor: '#c8d6e5',
          bodyColor: '#6b7280',
        },
      },
    },
  });
}

async function loadTrajectory() {
  try {
    const resp = await fetch('/api/morphogen-trajectory');
    if (!resp.ok) return;
    const data = await resp.json();
    const pts = data.trajectory || [];
    if (!trajectoryChart) return;

    if (pts.length === 0) {
      // Show placeholder data so the chart is not blank
      trajectoryChart.data.labels = ['(no data)'];
      trajectoryChart.data.datasets[0].data = [null];
      trajectoryChart.data.datasets[1].data = [null];
      trajectoryChart.data.datasets[2].data = [null];
    } else {
      trajectoryChart.data.labels = pts.map(p => 'S' + p.session);
      trajectoryChart.data.datasets[0].data = pts.map(p => p.information_richness);
      trajectoryChart.data.datasets[1].data = pts.map(p => p.retrieval_pressure);
      trajectoryChart.data.datasets[2].data = pts.map(p => p.domain_density);
    }
    trajectoryChart.update();
  } catch (e) {
    console.warn('Morphogens: trajectory load failed', e);
  }
}

// ── Response Curves ───────────────────────────────────────────────
function convBadgeClass(midpointVar) {
  if (midpointVar < 0.01) return 'conv-green';
  if (midpointVar < 0.1)  return 'conv-yellow';
  return 'conv-red';
}

function convBadgeLabel(midpointVar) {
  if (midpointVar < 0.01) return 'Converged';
  if (midpointVar < 0.1)  return 'Settling';
  return 'Drifting';
}

function renderCurves(data) {
  const grid = document.getElementById('curves-grid');
  const summary = document.getElementById('convergence-summary');
  if (!grid) return;

  const curves = data.curves || [];
  if (curves.length === 0) {
    grid.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;padding:1rem;">No response curves available yet.</div>';
    if (summary) summary.textContent = '';
    return;
  }

  if (summary) {
    const n = data.converged_count || 0;
    const total = data.total || curves.length;
    const allConv = data.all_converged;
    summary.textContent = `${n} / ${total} converged` + (allConv ? ' — fully stable' : '');
  }

  grid.innerHTML = curves.map(c => {
    const badgeCls = convBadgeClass(c.midpoint_variance);
    const badgeLbl = convBadgeLabel(c.midpoint_variance);
    const weightsStr = c.morphogen_weights
      ? Object.entries(c.morphogen_weights).map(([k,v]) => `${k}: ${Number(v).toFixed(2)}`).join(', ')
      : '—';
    return `
      <div class="curve-card">
        <div class="curve-name">${escHtml(c.name)}</div>
        <div class="curve-params">
          <span>Midpoint: <b>${c.midpoint}</b></span>
          <span>Steepness: <b>${c.steepness}</b></span>
          <span>Base: <b>${c.base_value}</b></span>
          <span style="color:var(--text-dim)">Range: [${c.min_value}, ${c.max_value}]</span>
          <span style="color:var(--text-dim);font-size:0.7rem;margin-top:0.2rem;">${escHtml(weightsStr)}</span>
        </div>
        <span class="convergence-badge ${badgeCls}">${badgeLbl}</span>
      </div>`;
  }).join('');
}

async function loadCurves() {
  try {
    const resp = await fetch('/api/response-curves');
    if (!resp.ok) return;
    const data = await resp.json();
    renderCurves(data);
    renderConvergenceGauges(data);
  } catch (e) {
    console.warn('Morphogens: curves load failed', e);
  }
}

// ── Convergence Gauges ────────────────────────────────────────────
function renderConvergenceGauges(data) {
  const el = document.getElementById('convergence-gauges');
  if (!el) return;
  const curves = data.curves || [];
  if (curves.length === 0) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No curve data.</div>';
    return;
  }
  el.innerHTML = curves.map(c => {
    const badgeCls = convBadgeClass(c.midpoint_variance);
    const badgeLbl = convBadgeLabel(c.midpoint_variance);
    const varStr = c.midpoint_variance.toFixed(6);
    return `
      <div style="display:flex;justify-content:space-between;align-items:center;padding:0.35rem 0;border-bottom:1px solid var(--border);font-size:0.82rem;">
        <span style="color:var(--text-dim)">${escHtml(c.name)}</span>
        <span>
          <span style="font-size:0.75rem;color:var(--text-dim);margin-right:0.5rem;">var=${varStr}</span>
          <span class="convergence-badge ${badgeCls}">${badgeLbl}</span>
        </span>
      </div>`;
  }).join('');
}

// ── System State + Bandit ─────────────────────────────────────────
function renderSystemState(data) {
  const badge = document.getElementById('state-badge');
  const mvR    = document.getElementById('mv-richness');
  const mvP    = document.getElementById('mv-pressure');
  const mvD    = document.getElementById('mv-density');

  if (badge) {
    const state = (data.state || 'flow').toLowerCase();
    badge.textContent = state.toUpperCase();
    badge.className = 'state-badge';
    if (state === 'stress') badge.classList.add('state-stress');
    else if (state === 'curiosity') badge.classList.add('state-curiosity');
    else badge.classList.add('state-flow');
  }

  const m = data.morphogens || {};
  if (mvR) mvR.textContent = m.information_richness != null ? m.information_richness.toFixed(4) : '—';
  if (mvP) mvP.textContent = m.retrieval_pressure    != null ? m.retrieval_pressure.toFixed(4)  : '—';
  if (mvD) mvD.textContent = m.domain_density        != null ? m.domain_density.toFixed(4)      : '—';
}

function renderBandit(data) {
  const el = document.getElementById('bandit-bars');
  if (!el) return;
  const stats = data.bandit_stats || {};
  const entries = Object.entries(stats);
  if (entries.length === 0) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No bandit data available yet.</div>';
    return;
  }

  // Compute max for normalising bar widths
  const maxVal = Math.max(...entries.map(([, v]) => {
    const n = typeof v === 'object' ? (v.success_rate ?? v.rate ?? v.value ?? 0) : Number(v);
    return isNaN(n) ? 0 : n;
  }), 0.001);

  el.innerHTML = entries.map(([arm, val]) => {
    let rate, label;
    if (typeof val === 'object' && val !== null) {
      rate  = val.success_rate ?? val.rate ?? val.value ?? 0;
      label = val.label ?? arm;
    } else {
      rate  = Number(val) || 0;
      label = arm;
    }
    const pct   = Math.round(rate * 100);
    const width = Math.round((rate / maxVal) * 100);
    return `
      <div class="bandit-row">
        <span class="bandit-name">${escHtml(String(label).slice(0, 18))}</span>
        <div class="bandit-bar"><div class="bandit-fill" style="width:${width}%"></div></div>
        <span class="bandit-pct">${pct}%</span>
      </div>`;
  }).join('');
}

async function loadSystemState() {
  try {
    const resp = await fetch('/api/system-state');
    if (!resp.ok) return;
    const data = await resp.json();
    renderSystemState(data);
    renderBandit(data);
  } catch (e) {
    console.warn('Morphogens: system-state load failed', e);
  }
}

// ── Boot ──────────────────────────────────────────────────────────
initTrajectoryChart();

loadTrajectory();
loadCurves();
loadSystemState();

setInterval(loadSystemState, 5000);
setInterval(loadTrajectory,  30000);
setInterval(loadCurves,      30000);
</script>
{% endblock %}