{% extends "base.html" %}

{% block title %}Niche Construction — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Niche Construction</h1>
    <p class="subtitle">Self-organising domain clusters — cohesion, separation, and Louvain proposals</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('niche')" title="Help">? Help</button>
</div>

<div class="niche-layout">

  <!-- ── Domain Health Grid (full width) ──────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Domain Health Grid</h2>
    <div id="domain-health-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;">
      <div style="color:var(--text-dim);font-size:0.85rem;padding:0.5rem;">Loading domain health…</div>
    </div>
  </div>

  <!-- ── Cohesion vs Separation Scatter (full width) ──────────────── -->
  <div class="chart-card full-width">
    <h2>Cohesion vs Separation Scatter</h2>
    <div style="position:relative;height:300px;">
      <canvas id="cohesion-scatter-chart"></canvas>
    </div>
    <p style="font-size:0.75rem;color:var(--text-dim);margin-top:0.75rem;">
      Ideal domains appear in the top-right quadrant — high internal cohesion, high external separation.
    </p>
  </div>

  <!-- ── Cluster Proposals (full width) ───────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Cluster Proposals
      <span style="font-size:0.8rem;color:var(--text-dim);font-weight:400;margin-left:0.75rem;text-transform:none;letter-spacing:0;" id="proposals-subtitle"></span>
    </h2>
    <div id="proposals-table-wrap">
      <div style="color:var(--text-dim);font-size:0.85rem;padding:0.5rem;">Loading proposals…</div>
    </div>
  </div>

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

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


{% block scripts %}
<script>
/* ================================================================
   Niche Construction — domain health polling + Chart.js scatter
   ================================================================ */

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

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

// ── Progress bar helper ────────────────────────────────────────────
function progressBar(value, color) {
  const pct = Math.round(Math.min(Math.max(value || 0, 0), 1) * 100);
  return `<div style="background:var(--border);border-radius:4px;height:6px;overflow:hidden;margin-top:4px;">
    <div style="width:${pct}%;height:100%;background:${color};border-radius:4px;transition:width .4s;"></div>
  </div>`;
}

// ── Domain Health Grid ────────────────────────────────────────────
function renderDomainHealthGrid(domains) {
  const grid = document.getElementById('domain-health-grid');
  if (!grid) return;
  if (!domains || domains.length === 0) {
    grid.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;padding:0.5rem;">No domain health data available yet.</div>';
    return;
  }
  grid.innerHTML = domains.map(function(d) {
    const cohesion   = typeof d.internal_cohesion   === 'number' ? d.internal_cohesion   : 0;
    const separation = typeof d.external_separation === 'number' ? d.external_separation : 0;
    const stability  = d.stability_sessions != null
      ? `Stable ${d.stability_sessions} session${d.stability_sessions === 1 ? '' : 's'}`
      : 'Reassigned recently';
    return `<div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;">
      <div style="font-size:1.1rem;font-weight:700;margin-bottom:0.75rem;color:var(--text);">${escHtml(d.domain)}</div>
      <div style="font-size:0.78rem;color:var(--text-dim);margin-top:0.5rem;">Internal Cohesion</div>
      ${progressBar(cohesion, '#22c55e')}
      <div style="font-size:0.75rem;color:var(--text-dim);margin-top:2px;">${cohesion.toFixed(2)}</div>
      <div style="font-size:0.78rem;color:var(--text-dim);margin-top:0.5rem;">External Separation</div>
      ${progressBar(separation, '#4a9eff')}
      <div style="font-size:0.75rem;color:var(--text-dim);margin-top:2px;">${separation.toFixed(2)}</div>
      <div style="font-size:0.8rem;margin-top:0.6rem;color:var(--text-dim);">
        Memories: <span style="color:var(--text);">${d.memory_count ?? '—'}</span>
      </div>
      <div style="font-size:0.8rem;color:var(--text-dim);margin-top:2px;">${escHtml(stability)}</div>
    </div>`;
  }).join('');
}

// ── Scatter Chart ─────────────────────────────────────────────────
let scatterChart = null;

function initScatterChart() {
  const ctx = document.getElementById('cohesion-scatter-chart');
  if (!ctx) return;
  scatterChart = new Chart(ctx, {
    type: 'scatter',
    data: { datasets: [] },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 400 },
      scales: {
        x: {
          min: 0,
          max: 1,
          title: { display: true, text: 'Internal Cohesion', color: '#6b7280', font: { size: 11 } },
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280', stepSize: 0.2 },
        },
        y: {
          min: 0,
          max: 1,
          title: { display: true, text: 'External Separation', color: '#6b7280', font: { size: 11 } },
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280', stepSize: 0.2 },
        },
      },
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: '#111118',
          borderColor: '#1e293b',
          borderWidth: 1,
          titleColor: '#c8d6e5',
          bodyColor: '#6b7280',
          callbacks: {
            label: function(ctx) {
              const d = ctx.raw;
              return `${d.label || ''}  coh=${d.x.toFixed(2)}  sep=${d.y.toFixed(2)}`;
            }
          }
        },
      },
    },
  });
}

