<script setup>
import CoachLayout from '@/Layouts/CoachLayout.vue';
import { Head, Link } from '@inertiajs/vue3';

const props = defineProps({
    invoices: Object,
});

const formatPrice = (price) => {
    return new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'USD' }).format(price);
};

const statusColors = {
    paid: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
    pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
    cancelled: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
};

const statusLabels = {
    paid: 'Pagado',
    pending: 'Pendiente',
    cancelled: 'Cancelado',
};

// Helper to get download URL
const getDownloadUrl = (invoiceId) => {
    return route('coach.subscription.invoice.download', invoiceId);
};
</script>

<template>
    <Head title="Mis Facturas" />

    <CoachLayout>
        <template #header>
            <div class="flex justify-between items-center">
                <h2 class="text-xl font-semibold leading-tight text-gray-800">
                    Historial de Facturas
                </h2>
                <Link :href="route('coach.subscription.index')" class="text-blue-600 hover:text-blue-900">
                    ← Volver a Suscripción
                </Link>
            </div>
        </template>

        <div class="py-12">
            <div class="mx-auto max-w-4xl sm:px-6 lg:px-8">
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Número</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Fecha</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Plan</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Estado</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Total</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Acciones</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr v-for="invoice in invoices.data" :key="invoice.id">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="font-mono text-sm">{{ invoice.invoice_number }}</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {{ new Date(invoice.created_at).toLocaleDateString('es-ES') }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm">
                                    {{ invoice.subscription?.plan?.name || '-' }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span :class="['px-2 py-1 text-xs font-medium rounded', statusColors[invoice.status]]">
                                        {{ statusLabels[invoice.status] }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-right font-medium">
                                    {{ formatPrice(invoice.total) }}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-right">
                                    <!-- Use native anchor for file download instead of Inertia Link -->
                                    <a 
                                        :href="getDownloadUrl(invoice.id)"
                                        class="inline-flex items-center gap-1 text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"
                                        target="_blank"
                                    >
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                        </svg>
                                        PDF
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- Empty State -->
                    <div v-if="!invoices.data?.length" class="p-12 text-center text-gray-500">
                        <div class="text-6xl mb-4">📄</div>
                        <p>No tienes facturas registradas.</p>
                    </div>

                    <!-- Pagination -->
                    <div v-if="invoices.links && invoices.data?.length" class="px-6 py-4 border-t flex justify-center gap-2">
                        <Link
                            v-for="link in invoices.links"
                            :key="link.label"
                            :href="link.url"
                            :class="[
                                'px-3 py-1 rounded text-sm',
                                link.active ? 'bg-blue-600 text-white' : 'bg-gray-100 hover:bg-gray-200',
                                !link.url && 'opacity-50 cursor-not-allowed'
                            ]"
                            v-html="link.label"
                        />
                    </div>
                </div>
            </div>
        </div>
    </CoachLayout>
</template>
