{% extends "base.html" %}

{% block title %}System States — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>System States</h1>
    <p class="subtitle">FLOW / STRESS / CURIOSITY — state machine, transitions, and parameter multipliers</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('states')" title="Help">? Help</button>
</div>

<div class="states-layout">

  <!-- ── Current State (full width) ─────────────────────────────── -->
  <div class="chart-card full-width" id="current-state-card">
    <h2>Current State</h2>
    <div style="display:flex;align-items:flex-start;gap:2.5rem;flex-wrap:wrap;">
      <div>
        <div id="state-big-badge" class="state-badge state-flow" style="font-size:1.8rem;padding:0.6rem 2rem;">FLOW</div>
        <div style="margin-top:0.75rem;font-size:0.82rem;color:var(--text-dim);">
          Sessions in current state: <span id="state-duration" style="color:var(--text);font-weight:600;">—</span>
        </div>
        <div style="font-size:0.82rem;color:var(--text-dim);margin-top:0.2rem;">
          Total sessions: <span id="state-session-count" style="color:var(--text);font-weight:600;">—</span>
        </div>
      </div>
      <div style="flex:1;min-width:260px;display:flex;flex-direction:column;gap:0.75rem;">
        <!-- Consecutive misses -->
        <div>
          <div style="display:flex;justify-content:space-between;margin-bottom:0.25rem;font-size:0.8rem;">
            <span style="color:var(--text-dim);">Consecutive misses</span>
            <span id="misses-label" style="color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;">— / —</span>
          </div>
          <div style="height:6px;background:var(--border);border-radius:3px;overflow:hidden;">
            <div id="misses-bar" style="width:0%;height:100%;background:var(--red);border-radius:3px;transition:width .4s;"></div>
          </div>
        </div>
        <!-- Consecutive corrections -->
        <div>
          <div style="display:flex;justify-content:space-between;margin-bottom:0.25rem;font-size:0.8rem;">
            <span style="color:var(--text-dim);">Consecutive corrections</span>
            <span id="corrections-label" style="color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;">— / —</span>
          </div>
          <div style="height:6px;background:var(--border);border-radius:3px;overflow:hidden;">
            <div id="corrections-bar" style="width:0%;height:100%;background:#ff6b35;border-radius:3px;transition:width .4s;"></div>
          </div>
        </div>
        <!-- Consecutive successes -->
        <div>
          <div style="display:flex;justify-content:space-between;margin-bottom:0.25rem;font-size:0.8rem;">
            <span style="color:var(--text-dim);">Consecutive successes</span>
            <span id="successes-label" style="color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;">— / —</span>
          </div>
          <div style="height:6px;background:var(--border);border-radius:3px;overflow:hidden;">
            <div id="successes-bar" style="width:0%;height:100%;background:var(--green);border-radius:3px;transition:width .4s;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ── Parameter Multipliers (full width) ─────────────────────── -->
  <div class="chart-card full-width">
    <h2>Active Parameter Multipliers</h2>
    <div id="multipliers-table">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading multipliers…</div>
    </div>
  </div>

  <!-- ── State Transition History (full width) ──────────────────── -->
  <div class="chart-card full-width">
    <h2>State Transition History
      <span style="font-size:0.75rem;color:var(--text-dim);font-weight:400;margin-left:0.75rem;text-transform:none;letter-spacing:0;">Green=FLOW, Red=STRESS, Cyan=CURIOSITY</span>
    </h2>
    <div style="position:relative;height:200px;">
      <canvas id="transitions-chart"></canvas>
    </div>
  </div>

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

  <!-- ── State Duration Doughnut (half width) ───────────────────── -->
  <div class="chart-card">
    <h2>State Duration Distribution</h2>
    <div style="position:relative;height:220px;">
      <canvas id="duration-chart"></canvas>
    </div>
  </div>

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


{% block scripts %}
<script>
/* ================================================================
   System States — FLOW / STRESS / CURIOSITY dashboard
   ================================================================ */

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

const STATE_COLORS = {
  flow:      '#34d399',
  stress:    '#ff2d55',
  curiosity: '#22d3ee',
};

// ── Charts ────────────────────────────────────────────────────────
let transitionsChart = null;
let durationChart    = null;

function initTransitionsChart() {
  const ctx = document.getElementById('transitions-chart');
  if (!ctx) return;
  transitionsChart = new Chart(ctx, {
    type: 'bar',
    data: { labels: [], datasets: [] },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 300 },
      scales: {
        x: {
          title: { display: true, text: 'Session', color: '#6b7280', font: { size: 11 } },
          grid: { color: '#1e293b' },
          ticks: { color: '#6b7280', maxTicksLimit: 15 },
          stacked: true,
        },
        y: {
          display: false,
          stacked: true,
          min: 0,
          max: 1,
        },
      },
      plugins: {
        legend: { position: 'top', labels: { color: '#c8d6e5', padding: 14, font: { size: 11 } } },
        tooltip: {
          backgroundColor: '#111118',
          borderColor: '#1e293b',
          borderWidth: 1,
          titleColor: '#c8d6e5',
          bodyColor: '#6b7280',
          callbacks: {
            label: ctx => ' ' + ctx.dataset.label,
          },
        },
      },
    },
  });
}