function updateScatterChart(domains) {
  if (!scatterChart || !domains) return;
  const pts = domains.map(function(d) {
    return {
      x: typeof d.internal_cohesion === 'number' ? d.internal_cohesion : 0,
      y: typeof d.external_separation === 'number' ? d.external_separation : 0,
      label: d.domain || '',
    };
  });
  scatterChart.data.datasets = [{
    data: pts,
    backgroundColor: 'rgba(0,210,211,0.7)',
    borderColor: '#00d2d3',
    pointRadius: 7,
    pointHoverRadius: 9,
  }];
  scatterChart.update();
}

// ── Proposals Table ───────────────────────────────────────────────
function confidenceBadge(conf) {
  const c = typeof conf === 'number' ? conf : 0;
  let color, label;
  if (c >= 0.7) { color = '#22c55e'; label = c.toFixed(2); }
  else if (c >= 0.4) { color = '#f59e0b'; label = c.toFixed(2); }
  else { color = '#ef4444'; label = c.toFixed(2); }
  return `<span style="display:inline-block;padding:2px 8px;border-radius:4px;font-size:0.78rem;font-weight:600;background:${color}22;color:${color};border:1px solid ${color}55;">${escHtml(label)}</span>`;
}

function renderProposals(proposals) {
  const wrap = document.getElementById('proposals-table-wrap');
  const sub  = document.getElementById('proposals-subtitle');
  if (!wrap) return;
  if (sub) sub.textContent = proposals && proposals.length ? `${proposals.length} proposal${proposals.length === 1 ? '' : 's'}` : '';
  if (!proposals || proposals.length === 0) {
    wrap.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;padding:0.75rem 0;">No cluster proposals at this time.</div>';
    return;
  }
  wrap.innerHTML = `<table class="data-table" style="width:100%;">
    <thead>
      <tr>
        <th>Proposed Domain</th>
        <th>Members</th>
        <th>Current Domains</th>
        <th>Modularity &Delta;</th>
        <th>Confidence</th>
      </tr>
    </thead>
    <tbody>${proposals.map(function(p) {
      const members  = Array.isArray(p.members) ? p.members : [];
      const current  = Array.isArray(p.current_domains) ? p.current_domains : [];
      const modDelta = typeof p.modularity_delta === 'number' ? p.modularity_delta.toFixed(4) : '—';
      return `<tr>
        <td class="mem-label">${escHtml(p.proposed_domain || '—')}</td>
        <td>${members.length}</td>
        <td style="color:var(--text-dim);font-size:0.8rem;">${escHtml(current.join(', ') || '—')}</td>
        <td>${escHtml(modDelta)}</td>
        <td>${confidenceBadge(p.confidence)}</td>
      </tr>`;
    }).join('')}</tbody>
  </table>`;
}

// ── Session Stats ─────────────────────────────────────────────────
function renderSessionStats(data) {
  const el = document.getElementById('niche-session-stats');
  if (!el) return;
  const sessions       = data.session_count ?? '—';
  const reassignments  = data.total_reassignments != null ? data.total_reassignments : null;
  el.innerHTML = `
    <div style="display:flex;flex-direction:column;gap:0.75rem;">
      <div style="display:flex;justify-content:space-between;align-items:center;padding:0.35rem 0;border-bottom:1px solid var(--border);">
        <span style="color:var(--text-dim);font-size:0.85rem;">Sessions tracked</span>
        <span style="font-size:1.4rem;font-weight:700;color:var(--text);">${escHtml(String(sessions))}</span>
      </div>
      ${reassignments !== null ? `
      <div style="display:flex;justify-content:space-between;align-items:center;padding:0.35rem 0;border-bottom:1px solid var(--border);">
        <span style="color:var(--text-dim);font-size:0.85rem;">Total reassignments</span>
        <span style="font-size:1.2rem;font-weight:600;color:var(--text);">${escHtml(String(reassignments))}</span>
      </div>` : ''}
    </div>`;
}

// ── Fetch & Render ────────────────────────────────────────────────
async function loadNicheHealth() {
  try {
    const resp = await fetch('/api/niche-health');
    if (!resp.ok) return;
    const data = await resp.json();
    const domains = data.domains || [];
    renderDomainHealthGrid(domains);
    updateScatterChart(domains);
    renderSessionStats(data);
  } catch (e) {
    console.warn('Niche: health load failed', e);
  }
}

async function loadNicheProposals() {
  try {
    const resp = await fetch('/api/niche-proposals');
    if (!resp.ok) return;
    const data = await resp.json();
    renderProposals(data.proposals || []);
  } catch (e) {
    console.warn('Niche: proposals load failed', e);
  }
}

// ── Boot ──────────────────────────────────────────────────────────
initScatterChart();

loadNicheHealth();
loadNicheProposals();

setInterval(loadNicheHealth,    10000);
setInterval(loadNicheProposals, 30000);
</script>
{% endblock %}