{% extends "base.html" %}

{% block title %}Feedback & Danger Theory — Fractal Memory{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Feedback &amp; Danger Theory</h1>
    <p class="subtitle">Danger theory signals, judge ratings, and store triggers</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('feedback')" title="Help">? Help</button>
</div>

<div class="feedback-layout">

  <!-- ── 1. Signal Stream (full-width) ──────────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Signal Stream</h2>
    <div id="signal-stream-list" style="max-height:320px;overflow-y:auto;">
      <div style="color:var(--text-dim);font-size:0.85rem;padding:1rem 0;">Loading signals…</div>
    </div>
  </div>

  <!-- ── 2. Signal Distribution (half-width) ────────────────────────── -->
  <div class="chart-card">
    <h2>Signal Distribution</h2>
    <div style="position:relative;height:240px;">
      <canvas id="signal-dist-chart"></canvas>
    </div>
  </div>

  <!-- ── 3. Danger Theory Stats (half-width) ────────────────────────── -->
  <div class="chart-card">
    <h2>Danger Theory Stats</h2>
    <div id="danger-stats-content">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading stats…</div>
    </div>
  </div>

  <!-- ── 4. Judge Ratings (full-width) ──────────────────────────────── -->
  <div class="chart-card full-width">
    <h2>Judge Ratings</h2>
    <div id="judge-ratings-content">
      <div style="color:var(--text-dim);font-size:0.85rem;">Loading judge ratings…</div>
    </div>
  </div>

  <!-- ── 5. Store Triggers (half-width) ─────────────────────────────── -->
  <div class="chart-card">
    <h2>Store Triggers</h2>
    <div style="position:relative;height:220px;">
      <canvas id="store-triggers-chart"></canvas>
    </div>
  </div>

  <!-- ── 6. Information Richness Over Time (half-width) ─────────────── -->
  <div class="chart-card">
    <h2>Information Richness Over Time</h2>
    <div style="position:relative;height:220px;">
      <canvas id="richness-history-chart"></canvas>
    </div>
  </div>

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


{% block scripts %}
<script>
/* ================================================================
   Feedback & Danger Theory — polling + Chart.js
   ================================================================ */

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

// ── Constants ─────────────────────────────────────────────────────
const SUBTYPE_COLORS = {
  CORRECTION:    '#ef4444',
  RE_ASK:        '#f59e0b',
  REJECTION:     '#dc2626',
  ABANDONMENT:   '#6b7280',
  CONFIRMATION:  '#22c55e',
  ENGAGEMENT:    '#4a9eff',
};

const STORE_SUBTYPE_COLORS = {
  SURPRISE:    '#22d3ee',
  RESOLUTION:  '#4a9eff',
  PREFERENCE:  '#a855f7',
  COMMITMENT:  '#22c55e',
  PATTERN:     '#f59e0b',
};

function subtypeBadge(subtype) {
  const color = SUBTYPE_COLORS[subtype] || '#6b7280';
  return `<span style="display:inline-block;padding:1px 6px;border-radius:4px;font-size:0.7rem;font-weight:700;background:${color}22;color:${color};border:1px solid ${color}66;">${escHtml(subtype || '—')}</span>`;
}

function formatTimeOnly(ts) {
  if (!ts) return '—';
  try {
    const d = new Date(ts);
    return d.toTimeString().slice(0, 8);
  } catch (_) { return String(ts).slice(0, 8); }
}

// ── 1. Signal Stream ──────────────────────────────────────────────
function renderSignalStream(data) {
  const el = document.getElementById('signal-stream-list');
  if (!el) return;
  const signals = (data.session_signals || []).slice(-20).reverse();
  if (signals.length === 0) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;padding:0.5rem 0;">No signals detected this session.</div>';
    return;
  }
  el.innerHTML = signals.map(sig => {
    const isPos = ['SAFETY', 'CONFIRMATION', 'ENGAGEMENT'].includes(sig.signal_type || sig.type || '');
    const dotColor = isPos ? '#22c55e' : '#ef4444';
    const msg = String(sig.message || sig.text || '').slice(0, 100);
    const confidence = sig.confidence != null ? Math.round(sig.confidence * 100) + '%' : '—';
    const subtype = sig.subtype || sig.signal_subtype || '';
    return `
      <div style="display:flex;align-items:flex-start;gap:0.75rem;padding:0.5rem 0;border-bottom:1px solid var(--border);">
        <span style="width:10px;height:10px;border-radius:50%;background:${dotColor};flex-shrink:0;margin-top:4px;"></span>
        <div style="flex:1;min-width:0;">
          ${subtypeBadge(subtype)}
          <span style="font-size:0.82rem;margin-left:0.4rem;color:var(--text);">${escHtml(msg)}</span>
        </div>
        <div style="flex-shrink:0;text-align:right;font-size:0.78rem;color:var(--text-dim);">
          <div>${escHtml(confidence)}</div>
          <div>${escHtml(formatTimeOnly(sig.timestamp))}</div>
        </div>
      </div>`;
  }).join('');
}

