{% extends "base.html" %}

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

{% block content %}
<div class="page-header" style="display:flex;align-items:flex-start;justify-content:space-between;">
  <div>
    <h1>Configuration</h1>
    <p class="subtitle">All 68+ live parameters — current values, categories, and morphogen sensitivity</p>
  </div>
  <button class="btn-secondary" onclick="openHelp('config')" title="Help">? Help</button>
</div>

<div class="config-layout">

  <!-- ── Search Bar (full width) ─────────────────────────────────── -->
  <div class="chart-card full-width">
    <input
      type="text"
      id="param-search"
      class="config-search"
      placeholder="Search parameters..."
      autocomplete="off"
    />
  </div>

  <!-- ── Parameter Table (full width) ───────────────────────────── -->
  <div class="chart-card full-width">
    <h2>All Parameters</h2>
    <div style="overflow-x:auto;">
      <table class="data-table" id="param-table">
        <thead>
          <tr>
            <th>Category</th>
            <th>Parameter</th>
            <th>Value</th>
            <th>Default</th>
            <th>Morphogen Sensitivity</th>
          </tr>
        </thead>
        <tbody id="param-tbody">
          <tr><td colspan="5" style="color:var(--text-dim);text-align:center;padding:2rem;">Loading parameters…</td></tr>
        </tbody>
      </table>
    </div>
  </div>

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

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

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


{% block scripts %}
<script>
/* ================================================================
   Configuration — live parameter table, feature flags, thresholds
   ================================================================ */

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

// ── Sensitivity badge ─────────────────────────────────────────────
function sensitivityBadge(s) {
  if (!s) return '<span style="color:var(--text-dim);font-size:0.75rem;">—</span>';
  const upper = String(s).toUpperCase();
  if (upper === 'H' || upper === 'HIGH') {
    return '<span style="background:#ff2d5522;color:var(--red);border:1px solid #ff2d5540;font-size:0.72rem;padding:1px 7px;border-radius:3px;font-weight:600;">H</span>';
  }
  if (upper === 'M' || upper === 'MEDIUM') {
    return '<span style="background:#f5c51822;color:#f5c518;border:1px solid #f5c51840;font-size:0.72rem;padding:1px 7px;border-radius:3px;font-weight:600;">M</span>';
  }
  return '<span style="color:var(--text-dim);font-size:0.72rem;border:1px solid var(--border);padding:1px 7px;border-radius:3px;">L</span>';
}

// ── Bool badge ────────────────────────────────────────────────────
function boolBadge(val) {
  if (val === true || val === 'true' || val === 'True') {
    return '<span style="background:#34d39922;color:#34d399;border:1px solid #34d39940;font-size:0.72rem;padding:1px 7px;border-radius:3px;font-weight:600;">true</span>';
  }
  if (val === false || val === 'false' || val === 'False') {
    return '<span style="background:#ff2d5522;color:var(--red);border:1px solid #ff2d5540;font-size:0.72rem;padding:1px 7px;border-radius:3px;font-weight:600;">false</span>';
  }
  return null;
}

