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

const page = usePage();
const features = computed(() => page.props.features || {});

const showCopiedToast = ref(false);

const props = defineProps({
    wallet: Object,
    transactions: Object,
    referral_code: String,
    referral_url: String,
    referral_stats: Object,
    referrals: Array,
    payment_methods: Array,
});

const withdrawForm = useForm({
    amount: '',
    details: '',
});

const rechargeForm = useForm({
    amount: '',
    payment_method: '',
    bank_id: '',
    transfer_reference: '',
});

const showWithdrawModal = ref(false);
const showRechargeModal = ref(false);

const selectedPaymentMethod = computed(() => {
    return props.payment_methods?.find(m => m.id === rechargeForm.payment_method);
});

// Calculate fee based on payment method
const calculateFee = computed(() => {
    const amount = parseFloat(rechargeForm.amount) || 0;
    if (amount <= 0) return { fee: 0, total: 0, label: '' };

    const method = rechargeForm.payment_method;

    if (method === 'paypal') {
        // PayPal: 3.49% + $0.49
        const percentFee = 0.0349;
        const fixedFee = 0.49;
        const totalWithFee = (amount + fixedFee) / (1 - percentFee);
        const fee = Math.round((totalWithFee - amount) * 100) / 100;
        return { fee, total: Math.round(totalWithFee * 100) / 100, label: 'Tarifa PayPal (3.49% + $0.49)' };
    }

    if (method === 'stripe') {
        // Stripe: 2.9% + $0.30
        const percentFee = 0.029;
        const fixedFee = 0.30;
        const totalWithFee = (amount + fixedFee) / (1 - percentFee);
        const fee = Math.round((totalWithFee - amount) * 100) / 100;
        return { fee, total: Math.round(totalWithFee * 100) / 100, label: 'Tarifa Stripe (2.9% + $0.30)' };
    }

    return { fee: 0, total: amount, label: '' };
});

const submitWithdraw = () => {
    withdrawForm.post(route('coach.wallet.withdraw'), {
        onSuccess: () => {
            showWithdrawModal.value = false;
            withdrawForm.reset();
        },
    });
};

const submitRecharge = () => {
    rechargeForm.post(route('coach.wallet.recharge'), {
        onSuccess: () => {
            showRechargeModal.value = false;
            rechargeForm.reset();
        },
    });
};

const copyReferral = () => {
    navigator.clipboard.writeText(props.referral_url);
    showCopiedToast.value = true;
    setTimeout(() => {
        showCopiedToast.value = false;
    }, 2500);
};

const formatDate = (date) => {
    return new Date(date).toLocaleDateString('es-ES', {
        day: '2-digit',
        month: 'short',
        year: 'numeric',
    });
};

const getTypeClass = (type) => {
    return {
        'deposit': 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-300',
        'withdrawal': 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300',
        'referral_bonus': 'bg-purple-100 text-purple-800 dark:bg-purple-900/50 dark:text-purple-300',
        'payment': 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300',
    }[type] || 'bg-gray-100 text-gray-800';
};

const getTypeName = (type) => {
    return {
        'deposit': 'Depósito',
        'withdrawal': 'Retiro',
        'referral_bonus': 'Bono Referido',
        'payment': 'Pago',
        'adjustment': 'Ajuste',
        'refund': 'Reembolso',
    }[type] || type;
};
</script>