// ── 2. Signal Distribution chart ──────────────────────────────────
let signalDistChart = null;

function initSignalDistChart() {
  const ctx = document.getElementById('signal-dist-chart');
  if (!ctx) return;
  signalDistChart = new Chart(ctx, {
    type: 'doughnut',
    data: { labels: [], datasets: [{ data: [], backgroundColor: [], borderWidth: 0 }] },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 400 },
      plugins: {
        legend: { position: 'right', labels: { color: '#c8d6e5', font: { size: 11 }, padding: 10 } },
        tooltip: {
          backgroundColor: '#111118', borderColor: '#1e293b', borderWidth: 1,
          titleColor: '#c8d6e5', bodyColor: '#6b7280',
        },
      },
    },
  });
}

function updateSignalDistChart(data) {
  if (!signalDistChart) return;
  const signals = data.session_signals || [];
  const counts = {};
  for (const sig of signals) {
    const k = sig.subtype || sig.signal_subtype || 'UNKNOWN';
    counts[k] = (counts[k] || 0) + 1;
  }
  const labels = Object.keys(counts);
  signalDistChart.data.labels = labels;
  signalDistChart.data.datasets[0].data = labels.map(l => counts[l]);
  signalDistChart.data.datasets[0].backgroundColor = labels.map(l => SUBTYPE_COLORS[l] || '#6b7280');
  signalDistChart.update();
}

// ── 3. Danger Theory Stats ────────────────────────────────────────
function renderDangerStats(data) {
  const el = document.getElementById('danger-stats-content');
  if (!el) return;
  const st = data.system_state || {};
  const richness = data.information_richness != null ? data.information_richness : (st.information_richness != null ? st.information_richness : null);
  const pct = richness != null ? Math.round(richness * 100) : null;
  el.innerHTML = `
    <div class="stat-row"><span class="stat-label">Message count</span><span class="stat-value" style="font-size:1.4rem;color:var(--blue);">${escHtml(String(data.message_count ?? st.message_count ?? '—'))}</span></div>
    <hr class="divider"/>
    <div class="stat-row"><span class="stat-label">Avg message length</span><span class="stat-value">${escHtml(String(data.avg_message_length != null ? Number(data.avg_message_length).toFixed(1) : (st.avg_message_length != null ? Number(st.avg_message_length).toFixed(1) : '—')))}</span></div>
    <div class="stat-row"><span class="stat-label">Session signal count</span><span class="stat-value">${escHtml(String((data.session_signals || []).length))}</span></div>
    <hr class="divider"/>
    <div style="margin:0.5rem 0 0.25rem;">
      <span class="stat-label" style="display:block;margin-bottom:0.35rem;">Information richness</span>
      <div style="height:8px;background:var(--border);border-radius:4px;overflow:hidden;">
        <div style="height:100%;border-radius:4px;background:#4a9eff;width:${pct != null ? pct : 0}%;transition:width .4s;"></div>
      </div>
      <span style="font-size:0.75rem;color:var(--text-dim);">${pct != null ? pct + '%' : '—'}</span>
    </div>
    <hr class="divider"/>
    <div class="stat-row"><span class="stat-label">Consecutive misses</span><span class="stat-value">${escHtml(String(st.consecutive_misses ?? '—'))}</span></div>
    <div class="stat-row"><span class="stat-label">Consecutive corrections</span><span class="stat-value">${escHtml(String(st.consecutive_corrections ?? '—'))}</span></div>
    <div class="stat-row"><span class="stat-label">Consecutive successes</span><span class="stat-value" style="color:var(--green);">${escHtml(String(st.consecutive_successes ?? '—'))}</span></div>
  `;
}

