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

const props = defineProps({
    banks: Array,
});

const toggleActive = (bank) => {
    router.post(route('admin.banks.toggle', bank.id));
};

const deleteBank = (bank) => {
    const label = bank.bank_type === 'western_union' 
        ? `"Western Union - ${bank.account_holder}"` 
        : `"${bank.bank_name} - ${bank.account_number}"`;
    if (confirm(`¿Eliminar ${label}? Esta acción no se puede deshacer.`)) {
        router.delete(route('admin.banks.destroy', bank.id));
    }
};

const getAccountTypeLabel = (type) => {
    return type === 'savings' ? 'Cuenta de Ahorro' : 'Cuenta Corriente';
};

const getCurrencyLabel = (currency) => {
    const labels = {
        'DOP': 'RD$',
        'USD': 'US$',
    };
    return labels[currency] || currency;
};

const isWesternUnion = (bank) => bank.bank_type === 'western_union';
</script>

<template>
    <Head title="Cuentas de Pago" />

    <AdminLayout>
        <template #header>
            <div class="flex justify-between items-center">
                <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
                    Cuentas de Pago (Offline)
                </h2>
                <Link :href="route('admin.banks.create')" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                    + Nueva Cuenta
                </Link>
            </div>
        </template>

        <div class="py-12">
            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
                <!-- Empty State -->
                <div v-if="banks.length === 0" class="bg-white dark:bg-gray-800 rounded-lg shadow p-12 text-center">
                    <div class="text-6xl mb-4">🏦</div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">No hay cuentas de pago</h3>
                    <p class="text-gray-500 dark:text-gray-400 mb-4">Agrega cuentas bancarias o Western Union para que los entrenadores puedan realizar pagos.</p>
                    <Link :href="route('admin.banks.create')" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                        Agregar cuenta
                    </Link>
                </div>

                <!-- Banks Grid -->
                <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div v-for="bank in banks" :key="bank.id" 
                        :class="[
                            'bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-l-4',
                            !bank.is_active ? 'border-gray-300 dark:border-gray-600 opacity-60' : (isWesternUnion(bank) ? 'border-yellow-500' : 'border-green-500')
                        ]">
                        <!-- Header -->
                        <div class="p-6">
                            <div class="flex justify-between items-start mb-4">
                                <div class="flex items-center">
                                    <!-- Western Union Icon -->
                                    <div v-if="isWesternUnion(bank)" class="w-12 h-12 rounded-full overflow-hidden mr-4 bg-yellow-100 dark:bg-yellow-900/50 flex items-center justify-center">
                                        <div v-if="bank.logo_url" class="w-full h-full p-1">
                                            <img :src="bank.logo_url" :alt="bank.bank_name" class="w-full h-full object-contain" />
                                        </div>
                                        <svg v-else class="w-7 h-7 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                    </div>
                                    <!-- Bank Icon -->
                                    <div v-else-if="bank.logo_url" class="w-12 h-12 rounded-full overflow-hidden mr-4 border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 p-1 flex items-center justify-center">
                                        <img :src="bank.logo_url" :alt="bank.bank_name" class="w-full h-full object-contain" />
                                    </div>
                                    <div v-else class="w-12 h-12 bg-blue-100 dark:bg-blue-900/50 rounded-full flex items-center justify-center mr-4">
                                        <span class="text-2xl">🏦</span>
                                    </div>
                                    <div>
                                        <h3 class="font-bold text-lg text-gray-900 dark:text-gray-100">{{ bank.bank_name }}</h3>
                                        <span v-if="!isWesternUnion(bank)" class="text-sm text-gray-500 dark:text-gray-400">{{ getAccountTypeLabel(bank.account_type) }}</span>
                                        <span v-else class="text-sm text-yellow-600 dark:text-yellow-400 font-medium">Remesas</span>
                                    </div>
                                </div>
                                <span :class="[
                                    'px-2 py-1 text-xs rounded-full font-medium',
                                    bank.is_active ? 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
                                ]">
                                    {{ bank.is_active ? 'Activo' : 'Inactivo' }}
                                </span>
                            </div>

                            <!-- Western Union Details -->
                            <div v-if="isWesternUnion(bank)" class="space-y-3 text-sm">
                                <div class="flex justify-between">
                                    <span class="text-gray-500 dark:text-gray-400">Nombre quien recibe:</span>
                                    <span class="font-medium text-gray-900 dark:text-gray-100">{{ bank.account_holder }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500 dark:text-gray-400">Teléfono:</span>
                                    <span class="font-mono font-medium text-gray-900 dark:text-gray-100">{{ bank.phone_number }}</span>
                                </div>
                            </div>

                            <!-- Bank Account Details -->
                            <div v-else class="space-y-3 text-sm">
                                <div class="flex justify-between">
                                    <span class="text-gray-500 dark:text-gray-400">Número de cuenta:</span>
                                    <span class="font-mono font-medium text-gray-900 dark:text-gray-100">{{ bank.account_number }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500 dark:text-gray-400">Titular:</span>
                                    <span class="font-medium text-gray-900 dark:text-gray-100">{{ bank.account_holder }}</span>
                                </div>
                                <div v-if="bank.rnc" class="flex justify-between">
                                    <span class="text-gray-500 dark:text-gray-400">RNC/Cédula:</span>
                                    <span class="font-mono text-gray-900 dark:text-gray-100">{{ bank.rnc }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-500 dark:text-gray-400">Moneda:</span>
                                    <span class="font-medium text-gray-900 dark:text-gray-100">{{ getCurrencyLabel(bank.currency) }}</span>
                                </div>
                            </div>

                            <!-- Instructions -->
                            <div v-if="bank.instructions" class="mt-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Instrucciones:</p>
                                <p class="text-sm text-gray-700 dark:text-gray-300">{{ bank.instructions }}</p>
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t dark:border-gray-700 flex justify-between items-center">
                            <div class="flex space-x-2">
                                <Link :href="route('admin.banks.edit', bank.id)" 
                                    class="px-3 py-1 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600">
                                    Editar
                                </Link>
                                <button @click="toggleActive(bank)" 
                                    :class="[
                                        'px-3 py-1 text-sm rounded-md',
                                        bank.is_active 
                                            ? 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-700 dark:text-yellow-300 hover:bg-yellow-200 dark:hover:bg-yellow-900' 
                                            : 'bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300 hover:bg-green-200 dark:hover:bg-green-900'
                                    ]">
                                    {{ bank.is_active ? 'Desactivar' : 'Activar' }}
                                </button>
                            </div>
                            <button @click="deleteBank(bank)" 
                                class="px-3 py-1 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-md">
                                Eliminar
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Info Card -->
                <div class="mt-8 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
                    <h4 class="font-medium text-blue-900 dark:text-blue-200 mb-2">💡 Información sobre pagos offline</h4>
                    <ul class="text-sm text-blue-800 dark:text-blue-300 space-y-1">
                        <li>• Las cuentas activas se mostrarán a los entrenadores en el checkout.</li>
                        <li>• Puedes agregar cuentas bancarias y Western Union.</li>
                        <li>• Los entrenadores enviarán comprobante de pago para verificación manual.</li>
                        <li>• Recuerda activar "Transferencia bancaria" en Configuración → Pagos.</li>
                    </ul>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
