{% extends "base.html" %}

{% block title %}Consolidation — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Consolidation</h1>
    <p class="subtitle">Memory merging, edge strengthening, scar expiry, and domain drift</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('consolidation')" title="Help">? Help</button>
</div>

<div class="consolidation-layout">

  <!-- ── Last Consolidation Run (full width) ─────────────────────── -->
  <div class="chart-card full-width" id="last-run-card">
    <h2>Last Consolidation Run</h2>
    <div id="last-run-tiles" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-top:0.5rem;">
      <div style="color:var(--text-dim);font-size:0.85rem;grid-column:1/-1;">Loading last run…</div>
    </div>
  </div>

  <!-- ── Merge Events (full width) ──────────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Recent Merge Events</h2>
    <div style="overflow-x:auto;">
      <table class="data-table" id="merge-events-table">
        <thead>
          <tr>
            <th>Merged Memory ID</th>
            <th>Source Count</th>
            <th>Domain</th>
            <th>Time</th>
          </tr>
        </thead>
        <tbody id="merge-events-tbody">
          <tr><td colspan="4" style="color:var(--text-dim);text-align:center;padding:2rem;">Loading merge events…</td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- ── Domain Drift Suggestions (full width) ──────────────────── -->
  <div class="chart-card full-width">
    <h2>Domain Drift Suggestions</h2>
    <div style="overflow-x:auto;">
      <table class="data-table" id="drift-table">
        <thead>
          <tr>
            <th>Memory ID</th>
            <th>Current Domain</th>
            <th>Suggested Domain</th>
          </tr>
        </thead>
        <tbody id="drift-tbody">
          <tr><td colspan="3" style="color:var(--text-dim);text-align:center;padding:2rem;">Loading drift suggestions…</td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- ── History Chart (full width) ────────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Consolidation History
      <span style="font-size:0.75rem;color:var(--text-dim);font-weight:400;margin-left:0.75rem;text-transform:none;letter-spacing:0;">Last 20 runs</span>
    </h2>
    <div style="position:relative;height:240px;">
      <canvas id="history-chart"></canvas>
    </div>
  </div>

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

  <!-- ── Config (half width) ───────────────────────────────────── -->
  <div class="chart-card" id="config-gauges-card">
    <h2>Configuration</h2>
    <div id="config-gauges-list">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading config…</div>
    </div>
  </div>

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


{% block scripts %}
<script>
/* ================================================================
   Consolidation — merging, edge strengthening, scar expiry, drift
   ================================================================ */

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

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

// ── History chart ─────────────────────────────────────────────────
let historyChart = null;

function initHistoryChart() {
  const ctx = document.getElementById('history-chart');
  if (!ctx) return;
  historyChart = new Chart(ctx, {
    type: 'bar',
    data: { labels: [], datasets: [] },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 300 },
      scales: {
        x: {
          title: { display: true, text: 'Run', color: '#6b7280', font: { size: 11 } },
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280', maxTicksLimit: 12 },
        },
        y: {
          title: { display: true, text: 'Count', color: '#6b7280', font: { size: 11 } },
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280' },
        },
      },
      plugins: {
        legend: { position: 'top', labels: { color: '#c8d6e5', padding: 14, font: { size: 11 } } },
        tooltip: {
          backgroundColor: '#111118',
          borderColor: '#1e293b',
          borderWidth: 1,
          titleColor: '#c8d6e5',
          bodyColor: '#6b7280',
        },
      },
    },
  });
}

// ── Stat tile builder ─────────────────────────────────────────────
function statTile(label, value, accentColor) {
  return `<div style="background:var(--bg3);border:1px solid var(--border);border-left:3px solid ${accentColor};border-radius:var(--radius);padding:1rem;">
    <div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-dim);margin-bottom:0.35rem;">${escHtml(label)}</div>
    <div style="font-size:1.8rem;font-weight:700;color:${accentColor};line-height:1;font-variant-numeric:tabular-nums;">${escHtml(String(value))}</div>
  </div>`;
}

