<script setup>
/**
 * Client Profile View - Mobile-First
 * Shows profile info, biometric data, and account settings
 */
import ClientLayout from '@/Layouts/ClientLayout.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import { ref, computed } from 'vue';

const props = defineProps({
    client: Object,
    user: Object,
    coach: Object,
    biometrics: Object,
    stats: Object,
    weight_history: Array,
    no_profile: Boolean,
});

const profileForm = useForm({
    name: props.user?.name || '',
    email: props.user?.email || '',
    phone: props.client?.phone || '',
});

const passwordForm = useForm({
    current_password: '',
    password: '',
    password_confirmation: '',
});

const avatarForm = useForm({
    avatar: null,
});

const avatarInput = ref(null);

const activeTab = ref('info');
const showSuccessMessage = ref(false);
const successMessage = ref('');

const showSuccess = (message) => {
    successMessage.value = message;
    showSuccessMessage.value = true;
    setTimeout(() => showSuccessMessage.value = false, 3000);
};

const updateProfile = () => {
    profileForm.put(route('client.profile.update'), {
        onSuccess: () => showSuccess('Perfil actualizado correctamente'),
    });
};

const updatePassword = () => {
    passwordForm.put(route('client.password.update'), {
        onSuccess: () => {
            passwordForm.reset();
            showSuccess('Contraseña actualizada correctamente');
        },
    });
};

const uploadAvatar = (event) => {
    const file = event.target.files[0];
    if (file) {
        avatarForm.avatar = file;
        avatarForm.post(route('client.avatar.update'), {
            forceFormData: true,
            onSuccess: () => {
                showSuccess('Foto de perfil actualizada');
                avatarForm.reset();
            },
        });
    }
};

// Labels
const objectiveLabels = {
    lose: { label: 'Perder peso', icon: '📉', color: 'text-red-600 bg-red-100 dark:bg-red-900/50 dark:text-red-400' },
    maintain: { label: 'Mantener', icon: '⚖️', color: 'text-blue-600 bg-blue-100 dark:bg-blue-900/50 dark:text-blue-400' },
    gain: { label: 'Ganar masa', icon: '📈', color: 'text-green-600 bg-green-100 dark:bg-green-900/50 dark:text-green-400' },
};

const activityLabels = {
    sedentary: { label: 'Sedentario', desc: 'Poco o ningún ejercicio' },
    light: { label: 'Ligero', desc: '1-3 días/semana' },
    moderate: { label: 'Moderado', desc: '3-5 días/semana' },
    active: { label: 'Muy activo', desc: '6-7 días/semana' },
    very_active: { label: 'Extra activo', desc: 'Atleta profesional' },
};

