<script setup>
/**
 * Client Progress Index - Mobile-First
 * Shows progress tracking with weight chart, compliance history, and photo gallery
 */
import ClientLayout from '@/Layouts/ClientLayout.vue';
import { Head, Link, useForm, usePage, router } from '@inertiajs/vue3';
import { ref, computed, onMounted } from 'vue';
import PullToRefresh from '@/Components/Mobile/PullToRefresh.vue';

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

const props = defineProps({
    client: Object,
    photos: Array,
    compliance_history: Array,
    weight_history: Array,
    stats: Object,
    no_profile: Boolean,
});

const activeTab = ref('overview');
const showPhotoModal = ref(false);
const selectedPhoto = ref(null);
const photoViewerOpen = ref(false);
const isRefreshing = ref(false);

const handleRefresh = () => {
    isRefreshing.value = true;
    router.reload({ onFinish: () => { isRefreshing.value = false; } });
};

const photoForm = useForm({
    image: null,
    type: 'front',
    weight: props.stats?.current_weight || '',
    date: new Date().toISOString().split('T')[0],
});

const uploadPhoto = () => {
    photoForm.post(route('client.photos.upload'), {
        onSuccess: () => {
            showPhotoModal.value = false;
            photoForm.reset('image');
        },
    });
};

const deletePhoto = (id) => {
    if (confirm('¿Eliminar esta foto de progreso?')) {
        photoForm.delete(route('client.photos.destroy', id), {
            preserveScroll: true,
        });
    }
};

const openPhotoViewer = (photo) => {
    selectedPhoto.value = photo;
    photoViewerOpen.value = true;
};

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

// Weight change indicator
const weightChangeIcon = computed(() => {
    if (!props.stats?.weight_change) return { icon: '➖', color: 'text-gray-500' };
    if (props.stats.weight_change > 0) return { icon: '📈', color: 'text-green-600' };
    return { icon: '📉', color: 'text-red-600' };
});

// Photo type labels
const photoTypeLabels = {
    front: 'Frontal',
    side: 'Lateral',
    back: 'Espalda',
};

// Get photos grouped by month
const photosByMonth = computed(() => {
    if (!props.photos?.length) return {};
    
    const grouped = {};
    props.photos.forEach(photo => {
        const date = new Date(photo.date);
        const key = date.toLocaleDateString('es-ES', { month: 'long', year: 'numeric' });
        if (!grouped[key]) grouped[key] = [];
        grouped[key].push(photo);
    });
    return grouped;
});