// ── 4. Judge Ratings ──────────────────────────────────────────────
function ratingBadge(r) {
  if (r === 0) return `<span style="color:var(--text-dim);font-size:0.78rem;">0 — Unused</span>`;
  if (r === 1) return `<span style="background:#f5c51822;color:#f5c518;border:1px solid #f5c51866;padding:1px 6px;border-radius:4px;font-size:0.75rem;">1 — Unclear</span>`;
  return `<span style="background:#22c55e22;color:#22c55e;border:1px solid #22c55e66;padding:1px 6px;border-radius:4px;font-size:0.75rem;">2 — Used</span>`;
}

function renderJudgeRatings(data) {
  const el = document.getElementById('judge-ratings-content');
  if (!el) return;
  const triples = data.judge_triples || [];
  const cost = data.estimated_cost != null ? Number(data.estimated_cost).toFixed(4) : null;
  if (triples.length === 0) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;padding:0.5rem 0;">No judge ratings recorded yet.</div>';
    return;
  }
  const summary = `<p style="font-size:0.78rem;color:var(--text-dim);margin-top:0.75rem;">${triples.length} triple${triples.length !== 1 ? 's' : ''} recorded this session${cost != null ? ` — estimated cost: $${escHtml(cost)}` : ''}</p>`;
  el.innerHTML = `
    <div style="overflow-x:auto;">
      <table class="data-table">
        <thead>
          <tr>
            <th>Memory ID</th>
            <th>Query</th>
            <th>Rating</th>
            <th>Confidence %</th>
          </tr>
        </thead>
        <tbody>
          ${triples.map(t => `
            <tr>
              <td style="font-family:monospace;font-size:0.78rem;color:var(--text-dim);">${escHtml(String(t.memory_id || '').slice(0, 8))}</td>
              <td style="max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.82rem;">${escHtml(String(t.query || '').slice(0, 60))}</td>
              <td>${ratingBadge(t.rating)}</td>
              <td style="color:var(--text-dim);font-size:0.82rem;">${t.confidence != null ? Math.round(t.confidence * 100) + '%' : '—'}</td>
            </tr>`).join('')}
        </tbody>
      </table>
    </div>
    ${summary}
  `;
}

// ── 5. Store Triggers chart ───────────────────────────────────────
let storeTriggersChart = null;

function initStoreTriggersChart() {
  const ctx = document.getElementById('store-triggers-chart');
  if (!ctx) return;
  storeTriggersChart = new Chart(ctx, {
    type: 'bar',
    data: { labels: [], datasets: [{ label: 'Count', data: [], backgroundColor: [], borderWidth: 0, borderRadius: 4 }] },
    options: {
      indexAxis: 'y',
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 400 },
      scales: {
        x: { grid: { color: '#1e293b' }, ticks: { color: '#6b7280' }, beginAtZero: true },
        y: { grid: { color: 'transparent' }, ticks: { color: '#c8d6e5', font: { size: 11 } } },
      },
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: '#111118', borderColor: '#1e293b', borderWidth: 1,
          titleColor: '#c8d6e5', bodyColor: '#6b7280',
        },
      },
    },
  });
}