// BMI Category
const bmiCategory = computed(() => {
    if (!props.biometrics?.bmi) return null;
    const bmi = props.biometrics.bmi;
    if (bmi < 18.5) return { label: 'Bajo peso', color: 'text-blue-600 bg-blue-100 dark:bg-blue-900/50', range: '< 18.5' };
    if (bmi < 25) return { label: 'Normal', color: 'text-green-600 bg-green-100 dark:bg-green-900/50', range: '18.5 - 24.9' };
    if (bmi < 30) return { label: 'Sobrepeso', color: 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900/50', range: '25 - 29.9' };
    return { label: 'Obesidad', color: 'text-red-600 bg-red-100 dark:bg-red-900/50', range: '≥ 30' };
});

// Weight to goal
const weightToGoal = computed(() => {
    if (!props.client?.weight || !props.biometrics?.ideal_weight) return null;
    return (props.client.weight - props.biometrics.ideal_weight).toFixed(1);
});
</script>

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

    <ClientLayout>
        <template #header>
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <h2 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                        <span>👤</span> Mi Perfil
                    </h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Tu información personal y biométrica
                    </p>
                </div>
                <Link 
                    :href="route('client.dashboard')"
                    class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
                >
                    ← Panel
                </Link>
            </div>
        </template>

        <div class="py-4 md:py-8">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 space-y-6">
                
                <!-- Success Message -->
                <Transition
                    enter-active-class="transition ease-out duration-200"
                    enter-from-class="opacity-0 transform scale-95"
                    enter-to-class="opacity-100 transform scale-100"
                    leave-active-class="transition ease-in duration-150"
                    leave-from-class="opacity-100 transform scale-100"
                    leave-to-class="opacity-0 transform scale-95"
                >
                    <div 
                        v-if="showSuccessMessage"
                        class="fixed top-4 right-4 z-50 p-4 bg-green-50 dark:bg-green-900/80 border border-green-200 dark:border-green-800 rounded-xl text-green-700 dark:text-green-300 flex items-center gap-3 shadow-lg"
                    >
                        <svg class="w-5 h-5 flex-shrink-0" 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>
                        {{ successMessage }}
                    </div>
                </Transition>

                <!-- No Profile Warning -->
                <div v-if="no_profile" class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-6 text-center">
                    <div class="text-5xl mb-4">⚠️</div>
                    <h3 class="text-xl font-bold text-yellow-800 dark:text-yellow-300 mb-2">Perfil No Configurado</h3>
                    <p class="text-yellow-700 dark:text-yellow-400">Tu entrenador aún no ha configurado tu perfil con datos biométricos.</p>
                </div>

                <template v-else>
                    <!-- Profile Header 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-emerald-500 to-green-600 p-6 pb-20 md:pb-16"></div>
                        <div class="px-4 md:px-6 pb-6 -mt-12">
                            <div class="flex flex-col md:flex-row md:items-end gap-4">
                                <!-- Avatar -->
                                <div class="flex justify-center md:justify-start">
                                    <div class="relative group">
                                        <!-- Avatar Image or Initials -->
                                        <div 
                                            v-if="user?.avatar"
                                            class="h-24 w-24 md:h-28 md:w-28 rounded-2xl overflow-hidden shadow-lg border-4 border-white dark:border-gray-800"
                                        >
                                            <img :src="user.avatar" :alt="user.name" class="w-full h-full object-cover" />
                                        </div>
                                        <div 
                                            v-else
                                            class="h-24 w-24 md:h-28 md:w-28 rounded-2xl bg-gradient-to-br from-emerald-400 to-green-500 flex items-center justify-center text-white text-4xl font-bold shadow-lg border-4 border-white dark:border-gray-800"
                                        >
                                            {{ user?.name?.charAt(0).toUpperCase() }}
                                        </div>
                                        
                                        <!-- Upload overlay -->
                                        <label class="absolute inset-0 rounded-2xl bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer flex items-center justify-center">
                                            <div class="text-center text-white">
                                                <svg class="w-6 h-6 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                                                </svg>
                                                <span class="text-xs">Cambiar</span>
                                            </div>
                                            <input 
                                                type="file" 
                                                accept="image/*" 
                                                class="hidden" 
                                                @change="uploadAvatar"
                                            />
                                        </label>
                                    </div>
                                </div>
                                
                                <!-- User Info -->
                                <div class="flex-1 text-center md:text-left pb-2">
                                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ user?.name }}</h1>
                                    <p class="text-gray-500 dark:text-gray-400">{{ user?.email }}</p>
                                    <div v-if="stats?.member_since" class="mt-2 text-sm text-gray-400 dark:text-gray-500">
                                        Miembro desde {{ stats.member_since }}
                                    </div>
                                </div>
                                
                                <!-- Quick Stats -->
                                <div class="flex justify-center md:justify-end gap-6 pb-2">
                                    <div class="text-center">
                                        <div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ stats?.workouts_completed || 0 }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">Entrenos</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ stats?.meals_completed || 0 }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">Comidas</div>
                                    </div>
                                    <div class="text-center">
                                        <div class="text-2xl font-bold text-purple-600 dark:text-purple-400">{{ stats?.photos_count || 0 }}</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">Fotos</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tabs -->
                    <div class="flex gap-2 overflow-x-auto pb-2">
                        <button 
                            v-for="tab in [
                                { id: 'info', label: '📋 Datos', icon: '📋' },
                                { id: 'biometrics', label: '📊 Biométricos', icon: '📊' },
                                { id: 'settings', label: '⚙️ Ajustes', icon: '⚙️' },
                            ]"
                            :key="tab.id"
                            @click="activeTab = tab.id"
                            :class="[
                                'px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition-all',
                                activeTab === tab.id 
                                    ? 'bg-emerald-600 text-white shadow-lg' 
                                    : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 hover:border-emerald-300'
                            ]"
                        >
                            {{ tab.label }}
                        </button>
                    </div>

                    <!-- Personal Data Tab -->
                    <div v-if="activeTab === 'info'" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <!-- Physical Data -->
                        <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-100 dark:border-gray-700">
                                <h3 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                                    <span>💪</span> Datos Físicos
                                </h3>
                            </div>
                            <div class="divide-y divide-gray-100 dark:divide-gray-700">
                                <div class="px-6 py-4 flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Edad</span>
                                    <span class="font-semibold text-gray-900 dark:text-white">{{ client?.age || '-' }} años</span>
                                </div>
                                <div class="px-6 py-4 flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Género</span>
                                    <span class="font-semibold text-gray-900 dark:text-white">
                                        {{ client?.gender === 'male' ? '♂️ Masculino' : client?.gender === 'female' ? '♀️ Femenino' : '-' }}
                                    </span>
                                </div>
                                <div class="px-6 py-4 flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Altura</span>
                                    <span class="font-semibold text-gray-900 dark:text-white">{{ client?.height || '-' }} cm</span>
                                </div>
                                <div class="px-6 py-4 flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Peso actual</span>
                                    <span class="font-semibold text-gray-900 dark:text-white">{{ client?.weight || '-' }} kg</span>
                                </div>
                                <div class="px-6 py-4 flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Objetivo</span>
                                    <span v-if="client?.objective" :class="['px-3 py-1 rounded-full text-sm font-medium', objectiveLabels[client.objective]?.color]">
                                        {{ objectiveLabels[client.objective]?.icon }} {{ objectiveLabels[client.objective]?.label }}
                                    </span>
                                    <span v-else class="text-gray-400">-</span>
                                </div>
                                <div class="px-6 py-4 flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Nivel de actividad</span>
                                    <span v-if="client?.activity_level" class="text-right">
                                        <span class="font-semibold text-gray-900 dark:text-white">{{ activityLabels[client.activity_level]?.label }}</span>
                                        <p class="text-xs text-gray-400 dark:text-gray-500">{{ activityLabels[client.activity_level]?.desc }}</p>
                                    </span>
                                    <span v-else class="text-gray-400">-</span>
                                </div>
                            </div>
                        </div>

                        <!-- Coach Info -->
                        <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-100 dark:border-gray-700">
                                <h3 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                                    <span>🏋️</span> Mi Entrenador
                                </h3>
                            </div>
                            <div class="p-6">
                                <div v-if="coach" class="flex items-center gap-4">
                                    <img 
                                        v-if="coach.avatar" 
                                        :src="coach.avatar" 
                                        :alt="coach.name"
                                        class="w-16 h-16 rounded-xl object-cover border-2 border-blue-400"
                                    />
                                    <div 
                                        v-else 
                                        class="w-16 h-16 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white text-2xl font-bold"
                                    >
                                        {{ coach.name?.charAt(0).toUpperCase() }}
                                    </div>
                                    <div class="flex-1">
                                        <h4 class="font-bold text-gray-900 dark:text-white text-lg">{{ coach.name }}</h4>
                                        <p class="text-gray-500 dark:text-gray-400 text-sm mb-2">{{ coach.email }}</p>
                                        
                                        <div v-if="coach.specializations" class="flex flex-wrap gap-2 mb-2">
                                            <span 
                                                v-for="(spec, index) in coach.specializations" 
                                                :key="index"
                                                class="px-2 py-0.5 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded text-xs"
                                            >
                                                {{ spec }}
                                            </span>
                                        </div>
                                        
                                        <p v-if="coach.years_experience" class="text-xs text-gray-500 dark:text-gray-400 mb-2">
                                            🎖️ {{ coach.years_experience }} años de experiencia
                                        </p>
                                    </div>
                                </div>
                                <div v-else class="text-center py-8 text-gray-400 dark:text-gray-500">
                                    <span class="text-4xl mb-2 block">🤷</span>
                                    Sin entrenador asignado
                                </div>
                                
                                <Link 
                                    v-if="coach"
                                    :href="route('client.chat.index')"
                                    class="mt-6 w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-xl 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                                    </svg>
                                    Chatear con mi coach
                                </Link>
                            </div>
                        </div>

                        <!-- Contact Info -->
                        <div class="lg:col-span-2 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-100 dark:border-gray-700">
                                <h3 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                                    <span>📞</span> Información de Contacto
                                </h3>
                            </div>
                            <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
                                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Teléfono</p>
                                    <p class="font-semibold text-gray-900 dark:text-white">{{ client?.phone || 'No registrado' }}</p>
                                </div>
                                <div class="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
                                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Email</p>
                                    <p class="font-semibold text-gray-900 dark:text-white">{{ user?.email }}</p>
                                </div>
                                <div class="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-xl">
                                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Notas médicas</p>
                                    <p class="text-gray-900 dark:text-white text-sm">{{ client?.medical_notes || 'Sin notas' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Biometrics Tab -->
                    <div v-if="activeTab === 'biometrics'" class="space-y-6">
                        <!-- Main Biometrics Cards -->
                        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
                            <!-- BMI -->
                            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-5">
                                <div class="flex items-center gap-3 mb-3">
                                    <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/50 rounded-xl flex items-center justify-center">
                                        <span class="text-2xl">📊</span>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">IMC (BMI)</p>
                                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ biometrics?.bmi || '-' }}</p>
                                    </div>
                                </div>
                                <div v-if="bmiCategory" :class="['text-xs px-3 py-1 rounded-full font-medium text-center', bmiCategory.color]">
                                    {{ bmiCategory.label }} ({{ bmiCategory.range }})
                                </div>
                            </div>

                            <!-- BMR -->
                            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-5">
                                <div class="flex items-center gap-3 mb-3">
                                    <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900/50 rounded-xl flex items-center justify-center">
                                        <span class="text-2xl">🔥</span>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">TMB (BMR)</p>
                                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ biometrics?.bmr || '-' }}</p>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-400 dark:text-gray-500">kcal/día en reposo</p>
                            </div>

                            <!-- TDEE -->
                            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-5">
                                <div class="flex items-center gap-3 mb-3">
                                    <div class="w-12 h-12 bg-green-100 dark:bg-green-900/50 rounded-xl flex items-center justify-center">
                                        <span class="text-2xl">⚡</span>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">TDEE</p>
                                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ biometrics?.tdee || '-' }}</p>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-400 dark:text-gray-500">kcal/día total</p>
                            </div>

                            <!-- Ideal Weight -->
                            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-5">
                                <div class="flex items-center gap-3 mb-3">
                                    <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/50 rounded-xl flex items-center justify-center">
                                        <span class="text-2xl">🎯</span>
                                    </div>
                                    <div>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">Peso ideal</p>
                                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ biometrics?.ideal_weight || '-' }} kg</p>
                                    </div>
                                </div>
                                <p v-if="weightToGoal" class="text-xs" :class="weightToGoal > 0 ? 'text-red-500' : weightToGoal < 0 ? 'text-green-500' : 'text-gray-400'">
                                    {{ weightToGoal > 0 ? `${weightToGoal} kg por perder` : weightToGoal < 0 ? `${Math.abs(weightToGoal)} kg por ganar` : 'En tu peso ideal' }}
                                </p>
                            </div>
                        </div>

                        <!-- BMI Scale -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Escala de IMC</h3>
                            
                            <div class="relative h-10 rounded-full overflow-hidden bg-gradient-to-r from-blue-400 via-green-400 via-yellow-400 to-red-500">
                                <div 
                                    v-if="biometrics?.bmi"
                                    class="absolute top-0 h-full w-1.5 bg-white shadow-lg border border-gray-200"
                                    :style="{ left: `${Math.min(Math.max((biometrics.bmi - 15) / 25 * 100, 0), 100)}%` }"
                                >
                                    <div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
                                        {{ biometrics.bmi }}
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex justify-between mt-3 text-xs text-gray-500 dark:text-gray-400">
                                <span>15</span>
                                <span class="text-blue-500 font-medium">Bajo peso</span>
                                <span class="text-green-500 font-medium">Normal</span>
                                <span class="text-yellow-500 font-medium">Sobrepeso</span>
                                <span class="text-red-500 font-medium">Obesidad</span>
                                <span>40</span>
                            </div>
                        </div>

                        <!-- Macros Recomendados -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
                                <span>🎯</span> Macros Recomendados
                                <span v-if="biometrics?.calorie_adjustment_percent !== 0" class="text-sm font-normal ml-auto">
                                    <span :class="biometrics.calorie_adjustment_percent > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'">
                                        {{ biometrics.calorie_adjustment_percent > 0 ? '+' : '' }}{{ biometrics.calorie_adjustment_percent }}%
                                    </span>
                                    <span class="text-gray-500 dark:text-gray-400 text-xs">
                                        {{ client?.objective === 'lose' ? '(Pérdida)' : client?.objective === 'gain' ? '(Ganancia)' : '(Mantener)' }}
                                    </span>
                                </span>
                            </h3>
                            
                            <div v-if="biometrics?.macros" class="space-y-4">
                                <!-- Calorías objetivo -->
                                <div class="bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-purple-900/20 dark:to-indigo-900/20 rounded-xl p-4 border-2 border-purple-200 dark:border-purple-800">
                                    <div class="flex items-center justify-between mb-2">
                                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Calorías Objetivo</span>
                                        <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">
                                            {{ biometrics.target_calories || biometrics.macros.calories }} kcal
                                        </span>
                                    </div>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">Basado en tu objetivo de {{ client?.objective === 'lose' ? 'pérdida de peso' : client?.objective === 'gain' ? 'ganancia de masa' : 'mantenimiento' }}</p>
                                </div>

                                <!-- Macros Grid -->
                                <div class="grid grid-cols-3 gap-3">
                                    <!-- Proteínas -->
                                    <div class="bg-red-50 dark:bg-red-900/20 rounded-xl p-4 text-center border-2 border-red-200 dark:border-red-800">
                                        <div class="text-3xl mb-2">🍖</div>
                                        <div class="text-2xl font-bold text-red-600 dark:text-red-400">{{ biometrics.macros.protein }}g</div>
                                        <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">Proteínas</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">{{ Math.round((biometrics.macros.protein * 4 / biometrics.macros.calories) * 100) }}%</div>
                                    </div>

                                    <!-- Carbohidratos -->
                                    <div class="bg-amber-50 dark:bg-amber-900/20 rounded-xl p-4 text-center border-2 border-amber-200 dark:border-amber-800">
                                        <div class="text-3xl mb-2">🍞</div>
                                        <div class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ biometrics.macros.carbs }}g</div>
                                        <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">Carbohidratos</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">{{ Math.round((biometrics.macros.carbs * 4 / biometrics.macros.calories) * 100) }}%</div>
                                    </div>

                                    <!-- Grasas -->
                                    <div class="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4 text-center border-2 border-blue-200 dark:border-blue-800">
                                        <div class="text-3xl mb-2">🥑</div>
                                        <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ biometrics.macros.fats }}g</div>
                                        <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">Grasas</div>
                                        <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">{{ Math.round((biometrics.macros.fats * 9 / biometrics.macros.calories) * 100) }}%</div>
                                    </div>
                                </div>

                                <!-- Info adicional -->
                                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4">
                                    <p class="text-xs text-gray-600 dark:text-gray-400 leading-relaxed">
                                        💡 <strong>Tip:</strong> Estos valores son calculados según tu peso ({{ client?.weight }}kg), altura ({{ client?.height }}cm), 
                                        nivel de actividad y objetivo. Tu entrenador puede ajustarlos según tu progreso.
                                    </p>
                                </div>
                            </div>
                            
                            <div v-else class="text-center py-8 text-gray-400 dark:text-gray-500">
                                <span class="text-4xl mb-2 block">📊</span>
                                Completa tus datos físicos para ver los macros recomendados
                            </div>
                        </div>
                        
                        <!-- Caloric Recommendations -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Escenarios de Calorías</h3>
                            
                            <div v-if="biometrics?.tdee" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="p-4 bg-red-50 dark:bg-red-900/20 rounded-xl text-center border-2" :class="client?.objective === 'lose' ? 'border-red-500' : 'border-red-200 dark:border-red-800'">
                                    <div class="text-3xl font-bold text-red-600 dark:text-red-400">{{ Math.round(biometrics.tdee * 0.8) }}</div>
                                    <div class="text-sm text-red-700 dark:text-red-300 font-medium">kcal/día</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-2">Perder peso<br/>(déficit -20%)</div>
                                    <div v-if="client?.objective === 'lose'" class="mt-2 text-xs font-semibold text-red-600 dark:text-red-400">✓ Tu objetivo</div>
                                </div>
                                <div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-xl text-center border-2" :class="client?.objective === 'maintain' || !client?.objective ? 'border-green-500' : 'border-green-200 dark:border-green-800'">
                                    <div class="text-3xl font-bold text-green-600 dark:text-green-400">{{ Math.round(biometrics.tdee) }}</div>
                                    <div class="text-sm text-green-700 dark:text-green-300 font-medium">kcal/día</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-2">Mantener peso<br/>(mantenimiento)</div>
                                    <div v-if="client?.objective === 'maintain' || !client?.objective" class="mt-2 text-xs font-semibold text-green-600 dark:text-green-400">✓ Tu objetivo</div>
                                </div>
                                <div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl text-center border-2" :class="client?.objective === 'gain' ? 'border-blue-500' : 'border-blue-200 dark:border-blue-800'">
                                    <div class="text-3xl font-bold text-blue-600 dark:text-blue-400">{{ Math.round(biometrics.tdee * 1.15) }}</div>
                                    <div class="text-sm text-blue-700 dark:text-blue-300 font-medium">kcal/día</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-2">Ganar masa<br/>(superávit +15%)</div>
                                    <div v-if="client?.objective === 'gain'" class="mt-2 text-xs font-semibold text-blue-600 dark:text-blue-400">✓ Tu objetivo</div>
                                </div>
                            </div>
                            
                            <div v-else class="text-center py-8 text-gray-400 dark:text-gray-500">
                                <span class="text-4xl mb-2 block">📊</span>
                                Completa tus datos para ver las recomendaciones
                            </div>
                        </div>

                        <!-- Weight History Chart -->
                        <div v-if="weight_history?.length > 1" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6">
                            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Historial de Peso</h3>
                            
                            <div class="h-48 flex items-end justify-between gap-2">
                                <div 
                                    v-for="(entry, index) in weight_history" 
                                    :key="index"
                                    class="flex-1 flex flex-col items-center gap-1"
                                >
                                    <span class="text-xs font-bold text-gray-900 dark:text-white">{{ entry.weight }}</span>
                                    <div 
                                        class="w-full bg-gradient-to-t from-emerald-500 to-emerald-400 rounded-t"
                                        :style="{ 
                                            height: `${((entry.weight - Math.min(...weight_history.map(w => w.weight)) + 5) / 
                                                      (Math.max(...weight_history.map(w => w.weight)) - Math.min(...weight_history.map(w => w.weight)) + 10)) * 100}%`,
                                            minHeight: '20px'
                                        }"
                                    ></div>
                                    <span class="text-[10px] text-gray-400 dark:text-gray-500">{{ entry.date }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Settings Tab -->
                    <div v-if="activeTab === 'settings'" class="space-y-6">
                        <!-- Profile Form -->
                        <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-100 dark:border-gray-700">
                                <h3 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                                    <span>✏️</span> Editar Información
                                </h3>
                            </div>
                            <form @submit.prevent="updateProfile" class="p-6 space-y-6">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nombre completo</label>
                                        <input 
                                            type="text" 
                                            v-model="profileForm.name" 
                                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500" 
                                            required 
                                        />
                                        <p v-if="profileForm.errors.name" class="text-red-500 text-sm mt-1">{{ profileForm.errors.name }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
                                        <input 
                                            type="email" 
                                            v-model="profileForm.email" 
                                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500" 
                                            required 
                                        />
                                        <p v-if="profileForm.errors.email" class="text-red-500 text-sm mt-1">{{ profileForm.errors.email }}</p>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Teléfono</label>
                                    <input 
                                        type="tel" 
                                        v-model="profileForm.phone" 
                                        class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500"
                                        placeholder="+34 600 000 000"
                                    />
                                </div>
                                <div class="flex justify-end">
                                    <button 
                                        type="submit"
                                        :disabled="profileForm.processing"
                                        class="px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-xl transition-colors disabled:opacity-50"
                                    >
                                        {{ profileForm.processing ? 'Guardando...' : 'Guardar cambios' }}
                                    </button>
                                </div>
                            </form>
                        </div>

                        <!-- Password Form -->
                        <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-100 dark:border-gray-700">
                                <h3 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
                                    <span>🔐</span> Cambiar Contraseña
                                </h3>
                            </div>
                            <form @submit.prevent="updatePassword" class="p-6 space-y-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Contraseña actual</label>
                                    <input 
                                        type="password" 
                                        v-model="passwordForm.current_password" 
                                        class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500" 
                                        required 
                                    />
                                    <p v-if="passwordForm.errors.current_password" class="text-red-500 text-sm mt-1">{{ passwordForm.errors.current_password }}</p>
                                </div>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nueva contraseña</label>
                                        <input 
                                            type="password" 
                                            v-model="passwordForm.password" 
                                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500" 
                                            required 
                                        />
                                        <p v-if="passwordForm.errors.password" class="text-red-500 text-sm mt-1">{{ passwordForm.errors.password }}</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Confirmar contraseña</label>
                                        <input 
                                            type="password" 
                                            v-model="passwordForm.password_confirmation" 
                                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-emerald-500 focus:border-emerald-500" 
                                            required 
                                        />
                                    </div>
                                </div>
                                <div class="flex justify-end">
                                    <button 
                                        type="submit"
                                        :disabled="passwordForm.processing"
                                        class="px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-xl transition-colors disabled:opacity-50"
                                    >
                                        {{ passwordForm.processing ? 'Actualizando...' : 'Actualizar contraseña' }}
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </ClientLayout>
</template>
