{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block content %}
<div class="px-4 py-8 mb-4">
    <div class="max-w-4xl mx-auto">

        <!-- Header -->
        <div class="mb-8 text-center">
            <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2">
                🤖 AI Verification Complete
            </h1>
            <p class="text-gray-600 dark:text-gray-400">
                The automated verification process has finished. Here is the summary of actions taken.
            </p>
        </div>

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <!-- Processed -->
            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                <div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">
                    Processed
                </div>
                <div class="text-3xl font-bold text-blue-600 dark:text-blue-400">
                    {{ data.stats.processed|default:"0" }}
                </div>
                <div class="text-xs text-gray-500 mt-2">Reports analyzed</div>
            </div>

            <!-- Verified -->
            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                <div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">
                    Verified Threats
                </div>
                <div class="text-3xl font-bold text-green-600 dark:text-green-400">
                    {{ data.stats.verified|default:"0" }}
                </div>
                <div class="text-xs text-gray-500 mt-2">Confirmed as malicious</div>
            </div>

            <!-- Flagged -->
            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                <div class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">
                    Flagged for Review
                </div>
                <div class="text-3xl font-bold text-orange-600 dark:text-orange-400">
                    {{ data.stats.flagged|default:"0" }}
                </div>
                <div class="text-xs text-gray-500 mt-2">Require manual check</div>
            </div>
        </div>

        <!-- Raw Data (Collapsible) -->
        <div
            class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-8 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                    📋 Response Details
                </h3>
            </div>
            <div class="p-6">
                <pre class="bg-gray-900 text-gray-100 p-4 rounded text-sm overflow-x-auto">
{{ data|pprint }}
                </pre>
            </div>
        </div>

        <!-- Actions -->
        <div class="flex justify-center gap-4">
            <a href="{% url 'admin:index' %}"
                class="px-6 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors">
                Back to Dashboard
            </a>
            <a href="{% url 'admin:core_report_changelist' %}"
                class="px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
                View Reports
            </a>
        </div>

    </div>
</div>
{% endblock %}