{# app/modules/billing/templates/billing/merchant/billing-history.html #}
{% extends "merchant/base.html" %}

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

{% block content %}
<div x-data="merchantBillingHistory()">

    <!-- Page Header -->
    <div class="mb-8 mt-6">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Billing History</h2>
        <p class="mt-1 text-gray-500 dark:text-gray-400">View your invoices and payment history.</p>
    </div>

    <!-- Error -->
    <div x-show="error" x-cloak class="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
        <p class="text-sm text-red-800 dark:text-red-400" x-text="error"></p>
    </div>

    <!-- Invoices Table -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full whitespace-nowrap">
                <thead>
                    <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 dark:text-gray-400 uppercase bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700">
                        <th class="px-6 py-3">Date</th>
                        <th class="px-6 py-3">Invoice #</th>
                        <th class="px-6 py-3 text-right">Amount</th>
                        <th class="px-6 py-3">Status</th>
                        <th class="px-6 py-3 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    <!-- Loading -->
                    <template x-if="loading">
                        <tr>
                            <td colspan="5" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                                <svg class="inline w-5 h-5 animate-spin mr-2" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                                </svg>
                                Loading invoices...
                            </td>
                        </tr>
                    </template>

                    <!-- Empty -->
                    <template x-if="!loading && invoices.length === 0">
                        <tr>
                            <td colspan="5" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                                No invoices found.
                            </td>
                        </tr>
                    </template>

                    <!-- Rows -->
                    <template x-for="invoice in invoices" :key="invoice.id">
                        <tr class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                            <td class="px-6 py-4 text-sm" x-text="formatDate(invoice.invoice_date)"></td>
                            <td class="px-6 py-4 text-sm font-mono" x-text="invoice.invoice_number || '-'"></td>
                            <td class="px-6 py-4 text-right">
                                <span class="font-mono font-semibold" x-text="formatCurrency(invoice.total_cents)"></span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="px-2.5 py-1 text-xs font-semibold rounded-full"
                                      :class="{
                                          'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400': invoice.status === 'paid',
                                          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400': invoice.status === 'open',
                                          'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400': invoice.status === 'draft',
                                          'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400': invoice.status === 'uncollectible',
                                          'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-500': invoice.status === 'void'
                                      }"
                                      x-text="invoice.status.toUpperCase()"></span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <a x-show="invoice.hosted_invoice_url"
                                       :href="invoice.hosted_invoice_url"
                                       target="_blank"
                                       class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                                       title="View Invoice">
                                        <span x-html="$icon('external-link', 'w-3.5 h-3.5 mr-1')"></span>
                                        View
                                    </a>
                                    <a x-show="invoice.invoice_pdf_url"
                                       :href="invoice.invoice_pdf_url"
                                       target="_blank"
                                       class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/20 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900/40 transition-colors"
                                       title="Download PDF">
                                        <span x-html="$icon('download', 'w-3.5 h-3.5 mr-1')"></span>
                                        PDF
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>

</div>
{% endblock %}

{% block extra_scripts %}
<script>
function merchantBillingHistory() {
    return {
        loading: true,
        error: null,
        invoices: [],

        init() {
            this.loadInvoices();
        },

        async loadInvoices() {
            try {
                const data = await apiClient.get('/merchants/billing/invoices');
                this.invoices = data.invoices || data.items || [];
            } catch (err) {
                console.error('Error loading invoices:', err);
                this.error = 'Failed to load billing history. Please try again.';
            } finally {
                this.loading = false;
            }
        },

        formatDate(dateStr) {
            if (!dateStr) return '-';
            return new Date(dateStr).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
        },

        formatCurrency(cents) {
            if (cents === null || cents === undefined) return '-';
            return new Intl.NumberFormat('de-LU', {
                style: 'currency',
                currency: 'EUR'
            }).format(cents / 100);
        }
    };
}
</script>
{% endblock %}