{% extends 'layout.twig' %}

{% block title %}{{ policy.name }} — Policy — IRDB{% endblock %}

{% block content %}
{# Twig's |merge calls PHP array_merge, which renumbers integer keys; key by
   slug (a string) so {scanners:40, indexer:30,…} round-trips faithfully. #}
{% set thresholds_by_slug = {} %}
{% for t in policy.thresholds|default([]) %}
    {% if t.category_slug %}
        {% set thresholds_by_slug = thresholds_by_slug|merge({(t.category_slug): t.threshold}) %}
    {% endif %}
{% endfor %}

<div class="mx-auto max-w-5xl">
    <a href="/app/policies" class="text-sm text-slate-500 hover:underline dark:text-slate-400">← Back to policies</a>

    <div class="mt-3 flex items-center justify-between">
        <h1 class="text-2xl font-semibold tracking-tight">
            <span class="font-mono">{{ policy.name }}</span>
        </h1>
        {% if can_write %}
            {% include 'partials/confirm_form.twig' with {
                action: '/app/policies/' ~ policy.id ~ '/delete',
                label: 'Delete policy',
                description: 'Refused if any consumer references this policy.',
            } only %}
        {% endif %}
    </div>

    <form method="post" action="/app/policies/{{ policy.id }}" class="mt-6">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

        <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Metadata</h2>
            <div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-3 text-sm">
                <div>
                    <label for="p-name" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Name</label>
                    <input type="text" id="p-name" name="name" value="{{ policy.name }}" {% if not can_write %}readonly{% endif %}
                           class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 font-mono dark:border-slate-700 dark:bg-slate-950">
                </div>
                <div class="md:col-span-2">
                    <label for="p-desc" class="block text-xs font-medium text-slate-600 dark:text-slate-400">Description</label>
                    <input type="text" id="p-desc" name="description" value="{{ policy.description|default('') }}" {% if not can_write %}readonly{% endif %}
                           class="mt-1 w-full rounded-md border border-slate-300 bg-white px-2 py-1.5 dark:border-slate-700 dark:bg-slate-950">
                </div>
                <div class="md:col-span-3">
                    <label class="flex items-center gap-2 text-xs text-slate-600 dark:text-slate-400">
                        <input type="checkbox" name="include_manual_blocks" value="1"
                               {% if policy.include_manual_blocks %}checked{% endif %}
                               {% if not can_write %}disabled{% endif %}>
                        include manual blocks
                    </label>
                </div>
            </div>
        </section>

        <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div class="flex items-center justify-between">
                <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Threshold matrix</h2>
                <span class="text-xs text-slate-400">Empty value ⇒ category not in policy</span>
            </div>
            <table class="mt-3 w-full text-sm">
                <thead class="text-left text-xs uppercase tracking-wider text-slate-400">
                    <tr>
                        <th class="pb-2 font-medium">Category</th>
                        <th class="pb-2 font-medium">Decay</th>
                        <th class="pb-2 text-right font-medium">Threshold</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                    {% for c in categories %}
                        <tr>
                            <td class="py-2"><span class="font-mono">{{ c.slug }}</span> <span class="text-slate-400">— {{ c.name }}</span></td>
                            <td class="py-2 text-xs text-slate-500 dark:text-slate-400">{{ c.decay_function }} ({{ c.decay_param }})</td>
                            <td class="py-2 text-right">
                                <input type="number" step="0.01" min="0"
                                       name="thresholds[{{ c.slug }}]"
                                       value="{{ thresholds_by_slug[c.slug]|default('') }}"
                                       {% if not can_write %}readonly{% endif %}
                                       class="w-32 rounded-md border border-slate-300 bg-white px-2 py-1 text-right font-mono dark:border-slate-700 dark:bg-slate-950">
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </section>

        {% if can_write %}
            <div class="mt-6 flex justify-end">
                <button type="submit" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500">Save policy</button>
            </div>
        {% endif %}
    </form>

    <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
             x-data="policyScoreDistribution" data-policy-id="{{ policy.id }}">
        <div class="flex items-center justify-between">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Score distribution</h2>
            <button type="button" x-on:click="load()" class="text-xs text-indigo-600 hover:underline dark:text-indigo-400">Refresh</button>
        </div>
        <p class="mt-2 text-xs text-slate-400">
            One line per thresholded category, IPs grouped by score in steps of 5; the shaded area to the right of each threshold marks scores high enough to land on this policy's blocklist.
        </p>
        <div class="mt-3 h-64">
            <canvas x-ref="canvas"></canvas>
        </div>
        <p class="mt-2 text-xs text-slate-400" x-show="empty">No scored IPs in the database yet.</p>
    </section>

    <section class="mt-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
             x-data="policyPreview" data-policy-id="{{ policy.id }}">
        <div class="flex items-center justify-between">
            <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Preview</h2>
            <button type="button" x-on:click="load()" class="text-xs text-indigo-600 hover:underline dark:text-indigo-400">Refresh</button>
        </div>
        <p class="mt-2 text-sm">
            <span x-show="loading">Loading…</span>
            <template x-if="notLoading">
                <span><span class="font-mono" x-text="count"></span> entries</span>
            </template>
        </p>
        <ul class="mt-3 max-h-60 divide-y divide-slate-100 overflow-y-auto text-xs dark:divide-slate-800">
            <template x-for="entry in sample" :key="entry.key">
                <li class="flex items-baseline justify-between gap-3 py-1">
                    <span class="font-mono text-slate-700 dark:text-slate-300" x-text="entry.label"></span>
                    <span class="shrink-0 text-slate-500 dark:text-slate-400" :title="entry.tooltip" x-text="entry.expiry"></span>
                </li>
            </template>
        </ul>
        <p class="mt-2 text-xs text-slate-400">
            Sample = first 50 entries from the rendered blocklist. Expiry for scored
            entries is an estimate assuming no further reports; manual entries show
            the configured expiry.
        </p>
    </section>
</div>

{% endblock %}