function updateStoreTriggersChart(data) {
  if (!storeTriggersChart) return;
  const subtypes = ['SURPRISE', 'RESOLUTION', 'PREFERENCE', 'COMMITMENT', 'PATTERN'];
  const counts = data.store_trigger_counts || {};
  storeTriggersChart.data.labels = subtypes;
  storeTriggersChart.data.datasets[0].data = subtypes.map(s => counts[s] || 0);
  storeTriggersChart.data.datasets[0].backgroundColor = subtypes.map(s => STORE_SUBTYPE_COLORS[s] || '#4a9eff');
  storeTriggersChart.update();
}

// ── 6. Information Richness history chart ─────────────────────────
let richnessHistoryChart = null;

function initRichnessHistoryChart() {
  const ctx = document.getElementById('richness-history-chart');
  if (!ctx) return;
  richnessHistoryChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [],
      datasets: [{
        label: 'Richness',
        data: [],
        borderColor: '#4a9eff',
        backgroundColor: 'rgba(74,158,255,0.08)',
        borderWidth: 2,
        pointRadius: 3,
        tension: 0.35,
        fill: true,
      }],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      animation: { duration: 400 },
      scales: {
        x: { grid: { color: '#1e293b' }, ticks: { color: '#6b7280', maxTicksLimit: 10 } },
        y: { min: 0, max: 1, grid: { color: '#1e293b' }, ticks: { color: '#6b7280', stepSize: 0.2 } },
      },
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: '#111118', borderColor: '#1e293b', borderWidth: 1,
          titleColor: '#c8d6e5', bodyColor: '#6b7280',
        },
      },
    },
  });
}

async function loadRichnessHistory() {
  try {
    const resp = await fetch('/api/feedback-history');
    if (!resp.ok) return;
    const data = await resp.json();
    if (!richnessHistoryChart) return;
    const sessions = data.sessions || [];
    richnessHistoryChart.data.labels = sessions.map((_, i) => 'S' + (i + 1));
    richnessHistoryChart.data.datasets[0].data = sessions.map(s => s.session_score != null ? s.session_score : null);
    richnessHistoryChart.update();
  } catch (e) {
    console.warn('Feedback: richness history load failed', e);
  }
}

// ── Combined feedback-state loader ────────────────────────────────
async function loadFeedbackState() {
  try {
    const resp = await fetch('/api/feedback-state');
    if (!resp.ok) return;
    const data = await resp.json();
    renderSignalStream(data);
    renderDangerStats(data);
  } catch (e) {
    console.warn('Feedback: feedback-state load failed', e);
  }
}

async function loadFeedbackStateSlow() {
  try {
    const resp = await fetch('/api/feedback-state');
    if (!resp.ok) return;
    const data = await resp.json();
    updateSignalDistChart(data);
    updateStoreTriggersChart(data);
  } catch (e) {
    console.warn('Feedback: feedback-state (slow) load failed', e);
  }
}

async function loadJudgeRatings() {
  try {
    const resp = await fetch('/api/feedback-state');
    if (!resp.ok) return;
    const data = await resp.json();
    renderJudgeRatings(data);
  } catch (e) {
    console.warn('Feedback: judge ratings load failed', e);
  }
}

// ── Boot ──────────────────────────────────────────────────────────
initSignalDistChart();
initStoreTriggersChart();
initRichnessHistoryChart();

loadFeedbackState();
loadFeedbackStateSlow();
loadJudgeRatings();
loadRichnessHistory();

setInterval(loadFeedbackState,      5000);
setInterval(loadFeedbackStateSlow, 10000);
setInterval(loadJudgeRatings,      15000);
setInterval(loadRichnessHistory,   30000);
</script>
{% endblock %}