// ── Gauge bar (0-1) ───────────────────────────────────────────────
function gaugeBar(val, max) {
  const v = parseFloat(val);
  if (isNaN(v)) return `<span style="color:var(--text-dim);font-size:0.8rem;">${escHtml(String(val))}</span>`;
  const m = max || 1;
  const pct = Math.max(0, Math.min(100, (v / m) * 100));
  const color = pct >= 70 ? 'var(--green)' : pct >= 40 ? '#f5c518' : 'var(--red)';
  return `<div style="display:flex;align-items:center;gap:0.5rem;">
    <div style="flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;">
      <div style="width:${pct.toFixed(1)}%;height:100%;background:${color};border-radius:3px;transition:width .4s;"></div>
    </div>
    <span style="width:52px;text-align:right;font-size:0.8rem;font-weight:600;color:var(--text);">${v.toFixed(4)}</span>
  </div>`;
}

// ── Render last consolidation run tiles ───────────────────────────
function renderLastRun(data) {
  const el = document.getElementById('last-run-tiles');
  if (!el) return;

  const report = data.last_report || data.last_run || data.report || null;

  if (!report) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;grid-column:1/-1;">No consolidation has been run yet.</div>';
    return;
  }

  const edgesStrengthened = report.edges_strengthened ?? report.strengthened ?? 0;
  const merges            = report.merges             ?? (Array.isArray(report.merge_events) ? report.merge_events.length : 0);
  const edgesDecayed      = report.edges_decayed      ?? report.decayed      ?? 0;
  const scarsExpired      = report.scars_expired      ?? report.expired_scars ?? 0;
  const freeloaders       = report.freeloaders_found  ?? report.freeloaders  ?? 0;

  el.innerHTML = [
    statTile('Edges Strengthened', edgesStrengthened, 'var(--green)'),
    statTile('Merges',             merges,            '#22d3ee'),
    statTile('Edges Decayed',      edgesDecayed,      '#ff6b35'),
    statTile('Scars Expired',      scarsExpired,      'var(--red)'),
    statTile('Freeloaders Found',  freeloaders,       '#a855f7'),
  ].join('');
}

// ── Render merge events table ─────────────────────────────────────
function renderMergeEvents(data) {
  const tbody = document.getElementById('merge-events-tbody');
  if (!tbody) return;

  const report = data.last_report || data.last_run || data.report || {};
  const events = report.merge_events || data.merge_events || [];

  if (!events || events.length === 0) {
    tbody.innerHTML = '<tr><td colspan="4" style="color:var(--text-dim);text-align:center;padding:2rem;">No merge events recorded.</td></tr>';
    return;
  }

  tbody.innerHTML = events.map(ev => {
    const mid     = String(ev.merged_id || ev.target_id || ev.memory_id || '—').slice(0, 8);
    const sources = ev.source_ids ? ev.source_ids.length : (ev.source_count || ev.sources || '—');
    const domain  = ev.domain || '—';
    const ts      = ev.timestamp || ev.time || ev.created_at || '—';
    return `<tr class="memory-row">
      <td><span class="mem-id">${escHtml(mid)}…</span></td>
      <td style="font-variant-numeric:tabular-nums;">${escHtml(String(sources))}</td>
      <td><span style="color:var(--purple);font-size:0.82rem;">${escHtml(domain)}</span></td>
      <td class="ts">${escHtml(String(ts))}</td>
    </tr>`;
  }).join('');
}

// ── Render domain drift suggestions ──────────────────────────────
function renderDriftSuggestions(data) {
  const tbody = document.getElementById('drift-tbody');
  if (!tbody) return;

  const report = data.last_report || data.last_run || data.report || {};
  const suggestions = report.domain_drift_suggestions || data.domain_drift_suggestions || [];

  if (!suggestions || suggestions.length === 0) {
    tbody.innerHTML = '<tr><td colspan="3" style="color:var(--text-dim);text-align:center;padding:2rem;">No domain drift suggestions.</td></tr>';
    return;
  }

  tbody.innerHTML = suggestions.map(s => {
    const mid     = String(s.memory_id || s.id || '—').slice(0, 8);
    const current = s.current_domain  || s.domain   || '—';
    const suggest = s.suggested_domain || s.new_domain || '—';
    return `<tr class="memory-row">
      <td><span class="mem-id">${escHtml(mid)}…</span></td>
      <td style="color:var(--text-dim);">${escHtml(current)}</td>
      <td style="color:var(--green);font-weight:600;">${escHtml(suggest)}</td>
    </tr>`;
  }).join('');
}

