{% extends "base.html" %}
{% block title %}Email Routing — Admin{% endblock %}
{% block content %}
<div class="space-y-4">
    <a href="/admin/?token={{ token }}" class="text-sm text-gray-400 hover:text-gray-600">← Admin Panel</a>
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold sw-blue-text">Email Routing Rules</h1>
        <button onclick="addRule()" class="bg-green-600 text-white px-4 py-2 rounded-md text-sm font-semibold hover:bg-green-700">+ Add Rule</button>
    </div>
    <p class="text-gray-500 text-sm">Configure who receives the final PDF when a form is approved.</p>

    <div class="bg-white rounded-lg shadow overflow-hidden">
        <table class="w-full text-sm">
            <thead><tr class="sw-blue text-white">
                <th class="px-4 py-3 text-left">Condition</th>
                <th class="px-4 py-3 text-left">Email</th>
                <th class="px-4 py-3 text-left">Description</th>
                <th class="px-4 py-3 text-center">Active</th>
                <th class="px-4 py-3 text-center">Save</th>
            </tr></thead>
            <tbody>
            {% for r in rules %}
            <tr class="{{ 'bg-gray-50' if loop.index % 2 == 0 }}">
                <td class="px-4 py-3">
                    <select id="cond_{{ r.id }}" class="border rounded px-2 py-1 text-sm">
                        {% for opt in ['always','submitter','dept_cl','dept_bd'] %}
                        <option value="{{ opt }}" {{ 'selected' if r.condition == opt }}>{{ opt }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td class="px-4 py-3">
                    <input id="email_{{ r.id }}" value="{{ r.email }}" class="border rounded px-2 py-1 text-sm w-64">
                </td>
                <td class="px-4 py-3">
                    <input id="desc_{{ r.id }}" value="{{ r.description or '' }}" class="border rounded px-2 py-1 text-sm w-full">
                </td>
                <td class="px-4 py-3 text-center">
                    <input type="checkbox" id="active_{{ r.id }}" {{ 'checked' if r.is_active }}>
                </td>
                <td class="px-4 py-3 text-center">
                    <button onclick="saveRule({{ r.id }})" class="text-blue-600 hover:underline text-sm">Save</button>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<script>
const authToken = '{{ token }}';
const authHeaders = {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken};

async function saveRule(id) {
    await fetch('/admin/api/email-rules/' + id, {
        method: 'POST', headers: authHeaders,
        body: JSON.stringify({
            condition: document.getElementById('cond_' + id).value,
            email: document.getElementById('email_' + id).value,
            description: document.getElementById('desc_' + id).value,
            is_active: document.getElementById('active_' + id).checked,
        }),
    });
    document.getElementById('email_' + id).style.backgroundColor = '#d4edda';
    setTimeout(() => document.getElementById('email_' + id).style.backgroundColor = '', 1000);
}
async function addRule() {
    await fetch('/admin/api/email-rules/new', {
        method: 'POST', headers: authHeaders,
        body: JSON.stringify({ condition: 'always', email: '', description: 'New rule' }),
    });
    location.reload();
}
</script>
{% endblock %}