{% extends "base.html" %}

{% block title %}Guard Heatmap{% endblock %}

{% block page_title %}Guard Heatmap{% endblock %}
{% block page_subtitle %}<span class="text-xs text-slate-500 ml-2">Risk map of the codebase</span>{% endblock %}

{% block header_actions %}
<button onclick="loadData()" class="text-xs text-slate-400 hover:text-slate-200 transition-colors px-2 py-1 rounded hover:bg-slate-800">
  <svg class="w-3.5 h-3.5 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
  Refresh
</button>
{% endblock %}

{% block content %}
<!-- Stats row -->
<div class="grid grid-cols-4 gap-4 mb-6">
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Total Checks</p>
    <p class="text-2xl font-display font-bold text-slate-100" id="stat-total">--</p>
  </div>
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Areas Covered</p>
    <p class="text-2xl font-display font-bold text-slate-100" id="stat-areas">--</p>
  </div>
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Blocking Rate</p>
    <p class="text-2xl font-display font-bold text-red-400" id="stat-blocking">--</p>
  </div>
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Somatic Risks</p>
    <p class="text-2xl font-display font-bold text-amber-400" id="stat-somatic">--</p>
  </div>
</div>

<!-- Heatmap + Somatic -->
<div class="grid grid-cols-3 gap-5 mb-6">
  <!-- Heatmap Grid -->
  <div class="col-span-2 bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold">Risk Heatmap</h2>
      <div class="flex items-center gap-2 text-[10px] text-slate-500">
        <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-emerald-500/80"></span>Low</span>
        <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-amber-500/80"></span>Medium</span>
        <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-red-500/80"></span>High</span>
      </div>
    </div>
    <div id="heatmap-grid" class="grid grid-cols-3 gap-3">
      <div class="col-span-3 py-12 text-center text-sm text-slate-500">Loading heatmap...</div>
    </div>
  </div>

  <!-- Somatic Markers -->
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-4">Somatic Risk Targets</h2>
    <div id="somatic-list" class="space-y-3">
      <div class="py-8 text-center text-sm text-slate-500">Loading...</div>
    </div>
  </div>
</div>

<!-- Area Detail Modal -->
<div id="area-modal" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center" onclick="if(event.target===this)closeModal()">
  <div class="bg-slate-900 border border-slate-700 rounded-2xl p-6 max-w-lg w-full mx-4 shadow-2xl animate-slide-in">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-sm font-display font-semibold text-slate-100" id="modal-title">Area Details</h3>
      <button onclick="closeModal()" class="text-slate-500 hover:text-slate-300 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/></svg>
      </button>
    </div>
    <div id="modal-content" class="space-y-3"></div>
  </div>
</div>

