{% extends "base.html" %}
{% block title %}Alerts — MemoryLens{% endblock %}
{% block content %}
<div class="px-6 pt-4 pb-2">
    <h2 class="text-xl font-semibold mb-1">Alerts</h2>
    <p class="text-xs text-white/40 mb-6">Threshold-based alerting on drift, cost, retrieval, compression, and errors.</p>

    <!-- Active Rules -->
    <h3 class="text-sm font-semibold mb-2 text-white/70">Active Rules</h3>
    {% if rules %}
    <div class="overflow-x-auto mb-8">
        <table class="w-full text-xs">
            <thead>
                <tr class="border-b border-white/[0.06] text-white/40 text-left">
                    <th class="pb-2 pr-4">NAME</th>
                    <th class="pb-2 pr-4">TYPE</th>
                    <th class="pb-2 pr-4 text-right">THRESHOLD</th>
                    <th class="pb-2 pr-4 text-center">ENABLED</th>
                    <th class="pb-2">WEBHOOK</th>
                </tr>
            </thead>
            <tbody>
                {% for rule in rules %}
                <tr class="border-b border-white/[0.04] hover:bg-white/[0.02]">
                    <td class="py-2 pr-4 font-mono text-slate-300">{{ rule.name }}</td>
                    <td class="py-2 pr-4 text-indigo-300">{{ rule.alert_type }}</td>
                    <td class="py-2 pr-4 text-right text-slate-400">{{ rule.threshold }}</td>
                    <td class="py-2 pr-4 text-center">
                        {% if rule.enabled %}
                        <span class="text-green-400">yes</span>
                        {% else %}
                        <span class="text-white/30">no</span>
                        {% endif %}
                    </td>
                    <td class="py-2 text-white/30 truncate max-w-[200px]">
                        {% if rule.webhook_url %}
                        <span class="text-slate-400" title="{{ rule.webhook_url }}">{{ rule.webhook_url[:40] }}{% if rule.webhook_url|length > 40 %}…{% endif %}</span>
                        {% else %}
                        —
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="text-xs text-white/30 mb-8">No alert rules defined. Run: <code class="bg-white/5 px-1 rounded">memorylens alerts add</code></p>
    {% endif %}

    <!-- Alert History -->
    <h3 class="text-sm font-semibold mb-2 text-white/70">Recent Alerts</h3>

    <!-- Type filter tabs -->
    <div class="flex gap-3 mb-4 border-b border-white/[0.06] pb-2">
        <a href="/alerts"
           class="text-xs pb-1 {% if not active_type %}text-indigo-400 border-b-2 border-indigo-400{% else %}text-white/40 hover:text-white/60{% endif %}">
            All
        </a>
        {% for t in ['drift', 'cost', 'retrieval', 'compression_loss', 'error_rate'] %}
        <a href="/alerts?type={{ t }}"
           class="text-xs pb-1 {% if active_type == t %}text-indigo-400 border-b-2 border-indigo-400{% else %}text-white/40 hover:text-white/60{% endif %}">
            {{ t }}
        </a>
        {% endfor %}
    </div>

    {% if history %}
    <div class="overflow-x-auto">
        <table class="w-full text-xs">
            <thead>
                <tr class="border-b border-white/[0.06] text-white/40 text-left">
                    <th class="pb-2 pr-4">FIRED AT</th>
                    <th class="pb-2 pr-4">TYPE</th>
                    <th class="pb-2">MESSAGE</th>
                </tr>
            </thead>
            <tbody>
                {% for event in history %}
                <tr class="border-b border-white/[0.04] hover:bg-white/[0.02]">
                    <td class="py-2 pr-4 text-white/40 font-mono">{{ event._fired_at_str }}</td>
                    <td class="py-2 pr-4">
                        <span class="px-1.5 py-0.5 rounded text-[10px] font-semibold
                            {% if event.alert_type == 'drift' %}bg-orange-500/20 text-orange-300
                            {% elif event.alert_type == 'cost' %}bg-yellow-500/20 text-yellow-300
                            {% elif event.alert_type == 'error_rate' %}bg-red-500/20 text-red-300
                            {% elif event.alert_type == 'retrieval' %}bg-purple-500/20 text-purple-300
                            {% else %}bg-blue-500/20 text-blue-300{% endif %}">
                            {{ event.alert_type }}
                        </span>
                    </td>
                    <td class="py-2 text-slate-300">{{ event.message }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p class="text-xs text-white/30">No alert history found.</p>
    {% endif %}
</div>
{% endblock %}