{% extends "layouts/base.html" %}
{% from "components/ui/card.html" import card, card_header, card_title, card_description, card_content, card_footer %}
{% from "components/ui/button.html" import button, button_link %}
{% from "components/ui/table.html" import table, thead, tbody, tr, th, td %}

{% block title %}DMARQ - Reports{% endblock %}

{% block content %}
<div class="container mx-auto py-4" x-data="reportsApp()">
    <h1 class="text-2xl font-bold mb-6">DMARC Reports</h1>

    <!-- Report Filters -->
    <div class="mb-6">
        {% call card() %}
            {% call card_content() %}
                <div class="flex flex-wrap gap-4">
                    <div class="w-full sm:w-auto">
                        <label class="block text-sm font-medium mb-1">Domain</label>
                        <select class="select select-bordered w-full" x-model="filters.domain">
                            <option value="">All Domains</option>
                            <template x-for="domain in domains" :key="domain">
                                <option x-text="domain" :value="domain"></option>
                            </template>
                        </select>
                    </div>
                    <div class="w-full sm:w-auto">
                        <label class="block text-sm font-medium mb-1">Date Range</label>
                        <select class="select select-bordered w-full" x-model="filters.dateRange">
                            <option value="7">Last 7 days</option>
                            <option value="14">Last 14 days</option>
                            <option value="30">Last 30 days</option>
                            <option value="90">Last 90 days</option>
                            <option value="all">All time</option>
                        </select>
                    </div>
                    <div class="w-full sm:w-auto flex items-end">
                        {% call button(variant="outline") %}
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
                            Reset Filters
                        {% endcall %}
                    </div>
                </div>
            {% endcall %}
        {% endcall %}
    </div>

    <!-- Reports Table -->
    <div class="mb-8">
        {% call card() %}
            {% call card_header() %}
                <div class="flex items-center justify-between">
                    {% call card_title() %}DMARC Reports{% endcall %}
                </div>
                {% call card_description() %}
                    Showing <span x-text="filteredReports.length"></span> reports
                {% endcall %}
            {% endcall %}
            {% call card_content() %}
                {% call table() %}
                    {% call thead() %}
                        {% call tr() %}
                            {% call th() %}Date{% endcall %}
                            {% call th() %}Type{% endcall %}
                            {% call th() %}Domain{% endcall %}
                            {% call th() %}Organization{% endcall %}
                            {% call th() %}Messages{% endcall %}
                            {% call th() %}Pass Rate{% endcall %}
                            {% call th("text-right") %}Actions{% endcall %}
                        {% endcall %}
                    {% endcall %}
                    {% call tbody() %}
                        <template x-for="(report, index) in filteredReports" :key="index">
                            {% call tr() %}
                                {% call td() %}
                                    <div x-text="formatDate(report.end_date)"></div>
                                {% endcall %}
                                {% call td() %}
                                    <div class="inline-flex items-center px-2 py-1 rounded text-xs bg-blue-100 text-blue-800">
                                        Aggregate
                                    </div>
                                {% endcall %}
                                {% call td() %}
                                    <div class="font-medium" x-text="report.domain"></div>
                                {% endcall %}
                                {% call td() %}
                                    <div x-text="report.org_name"></div>
                                {% endcall %}
                                {% call td() %}
                                    <div x-text="report.total_count"></div>
                                {% endcall %}
                                {% call td() %}
                                    <div class="inline-flex items-center px-2 py-1 rounded" 
                                         :class="getPassRateColor(report.pass_rate)">
                                        <span x-text="report.pass_rate + '%'"></span>
                                    </div>
                                {% endcall %}
                                {% call td("text-right") %}
                                    <div class="inline-flex gap-2 justify-end">
                                        <a :href="`/reports/${report.report_id}`">
                                            {% call button(variant="outline", size="sm") %}
                                                View Details
                                            {% endcall %}
                                        </a>
                                        <button class="btn btn-error btn-sm"
                                                @click="deleteReport(report.domain, report.report_id)">
                                            Delete
                                        </button>
                                    </div>
                                {% endcall %}
                            {% endcall %}
                        </template>
                    {% endcall %}
                {% endcall %}
            {% endcall %}
        {% endcall %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function reportsApp() {
    return {
        filters: {
            domain: '',
            dateRange: '30'
        },
        domains: [],
        reports: [],
        loading: false,
        
        init() {
            this.fetchReports();
        },
        
        get filteredReports() {
            return this.reports.filter(report => {
                // Filter by domain
                if (this.filters.domain && report.domain !== this.filters.domain) {
                    return false;
                }
                
                // Filter by date range
                if (this.filters.dateRange !== 'all') {
                    const days = parseInt(this.filters.dateRange);
                    const cutoff = new Date();
                    cutoff.setDate(cutoff.getDate() - days);
                    
                    const reportDate = new Date(report.end_date);
                    if (reportDate < cutoff) {
                        return false;
                    }
                }
                
                return true;
            });
        },
        
        formatDate(dateStr) {
            const date = new Date(dateStr);
            return date.toLocaleDateString();
        },
        
        getPassRateColor(rate) {
            if (rate >= 90) return 'bg-green-100 text-green-800';
            if (rate >= 50) return 'bg-yellow-100 text-yellow-800';
            return 'bg-red-100 text-red-800';
        },
        
        async fetchReports() {
            this.loading = true;
            try {
                const response = await fetch('/api/v1/reports');
                this.reports = await response.json();
                
                // Extract unique domains for the filter dropdown
                this.domains = [...new Set(this.reports.map(r => r.domain))].sort();
            } catch (error) {
                console.error('Error fetching reports:', error);
            } finally {
                this.loading = false;
            }
        },

        async deleteReport(domain, reportId) {
            if (!confirm(`Delete report "${reportId}" for domain "${domain}"?\n\nThis will remove the report from the system. You can re-import it afterwards.`)) {
                return;
            }
            try {
                const response = await fetch(
                    `/api/v1/reports/domain/${encodeURIComponent(domain)}/reports/${encodeURIComponent(reportId)}`,
                    { method: 'DELETE' }
                );
                if (response.ok) {
                    this.reports = this.reports.filter(
                        r => !(r.domain === domain && r.report_id === reportId)
                    );
                    if (!this.reports.some(r => r.domain === domain)) {
                        this.domains = this.domains.filter(d => d !== domain);
                    }
                } else {
                    const data = await response.json().catch(() => ({}));
                    alert('Failed to delete report: ' + (data.detail || response.statusText));
                }
            } catch (error) {
                console.error('Error deleting report:', error);
                alert('Network error — could not delete report.');
            }
        }
    }
}
</script>
{% endblock %}