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

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

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

const activeTab = ref('plans');
const showDeleteModal = ref(false);
const showPortalModal = ref(false);
const sendEmailOnActivate = ref(true);
const copiedCredential = ref(null);

const toggleActive = () => {
    router.post(route('coach.clients.toggle', props.client.id));
};

const deleteClient = () => {
    router.delete(route('coach.clients.destroy', props.client.id), {
        onSuccess: () => {
            showDeleteModal.value = false;
        }
    });
};

// Portal management
const activatePortal = () => {
    router.post(route('coach.clients.portal.activate', props.client.id), {
        send_email: sendEmailOnActivate.value,
    }, {
        preserveScroll: true,
        onSuccess: () => {
            showPortalModal.value = false;
        }
    });
};

const resendCredentials = () => {
    router.post(route('coach.clients.portal.resend', props.client.id), {}, {
        preserveScroll: true,
    });
};

const copyToClipboard = async (text, type) => {
    try {
        await navigator.clipboard.writeText(text);
        copiedCredential.value = type;
        setTimeout(() => {
            copiedCredential.value = null;
        }, 2000);
    } catch (err) {
    }
};

const objectiveLabels = {
    lose: 'Perder peso',
    maintain: 'Mantener',
    gain: 'Ganar masa',
};

const objectiveColors = {
    lose: 'text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/30',
    maintain: 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30',
    gain: 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/30',
};

const activityLabels = {
    sedentary: 'Sedentario',
    light: 'Ligero',
    moderate: 'Moderado',
    active: 'Muy activo',
};
</script>