<!-- Recent Guard Checks -->
<div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold">Recent Guard Checks</h2>
    <span class="text-[10px] text-slate-600 font-mono" id="checks-count">--</span>
  </div>
  <div id="checks-table" class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="text-left text-xs text-slate-500 uppercase tracking-wider border-b border-slate-800/50">
          <th class="pb-2 pr-3 font-semibold">Area</th>
          <th class="pb-2 pr-3 font-semibold">Action</th>
          <th class="pb-2 pr-3 font-semibold">Result</th>
          <th class="pb-2 pr-3 font-semibold">Warnings</th>
          <th class="pb-2 font-semibold">Time</th>
        </tr>
      </thead>
      <tbody id="checks-body" class="divide-y divide-slate-800/30">
        <tr><td colspan="5" class="py-8 text-center text-slate-500">Loading checks...</td></tr>
      </tbody>
    </table>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  let guardData = null;

  function heatColor(blocking, total) {
    if (!total) return { bg: 'bg-slate-800/50', border: 'border-slate-700/30', text: 'text-slate-500' };
    const ratio = blocking / total;
    if (ratio > 0.3) return { bg: 'bg-red-500/15', border: 'border-red-500/30', text: 'text-red-400' };
    if (ratio > 0.1) return { bg: 'bg-amber-500/15', border: 'border-amber-500/30', text: 'text-amber-400' };
    return { bg: 'bg-emerald-500/15', border: 'border-emerald-500/30', text: 'text-emerald-400' };
  }

  function showAreaDetail(area) {
    if (!guardData || !guardData.heatmap) return;
    const info = guardData.heatmap[area];
    if (!info) return;

    document.getElementById('modal-title').textContent = area;
    const content = document.getElementById('modal-content');
    content.innerHTML = `
      <div class="grid grid-cols-3 gap-3">
        <div class="bg-slate-800/50 rounded-lg p-3 text-center">
          <p class="text-lg font-bold text-slate-100">${info.count || 0}</p>
          <p class="text-[10px] text-slate-500 uppercase tracking-wider">Checks</p>
        </div>
        <div class="bg-slate-800/50 rounded-lg p-3 text-center">
          <p class="text-lg font-bold text-red-400">${info.blocking || 0}</p>
          <p class="text-[10px] text-slate-500 uppercase tracking-wider">Blocking</p>
        </div>
        <div class="bg-slate-800/50 rounded-lg p-3 text-center">
          <p class="text-lg font-bold text-violet-400">${info.learnings || 0}</p>
          <p class="text-[10px] text-slate-500 uppercase tracking-wider">Learnings</p>
        </div>
      </div>
      ${(info.recent_checks || []).length ? `
      <div class="mt-3">
        <p class="text-xs text-slate-500 font-semibold uppercase tracking-wider mb-2">Recent Checks</p>
        <div class="space-y-1.5">
          ${(info.recent_checks || []).slice(0, 5).map(c => `
            <div class="flex items-center justify-between bg-slate-800/30 rounded-lg px-3 py-2 text-xs">
              <span class="text-slate-300">${escapeHtml(c.action || c.description || '--')}</span>
              <span class="${c.passed ? 'text-emerald-400' : 'text-red-400'}">${c.passed ? 'PASS' : 'BLOCK'}</span>
            </div>
          `).join('')}
        </div>
      </div>` : ''}
    `;
    document.getElementById('area-modal').classList.remove('hidden');
  }

  function closeModal() {
    document.getElementById('area-modal').classList.add('hidden');
  }

  async function loadData() {
    const data = await fetchJSON('/api/guard');
    if (!data) return;
    guardData = data;

    const checks = data.checks || [];
    const heatmap = data.heatmap || {};
    const markers = data.somatic_markers || [];

    // Stats
    const totalChecks = checks.length;
    const areas = Object.keys(heatmap);
    const totalBlocking = checks.filter(c => !c.passed && (c.type === 'blocking' || c.blocked)).length;
    const blockingRate = totalChecks > 0 ? ((totalBlocking / totalChecks) * 100).toFixed(1) + '%' : '0%';

    document.getElementById('stat-total').textContent = formatNumber(totalChecks);
    document.getElementById('stat-areas').textContent = areas.length;
    document.getElementById('stat-blocking').textContent = blockingRate;
    document.getElementById('stat-somatic').textContent = markers.length;

    // Heatmap grid
    const grid = document.getElementById('heatmap-grid');
    if (!areas.length) {
      grid.innerHTML = '<div class="col-span-3 py-12 text-center text-sm text-slate-500">No guard areas recorded yet</div>';
    } else {
      grid.innerHTML = areas.map(area => {
        const info = heatmap[area];
        const c = heatColor(info.blocking || 0, info.count || 0);
        return `
          <button onclick="showAreaDetail('${escapeHtml(area)}')"
            class="${c.bg} border ${c.border} rounded-xl p-4 text-left transition-all hover:scale-[1.02] hover:shadow-lg cursor-pointer group">
            <p class="text-sm font-semibold text-slate-200 group-hover:text-white truncate">${escapeHtml(area)}</p>
            <div class="flex items-center gap-3 mt-2">
              <span class="text-xs text-slate-400">${info.count || 0} checks</span>
              <span class="text-xs ${c.text} font-medium">${info.blocking || 0} blocking</span>
            </div>
            <div class="mt-2 h-1.5 bg-slate-800/50 rounded-full overflow-hidden">
              <div class="h-full rounded-full transition-all duration-500 ${info.blocking > 0 ? (info.blocking / info.count > 0.3 ? 'bg-red-500' : 'bg-amber-500') : 'bg-emerald-500'}"
                style="width: ${info.count ? Math.min(((info.blocking || 0) / info.count) * 100, 100).toFixed(1) : 0}%"></div>
            </div>
          </button>
        `;
      }).join('');
    }

    // Somatic markers
    const somaticList = document.getElementById('somatic-list');
    if (!markers.length) {
      somaticList.innerHTML = '<div class="py-8 text-center text-sm text-slate-500">No somatic markers</div>';
    } else {
      const maxScore = Math.max(...markers.map(m => m.risk_score || 0), 1);
      somaticList.innerHTML = markers.sort((a, b) => (b.risk_score || 0) - (a.risk_score || 0)).slice(0, 10).map(m => {
        const score = m.risk_score || 0;
        const pct = (score / maxScore * 100).toFixed(1);
        const color = score > 5 ? 'bg-red-500' : score > 2 ? 'bg-amber-500' : 'bg-emerald-500';
        const textColor = score > 5 ? 'text-red-400' : score > 2 ? 'text-amber-400' : 'text-emerald-400';
        return `
          <div class="flex items-center gap-3">
            <div class="flex-1 min-w-0">
              <p class="text-xs text-slate-300 truncate">${escapeHtml(m.target || '--')}</p>
              <div class="mt-1 h-1.5 bg-slate-800/50 rounded-full overflow-hidden">
                <div class="h-full rounded-full ${color} transition-all duration-700" style="width:${pct}%"></div>
              </div>
            </div>
            <div class="text-right flex-shrink-0">
              <span class="text-xs font-mono font-medium ${textColor}">${score.toFixed(1)}</span>
              <p class="text-[10px] text-slate-600">${m.incident_count || 0} incidents</p>
            </div>
          </div>
        `;
      }).join('');
    }

    // Recent checks table
    document.getElementById('checks-count').textContent = `${checks.length} checks`;
    const tbody = document.getElementById('checks-body');
    if (!checks.length) {
      tbody.innerHTML = '<tr><td colspan="5" class="py-8 text-center text-slate-500 text-sm">No guard checks recorded</td></tr>';
    } else {
      tbody.innerHTML = checks.slice(0, 25).map(c => {
        const passed = c.passed !== false && !c.blocked;
        const warnings = c.warnings || c.warning_count || 0;
        return `
          <tr class="group hover:bg-slate-800/20 transition-colors">
            <td class="py-2.5 pr-3 text-slate-300">${escapeHtml(c.area || c.category || '--')}</td>
            <td class="py-2.5 pr-3 text-slate-400 font-mono text-xs max-w-[200px] truncate">${escapeHtml(c.action || c.description || '--')}</td>
            <td class="py-2.5 pr-3">
              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase ${passed ? 'bg-emerald-500/15 text-emerald-400' : 'bg-red-500/15 text-red-400'}">
                <span class="w-1.5 h-1.5 rounded-full ${passed ? 'bg-emerald-400' : 'bg-red-400'}"></span>
                ${passed ? 'Pass' : 'Block'}
              </span>
            </td>
            <td class="py-2.5 pr-3 text-xs ${warnings > 0 ? 'text-amber-400' : 'text-slate-600'}">${warnings > 0 ? warnings + ' warning' + (warnings !== 1 ? 's' : '') : 'none'}</td>
            <td class="py-2.5 text-xs text-slate-500">${relativeTime(c.created_at || c.checked_at)}</td>
          </tr>
        `;
      }).join('');
    }
  }

  loadData();
  setInterval(loadData, 60000);

  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
</script>
{% endblock %}