<template>
    <Head title="Mi Billetera" />

    <CoachLayout>
        <template #header>
            <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-white">
                {{ features.feature_referrals ? 'Finanzas y Referidos' : 'Finanzas' }}
            </h2>
        </template>

        <div class="py-12">
            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8 space-y-6">

                <!-- Wallet Stats -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Balance Card -->
                    <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg p-6 text-white">
                        <h3 class="text-sm font-medium opacity-80 uppercase tracking-wider">Saldo Disponible</h3>
                        <div class="mt-2 text-4xl font-bold">${{ Number(wallet.balance || 0).toFixed(2) }}</div>
                        <p class="text-sm mt-2 opacity-90">{{ wallet.currency || 'USD' }}</p>
                        <div class="flex gap-2 mt-4">
                            <button
                                @click="showRechargeModal = true"
                                class="w-full px-4 py-2 bg-white text-green-700 font-semibold rounded-lg shadow hover:bg-green-50 transition"
                            >
                                + Recargar Saldo
                            </button>
                        </div>
                    </div>

                    <!-- Referral Stats -->
                    <div v-if="features.feature_referrals" class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 col-span-1 md:col-span-2">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Programa de Referidos</h3>

                        <div class="grid grid-cols-5 gap-4 mb-6">
                            <div class="text-center">
                                <span class="block text-2xl font-bold text-blue-600 dark:text-blue-400">{{ referral_stats?.total || 0 }}</span>
                                <span class="text-xs text-gray-500 dark:text-gray-400 uppercase">Total</span>
                            </div>
                            <div class="text-center">
                                <span class="block text-2xl font-bold text-yellow-600 dark:text-yellow-400">{{ referral_stats?.pending || 0 }}</span>
                                <span class="text-xs text-gray-500 dark:text-gray-400 uppercase">Pendientes</span>
                            </div>
                            <div class="text-center">
                                <span class="block text-2xl font-bold text-green-600 dark:text-green-400">{{ referral_stats?.rewarded || 0 }}</span>
                                <span class="text-xs text-gray-500 dark:text-gray-400 uppercase">Recompensados</span>
                            </div>
                            <div class="text-center">
                                <span class="block text-2xl font-bold text-purple-600 dark:text-purple-400">${{ Number(referral_stats?.total_earned || 0).toFixed(2) }}</span>
                                <span class="text-xs text-gray-500 dark:text-gray-400 uppercase">Ganado</span>
                            </div>
                            <div class="text-center">
                                <span class="block text-2xl font-bold text-cyan-600 dark:text-cyan-400">{{ referral_stats?.clicks || 0 }}</span>
                                <span class="text-xs text-gray-500 dark:text-gray-400 uppercase">Clics</span>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tu enlace de referido</label>
                            <div class="flex gap-2">
                                <input
                                    type="text"
                                    readonly
                                    :value="referral_url"
                                    class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm rounded-lg p-2.5"
                                >
                                <button
                                    @click="copyReferral"
                                    class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition flex items-center gap-2"
                                >
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                                    </svg>
                                    Copiar
                                </button>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Comparte este enlace para ganar bonos cuando nuevos coaches se registren.</p>
                        </div>
                    </div>
                </div>

                <!-- Recent Referrals -->
                <div v-if="features.feature_referrals && referrals?.length" class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-xl">
                    <div class="p-6">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Tus Referidos Recientes</h3>
                        <div class="space-y-3">
                            <div
                                v-for="ref in referrals"
                                :key="ref.id"
                                class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg"
                            >
                                <div>
                                    <p class="font-medium text-gray-900 dark:text-white">{{ ref.referred?.name }}</p>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ ref.referred?.email }}</p>
                                </div>
                                <div class="text-right">
                                    <span
                                        :class="[
                                            'px-2.5 py-1 text-xs font-medium rounded-full',
                                            ref.status === 'rewarded' ? 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-300' :
                                            ref.status === 'pending' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-300' :
                                            'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
                                        ]"
                                    >
                                        {{ ref.status === 'rewarded' ? 'Recompensado' : ref.status === 'pending' ? 'Pendiente' : ref.status }}
                                    </span>
                                    <p v-if="ref.reward_amount" class="text-sm font-semibold text-green-600 dark:text-green-400 mt-1">
                                        +${{ Number(ref.reward_amount).toFixed(2) }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Transaction History -->
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm rounded-xl">
                    <div class="p-6">
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Historial de Transacciones</h3>

                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                <thead class="bg-gray-50 dark:bg-gray-700/50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Fecha</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Tipo</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Descripción</th>
                                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Monto</th>
                                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Estado</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                                    <tr v-if="!transactions.data?.length">
                                        <td colspan="5" class="px-6 py-12 text-center text-gray-500 dark:text-gray-400">
                                            No hay transacciones aún.
                                        </td>
                                    </tr>
                                    <tr v-for="tx in transactions.data" :key="tx.id" class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                            {{ formatDate(tx.created_at) }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                                            <span :class="['px-2 inline-flex text-xs leading-5 font-semibold rounded-full', getTypeClass(tx.type)]">
                                                {{ getTypeName(tx.type) }}
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 max-w-xs truncate">
                                            {{ tx.description || '-' }}
                                        </td>
                                        <td :class="['px-6 py-4 whitespace-nowrap text-sm text-right font-medium', tx.amount > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400']">
                                            {{ tx.amount > 0 ? '+' : '' }}${{ Math.abs(Number(tx.amount)).toFixed(2) }}
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-center text-sm">
                                            <span
                                                :class="[
                                                    'px-2 inline-flex text-xs leading-5 font-semibold rounded-full',
                                                    tx.status === 'completed' ? 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-300' :
                                                    tx.status === 'pending' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-300' :
                                                    'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300'
                                                ]"
                                            >
                                                {{ tx.status === 'completed' ? 'Completado' : tx.status === 'pending' ? 'Pendiente' : 'Fallido' }}
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- Recharge Modal -->
        <div v-if="showRechargeModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-lg w-full p-6">
                <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Recargar Saldo</h3>
                <form @submit.prevent="submitRecharge">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Monto a recargar ($)</label>
                        <input
                            v-model="rechargeForm.amount"
                            type="number"
                            step="0.01"
                            min="5"
                            max="10000"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                            placeholder="10.00"
                            required
                        >
                        <p v-if="rechargeForm.errors.amount" class="text-red-500 text-sm mt-1">{{ rechargeForm.errors.amount }}</p>
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Método de pago</label>
                        <div class="grid grid-cols-1 gap-2">
                            <label
                                v-for="method in payment_methods"
                                :key="method.id"
                                :class="[
                                    'flex items-center p-3 border rounded-lg cursor-pointer transition',
                                    rechargeForm.payment_method === method.id
                                        ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/30'
                                        : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
                                ]"
                            >
                                <input
                                    type="radio"
                                    v-model="rechargeForm.payment_method"
                                    :value="method.id"
                                    class="sr-only"
                                >
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3">
                                        <svg v-if="method.icon === 'credit-card'" class="w-6 h-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
                                        </svg>
                                        <svg v-else-if="method.icon === 'paypal'" class="w-6 h-6 text-blue-500" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944 3.72a.75.75 0 0 1 .74-.629h6.562c2.187 0 3.852.622 4.95 1.85.5.558.854 1.207 1.052 1.928.21.762.272 1.656.174 2.66l-.013.13v.046l.004.02.007.019.013.018c.3.412.538.875.702 1.377.18.55.296 1.17.343 1.852.05.711.027 1.5-.072 2.352-.112.97-.345 1.843-.693 2.602a5.72 5.72 0 0 1-1.213 1.8c-.51.494-1.09.885-1.729 1.167-.683.303-1.437.51-2.254.623-.85.117-1.773.174-2.76.174H9.33a.75.75 0 0 0-.74.629l-.69 4.379a.75.75 0 0 1-.74.63h-.082z"/>
                                        </svg>
                                        <svg v-else class="w-6 h-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                        </svg>
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-900 dark:text-white">{{ method.name }}</p>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">{{ method.description }}</p>
                                        <p v-if="method.id === 'paypal'" class="text-xs text-amber-600 dark:text-amber-400 mt-0.5">Tarifa: 3.49% + $0.49</p>
                                        <p v-if="method.id === 'stripe'" class="text-xs text-purple-600 dark:text-purple-400 mt-0.5">Tarifa: 2.9% + $0.30</p>
                                    </div>
                                </div>
                            </label>
                        </div>
                        <p v-if="rechargeForm.errors.payment_method" class="text-red-500 text-sm mt-1">{{ rechargeForm.errors.payment_method }}</p>
                    </div>

                    <!-- Bank Transfer Fields -->
                    <div v-if="selectedPaymentMethod?.id === 'bank_transfer'" class="mb-4 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Selecciona el Banco</label>
                            <select
                                v-model="rechargeForm.bank_id"
                                class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                required
                            >
                                <option value="">Seleccionar...</option>
                                <option v-for="bank in selectedPaymentMethod.banks" :key="bank.id" :value="bank.id">
                                    {{ bank.bank_name }} - {{ bank.account_holder }}
                                </option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Número de Referencia</label>
                            <input
                                v-model="rechargeForm.transfer_reference"
                                type="text"
                                class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                placeholder="Número de transferencia o comprobante"
                                required
                            >
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Ingresa el número de referencia de tu transferencia</p>
                        </div>
                    </div>

                    <!-- Fee Information -->
                    <div v-if="calculateFee.fee > 0 && rechargeForm.amount" class="mb-4 p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
                        <div class="flex items-start space-x-3">
                            <svg class="w-5 h-5 text-amber-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <div class="flex-1">
                                <p class="text-sm font-medium text-amber-900 dark:text-amber-300">{{ calculateFee.label }}</p>
                                <div class="mt-2 space-y-1 text-sm">
                                    <div class="flex justify-between text-amber-700 dark:text-amber-400">
                                        <span>Monto a recargar:</span>
                                        <span>${{ parseFloat(rechargeForm.amount || 0).toFixed(2) }}</span>
                                    </div>
                                    <div class="flex justify-between text-amber-700 dark:text-amber-400">
                                        <span>Tarifa del procesador:</span>
                                        <span>+${{ calculateFee.fee.toFixed(2) }}</span>
                                    </div>
                                    <div class="flex justify-between font-semibold text-amber-900 dark:text-amber-300 pt-1 border-t border-amber-300 dark:border-amber-700">
                                        <span>Total a pagar:</span>
                                        <span>${{ calculateFee.total.toFixed(2) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end gap-2 mt-6">
                        <button
                            type="button"
                            @click="showRechargeModal = false; rechargeForm.reset();"
                            class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
                        >
                            Cancelar
                        </button>
                        <button
                            type="submit"
                            :disabled="rechargeForm.processing || !rechargeForm.payment_method"
                            class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
                        >
                            {{ rechargeForm.processing ? 'Procesando...' : 'Continuar' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Withdraw Modal -->
        <div v-if="showWithdrawModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-md w-full p-6">
                <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Solicitar Retiro</h3>
                <form @submit.prevent="submitWithdraw">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Monto a retirar ($)</label>
                        <input
                            v-model="withdrawForm.amount"
                            type="number"
                            step="0.01"
                            min="10"
                            :max="wallet.balance"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                            required
                        >
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Mínimo: $10.00 | Disponible: ${{ Number(wallet.balance).toFixed(2) }}</p>
                        <p v-if="withdrawForm.errors.amount" class="text-red-500 text-sm mt-1">{{ withdrawForm.errors.amount }}</p>
                    </div>
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Detalles de pago</label>
                        <textarea
                            v-model="withdrawForm.details"
                            rows="3"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                            placeholder="Correo PayPal, datos bancarios, etc..."
                            required
                        ></textarea>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Proporciona los datos donde deseas recibir el pago</p>
                        <p v-if="withdrawForm.errors.details" class="text-red-500 text-sm mt-1">{{ withdrawForm.errors.details }}</p>
                    </div>
                    <div class="flex justify-end gap-2">
                        <button
                            type="button"
                            @click="showWithdrawModal = false; withdrawForm.reset();"
                            class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
                        >
                            Cancelar
                        </button>
                        <button
                            type="submit"
                            :disabled="withdrawForm.processing"
                            class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
                        >
                            {{ withdrawForm.processing ? 'Procesando...' : 'Confirmar Retiro' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </CoachLayout>

    <!-- Toast: Enlace copiado -->
    <Transition
        enter-active-class="transition ease-out duration-300"
        enter-from-class="opacity-0 translate-y-2"
        enter-to-class="opacity-100 translate-y-0"
        leave-active-class="transition ease-in duration-200"
        leave-from-class="opacity-100 translate-y-0"
        leave-to-class="opacity-0 translate-y-2"
    >
        <div v-if="showCopiedToast" class="fixed bottom-8 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white px-6 py-3 rounded-full shadow-xl flex items-center space-x-2 z-50">
            <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>¡Enlace copiado al portapapeles!</span>
        </div>
    </Transition>
</template>
