{% extends "base.html" %}

{% block title %}Organism Health — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Organism Health</h1>
    <p class="subtitle">Self-model — health metrics, domain maturity, and parameter drift</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('organism')" title="Help">? Help</button>
</div>

<div class="organism-layout">

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

  <!-- ── Domain Maturity ───────────────────────────────────────────── -->
  <div class="chart-card full-width" id="domain-maturity-card">
    <h2>Domain Maturity</h2>
    <div class="domain-maturity-grid" id="domain-maturity-grid">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading…</div>
    </div>
  </div>

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

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

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

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


{% block scripts %}
<script>
/* ================================================================
   Organism Health — polling + rendering
   ================================================================ */

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';

// ── Health Snapshot ───────────────────────────────────────────────
function renderHealthSnapshot(data) {
  const el = document.getElementById('health-snapshot-body');
  if (!el) return;

  const hitRate = data.retrieval_hit_rate != null ? data.retrieval_hit_rate : null;
  const hitPct  = hitRate != null ? Math.round(hitRate * 100) : 0;

  const mc = data.morphogen_convergence || {};
  const converged = mc.converged === true;
  const convBadge = converged
    ? '<span style="display:inline-block;padding:2px 10px;border-radius:12px;font-size:0.78rem;font-weight:600;background:#34d39922;color:var(--green);border:1px solid var(--green);">Converged</span>'
    : '<span style="display:inline-block;padding:2px 10px;border-radius:12px;font-size:0.78rem;font-weight:600;background:#f5c51822;color:#f5c518;border:1px solid #f5c518;">Not Converged</span>';

  const state = (data.system_state || 'flow').toLowerCase();
  let stateClass = 'state-flow';
  if (state === 'stress')    stateClass = 'state-stress';
  else if (state === 'curiosity') stateClass = 'state-curiosity';
  const stateBadge = `<span class="state-badge ${stateClass}">${escHtml(state.toUpperCase())}</span>`;

  const domains = data.total_memories || {};
  const domainRows = Object.entries(domains).map(([name, count]) =>
    `<tr><td style="padding:0.3rem 0.5rem;color:var(--text-dim);">${escHtml(name)}</td><td style="padding:0.3rem 0.5rem;font-variant-numeric:tabular-nums;text-align:right;">${escHtml(count)}</td></tr>`
  ).join('');
  const domainTable = domainRows
    ? `<table style="width:100%;border-collapse:collapse;font-size:0.82rem;"><thead><tr><th style="padding:0.3rem 0.5rem;text-align:left;color:var(--text-dim);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid var(--border);">Domain</th><th style="padding:0.3rem 0.5rem;text-align:right;color:var(--text-dim);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid var(--border);">Memories</th></tr></thead><tbody>${domainRows}</tbody></table>`
    : '<span style="color:var(--text-dim);font-size:0.82rem;">No domain data.</span>';

  el.innerHTML = `
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;flex-wrap:wrap;">
      <div>
        <div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:0.4rem;">Hit Rate</div>
        <div style="font-size:2.2rem;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;line-height:1;">${hitRate != null ? hitPct + '%' : '—'}</div>
        <div style="height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:0.6rem;">
          <div style="height:100%;width:${hitPct}%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:3px;transition:width .4s;"></div>
        </div>
      </div>
      <div>
        <div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:0.5rem;">Memories per Domain</div>
        ${domainTable}
      </div>
    </div>
    <div style="display:flex;gap:2rem;margin-top:1.25rem;flex-wrap:wrap;align-items:center;">
      <div>
        <div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:0.3rem;">Morphogen Convergence</div>
        ${convBadge}
      </div>
      <div style="display:flex;gap:2rem;">
        <div>
          <div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:0.2rem;">Scars</div>
          <div style="font-size:1.4rem;font-weight:700;color:var(--orange);">${data.scar_count != null ? escHtml(data.scar_count) : '—'}</div>
        </div>
        <div>
          <div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:0.2rem;">Assoc. Density</div>
          <div style="font-size:1.4rem;font-weight:700;color:var(--purple);">${data.association_density != null ? Number(data.association_density).toFixed(3) : '—'}</div>
        </div>
      </div>
      <div>
        <div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:0.3rem;">System State</div>
        ${stateBadge}
      </div>
    </div>`;
}

