{% extends "base.html" %}

{% block title %}Adaptive Personality{% endblock %}
{% block page_title %}Adaptive Personality{% endblock %}

{% block content %}
<div class="grid grid-cols-2 gap-4 max-w-4xl mb-6">
  <!-- Current Mode card -->
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-lg p-4">
    <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Current Mode</div>
    <div id="mode" class="mb-2"></div>
    <p id="mode-desc" class="text-xs text-slate-400"></p>
  </div>
  <!-- Weights card -->
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-lg p-4">
    <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Signal Weights</div>
    <div id="weights" class="space-y-2"></div>
  </div>
</div>
<!-- History table -->
<div class="bg-slate-900/50 border border-slate-800/50 rounded-lg p-4 max-w-4xl">
  <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Mode History</div>
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead><tr class="text-left text-slate-400 border-b border-slate-800">
        <th class="py-2.5 pr-4 font-medium text-xs uppercase tracking-wide">Time</th>
        <th class="py-2.5 pr-4 font-medium text-xs uppercase tracking-wide">Mode</th>
        <th class="py-2.5 pr-4 font-medium text-xs uppercase tracking-wide">Score</th>
        <th class="py-2.5 font-medium text-xs uppercase tracking-wide">Signals</th>
      </tr></thead>
      <tbody id="history" class="divide-y divide-slate-800/50"></tbody>
    </table>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const MODE_META = {
    FLOW:    { desc: 'Operating at peak alignment. User is in flow state — proactive suggestions welcome.' },
    NORMAL:  { desc: 'Standard operating mode. Balanced tone and normal autonomy levels.' },
    TENSION: { desc: 'Elevated tension detected. Ultra-concise mode active — no preamble, direct resolution only.' },
  };

  function modeBadge(mode) {
    if (mode === 'FLOW')    return `<span class="px-2 py-1 rounded-md text-xs font-medium bg-emerald-500/10 text-emerald-400">FLOW</span>`;
    if (mode === 'TENSION') return `<span class="px-2 py-1 rounded-md text-xs font-medium bg-red-500/10 text-red-400">TENSION</span>`;
    return `<span class="px-2 py-1 rounded-md text-xs font-medium bg-blue-500/10 text-blue-400">NORMAL</span>`;
  }

  function formatTime(ts) {
    if (!ts) return '—';
    try {
      const d = new Date(ts);
      return d.toLocaleString('en-GB', { dateStyle: 'short', timeStyle: 'short' });
    } catch { return ts; }
  }

  function loadData() {
    fetch('/api/adaptive')
      .then(r => r.json())
      .then(data => {
        const mode = data.state?.mode || data.mode || 'NORMAL';

        // Current Mode
        document.getElementById('mode').innerHTML = modeBadge(mode);
        document.getElementById('mode-desc').textContent =
          data.modes?.[mode] || MODE_META[mode]?.desc || '';

        // Signal Weights
        const weights = data.weights || {};
        const weightEntries = Object.entries(weights).sort((a, b) => b[1] - a[1]);
        const weightsEl = document.getElementById('weights');

        if (!weightEntries.length) {
          weightsEl.innerHTML = '<p class="text-sm text-slate-500">No signal weights configured.</p>';
        } else {
          weightsEl.innerHTML = weightEntries.map(([name, value]) => {
            const pct = Math.min(Math.max(value * 100, 0), 100);
            return `<div class="flex items-center gap-2">
<span class="text-sm text-slate-300 w-24">${name}</span>
<div class="flex-1 h-2 bg-slate-800 rounded-full overflow-hidden">
  <div class="h-full bg-violet-500 rounded-full" style="width:${pct.toFixed(0)}%"></div>
</div>
<span class="text-xs font-mono text-slate-400 w-12 text-right">${pct.toFixed(0)}%</span>
</div>`;
          }).join('');
        }

        // History
        const history = (data.history || []).slice(0, 50);
        const tbody = document.getElementById('history');

        if (!history.length) {
          tbody.innerHTML = '<tr><td colspan="4" class="py-6 text-center text-slate-500">No history recorded yet.</td></tr>';
        } else {
          tbody.innerHTML = history.map(h => {
            const m = h.mode || 'NORMAL';
            const signals = (h.signals || '').toString().replace(/</g, '&lt;');
            const score = h.score != null ? Number(h.score).toFixed(2) : '—';
            return `<tr class="text-slate-300">
<td class="py-2 pr-4 font-mono text-xs">${formatTime(h.timestamp)}</td>
<td class="py-2 pr-4">${modeBadge(m)}</td>
<td class="py-2 pr-4 font-mono text-sm">${score}</td>
<td class="py-2 text-slate-400 text-sm">${signals || '—'}</td>
</tr>`;
          }).join('');
        }
      })
      .catch(err => {
        document.getElementById('history').innerHTML =
          `<tr><td colspan="4" class="py-4 text-center text-red-400 text-xs">Failed to load: ${err.message}</td></tr>`;
      });
  }

  loadData();
</script>
{% endblock %}