{# app/templates/admin/billing-history.html #}
{% extends "admin/base.html" %}
{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
{% from 'shared/macros/headers.html' import page_header_refresh %}
{% from 'shared/macros/tables.html' import table_wrapper, table_header_custom, th_sortable %}
{% from 'shared/macros/pagination.html' import pagination_full %}

{% block title %}Billing History{% endblock %}

{% block alpine_data %}adminBillingHistory(){% endblock %}

{% block content %}
{{ page_header_refresh('Billing History') }}

{{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}

{{ error_state('Error', show_condition='error') }}

<!-- Stats Cards -->
<div class="grid gap-6 mb-8 md:grid-cols-4">
    <!-- Total Invoices -->
    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
            <span x-html="$icon('document-text', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Invoices</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="pagination.total || 0">0</p>
        </div>
    </div>

    <!-- Paid -->
    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:text-green-100 dark:bg-green-500">
            <span x-html="$icon('check-circle', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Paid</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="statusCounts.paid || 0">0</p>
        </div>
    </div>

    <!-- Open -->
    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-3 mr-4 text-yellow-500 bg-yellow-100 rounded-full dark:text-yellow-100 dark:bg-yellow-500">
            <span x-html="$icon('clock', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Open</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="statusCounts.open || 0">0</p>
        </div>
    </div>

    <!-- Failed -->
    <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
        <div class="p-3 mr-4 text-red-500 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-500">
            <span x-html="$icon('x-circle', 'w-5 h-5')"></span>
        </div>
        <div>
            <p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Failed</p>
            <p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="statusCounts.uncollectible || 0">0</p>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="mb-4 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
    <div class="flex flex-wrap items-center gap-4">
        <!-- Vendor Filter -->
        <div class="flex-1 min-w-[200px]">
            <select
                x-model="filters.vendor_id"
                @change="loadInvoices()"
                class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
            >
                <option value="">All Vendors</option>
                <template x-for="vendor in vendors" :key="vendor.id">
                    <option :value="vendor.id" x-text="vendor.name"></option>
                </template>
            </select>
        </div>

        <!-- Status Filter -->
        <select
            x-model="filters.status"
            @change="loadInvoices()"
            class="px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
        >
            <option value="">All Statuses</option>
            <option value="paid">Paid</option>
            <option value="open">Open</option>
            <option value="draft">Draft</option>
            <option value="uncollectible">Uncollectible</option>
            <option value="void">Void</option>
        </select>

        <!-- Reset -->
        <button
            @click="resetFilters()"
            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600"
        >
            Reset
        </button>
    </div>
</div>

<!-- Invoices Table -->
{% call table_wrapper() %}
    <table class="w-full whitespace-nowrap">
        {% call table_header_custom() %}
            {{ th_sortable('invoice_date', 'Date', 'sortBy', 'sortOrder') }}
            <th class="px-4 py-3">Invoice #</th>
            {{ th_sortable('vendor_name', 'Vendor', 'sortBy', 'sortOrder') }}
            <th class="px-4 py-3">Description</th>
            <th class="px-4 py-3 text-right">Amount</th>
            {{ th_sortable('status', 'Status', 'sortBy', 'sortOrder') }}
            <th class="px-4 py-3 text-right">Actions</th>
        {% endcall %}
        <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
            <template x-if="loading">
                <tr>
                    <td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                        <span x-html="$icon('refresh', 'inline w-6 h-6 animate-spin mr-2')"></span>
                        Loading invoices...
                    </td>
                </tr>
            </template>
            <template x-if="!loading && invoices.length === 0">
                <tr>
                    <td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                        No invoices found.
                    </td>
                </tr>
            </template>
            <template x-for="invoice in invoices" :key="invoice.id">
                <tr class="text-gray-700 dark:text-gray-400">
                    <td class="px-4 py-3 text-sm" x-text="formatDate(invoice.invoice_date)"></td>
                    <td class="px-4 py-3 text-sm font-mono" x-text="invoice.invoice_number || '-'"></td>
                    <td class="px-4 py-3">
                        <div class="flex items-center">
                            <div>
                                <p class="font-semibold text-gray-900 dark:text-gray-100" x-text="invoice.vendor_name"></p>
                                <p class="text-xs text-gray-500" x-text="invoice.vendor_code"></p>
                            </div>
                        </div>
                    </td>
                    <td class="px-4 py-3 text-sm max-w-xs truncate" x-text="invoice.description || 'Subscription'"></td>
                    <td class="px-4 py-3 text-right">
                        <span class="font-mono font-semibold" x-text="formatCurrency(invoice.total_cents)"></span>
                    </td>
                    <td class="px-4 py-3">
                        <span class="px-2 py-1 text-xs font-medium rounded-full"
                              :class="{
                                  'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200': invoice.status === 'paid',
                                  'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200': invoice.status === 'open',
                                  'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300': invoice.status === 'draft',
                                  'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200': invoice.status === 'uncollectible',
                                  'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400': invoice.status === 'void'
                              }"
                              x-text="invoice.status.toUpperCase()"></span>
                    </td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <!-- View Invoice -->
                            <a
                                x-show="invoice.hosted_invoice_url"
                                :href="invoice.hosted_invoice_url"
                                target="_blank"
                                class="p-2 text-gray-500 hover:text-blue-600 dark:hover:text-blue-400"
                                title="View Invoice"
                            >
                                <span x-html="$icon('external-link', 'w-4 h-4')"></span>
                            </a>
                            <!-- Download PDF -->
                            <a
                                x-show="invoice.invoice_pdf_url"
                                :href="invoice.invoice_pdf_url"
                                target="_blank"
                                class="p-2 text-gray-500 hover:text-purple-600 dark:hover:text-purple-400"
                                title="Download PDF"
                            >
                                <span x-html="$icon('download', 'w-4 h-4')"></span>
                            </a>
                            <!-- View Vendor -->
                            <a
                                :href="'/admin/vendors/' + invoice.vendor_code"
                                class="p-2 text-gray-500 hover:text-green-600 dark:hover:text-green-400"
                                title="View Vendor"
                            >
                                <span x-html="$icon('user', 'w-4 h-4')"></span>
                            </a>
                        </div>
                    </td>
                </tr>
            </template>
        </tbody>
    </table>
{% endcall %}

<!-- Pagination -->
{{ pagination_full() }}

{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('static', path='admin/js/billing-history.js') }}"></script>
{% endblock %}