async function loadHealthSnapshot() {
  try {
    const resp = await fetch('/api/health-snapshot');
    if (!resp.ok) return;
    const data = await resp.json();
    renderHealthSnapshot(data);
    renderParamDrift(data);
    renderCascadeWarnings(data);
  } catch (e) {
    console.warn('Organism: health-snapshot load failed', e);
  }
}

// ── Domain Maturity ───────────────────────────────────────────────
const maturityColors = {
  PIONEER: 'var(--text-dim)',
  SHRUB:   '#f5c518',
  FOREST:  'var(--green)',
  MATURE:  '#22d3ee',
};

function renderDomainMaturity(data) {
  const el = document.getElementById('domain-maturity-grid');
  if (!el) return;
  const domains = data.domains || [];
  if (!domains.length) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No domain maturity data available.</div>';
    return;
  }
  el.innerHTML = domains.map(d => {
    const label = (d.maturity || 'PIONEER').toUpperCase();
    const color = maturityColors[label] || 'var(--text-dim)';
    return `
      <div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:0.4rem;">
        <div style="font-size:0.88rem;font-weight:600;color:var(--text);">${escHtml(d.name)}</div>
        <div style="font-size:0.78rem;font-weight:700;color:${color};text-transform:uppercase;letter-spacing:0.05em;">${escHtml(label)}</div>
        <div style="font-size:0.75rem;color:var(--text-dim);">${escHtml(d.memory_count != null ? d.memory_count : '—')} memories</div>
      </div>`;
  }).join('');
}

async function loadDomainMaturity() {
  try {
    const resp = await fetch('/api/domain-maturity');
    if (!resp.ok) return;
    const data = await resp.json();
    renderDomainMaturity(data);
  } catch (e) {
    console.warn('Organism: domain-maturity load failed', e);
  }
}

// ── Parameter Drift ───────────────────────────────────────────────
function renderParamDrift(data) {
  const el = document.getElementById('param-drift-body');
  if (!el) return;
  const flagged = data.flagged_parameters || [];
  if (!flagged.length) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No parameter drift detected.</div>';
    return;
  }
  el.innerHTML = '<div style="display:flex;flex-wrap:wrap;gap:0.5rem;">' +
    flagged.map(p =>
      `<span style="display:inline-block;padding:3px 10px;border-radius:12px;font-size:0.78rem;font-weight:600;background:#ff2d5520;color:var(--red);border:1px solid #ff2d5540;">${escHtml(p)}</span>`
    ).join('') +
    '</div>';
}

// ── Cascade Warnings ──────────────────────────────────────────────
function renderCascadeWarnings(data) {
  const el = document.getElementById('cascade-warnings-body');
  if (!el) return;
  const warnings = data.cascade_warnings || [];
  if (!warnings.length) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No active cascade warnings.</div>';
    return;
  }
  el.innerHTML = warnings.map(w => {
    const sev = Math.min(Math.max(Number(w.severity) || 0, 0), 1);
    const sevPct = Math.round(sev * 100);
    const sevColor = sev > 0.7 ? 'var(--red)' : sev > 0.4 ? 'var(--orange)' : '#f5c518';
    return `
      <div style="background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:0.85rem;margin-bottom:0.75rem;">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.4rem;">
          <span style="font-size:0.85rem;font-weight:600;color:var(--text);">${escHtml(w.affected_system || '—')}</span>
          <span style="font-size:0.75rem;color:${sevColor};font-variant-numeric:tabular-nums;">${sevPct}% severity</span>
        </div>
        <div style="height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:0.6rem;">
          <div style="height:100%;width:${sevPct}%;background:${sevColor};border-radius:3px;transition:width .4s;"></div>
        </div>
        <div style="font-size:0.78rem;color:var(--text-dim);">
          ${w.recommended_action ? escHtml(w.recommended_action) : ''}
          ${w.predicted_sessions_to_impact != null ? ' &mdash; impact in <strong>' + escHtml(w.predicted_sessions_to_impact) + '</strong> sessions' : ''}
        </div>
      </div>`;
  }).join('');
}

