<!--
  Familiar - Self-hosted AI Agent
  Copyright (c) 2026 George Scott Foley
  
  Licensed under the MIT License
  For commercial licensing, contact: licensing@familiar.ai
-->
{% extends "base.html" %}

{% block title %}Budget Alerts - Familiar Admin{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Budget Alerts</h1>
            <p class="text-gray-500">Monitor and control API spending</p>
        </div>
        <a 
            href="{{ url_for('admin.create_budget') }}"
            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
        >
            + Create Alert
        </a>
    </div>

    <!-- Triggered Alerts -->
    {% if triggered %}
    <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4">
        <div class="flex items-center">
            <svg class="w-5 h-5 text-yellow-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
            </svg>
            <span class="font-medium text-yellow-800">{{ triggered | length }} alert(s) triggered</span>
        </div>
        <div class="mt-2 space-y-2">
            {% for alert, current, threshold in triggered %}
            <div class="text-sm text-yellow-700">
                <strong>{{ alert.name }}</strong>: 
                ${{ "%.2f"|format(current) }} spent (threshold: ${{ "%.2f"|format(threshold) }})
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Alerts Table -->
    <div class="bg-white rounded-xl border">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Scope</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Budget</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Threshold</th>
                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Notify</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    {% for alert in alerts %}
                    <tr>
                        <td class="px-6 py-4">
                            <span class="font-medium text-gray-900">{{ alert.name or 'Unnamed' }}</span>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600">
                            {% if alert.user_id %}
                            User: {{ alert.user_id[:16] }}...
                            {% else %}
                            Organization-wide
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-900 text-right font-medium">
                            ${{ "%.2f"|format(alert.monthly_budget_usd) }}/mo
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 text-right">
                            {{ alert.alert_threshold_pct }}%
                        </td>
                        <td class="px-6 py-4 text-center">
                            {% if alert.enabled %}
                            <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-700">Active</span>
                            {% else %}
                            <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-600">Disabled</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600">
                            {{ alert.notify_email or '-' }}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="6" class="px-6 py-12 text-center text-gray-500">
                            <svg class="w-12 h-12 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                      d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <p class="font-medium">No budget alerts</p>
                            <p class="text-sm mt-1">Create an alert to monitor spending</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Info -->
    <div class="bg-gray-50 rounded-xl p-6">
        <h3 class="font-medium text-gray-900 mb-2">How Budget Alerts Work</h3>
        <ul class="text-sm text-gray-600 space-y-1">
            <li>• Alerts are checked whenever usage is recorded</li>
            <li>• When spending exceeds the threshold percentage, notifications are sent</li>
            <li>• Each alert will only notify once per day to avoid spam</li>
            <li>• Set organization-wide alerts or per-user limits</li>
        </ul>
    </div>
</div>
{% endblock %}