function initDurationChart() {
  const ctx = document.getElementById('duration-chart');
  if (!ctx) return;
  durationChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ['FLOW', 'STRESS', 'CURIOSITY'],
      datasets: [{
        data: [1, 0, 0],
        backgroundColor: [
          'rgba(52,211,153,0.7)',
          'rgba(255,45,85,0.7)',
          'rgba(34,211,238,0.7)',
        ],
        borderColor: ['#34d399', '#ff2d55', '#22d3ee'],
        borderWidth: 2,
      }],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 400 },
      cutout: '62%',
      plugins: {
        legend: { position: 'bottom', labels: { color: '#c8d6e5', padding: 16, font: { size: 11 } } },
        tooltip: { backgroundColor: '#111118', borderColor: '#1e293b', borderWidth: 1, titleColor: '#c8d6e5', bodyColor: '#6b7280' },
      },
    },
  });
}

// ── Bar helper (0-1 pct) ──────────────────────────────────────────
function pctBar(val, max, color) {
  const pct = max > 0 ? Math.max(0, Math.min(100, (val / max) * 100)) : 0;
  return pct.toFixed(1) + '%';
}

// ── Render current state ──────────────────────────────────────────
function renderCurrentState(data) {
  const badge   = document.getElementById('state-big-badge');
  const dur     = document.getElementById('state-duration');
  const sessEl  = document.getElementById('state-session-count');

  const state = (data.state || data.current_state || 'flow').toLowerCase();

  if (badge) {
    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');
    badge.style.fontSize = '1.8rem';
    badge.style.padding = '0.6rem 2rem';
  }
  if (dur)   dur.textContent   = escHtml(String(data.sessions_in_state ?? data.duration ?? '—'));
  if (sessEl) sessEl.textContent = escHtml(String(data.session_count ?? data.total_sessions ?? '—'));

  // Counters
  const counters = data.counters || data;
  const misses      = Number(counters.consecutive_misses      ?? counters.misses      ?? 0);
  const corrections = Number(counters.consecutive_corrections ?? counters.corrections ?? 0);
  const successes   = Number(counters.consecutive_successes   ?? counters.successes   ?? 0);

  const thresholds = data.thresholds || data.config || {};
  const missThresh  = Number(thresholds.stress_miss_threshold       ?? thresholds.miss_threshold       ?? 3);
  const corrThresh  = Number(thresholds.stress_correction_threshold ?? thresholds.correction_threshold ?? 3);
  const recvThresh  = Number(thresholds.stress_recovery_successes   ?? thresholds.recovery_successes   ?? 5);

  function setCounterBar(labelId, barId, val, max) {
    const lEl = document.getElementById(labelId);
    const bEl = document.getElementById(barId);
    if (lEl) lEl.textContent = val + ' / ' + max;
    if (bEl) bEl.style.width = pctBar(val, max, '');
  }
  setCounterBar('misses-label',      'misses-bar',      misses,      missThresh);
  setCounterBar('corrections-label', 'corrections-bar', corrections, corrThresh);
  setCounterBar('successes-label',   'successes-bar',   successes,   recvThresh);
}

