{% extends "base.html" %}
{% block title %}Domain Organs — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Domain Organs</h1>
    <p class="subtitle">The organism body — one organ per domain</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('home')" title="Help">? Help</button>
</div>

<div class="vitals-panel">
  <div class="vital-card">
    <span class="vital-label">Heart Rate</span>
    <span class="vital-value" id="heart-rate">—</span>
    <span class="vital-unit">ops/session</span>
  </div>
  <div class="vital-card">
    <span class="vital-label">Memory Pressure</span>
    <span class="vital-value" id="pressure">—</span>
    <span class="vital-unit">%</span>
  </div>
  <div class="vital-card">
    <span class="vital-label">Assoc. Temp</span>
    <span class="vital-value" id="temperature">—</span>
    <span class="vital-unit">avg weight</span>
  </div>
  <div class="vital-card">
    <span class="vital-label">Total Memories</span>
    <span class="vital-value" id="total-memories">—</span>
  </div>
  <div class="vital-card">
    <span class="vital-label">Active Scars</span>
    <span class="vital-value" id="active-scars">—</span>
  </div>
  <div class="vital-card">
    <span class="vital-label">Assoc. Edges</span>
    <span class="vital-value" id="assoc-edges">—</span>
  </div>
</div>

<div class="organ-grid" id="organ-grid">
  <div class="organ-placeholder">Loading organs…</div>
</div>
{% endblock %}

{% block scripts %}
<script>
  function setVital(id, val) {
    const el = document.getElementById(id);
    if (el && val !== undefined && val !== null) el.textContent = val;
  }

  function refreshVitals() {
    fetch("/api/vitals")
      .then(r => r.json())
      .then(function(data) {
        setVital("heart-rate", data.heart_rate);
        setVital("pressure", data.pressure);
        setVital("temperature", data.temperature ? data.temperature.toFixed(3) : "0.000");
        setVital("total-memories", data.total_memories);
        setVital("active-scars", data.active_scars);
        setVital("assoc-edges", data.association_edges);
      })
      .catch(function() {});
  }

  function renderOrgans(domains, activeDomain) {
    const container = document.getElementById("organ-grid");
    if (!container) return;
    if (!domains.length) {
      container.innerHTML = '<div class="organ-empty">No domains yet</div>';
      return;
    }
    container.innerHTML = domains.map(function(d) {
      const healthPct = Math.min(d.memory_count * 10, 100);
      const isActive = d.name === activeDomain;
      return '<a class="organ-card' + (isActive ? ' organ-card-active' : '') + '" href="/domain/' + encodeURIComponent(d.name) + '">' +
        '<div class="organ-icon">' + (isActive ? '&#x25C6;' : '&#x2B21;') + '</div>' +
        '<div class="organ-name">' + escHtml(d.name) + (isActive ? ' <span class="organ-active-badge">active</span>' : '') + '</div>' +
        '<div class="organ-stats">' +
          '<span>' + d.memory_count + ' memories</span>' +
          '<span>' + d.edge_count + ' edges</span>' +
          '<span>avg weight ' + d.avg_internal_edge_weight + '</span>' +
        '</div>' +
        '<div class="organ-health-bar">' +
          '<div class="organ-health-fill" style="width:' + healthPct + '%"></div>' +
        '</div>' +
      '</a>';
    }).join("");
  }

  function refreshOrgans() {
    Promise.all([
      fetch("/api/domain-health").then(r => r.json()),
      fetch("/api/vitals").then(r => r.json())
    ]).then(function(results) {
      const domains = results[0].domains || [];
      const activeDomain = results[1].active_domain || null;
      // Ensure active domain always appears as a card even if it has 0 memories
      if (activeDomain && !domains.find(function(d) { return d.name === activeDomain; })) {
        domains.unshift({ name: activeDomain, memory_count: 0, edge_count: 0, avg_internal_edge_weight: 0 });
      }
      renderOrgans(domains, activeDomain);
    }).catch(function() {});
  }

  function escHtml(s) {
    return String(s).replace(/[&<>"']/g, function(c) {
      return {"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c];
    });
  }

  // Initial load
  refreshVitals();
  refreshOrgans();
  // Poll
  setInterval(refreshVitals, 5000);
  setInterval(refreshOrgans, 10000);
</script>
{% endblock %}