// ── Gauge bar (0–1 range) ─────────────────────────────────────────
function gaugeBar(val, max) {
  const pct = Math.max(0, Math.min(100, (parseFloat(val) / (max || 1)) * 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:44px;text-align:right;font-size:0.8rem;font-weight:600;color:var(--text);">${Number(val).toFixed(3)}</span>
    </div>`;
}

// ── Stored config data ────────────────────────────────────────────
let allRows = [];

// ── Build flat rows from config state ────────────────────────────
function flattenConfig(data) {
  const rows = [];
  const params = data.params || data.parameters || data;

  // If data has category groupings
  if (data.categories) {
    for (const [cat, fields] of Object.entries(data.categories)) {
      for (const [key, meta] of Object.entries(fields)) {
        rows.push({
          category: cat,
          param: key,
          value: meta.value !== undefined ? meta.value : meta,
          default: meta.default !== undefined ? meta.default : '—',
          sensitivity: meta.sensitivity || meta.morph_sensitivity || '',
        });
      }
    }
    return rows;
  }

  // Flat object — best-effort category inference
  const categoryMap = {
    storage: 'Storage', db_: 'Storage', file_: 'Storage',
    llm_: 'LLM', model_: 'LLM', temperature: 'LLM', max_tokens: 'LLM',
    embed: 'Embedding', vector_: 'Embedding',
    retrieval_: 'Retrieval', top_k: 'Retrieval', similarity_: 'Retrieval',
    gate_: 'Gate', pioneer_: 'Gate', shrub_: 'Gate',
    lifecycle_: 'Lifecycle', probation_: 'Lifecycle', permanent_: 'Lifecycle',
    buffer_: 'Buffer', working_: 'Buffer', l1_: 'Buffer', l2_: 'Buffer', l3_: 'Buffer',
    assoc: 'Association', spreading: 'Association', edge_: 'Association',
    consolid: 'Consolidation', merge_: 'Consolidation', slow_wave: 'Consolidation',
    scar_: 'Scar',
    feedback_: 'Feedback', judge_: 'Feedback',
    domain_: 'Domain',
    morphogen: 'Phase3-Morphogen', richness_: 'Phase3-Morphogen',
    apoptosis_: 'Phase3-Apoptosis',
    niche_: 'Phase3-Niche',
    dream: 'Phase3-Dreaming', rem_: 'Phase3-Dreaming',
    state_: 'Phase3-States', stress_: 'Phase3-States',
    maintenance_: 'Phase3-Maintenance',
    dashboard_: 'Dashboard',
    mcp_: 'MCP',
    bootstrap_: 'Bootstrap',
  };

  function inferCat(key) {
    for (const [prefix, cat] of Object.entries(categoryMap)) {
      if (key.startsWith(prefix) || key.includes(prefix)) return cat;
    }
    return 'General';
  }

  const source = params && typeof params === 'object' ? params : data;
  for (const [key, val] of Object.entries(source)) {
    if (typeof val === 'object' && val !== null && !Array.isArray(val) && val.value !== undefined) {
      rows.push({
        category: val.category || inferCat(key),
        param: key,
        value: val.value,
        default: val.default !== undefined ? val.default : '—',
        sensitivity: val.sensitivity || val.morph_sensitivity || '',
      });
    } else if (typeof val !== 'object') {
      rows.push({
        category: inferCat(key),
        param: key,
        value: val,
        default: '—',
        sensitivity: '',
      });
    }
  }
  return rows;
}

// ── Render table rows ─────────────────────────────────────────────
function renderParamTable(filter) {
  const tbody = document.getElementById('param-tbody');
  if (!tbody) return;
  const q = (filter || '').toLowerCase().trim();
  const visible = q
    ? allRows.filter(r => r.param.toLowerCase().includes(q) || r.category.toLowerCase().includes(q))
    : allRows;

  if (visible.length === 0) {
    tbody.innerHTML = '<tr><td colspan="5" style="color:var(--text-dim);text-align:center;padding:2rem;">No matching parameters.</td></tr>';
    return;
  }

  tbody.innerHTML = visible.map(r => {
    const bb = boolBadge(r.value);
    const valHtml = bb !== null ? bb : `<span style="font-family:monospace;font-size:0.82rem;">${escHtml(String(r.value))}</span>`;
    const defBb = boolBadge(r.default);
    const defHtml = defBb !== null ? defBb : `<span style="font-size:0.82rem;color:var(--text-dim);">${escHtml(String(r.default))}</span>`;
    return `<tr class="memory-row">
      <td><span style="font-size:0.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.04em;">${escHtml(r.category)}</span></td>
      <td style="font-family:monospace;font-size:0.82rem;color:var(--text);">${escHtml(r.param)}</td>
      <td>${valHtml}</td>
      <td>${defHtml}</td>
      <td>${sensitivityBadge(r.sensitivity)}</td>
    </tr>`;
  }).join('');
}

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

  const KNOWN_FLAGS = [
    'enable_spreading_activation',
    'enable_scar_penalty',
    'enable_llm_judge',
    'enable_morphogens',
    'enable_bandits',
    'enable_states',
    'enable_consolidation',
    'enable_apoptosis',
    'enable_niche',
    'enable_dreaming',
    'enable_cascade_detector',
    'enable_folding',
  ];

  // Collect bool fields from data
  const flags = [];
  const source = data.params || data.parameters || data;
  const flat = typeof source === 'object' && source !== null ? source : {};

  for (const key of KNOWN_FLAGS) {
    if (key in flat) {
      const raw = flat[key];
      const v = typeof raw === 'object' && raw !== null && raw.value !== undefined ? raw.value : raw;
      flags.push({ key, value: v });
    }
  }
  // Also scan for any bool fields not in known list
  for (const [key, val] of Object.entries(flat)) {
    if (KNOWN_FLAGS.includes(key)) continue;
    const raw = typeof val === 'object' && val !== null && val.value !== undefined ? val.value : val;
    if (raw === true || raw === false) {
      flags.push({ key, value: raw });
    }
  }

  if (flags.length === 0) {
    el.innerHTML = '<div style="color:var(--text-dim);font-size:0.85rem;">No boolean flags found.</div>';
    return;
  }

  el.innerHTML = flags.map(f => {
    const on = f.value === true || f.value === 'true' || f.value === 'True';
    const badge = on
      ? '<span style="background:#34d39922;color:#34d399;border:1px solid #34d39940;font-size:0.72rem;padding:2px 10px;border-radius:10px;font-weight:600;flex-shrink:0;">ON</span>'
      : '<span style="background:#6b728022;color:#6b7280;border:1px solid #6b728040;font-size:0.72rem;padding:2px 10px;border-radius:10px;font-weight:600;flex-shrink:0;">OFF</span>';
    return `<div style="display:flex;justify-content:space-between;align-items:center;padding:0.4rem 0;border-bottom:1px solid var(--border);gap:0.5rem;">
      <span style="font-family:monospace;font-size:0.82rem;color:var(--text);">${escHtml(f.key)}</span>
      ${badge}
    </div>`;
  }).join('');
}

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

  const THRESHOLD_KEYS = [
    'scar_match_threshold',
    'apoptosis_context_drift_threshold',
    'rem_resonance_min',
    'rem_resonance_max',
    'merge_similarity_threshold',
    'domain_drift_threshold',
  ];

  const source = data.params || data.parameters || data;
  const flat = typeof source === 'object' && source !== null ? source : {};

  const items = [];
  for (const key of THRESHOLD_KEYS) {
    if (key in flat) {
      const raw = flat[key];
      const v = typeof raw === 'object' && raw !== null && raw.value !== undefined ? raw.value : raw;
      items.push({ key, value: parseFloat(v) });
    }
  }

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

  el.innerHTML = items.map(t => {
    const isNaN_ = isNaN(t.value);
    return `<div style="margin-bottom:0.75rem;">
      <div style="display:flex;justify-content:space-between;margin-bottom:0.25rem;">
        <span style="font-family:monospace;font-size:0.8rem;color:var(--text-dim);">${escHtml(t.key)}</span>
      </div>
      ${isNaN_ ? `<span style="color:var(--text-dim);font-size:0.8rem;">${escHtml(String(t.value))}</span>` : gaugeBar(t.value, 1)}
    </div>`;
  }).join('');
}

// ── Load config state ─────────────────────────────────────────────
async function loadConfigState() {
  try {
    const resp = await fetch('/api/config-state');
    if (!resp.ok) return;
    const data = await resp.json();
    allRows = flattenConfig(data);
    const q = document.getElementById('param-search');
    renderParamTable(q ? q.value : '');
    renderFlags(data);
    renderThresholds(data);
  } catch (e) {
    console.warn('Config: config-state load failed', e);
  }
}

// ── Search input wiring ───────────────────────────────────────────
const searchInput = document.getElementById('param-search');
if (searchInput) {
  searchInput.addEventListener('input', () => {
    renderParamTable(searchInput.value);
  });
}

// ── Boot ──────────────────────────────────────────────────────────
loadConfigState();
</script>
{% endblock %}