{% extends "base.html" %}

{% block title %}Somatic Markers{% endblock %}
{% block page_title %}Somatic Markers{% endblock %}

{% block content %}
<div class="max-w-3xl">
  <p class="text-sm text-slate-400 mb-6">Risk associations from past errors. Higher scores indicate areas needing extra caution.</p>
  <div id="risks" class="space-y-2"></div>
  <div id="empty" class="p-12 text-center text-slate-500 text-sm hidden">No somatic markers recorded</div>
</div>
{% endblock %}

{% block scripts %}
<script>
  function barColor(score) {
    if (score > 5) return 'bg-red-500';
    if (score > 2) return 'bg-amber-500';
    return 'bg-emerald-500';
  }

  function scoreColor(score) {
    if (score > 5) return 'text-red-400';
    if (score > 2) return 'text-amber-400';
    return 'text-emerald-400';
  }

  function loadData() {
    fetch('/api/somatic')
      .then(r => r.json())
      .then(data => {
        const risks = (data.risks || []).slice().sort((a, b) => {
          const sa = Math.abs(a.cumulative_score || a.score || 0);
          const sb = Math.abs(b.cumulative_score || b.score || 0);
          return sb - sa;
        });

        const container = document.getElementById('risks');
        const empty = document.getElementById('empty');

        if (!risks.length) {
          empty.classList.remove('hidden');
          return;
        }

        const max = Math.max(...risks.map(r => Math.abs(r.cumulative_score || r.score || 0)), 1);

        container.innerHTML = risks.map(r => {
          const score = Math.abs(r.cumulative_score || r.score || 0);
          const pct = Math.min((score / max) * 100, 100);
          const target_type = r.target_type || r.type || '';
          const target = (r.target || r.name || '').replace(/</g, '&lt;');
          const bc = barColor(score);
          const sc = scoreColor(score);

          return `<div class="flex items-center gap-3 py-1">
<span class="text-xs w-20 text-right text-slate-400 flex-shrink-0 font-medium">${target_type}</span>
<span class="text-sm w-56 truncate text-slate-200 flex-shrink-0">${target}</span>
<div class="flex-1 h-2.5 bg-slate-800 rounded-full overflow-hidden">
  <div class="h-full rounded-full ${bc}" style="width:${pct.toFixed(1)}%"></div>
</div>
<span class="text-sm font-mono ${sc} w-12 text-right font-medium">${score.toFixed(1)}</span>
</div>`;
        }).join('');
      })
      .catch(err => {
        document.getElementById('risks').innerHTML = `<p class="text-xs text-red-400">Failed to load: ${err.message}</p>`;
      });
  }

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