// ── Last Retrieval Explained ──────────────────────────────────────
function renderExplainLast(data) {
  const el = document.getElementById('explain-last-body');
  if (!el) return;

  if (!data || !data.query) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No retrieval data available yet.</div>';
    return;
  }

  const retrieved = data.retrieved || [];
  const suppressed = data.suppressed || [];
  const retrievedRows = retrieved.map(m =>
    `<tr>
      <td style="padding:0.45rem 0.6rem;font-family:monospace;font-size:0.78rem;color:var(--text-dim);">${escHtml(String(m.id || '').slice(0, 8))}</td>
      <td style="padding:0.45rem 0.6rem;font-variant-numeric:tabular-nums;">${m.score != null ? Number(m.score).toFixed(4) : '—'}</td>
      <td style="padding:0.45rem 0.6rem;font-variant-numeric:tabular-nums;">${m.cosine != null ? Number(m.cosine).toFixed(4) : '—'}</td>
    </tr>`
  ).join('');

  const suppressedRows = suppressed.length
    ? suppressed.map(m =>
        `<div style="font-size:0.8rem;padding:0.25rem 0;border-bottom:1px solid var(--border);display:flex;gap:0.75rem;">
          <span style="font-family:monospace;color:var(--text-dim);">${escHtml(String(m.id || '').slice(0, 8))}</span>
          <span style="color:var(--orange);">${escHtml(m.reason || '—')}</span>
        </div>`
      ).join('')
    : '<div style="color:var(--text-dim);font-size:0.82rem;">None suppressed.</div>';

  const seamsHtml = goldenSeams.length
    ? goldenSeams.map(s => `<span style="display:inline-block;padding:2px 8px;border-radius:12px;font-size:0.75rem;font-weight:600;background:#f5c51820;color:#f5c518;border:1px solid #f5c51840;margin-right:0.3rem;">${escHtml(s)}</span>`).join('')
    : '<span style="color:var(--text-dim);font-size:0.82rem;">None.</span>';

  el.innerHTML = `
    <div style="margin-bottom:1rem;">
      <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:0.3rem;">Query</div>
      <div style="font-size:0.9rem;color:var(--text);background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:0.6rem 0.8rem;">${escHtml(data.query)}</div>
    </div>
    <div style="margin-bottom:1rem;">
      <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:0.5rem;">Retrieved Memories</div>
      ${retrieved.length ? `
        <table style="width:100%;border-collapse:collapse;">
          <thead><tr>
            <th style="padding:0.35rem 0.6rem;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">ID</th>
            <th style="padding:0.35rem 0.6rem;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">Score</th>
            <th style="padding:0.35rem 0.6rem;text-align:left;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);border-bottom:1px solid var(--border);">Cosine</th>
          </tr></thead>
          <tbody style="font-size:0.82rem;">${retrievedRows}</tbody>
        </table>` : '<div style="color:var(--text-dim);font-size:0.82rem;">No memories retrieved.</div>'}
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1rem;">
      <div>
        <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:0.4rem;">Suppressed Memories</div>
        ${suppressedRows}
      </div>
      <div>
        <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:0.4rem;">Bandit Arm Selected</div>
        <div style="font-size:0.9rem;color:var(--purple);font-weight:600;">${data.bandit_arm_selected != null ? escHtml(data.bandit_arm_selected) : '—'}</div>
      </div>
    </div>
    <div>
      <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:0.4rem;">Golden Seams Fired</div>
      ${seamsHtml}
    </div>`;
}

async function loadExplainLast() {
  try {
    const resp = await fetch('/api/explain-last');
    if (!resp.ok) return;
    const data = await resp.json();
    renderExplainLast(data);
  } catch (e) {
    console.warn('Organism: explain-last load failed', e);
  }
}

// ── Boot ──────────────────────────────────────────────────────────
loadHealthSnapshot();
loadDomainMaturity();
loadExplainLast();

setInterval(loadHealthSnapshot,  10000);
setInterval(loadDomainMaturity,  15000);
setInterval(loadExplainLast,     10000);
</script>
{% endblock %}