{% extends "base.html" %}

{% block title %}Prospective Triggers{% endblock %}
{% block page_title %}Prospective Triggers{% endblock %}

{% block content %}
<div class="space-y-5">
  <!-- Stats -->
  <div class="grid grid-cols-3 gap-4">
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-2">Total Triggers</div>
      <div class="text-xl font-mono font-semibold text-slate-200" id="total-triggers">--</div>
    </div>
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
      <div class="flex items-center gap-2 mb-2">
        <span class="w-2 h-2 rounded-full bg-emerald-500 glow-dot" style="color: #10B981;"></span>
        <div class="text-xs uppercase tracking-wider text-emerald-400/70 font-medium">Armed</div>
      </div>
      <div class="text-xl font-mono font-semibold text-emerald-400" id="armed-count">--</div>
    </div>
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-2">Fired</div>
      <div class="text-xl font-mono font-semibold text-slate-400" id="fired-count">--</div>
    </div>
  </div>

  <!-- Triggers grid -->
  <div>
    <div class="flex items-center gap-3 mb-3">
      <div class="text-xs uppercase tracking-wider text-slate-400 font-medium">Armed Triggers</div>
      <span class="w-2 h-2 rounded-full bg-emerald-500 glow-dot" style="color: #10B981;"></span>
    </div>
    <div class="grid grid-cols-2 gap-4" id="armed-triggers">
      <div class="text-xs text-slate-600 py-4 text-center col-span-2">loading...</div>
    </div>
  </div>

  <div>
    <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Fired / Inactive</div>
    <div class="grid grid-cols-2 gap-4" id="fired-triggers">
      <div class="text-xs text-slate-600 py-4 text-center col-span-2">loading...</div>
    </div>
  </div>
</div>

<style>
  @keyframes triggerPulse {
    0%, 100% { border-color: rgba(16,185,129,0.2); }
    50% { border-color: rgba(16,185,129,0.5); }
  }
  .trigger-armed { animation: triggerPulse 3s ease-in-out infinite; }
</style>
{% endblock %}

{% block scripts %}
<script>
function renderTrigger(t, isArmed) {
  const pattern = t.trigger_pattern || t.pattern || '--';
  const action = t.action || '--';
  const context = t.context || '';
  const status = t.status || 'armed';
  const firedAt = t.fired_at;

  if (isArmed) {
    return `<div class="bg-slate-900/50 border border-emerald-500/20 rounded-xl p-5 card trigger-armed">
      <div class="flex items-center gap-2 mb-3">
        <span class="relative flex h-2 w-2">
          <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
        </span>
        <span class="text-xs font-medium text-emerald-400 uppercase tracking-wider">Armed</span>
      </div>
      <div class="mb-3">
        <div class="text-[10px] text-slate-500 uppercase mb-1">Pattern</div>
        <div class="text-sm text-slate-200 font-mono bg-slate-800/50 rounded-lg px-3 py-2">${escapeHtml(pattern)}</div>
      </div>
      <div class="mb-3">
        <div class="text-[10px] text-slate-500 uppercase mb-1">Action</div>
        <div class="text-xs text-slate-300">${escapeHtml(action)}</div>
      </div>
      ${context ? `<div class="text-[10px] text-slate-500 mt-2">${escapeHtml(context)}</div>` : ''}
    </div>`;
  } else {
    return `<div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card opacity-60 hover:opacity-80 transition-opacity">
      <div class="flex items-center gap-2 mb-3">
        <span class="w-2 h-2 rounded-full bg-slate-600"></span>
        <span class="text-xs font-medium text-slate-500 uppercase tracking-wider">${escapeHtml(status)}</span>
        ${firedAt ? `<span class="ml-auto text-[10px] text-slate-600">${relativeTime(firedAt)}</span>` : ''}
      </div>
      <div class="mb-3">
        <div class="text-[10px] text-slate-600 uppercase mb-1">Pattern</div>
        <div class="text-xs text-slate-400 font-mono bg-slate-800/30 rounded-lg px-3 py-2">${escapeHtml(pattern)}</div>
      </div>
      <div>
        <div class="text-[10px] text-slate-600 uppercase mb-1">Action</div>
        <div class="text-xs text-slate-500">${escapeHtml(action)}</div>
      </div>
      ${context ? `<div class="text-[10px] text-slate-600 mt-2">${escapeHtml(context)}</div>` : ''}
    </div>`;
  }
}

async function loadTriggers() {
  const data = await fetchJSON('/api/triggers');
  if (!data) return;

  const triggers = data.triggers || [];
  const armed = triggers.filter(t => t.status === 'armed' || t.status === 'active');
  const fired = triggers.filter(t => t.status !== 'armed' && t.status !== 'active');

  document.getElementById('total-triggers').textContent = triggers.length;
  document.getElementById('armed-count').textContent = data.armed ?? armed.length;
  document.getElementById('fired-count').textContent = data.fired ?? fired.length;

  const armedContainer = document.getElementById('armed-triggers');
  if (armed.length) {
    armedContainer.innerHTML = armed.map(t => renderTrigger(t, true)).join('');
  } else {
    armedContainer.innerHTML = '<div class="col-span-2 bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 text-xs text-slate-500 text-center">No armed triggers</div>';
  }

  const firedContainer = document.getElementById('fired-triggers');
  if (fired.length) {
    firedContainer.innerHTML = fired.map(t => renderTrigger(t, false)).join('');
  } else {
    firedContainer.innerHTML = '<div class="col-span-2 bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 text-xs text-slate-500 text-center">No fired triggers</div>';
  }
}

loadTriggers();
setInterval(loadTriggers, 60000);
</script>
{% endblock %}