// ── Update history chart ──────────────────────────────────────────
function updateHistoryChart(history) {
  if (!historyChart) return;
  const runs = Array.isArray(history) ? history.slice(-20) : [];

  if (runs.length === 0) {
    historyChart.data.labels = ['(no data)'];
    historyChart.data.datasets = [];
    historyChart.update();
    return;
  }

  const labels = runs.map((r, i) => r.run_label || ('#' + (r.run_index || i + 1)));
  historyChart.data.labels = labels;
  historyChart.data.datasets = [
    {
      label: 'Edges Strengthened',
      data: runs.map(r => r.edges_strengthened ?? r.strengthened ?? 0),
      backgroundColor: 'rgba(52,211,153,0.6)',
      borderColor: '#34d399',
      borderWidth: 1,
    },
    {
      label: 'Merges',
      data: runs.map(r => r.merges ?? (Array.isArray(r.merge_events) ? r.merge_events.length : 0)),
      backgroundColor: 'rgba(34,211,238,0.55)',
      borderColor: '#22d3ee',
      borderWidth: 1,
    },
    {
      label: 'Edges Decayed',
      data: runs.map(r => r.edges_decayed ?? r.decayed ?? 0),
      backgroundColor: 'rgba(255,107,53,0.55)',
      borderColor: '#ff6b35',
      borderWidth: 1,
    },
    {
      label: 'Scars Expired',
      data: runs.map(r => r.scars_expired ?? r.expired_scars ?? 0),
      backgroundColor: 'rgba(255,45,85,0.5)',
      borderColor: '#ff2d55',
      borderWidth: 1,
    },
  ];
  historyChart.update();
}

// ── Render session data ───────────────────────────────────────────
function renderSessionData(data) {
  const el = document.getElementById('session-data-list');
  if (!el) return;

  const session = data.session_data || data.session || data;
  const items = [
    { label: 'Session memories',   value: session.session_memories   ?? session.memories_count ?? session.memories ?? '—' },
    { label: 'Session retrievals', value: session.session_retrievals ?? session.retrievals     ?? '—' },
    { label: 'Judge ratings used', value: session.judge_ratings_used ?? session.judge_ratings  ?? session.llm_ratings ?? '—' },
  ];

  el.innerHTML = items.map(item => `
    <div style="display:flex;justify-content:space-between;align-items:center;padding:0.35rem 0;border-bottom:1px solid var(--border);font-size:0.85rem;">
      <span style="color:var(--text-dim);">${escHtml(item.label)}</span>
      <span style="font-weight:600;font-variant-numeric:tabular-nums;color:var(--blue);">${escHtml(String(item.value))}</span>
    </div>`).join('');
}

// ── Render config gauges ──────────────────────────────────────────
function renderConfigGauges(data) {
  const el = document.getElementById('config-gauges-list');
  if (!el) return;

  const cfg = data.config || data.configuration || data;
  const keys = [
    { key: 'conflict_detection_threshold', label: 'Conflict Detection' },
    { key: 'merge_similarity_threshold',   label: 'Merge Similarity'   },
    { key: 'slow_wave_decay_factor',       label: 'Slow-wave Decay'    },
  ];

  el.innerHTML = keys.map(item => {
    const val = cfg[item.key] !== undefined ? cfg[item.key] : '—';
    return `<div style="margin-bottom:0.85rem;">
      <div style="display:flex;justify-content:space-between;margin-bottom:0.25rem;">
        <span style="font-size:0.8rem;color:var(--text-dim);">${escHtml(item.label)}</span>
      </div>
      ${gaugeBar(val, 1)}
    </div>`;
  }).join('');
}

// ── Load consolidation state ──────────────────────────────────────
async function loadConsolidationState() {
  try {
    const resp = await fetch('/api/consolidation-state');
    if (!resp.ok) return;
    const data = await resp.json();
    renderLastRun(data);
    renderMergeEvents(data);
    renderDriftSuggestions(data);
    renderSessionData(data);
    renderConfigGauges(data);
  } catch (e) {
    console.warn('Consolidation: consolidation-state load failed', e);
  }
}

async function loadConsolidationHistory() {
  try {
    const resp = await fetch('/api/consolidation-history');
    if (!resp.ok) return;
    const data = await resp.json();
    const history = data.history || data.runs || data || [];
    updateHistoryChart(Array.isArray(history) ? history : []);
  } catch (e) {
    console.warn('Consolidation: consolidation-history load failed', e);
  }
}

// ── Boot ──────────────────────────────────────────────────────────
initHistoryChart();

loadConsolidationState();
loadConsolidationHistory();

setInterval(loadConsolidationState,   15000);
setInterval(loadConsolidationHistory, 60000);
</script>
{% endblock %}