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

const props = defineProps({
    invoice: Object,
    bankDetails: String,
});

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

const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text);
    alert('Copiado al portapapeles');
};
</script>

<template>
    <Head title="Pago Pendiente" />

    <CoachLayout>
        <template #header>
            <h2 class="text-xl font-semibold leading-tight text-gray-800">
                Pago Pendiente
            </h2>
        </template>

        <div class="py-12">
            <div class="mx-auto max-w-2xl sm:px-6 lg:px-8">
                <div class="bg-white rounded-lg shadow overflow-hidden">
                    <!-- Header -->
                    <div class="p-6 bg-yellow-50 border-b border-yellow-100">
                        <div class="flex items-center">
                            <span class="text-4xl mr-4">⏳</span>
                            <div>
                                <h3 class="text-lg font-semibold text-yellow-800">Esperando Confirmación de Pago</h3>
                                <p class="text-yellow-700">Tu suscripción se activará una vez confirmemos el pago.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Invoice Details -->
                    <div class="p-6 border-b">
                        <h4 class="font-semibold mb-4">Detalles de la Factura</h4>
                        <div class="space-y-2 text-sm">
                            <div class="flex justify-between">
                                <span class="text-gray-500">Número:</span>
                                <span class="font-mono">{{ invoice.invoice_number }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-500">Plan:</span>
                                <span>{{ invoice.subscription?.plan?.name }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-500">Subtotal:</span>
                                <span>{{ formatPrice(invoice.subtotal) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-500">ITBIS (18%):</span>
                                <span>{{ formatPrice(invoice.tax) }}</span>
                            </div>
                            <div class="flex justify-between font-bold text-lg pt-2 border-t">
                                <span>Total a Pagar:</span>
                                <span class="text-blue-600">{{ formatPrice(invoice.total) }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Bank Details -->
                    <div class="p-6 bg-blue-50">
                        <h4 class="font-semibold mb-4 text-blue-800">Datos para Transferencia</h4>
                        
                        <div v-if="bankDetails" class="bg-white p-4 rounded-lg border border-blue-200">
                            <pre class="text-sm whitespace-pre-wrap">{{ bankDetails }}</pre>
                        </div>
                        <div v-else class="bg-white p-4 rounded-lg border border-blue-200 text-sm">
                            <p><strong>Banco:</strong> Banco Popular Dominicano</p>
                            <p><strong>Cuenta:</strong> 123-456789-0</p>
                            <p><strong>Tipo:</strong> Corriente</p>
                            <p><strong>Titular:</strong> CoachPro SRL</p>
                            <p><strong>RNC:</strong> 123-456789-1</p>
                        </div>

                        <div class="mt-4 p-4 bg-yellow-100 rounded-lg">
                            <p class="text-sm text-yellow-800">
                                <strong>Importante:</strong> Incluye el número de factura 
                                <button 
                                    @click="copyToClipboard(invoice.invoice_number)"
                                    class="font-mono bg-yellow-200 px-2 py-0.5 rounded cursor-pointer hover:bg-yellow-300"
                                >
                                    {{ invoice.invoice_number }}
                                </button>
                                en el concepto de la transferencia.
                            </p>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="p-6 flex gap-3">
                        <Link 
                            :href="route('coach.subscription.index')"
                            class="flex-1 py-2 text-center border rounded-lg hover:bg-gray-50"
                        >
                            Volver a Suscripción
                        </Link>
                        <Link 
                            :href="route('dashboard')"
                            class="flex-1 py-2 text-center bg-blue-600 text-white rounded-lg hover:bg-blue-700"
                        >
                            Ir al Dashboard
                        </Link>
                    </div>
                </div>

                <!-- Help -->
                <div class="mt-6 text-center text-sm text-gray-500">
                    <p>¿Ya realizaste el pago? La confirmación puede tardar hasta 24 horas.</p>
                    <p>¿Tienes dudas? Contáctanos en <a href="mailto:soporte@coachpro.com" class="text-blue-600 hover:underline">soporte@coachpro.com</a></p>
                </div>
            </div>
        </div>
    </CoachLayout>
</template>