// Calculate max value for chart scaling
const maxCompliance = computed(() => {
    if (!props.compliance_history?.length) return 1;
    return Math.max(
        ...props.compliance_history.map(d => Math.max(d.workouts, d.meals)),
        1
    );
});
</script>

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

    <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 Progreso
                    </h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Seguimiento de tu evolución física
                    </p>
                </div>
                <div class="flex items-center gap-2">
                    <button 
                        @click="showPhotoModal = true"
                        class="inline-flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg shadow-lg shadow-emerald-500/25 transition-all text-sm"
                    >
                        <svg class="w-5 h-5 mr-2" 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>
                        Subir foto
                    </button>
                    <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>
            </div>
        </template>

        <PullToRefresh :loading="isRefreshing" @refresh="handleRefresh">
        <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">
                
                <!-- 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.</p>
                </div>

                <template v-else>
                    <!-- Stats Cards -->
                    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
                        <!-- Current Weight -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 md:p-5">
                            <div class="flex items-center gap-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-sm text-gray-500 dark:text-gray-400">Peso actual</p>
                                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats?.current_weight || '-' }} kg</p>
                                </div>
                            </div>
                        </div>

                        <!-- Weight Change -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 md:p-5">
                            <div class="flex items-center gap-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">{{ weightChangeIcon.icon }}</span>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Cambio total</p>
                                    <p :class="['text-2xl font-bold', weightChangeIcon.color]">
                                        {{ stats?.weight_change ? (stats.weight_change > 0 ? '+' : '') + stats.weight_change : '0' }} kg
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- BMI -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 md:p-5">
                            <div class="flex items-center gap-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-sm text-gray-500 dark:text-gray-400">IMC (BMI)</p>
                                    <div class="flex items-center gap-2">
                                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats?.bmi || '-' }}</p>
                                        <span v-if="bmiCategory" :class="['text-xs px-2 py-0.5 rounded-full font-medium', bmiCategory.color]">
                                            {{ bmiCategory.label }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- TDEE -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 md:p-5">
                            <div class="flex items-center gap-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-sm text-gray-500 dark:text-gray-400">TDEE diario</p>
                                    <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats?.tdee || '-' }} kcal</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tabs -->
                    <div class="flex gap-2 overflow-x-auto pb-2">
                        <button 
                            v-for="tab in [
                                { id: 'overview', label: '📊 Resumen', icon: '📊' },
                                { id: 'photos', label: '📸 Fotos', icon: '📸' },
                                { id: 'history', label: '📅 Historial', 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>

                    <!-- Overview Tab -->
                    <div v-if="activeTab === 'overview'" class="space-y-6">
                        <!-- Compliance Chart -->
                        <div v-if="features.feature_analytics" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 md:p-6">
                            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Cumplimiento últimos 30 días</h3>
                            
                            <div v-if="compliance_history?.length" class="h-48 flex items-end justify-between gap-1">
                                <div 
                                    v-for="(day, index) in compliance_history" 
                                    :key="index"
                                    class="flex-1 flex flex-col items-center gap-1 group"
                                >
                                    <div class="w-full flex flex-col gap-0.5 h-36 justify-end">
                                        <!-- Workout bar -->
                                        <div 
                                            :style="{ height: `${(day.workouts / maxCompliance) * 100}%` }"
                                            :class="['w-full rounded-t transition-all min-h-[2px]', day.workouts ? 'bg-emerald-500' : 'bg-gray-200 dark:bg-gray-700']"
                                            :title="`${day.workouts} entrenos`"
                                        ></div>
                                        <!-- Meal bar -->
                                        <div 
                                            :style="{ height: `${(day.meals / maxCompliance) * 100}%` }"
                                            :class="['w-full rounded-t transition-all min-h-[2px]', day.meals ? 'bg-blue-500' : 'bg-gray-200 dark:bg-gray-700']"
                                            :title="`${day.meals} comidas`"
                                        ></div>
                                    </div>
                                    <span 
                                        v-if="index % 5 === 0" 
                                        class="text-[8px] md:text-[10px] text-gray-400 dark:text-gray-500"
                                    >
                                        {{ day.date }}
                                    </span>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-center gap-6 mt-4 text-xs text-gray-500 dark:text-gray-400">
                                <span class="flex items-center gap-1"><span class="w-3 h-3 bg-emerald-500 rounded"></span> Entrenos ({{ stats?.total_workouts || 0 }} total)</span>
                                <span class="flex items-center gap-1"><span class="w-3 h-3 bg-blue-500 rounded"></span> Comidas ({{ stats?.total_meals || 0 }} total)</span>
                            </div>
                        </div>

                        <!-- Weight History Chart -->
                        <div v-if="features.feature_analytics && weight_history?.length > 1" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 md:p-6">
                            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Evolución del 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>

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

                    <!-- Photos Tab -->
                    <div v-if="activeTab === 'photos'" class="space-y-6">
                        <div v-if="Object.keys(photosByMonth).length">
                            <div v-for="(monthPhotos, month) in photosByMonth" :key="month" class="mb-8">
                                <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4 capitalize">{{ month }}</h3>
                                
                                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                                    <div 
                                        v-for="photo in monthPhotos" 
                                        :key="photo.id"
                                        class="relative group aspect-[3/4] rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-700 cursor-pointer"
                                        @click="openPhotoViewer(photo)"
                                    >
                                        <img :src="photo.image_path" :alt="photo.type" class="w-full h-full object-cover" />
                                        
                                        <!-- Overlay -->
                                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                                            <div class="absolute bottom-0 left-0 right-0 p-3 text-white">
                                                <div class="flex items-center justify-between">
                                                    <div>
                                                        <p class="font-semibold">{{ photo.weight }} kg</p>
                                                        <p class="text-xs opacity-80">{{ photoTypeLabels[photo.type] || photo.type }}</p>
                                                    </div>
                                                    <span class="text-xs opacity-80">{{ new Date(photo.date).toLocaleDateString('es-ES') }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- Type Badge -->
                                        <span class="absolute top-2 left-2 px-2 py-1 bg-black/50 text-white text-xs rounded-full">
                                            {{ photoTypeLabels[photo.type] || photo.type }}
                                        </span>
                                        
                                        <!-- Delete Button -->
                                        <button 
                                            @click.stop="deletePhoto(photo.id)"
                                            class="absolute top-2 right-2 p-1.5 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-600"
                                        >
                                            <svg 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="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>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Empty State -->
                        <div v-else class="text-center py-16 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
                            <div class="w-20 h-20 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                                <span class="text-4xl">📷</span>
                            </div>
                            <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Sin fotos de progreso</h3>
                            <p class="text-gray-500 dark:text-gray-400 max-w-md mx-auto mb-4">
                                Sube tu primera foto para comenzar a documentar tu transformación.
                            </p>
                            <button 
                                @click="showPhotoModal = true"
                                class="px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-xl transition-colors"
                            >
                                📸 Subir primera foto
                            </button>
                        </div>
                    </div>

                    <!-- History Tab -->
                    <div v-if="activeTab === 'history'" class="space-y-6">
                        <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">Resumen de estadísticas</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">Peso inicial</span>
                                    <span class="font-semibold text-gray-900 dark:text-white">{{ stats?.start_weight || '-' }} kg</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">{{ stats?.current_weight || '-' }} kg</span>
                                </div>
                                <div class="px-6 py-4 flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Cambio total</span>
                                    <span :class="['font-semibold', stats?.weight_change > 0 ? 'text-green-600' : stats?.weight_change < 0 ? 'text-red-600' : 'text-gray-900 dark:text-white']">
                                        {{ stats?.weight_change ? (stats.weight_change > 0 ? '+' : '') + stats.weight_change : '0' }} kg
                                    </span>
                                </div>
                                <div class="px-6 py-4 flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">TMB (Metabolismo basal)</span>
                                    <span class="font-semibold text-gray-900 dark:text-white">{{ stats?.bmr || '-' }} kcal</span>
                                </div>
                                <div class="px-6 py-4 flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">TDEE (Gasto diario)</span>
                                    <span class="font-semibold text-gray-900 dark:text-white">{{ stats?.tdee || '-' }} kcal</span>
                                </div>
                                <div class="px-6 py-4 flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Entrenamientos completados</span>
                                    <span class="font-semibold text-emerald-600">{{ stats?.total_workouts || 0 }}</span>
                                </div>
                                <div class="px-6 py-4 flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Comidas completadas</span>
                                    <span class="font-semibold text-blue-600">{{ stats?.total_meals || 0 }}</span>
                                </div>
                                <div class="px-6 py-4 flex items-center justify-between">
                                    <span class="text-gray-600 dark:text-gray-400">Fotos de progreso</span>
                                    <span class="font-semibold text-purple-600">{{ stats?.total_photos || 0 }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        </PullToRefresh>

        <!-- Photo Upload Modal -->
        <Teleport to="body">
            <div 
                v-if="showPhotoModal" 
                class="fixed inset-0 bg-black/50 flex items-end md:items-center justify-center z-50"
                @click.self="showPhotoModal = false"
            >
                <div class="bg-white dark:bg-gray-800 rounded-t-3xl md:rounded-2xl shadow-xl w-full max-w-md overflow-hidden">
                    <div class="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white">📸 Subir foto de progreso</h3>
                        <button @click="showPhotoModal = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                            <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="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                    <form @submit.prevent="uploadPhoto" class="p-6 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Foto</label>
                            <input 
                                type="file" 
                                accept="image/*"
                                @change="photoForm.image = $event.target.files[0]"
                                class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100"
                                required
                            />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tipo de foto</label>
                            <div class="grid grid-cols-3 gap-2">
                                <button 
                                    v-for="type in ['front', 'side', 'back']"
                                    :key="type"
                                    type="button"
                                    @click="photoForm.type = type"
                                    :class="[
                                        'py-3 rounded-lg font-medium text-sm transition-all border-2',
                                        photoForm.type === type 
                                            ? 'border-emerald-500 bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400' 
                                            : 'border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-gray-300'
                                    ]"
                                >
                                    {{ photoTypeLabels[type] }}
                                </button>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Peso (kg)</label>
                                <input 
                                    type="number" 
                                    step="0.1"
                                    v-model="photoForm.weight"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                    placeholder="70.0"
                                />
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Fecha</label>
                                <input 
                                    type="date"
                                    v-model="photoForm.date"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                    required
                                />
                            </div>
                        </div>
                        <button 
                            type="submit"
                            :disabled="photoForm.processing"
                            class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-3 rounded-xl transition-colors disabled:opacity-50"
                        >
                            {{ photoForm.processing ? 'Subiendo...' : 'Subir foto' }}
                        </button>
                    </form>
                </div>
            </div>
        </Teleport>

        <!-- Photo Viewer Modal -->
        <Teleport to="body">
            <div 
                v-if="photoViewerOpen && selectedPhoto" 
                class="fixed inset-0 bg-black/90 flex items-center justify-center z-50"
                @click="photoViewerOpen = false"
            >
                <button 
                    @click="photoViewerOpen = false"
                    class="absolute top-4 right-4 p-2 text-white/80 hover:text-white transition-colors"
                >
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
                
                <div class="max-w-3xl w-full mx-4">
                    <img :src="selectedPhoto.image_path" :alt="selectedPhoto.type" class="w-full max-h-[80vh] object-contain rounded-lg" />
                    
                    <div class="mt-4 text-center text-white">
                        <p class="text-2xl font-bold">{{ selectedPhoto.weight }} kg</p>
                        <p class="text-sm opacity-80">
                            {{ photoTypeLabels[selectedPhoto.type] }} • {{ new Date(selectedPhoto.date).toLocaleDateString('es-ES', { day: 'numeric', month: 'long', year: 'numeric' }) }}
                        </p>
                    </div>
                </div>
            </div>
        </Teleport>
    </ClientLayout>
</template>