<template>
    <Head :title="client.name" />

    <CoachLayout>
        <template #header>
            <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
                <div class="flex items-center gap-4">
                    <Link 
                        :href="route('coach.clients.index')" 
                        class="p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                    >
                        <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="M10 19l-7-7m0 0l7-7m-7 7h18" />
                        </svg>
                    </Link>
                    
                    <!-- Client Avatar -->
                    <div class="w-12 h-12 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700 flex-shrink-0">
                        <img 
                            v-if="client.avatar" 
                            :src="client.avatar" 
                            :alt="client.name" 
                            class="w-full h-full object-cover"
                        />
                        <div v-else class="w-full h-full flex items-center justify-center text-gray-500 dark:text-gray-400 font-bold text-lg bg-gray-100 dark:bg-gray-800">
                            {{ client.name.charAt(0).toUpperCase() }}
                        </div>
                    </div>

                    <div>
                        <h2 class="text-xl font-bold text-gray-900 dark:text-white">
                            {{ client.name }}
                        </h2>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Perfil del cliente
                        </p>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <Link 
                        :href="route('coach.clients.edit', client.id)"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                    >
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                        </svg>
                        Editar
                    </Link>
                    <button 
                        @click="showDeleteModal = true"
                        class="inline-flex items-center px-4 py-2 border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/30 transition-colors"
                    >
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                        Eliminar
                    </button>
                </div>
            </div>
        </template>

        <div class="py-6 sm:py-12">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- Client Info Sidebar -->
                    <div class="lg:col-span-1 space-y-6">
                        <!-- Profile Card -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                            <div class="bg-gradient-to-r from-indigo-500 to-purple-600 p-6 pb-16 relative">
                                <div class="flex justify-end">
                                    <button 
                                        @click="toggleActive"
                                        :class="[
                                            'px-3 py-1 text-xs font-medium rounded-full transition-colors',
                                            client.is_active 
                                                ? 'bg-white/20 text-white hover:bg-white/30' 
                                                : 'bg-gray-100 text-gray-600'
                                        ]"
                                    >
                                        {{ client.is_active ? '✓ Activo' : 'Inactivo' }}
                                    </button>
                                </div>
                            </div>
                            <div class="px-6 pb-6 -mt-12 relative">
                                <div class="h-24 w-24 rounded-full overflow-hidden mx-auto mb-4 shadow-lg border-4 border-white dark:border-gray-800">
                                    <img 
                                        v-if="client.avatar" 
                                        :src="client.avatar" 
                                        :alt="client.name" 
                                        class="w-full h-full object-cover"
                                    />
                                    <div 
                                        v-else 
                                        class="w-full h-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white text-3xl font-bold"
                                    >
                                        {{ client.name.charAt(0).toUpperCase() }}
                                    </div>
                                </div>
                                <div class="text-center mb-4">
                                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ client.name }}</h3>
                                    <p class="text-gray-500 dark:text-gray-400">{{ client.email || 'Sin email' }}</p>
                                    <p v-if="client.phone" class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                        <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                        </svg>
                                        {{ client.phone }}
                                    </p>
                                </div>

                                <!-- Objective Badge -->
                                <div v-if="client.objective" class="text-center mb-4">
                                    <span :class="['inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium', objectiveColors[client.objective]]">
                                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                                        </svg>
                                        {{ objectiveLabels[client.objective] }}
                                    </span>
                                </div>
                            </div>

                            <!-- Physical Data -->
                            <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-4">
                                <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">Datos Físicos</h4>
                                <div class="grid grid-cols-2 gap-4">
                                    <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                        <div class="text-lg font-bold text-gray-900 dark:text-white">{{ client.age || '-' }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">Años</div>
                                    </div>
                                    <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                        <div class="text-lg font-bold text-gray-900 dark:text-white">{{ client.gender === 'male' ? '♂' : client.gender === 'female' ? '♀' : '-' }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">Género</div>
                                    </div>
                                    <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                        <div class="text-lg font-bold text-gray-900 dark:text-white">{{ client.weight || '-' }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">kg</div>
                                    </div>
                                    <div class="text-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                        <div class="text-lg font-bold text-gray-900 dark:text-white">{{ client.height || '-' }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">cm</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Metabolism -->
                            <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-4">
                                <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">Métricas Metabólicas</h4>
                                <div class="space-y-3">
                                    <div class="flex items-center justify-between p-3 bg-blue-50 dark:bg-blue-900/30 rounded-lg">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 bg-blue-100 dark:bg-blue-800 rounded-full flex items-center justify-center mr-3">
                                                <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                                                </svg>
                                            </div>
                                            <div>
                                                <div class="text-xs text-gray-500 dark:text-gray-400">TMB (BMR)</div>
                                                <div class="font-medium text-gray-900 dark:text-white text-sm">Metabolismo Basal</div>
                                            </div>
                                        </div>
                                        <div class="text-xl font-bold text-blue-600 dark:text-blue-400">{{ client.bmr || '-' }}</div>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-purple-50 dark:bg-purple-900/30 rounded-lg">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 bg-purple-100 dark:bg-purple-800 rounded-full flex items-center justify-center mr-3">
                                                <svg class="w-4 h-4 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
                                                </svg>
                                            </div>
                                            <div>
                                                <div class="text-xs text-gray-500 dark:text-gray-400">GET (TDEE)</div>
                                                <div class="font-medium text-gray-900 dark:text-white text-sm">Gasto Total</div>
                                            </div>
                                        </div>
                                        <div class="text-xl font-bold text-purple-600 dark:text-purple-400">{{ client.tdee || '-' }}</div>
                                    </div>
                                    <div class="flex items-center justify-between p-3 bg-orange-50 dark:bg-orange-900/30 rounded-lg">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 bg-orange-100 dark:bg-orange-800 rounded-full flex items-center justify-center mr-3">
                                                <svg class="w-4 h-4 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                                                </svg>
                                            </div>
                                            <div>
                                                <div class="text-xs text-gray-500 dark:text-gray-400">IMC (BMI)</div>
                                                <div class="font-medium text-gray-900 dark:text-white text-sm">Índice Masa Corporal</div>
                                            </div>
                                        </div>
                                        <div class="text-xl font-bold text-orange-600 dark:text-orange-400">{{ client.bmi || '-' }}</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Activity Level -->
                            <div v-if="client.activity_level" class="border-t border-gray-200 dark:border-gray-700 px-6 py-4">
                                <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Nivel de Actividad</h4>
                                <p class="text-gray-900 dark:text-white font-medium">{{ activityLabels[client.activity_level] }}</p>
                            </div>

                            <!-- Portal Access -->
                            <div class="border-t border-gray-200 dark:border-gray-700 px-6 py-4">
                                <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">Acceso al Portal</h4>
                                
                                <!-- Portal Active -->
                                <div v-if="client.portal_active && client.email" class="space-y-3">
                                    <div class="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/30 rounded-lg border border-green-200 dark:border-green-800">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 bg-green-100 dark:bg-green-800 rounded-full flex items-center justify-center mr-3">
                                                <svg class="w-4 h-4 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                                                </svg>
                                            </div>
                                            <span class="text-sm font-medium text-green-700 dark:text-green-300">Portal Activo</span>
                                        </div>
                                    </div>

                                    <!-- Credentials -->
                                    <div class="space-y-2">
                                        <!-- Email -->
                                        <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                            <div class="flex-1 min-w-0">
                                                <p class="text-xs text-gray-500 dark:text-gray-400">Email</p>
                                                <p class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ client.email }}</p>
                                            </div>
                                            <button 
                                                @click="copyToClipboard(client.email, 'email')"
                                                class="ml-2 p-2 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-colors"
                                                title="Copiar email"
                                            >
                                                <svg v-if="copiedCredential !== 'email'" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                                </svg>
                                                <svg v-else class="w-4 h-4 text-green-500" 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>
                                            </button>
                                        </div>
                                        <!-- Password -->
                                        <div class="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                            <div class="flex-1 min-w-0">
                                                <p class="text-xs text-gray-500 dark:text-gray-400">Contraseña</p>
                                                <p class="text-sm font-medium text-gray-900 dark:text-white font-mono tracking-wider">
                                                    {{ client.portal_password || '••••••••••' }}
                                                </p>
                                            </div>
                                            <button 
                                                v-if="client.portal_password"
                                                @click="copyToClipboard(client.portal_password, 'password')"
                                                class="ml-2 p-2 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-colors"
                                                title="Copiar contraseña"
                                            >
                                                <svg v-if="copiedCredential !== 'password'" 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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                                </svg>
                                                <svg v-else class="w-4 h-4 text-green-500" 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>
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Actions -->
                                    <div class="flex gap-2">
                                        <button 
                                            @click="resendCredentials"
                                            class="flex-1 inline-flex items-center justify-center px-3 py-2 text-xs font-medium text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-900/30 rounded-lg hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition-colors"
                                        >
                                            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                            </svg>
                                            Reenviar Credenciales
                                        </button>
                                    </div>
                                </div>

                                <!-- Portal Not Active -->
                                <div v-else class="text-center py-4">
                                    <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-3">
                                        <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                        </svg>
                                    </div>
                                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">
                                        {{ client.email ? 'El cliente aún no tiene acceso al portal' : 'Agrega un email para activar el portal' }}
                                    </p>
                                    <button 
                                        v-if="client.email"
                                        @click="showPortalModal = true"
                                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-all shadow-sm"
                                    >
                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                                        </svg>
                                        Activar Portal
                                    </button>
                                    <Link 
                                        v-else 
                                        :href="route('coach.clients.edit', client.id)"
                                        class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                                    >
                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                        </svg>
                                        Editar Cliente
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Main Content -->
                    <div class="lg:col-span-2 space-y-6">
                        <!-- Tabs -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-1">
                            <nav class="flex gap-1">
                                <button 
                                    @click="activeTab = 'plans'" 
                                    :class="[
                                        'flex-1 px-4 py-2.5 text-sm font-medium rounded-lg transition-colors',
                                        activeTab === 'plans' 
                                            ? 'bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300' 
                                            : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
                                    ]"
                                >
                                    <svg class="w-4 h-4 inline mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                    </svg>
                                    Asignaciones
                                </button>
                                <button 
                                    v-if="features.feature_compliance_tracking"
                                    @click="activeTab = 'progress'" 
                                    :class="[
                                        'flex-1 px-4 py-2.5 text-sm font-medium rounded-lg transition-colors',
                                        activeTab === 'progress' 
                                            ? 'bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300' 
                                            : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
                                    ]"
                                >
                                    <svg class="w-4 h-4 inline mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                                    </svg>
                                    Progreso
                                </button>
                                <button 
                                    v-if="features.feature_progress_photos"
                                    @click="activeTab = 'photos'" 
                                    :class="[
                                        'flex-1 px-4 py-2.5 text-sm font-medium rounded-lg transition-colors',
                                        activeTab === 'photos' 
                                            ? 'bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300' 
                                            : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
                                    ]"
                                >
                                    <svg class="w-4 h-4 inline mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                    Fotos
                                </button>
                            </nav>
                        </div>

                        <!-- Tab Content: Plans -->
                        <div v-if="activeTab === 'plans'" class="space-y-6">
                            <!-- Quick Actions -->
                            <div class="grid grid-cols-2 gap-4">
                                <Link 
                                    :href="route('coach.clients.workouts.create', client.id)" 
                                    class="p-6 bg-gradient-to-br from-orange-500 to-red-500 text-white rounded-xl hover:from-orange-600 hover:to-red-600 transition-all shadow-sm group"
                                >
                                    <div class="flex items-center justify-between mb-4">
                                        <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center">
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                                            </svg>
                                        </div>
                                        <svg class="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                                        </svg>
                                    </div>
                                    <div class="font-semibold text-lg">Nueva Rutina</div>
                                    <div class="text-white/80 text-sm">Crear plan de entrenamiento</div>
                                </Link>
                                <Link 
                                    :href="route('coach.clients.meal-plans.create', client.id)" 
                                    class="p-6 bg-gradient-to-br from-green-500 to-emerald-500 text-white rounded-xl hover:from-green-600 hover:to-emerald-600 transition-all shadow-sm group"
                                >
                                    <div class="flex items-center justify-between mb-4">
                                        <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center">
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                                            </svg>
                                        </div>
                                        <svg class="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                                        </svg>
                                    </div>
                                    <div class="font-semibold text-lg">Nueva Dieta</div>
                                    <div class="text-white/80 text-sm">Crear plan de alimentación</div>
                                </Link>
                            </div>

                            <!-- Workouts -->
                            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-orange-100 dark:bg-orange-900/50 rounded-lg flex items-center justify-center mr-3">
                                            <svg class="w-4 h-4 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                                            </svg>
                                        </div>
                                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Rutinas</h3>
                                    </div>
                                    <Link :href="route('coach.clients.workouts.index', client.id)" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 text-sm font-medium">
                                        Ver todas →
                                    </Link>
                                </div>
                                <div class="p-6">
                                    <div v-if="client.workouts?.length" class="space-y-3">
                                        <div 
                                            v-for="workout in client.workouts.slice(0, 3)" 
                                            :key="workout.id" 
                                            :class="[
                                                'p-4 rounded-lg border-l-4 flex items-center justify-between',
                                                workout.is_active 
                                                    ? 'border-orange-500 bg-orange-50 dark:bg-orange-900/30' 
                                                    : 'border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/50'
                                            ]"
                                        >
                                            <div>
                                                <span class="font-medium text-gray-900 dark:text-white">{{ workout.name }}</span>
                                                <span v-if="workout.is_active" class="ml-2 px-2 py-0.5 bg-orange-100 dark:bg-orange-800 text-orange-800 dark:text-orange-200 text-xs rounded-full">Activa</span>
                                            </div>
                                            <div class="flex gap-2">
                                                <Link 
                                                    :href="route('coach.clients.workouts.show', [client.id, workout.id])" 
                                                    class="px-3 py-1 text-xs bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
                                                >
                                                    Ver
                                                </Link>
                                                <Link 
                                                    :href="route('coach.clients.workouts.edit', [client.id, workout.id])" 
                                                    class="px-3 py-1 text-xs bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
                                                >
                                                    Editar
                                                </Link>
                                                <a 
                                                    :href="route('coach.clients.workouts.pdf', [client.id, workout.id])" 
                                                    target="_blank" 
                                                    class="px-3 py-1 text-xs bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
                                                >
                                                    <svg class="w-4 h-4 inline mr-1" 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>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-else class="text-center py-8">
                                        <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-3">
                                            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                            </svg>
                                        </div>
                                        <p class="text-gray-500 dark:text-gray-400">No hay rutinas creadas</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Meal Plans -->
                            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center mr-3">
                                            <svg class="w-4 h-4 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                                            </svg>
                                        </div>
                                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Planes de Alimentación</h3>
                                    </div>
                                    <Link :href="route('coach.clients.meal-plans.index', client.id)" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 text-sm font-medium">
                                        Ver todos →
                                    </Link>
                                </div>
                                <div class="p-6">
                                    <div v-if="client.meal_plans?.length" class="space-y-3">
                                        <div 
                                            v-for="plan in client.meal_plans.slice(0, 3)" 
                                            :key="plan.id" 
                                            :class="[
                                                'p-4 rounded-lg border-l-4 flex items-center justify-between',
                                                plan.is_active 
                                                    ? 'border-green-500 bg-green-50 dark:bg-green-900/30' 
                                                    : 'border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/50'
                                            ]"
                                        >
                                            <div>
                                                <span class="font-medium text-gray-900 dark:text-white">{{ plan.name }}</span>
                                                <span v-if="plan.is_active" class="ml-2 px-2 py-0.5 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 text-xs rounded-full">Activa</span>
                                            </div>
                                            <a 
                                                :href="route('coach.clients.meal-plans.pdf', [client.id, plan.id])" 
                                                target="_blank" 
                                                class="px-3 py-1 text-xs bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
                                            >
                                                <svg class="w-4 h-4 inline mr-1" 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>
                                        </div>
                                    </div>
                                    <div v-else class="text-center py-8">
                                        <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-3">
                                            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                            </svg>
                                        </div>
                                        <p class="text-gray-500 dark:text-gray-400">No hay planes de alimentación</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tab Content: Progress -->
                        <div v-if="activeTab === 'progress' && features.feature_compliance_tracking" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg flex items-center justify-center mr-3">
                                        <svg class="w-4 h-4 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
                                        </svg>
                                    </div>
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Historial de Cumplimiento</h3>
                                </div>
                            </div>
                            <div class="p-6">
                                <div v-if="client.compliance_logs?.length" class="space-y-3">
                                    <div 
                                        v-for="log in client.compliance_logs" 
                                        :key="log.id" 
                                        class="flex items-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-xl transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
                                    >
                                        <div :class="[
                                            'w-12 h-12 rounded-full flex items-center justify-center mr-4',
                                            log.resource_type === 'workout' 
                                                ? 'bg-orange-100 dark:bg-orange-900/50 text-orange-600 dark:text-orange-400' 
                                                : 'bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400'
                                        ]">
                                            <svg v-if="log.resource_type === 'workout'" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                                            </svg>
                                            <svg v-else class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                                            </svg>
                                        </div>
                                        <div class="flex-1">
                                            <p class="font-medium text-gray-900 dark:text-white">
                                                Completó {{ log.resource_type === 'workout' ? 'Rutina' : 'Dieta' }}
                                            </p>
                                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                                {{ new Date(log.completed_at).toLocaleString('es-ES', { dateStyle: 'medium', timeStyle: 'short' }) }}
                                            </p>
                                        </div>
                                        <div class="w-8 h-8 bg-green-100 dark:bg-green-900/50 rounded-full flex items-center justify-center">
                                            <svg class="w-4 h-4 text-green-600 dark: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>
                                        </div>
                                    </div>
                                </div>
                                <div v-else class="text-center py-12">
                                    <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                        </svg>
                                    </div>
                                    <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Sin registros de cumplimiento</h4>
                                    <p class="text-gray-500 dark:text-gray-400">
                                        Este cliente aún no ha marcado como completadas sus rutinas o dietas.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Tab Content: Photos -->
                        <div v-if="activeTab === 'photos' && features.feature_progress_photos" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-pink-100 dark:bg-pink-900/50 rounded-lg flex items-center justify-center mr-3">
                                        <svg class="w-4 h-4 text-pink-600 dark:text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                        </svg>
                                    </div>
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Galería de Progreso</h3>
                                </div>
                            </div>
                            <div class="p-6">
                                <div v-if="client.progress_photos?.length" class="grid grid-cols-2 md:grid-cols-3 gap-4">
                                    <div 
                                        v-for="photo in client.progress_photos" 
                                        :key="photo.id" 
                                        class="bg-gray-50 dark:bg-gray-700/50 rounded-xl overflow-hidden shadow-sm group hover:shadow-md transition-shadow"
                                    >
                                        <div class="aspect-square bg-gray-200 dark:bg-gray-600 relative overflow-hidden">
                                            <img 
                                                :src="photo.image_path" 
                                                class="w-full h-full object-cover transition-transform group-hover:scale-105"
                                            />
                                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end">
                                                <div class="p-3 text-white">
                                                    <p class="text-xs font-bold uppercase">{{ photo.type }}</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="p-3">
                                            <p class="text-sm font-semibold text-gray-900 dark:text-white">
                                                {{ new Date(photo.date).toLocaleDateString('es-ES', { dateStyle: 'medium' }) }}
                                            </p>
                                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ photo.weight }} kg</p>
                                        </div>
                                    </div>
                                </div>
                                <div v-else class="text-center py-12">
                                    <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                        </svg>
                                    </div>
                                    <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Sin fotos de progreso</h4>
                                    <p class="text-gray-500 dark:text-gray-400">
                                        Este cliente aún no ha subido fotos de seguimiento.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </CoachLayout>

    <!-- Delete Confirmation Modal -->
    <Teleport to="body">
        <div v-if="showDeleteModal" class="fixed inset-0 z-50 overflow-y-auto">
            <div class="flex min-h-full items-center justify-center p-4">
                <div class="fixed inset-0 bg-black/50 transition-opacity" @click="showDeleteModal = false"></div>
                <div class="relative bg-white dark:bg-gray-800 rounded-2xl shadow-xl max-w-md w-full p-6">
                    <div class="text-center">
                        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/50 mb-4">
                            <svg class="h-8 w-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                            ¿Eliminar cliente?
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
                            ¿Estás seguro que deseas eliminar a <strong class="text-gray-700 dark:text-gray-300">{{ client.name }}</strong>? 
                            Esta acción eliminará también sus rutinas y planes de alimentación. Esta acción no se puede deshacer.
                        </p>
                        <div class="flex gap-3">
                            <button 
                                @click="showDeleteModal = false"
                                class="flex-1 px-4 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 font-medium transition-colors"
                            >
                                Cancelar
                            </button>
                            <button 
                                @click="deleteClient"
                                class="flex-1 px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors"
                            >
                                Sí, eliminar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Teleport>

    <!-- Portal Activation Modal -->
    <Teleport to="body">
        <div v-if="showPortalModal" class="fixed inset-0 z-50 overflow-y-auto">
            <div class="flex min-h-full items-center justify-center p-4">
                <div class="fixed inset-0 bg-black/50 transition-opacity" @click="showPortalModal = false"></div>
                <div class="relative bg-white dark:bg-gray-800 rounded-2xl shadow-xl max-w-md w-full p-6">
                    <div class="text-center">
                        <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900/50 mb-4">
                            <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                            Activar Portal del Cliente
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                            Se creará una cuenta para <strong class="text-gray-700 dark:text-gray-300">{{ client.name }}</strong> con acceso a su dieta, rutina y seguimiento de progreso.
                        </p>
                        
                        <!-- Email option -->
                        <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-4 text-left">
                            <div class="flex items-start">
                                <div class="flex items-center h-5">
                                    <input 
                                        id="send-email" 
                                        v-model="sendEmailOnActivate" 
                                        type="checkbox" 
                                        class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
                                    />
                                </div>
                                <div class="ml-3">
                                    <label for="send-email" class="text-sm font-medium text-gray-900 dark:text-white">Enviar credenciales por email</label>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">El cliente recibirá un email con su usuario y contraseña temporal.</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-blue-50 dark:bg-blue-900/30 rounded-lg p-3 mb-6 text-left">
                            <div class="flex">
                                <svg class="w-5 h-5 text-blue-500 dark:text-blue-400 mr-2 flex-shrink-0 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="text-xs text-blue-700 dark:text-blue-300">
                                    <strong>Email del cliente:</strong> {{ client.email }}
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex gap-3">
                            <button 
                                @click="showPortalModal = false"
                                class="flex-1 px-4 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 font-medium transition-colors"
                            >
                                Cancelar
                            </button>
                            <button 
                                @click="activatePortal"
                                class="flex-1 px-4 py-2.5 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white rounded-lg font-medium transition-colors"
                            >
                                Activar Portal
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Teleport>
</template>