// ── Render multipliers table ──────────────────────────────────────
function renderMultipliers(data) {
  const el = document.getElementById('multipliers-table');
  if (!el) return;

  const mults = data.multipliers || data.parameter_multipliers || data.active_multipliers || {};
  const entries = Object.entries(mults);

  if (entries.length === 0) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No multiplier data for current state.</div>';
    return;
  }

  el.innerHTML = `<table class="data-table"><thead><tr>
    <th>Parameter</th>
    <th>Multiplier</th>
    <th style="min-width:180px;">Visual</th>
  </tr></thead><tbody>` +
  entries.map(([param, mult]) => {
    const m = parseFloat(mult);
    const isNaN_ = isNaN(m);
    let barHtml = '';
    if (!isNaN_) {
      // Centered at 1.0; range 0–2 displayed
      const clamp = Math.max(0, Math.min(2, m));
      const centerPct = 50;
      const valPct = (clamp / 2) * 100;
      const leftPct  = Math.min(centerPct, valPct);
      const rightPct = Math.max(centerPct, valPct);
      const fillLeft  = centerPct - leftPct;
      const fillRight = rightPct - centerPct;
      const color = m > 1.001 ? 'var(--green)' : m < 0.999 ? 'var(--red)' : 'var(--text-dim)';
      barHtml = `<div style="display:flex;align-items:center;gap:0.5rem;">
        <div style="flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;position:relative;">
          <div style="position:absolute;left:${(centerPct - fillLeft).toFixed(1)}%;width:${(fillLeft + fillRight).toFixed(1)}%;height:100%;background:${color};border-radius:3px;transition:all .4s;"></div>
          <div style="position:absolute;left:50%;top:-1px;width:1px;height:8px;background:var(--text-dim);opacity:0.4;"></div>
        </div>
        <span style="font-size:0.78rem;font-weight:600;color:${color};width:44px;text-align:right;">${m.toFixed(3)}</span>
      </div>`;
    } else {
      barHtml = `<span style="color:var(--text-dim);font-size:0.8rem;">${escHtml(String(mult))}</span>`;
    }
    return `<tr class="memory-row">
      <td style="font-family:monospace;font-size:0.82rem;">${escHtml(param)}</td>
      <td style="font-variant-numeric:tabular-nums;">${isNaN_ ? escHtml(String(mult)) : m.toFixed(4)}</td>
      <td>${barHtml}</td>
    </tr>`;
  }).join('') + '</tbody></table>';
}

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

  const t = data.thresholds || data.config || data;

  const items = [
    { label: 'Stress: miss threshold',           key: 'stress_miss_threshold',           fallback: t.miss_threshold },
    { label: 'Stress: correction threshold',      key: 'stress_correction_threshold',     fallback: t.correction_threshold },
    { label: 'Recovery: successes needed',        key: 'stress_recovery_successes',       fallback: t.recovery_successes },
    { label: 'Curiosity: sparse memory threshold',key: 'curiosity_sparse_memory_threshold', fallback: t.sparse_memory_threshold },
    { label: 'Curiosity: sparse session threshold',key:'curiosity_sparse_session_threshold', fallback: t.sparse_session_threshold },
  ];

  el.innerHTML = items.map(item => {
    const val = t[item.key] !== undefined ? t[item.key] : (item.fallback !== undefined ? item.fallback : '—');
    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(item.label)}</span>
      <span style="font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);">${escHtml(String(val))}</span>
    </div>`;
  }).join('');
}

// ── Update transitions chart ──────────────────────────────────────
function updateTransitionsChart(history) {
  if (!transitionsChart) return;
  const sessions = Array.isArray(history) ? history : [];

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

  const labels = sessions.map((s, i) => s.session_label || ('S' + (s.session || i + 1)));

  // One dataset per state: value=1 for that session, 0 otherwise
  const stateKeys = ['flow', 'stress', 'curiosity'];
  transitionsChart.data.labels = labels;
  transitionsChart.data.datasets = stateKeys.map(st => ({
    label: st.toUpperCase(),
    data: sessions.map(s => (s.state || '').toLowerCase() === st ? 1 : 0),
    backgroundColor: STATE_COLORS[st] + 'cc',
    borderColor: STATE_COLORS[st],
    borderWidth: 0,
    borderRadius: 2,
    categoryPercentage: 1.0,
    barPercentage: 1.0,
  }));
  transitionsChart.update();
}

// ── Update duration doughnut ──────────────────────────────────────
function updateDurationChart(history) {
  if (!durationChart) return;
  const sessions = Array.isArray(history) ? history : [];

  const counts = { flow: 0, stress: 0, curiosity: 0 };
  sessions.forEach(s => {
    const st = (s.state || 'flow').toLowerCase();
    if (counts[st] !== undefined) counts[st]++;
    else counts.flow++;
  });

  // Also accept pre-aggregated totals
  durationChart.data.datasets[0].data = [counts.flow, counts.stress, counts.curiosity];
  durationChart.update();
}

// ── Load states data ──────────────────────────────────────────────
async function loadStatesData() {
  try {
    const resp = await fetch('/api/states-data');
    if (!resp.ok) return;
    const data = await resp.json();
    renderCurrentState(data);
    renderMultipliers(data);
    renderTriggerThresholds(data);
  } catch (e) {
    console.warn('States: states-data load failed', e);
  }
}

async function loadStatesHistory() {
  try {
    const resp = await fetch('/api/states-history');
    if (!resp.ok) return;
    const data = await resp.json();
    const history = data.history || data.sessions || data || [];
    const arr = Array.isArray(history) ? history : [];
    updateTransitionsChart(arr);
    updateDurationChart(arr);
  } catch (e) {
    console.warn('States: states-history load failed', e);
  }
}

// ── Boot ──────────────────────────────────────────────────────────
initTransitionsChart();
initDurationChart();

loadStatesData();
loadStatesHistory();

setInterval(loadStatesData,    3000);
setInterval(loadStatesHistory, 30000);
</script>
{% endblock %}