<script setup>
/**
 * Client Photos Gallery View - Rediseñado con vista Reels y comparación Antes/Después
 * FASE 2: Vista moderna con diseño vertical estilo Instagram
 * FASE 3: Compartir en redes sociales con marca de agua
 */
import ClientLayout from '@/Layouts/ClientLayout.vue';
import { Head, router, useForm } from '@inertiajs/vue3';
import { ref, computed } from 'vue';

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

const photoForm = useForm({
    image: null,
    after_image: null,
    beforeFile: null,
    afterFile: null,
    beforePreview: null,
    afterPreview: null,
    type: 'front',
    time_period: '',
    time_value: '',
    time_unit: 'Semanas',
    weight: props.client?.weight || '',
    date: new Date().toISOString().split('T')[0],
    notes: '',
});

const showUploadModal = ref(false);
const showPhotoModal = ref(false);
const showShareModal = ref(false);
const selectedPhoto = ref(null);
const photoToShare = ref(null);
const filterType = ref('all');
const viewMode = ref('reels'); // 'reels', 'grid', 'compare'
const currentSlideIndex = ref({}); // Track cual slide está mostrando cada foto

const compareBeforePhoto = ref(null);
const compareAfterPhoto = ref(null);
const isDownloadingWithWatermark = ref(false);
const shareUrl = ref('');
const copiedLink = ref(false);
const modalSlideIndex = ref(0); // Slider en el modal de detalle
const hasLiked = ref(false);
const likesCount = ref(0);
const showShareProgressModal = ref(false); // Modal para compartir imagen combinada
const combinedImageUrl = ref(''); // URL de la imagen combinada generada
const showCommentSection = ref(false); // Mostrar sección de comentarios
const newComment = ref(''); // Nuevo comentario
const photoComments = ref([]); // Comentarios de la foto

// Helper para rutas (usa Ziggy globalmente disponible)
const route = window.route;

const filteredPhotos = computed(() => {
    if (filterType.value === 'all') return props.photos;
    return props.photos?.filter(p => p.type === filterType.value);
});

const sortedPhotos = computed(() => {
    return [...(filteredPhotos.value || [])].sort((a, b) => new Date(b.date) - new Date(a.date));
});

const firstPhoto = computed(() => {
    if (!props.photos || props.photos.length === 0) return null;
    return [...props.photos].sort((a, b) => new Date(a.date) - new Date(b.date))[0];
});

const latestPhoto = computed(() => {
    if (!props.photos || props.photos.length === 0) return null;
    return [...props.photos].sort((a, b) => new Date(b.date) - new Date(a.date))[0];
});

const progressStats = computed(() => {
    if (!firstPhoto.value || !latestPhoto.value || firstPhoto.value.id === latestPhoto.value.id) {
        return null;
    }
    const weightChange = firstPhoto.value.weight && latestPhoto.value.weight
        ? (latestPhoto.value.weight - firstPhoto.value.weight).toFixed(1)
        : null;
    const days = Math.floor((new Date(latestPhoto.value.date) - new Date(firstPhoto.value.date)) / (1000 * 60 * 60 * 24));
    return { weightChange, days };
});

const canShare = computed(() => {
    return typeof navigator !== 'undefined' && navigator.share !== undefined;
});

const photosByMonth = computed(() => {
    const grouped = {};
    filteredPhotos.value?.forEach(photo => {
        const date = new Date(photo.date);
        const key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
        const label = date.toLocaleDateString('es-ES', { month: 'long', year: 'numeric' });
        if (!grouped[key]) {
            grouped[key] = { label, photos: [] };
        }
        grouped[key].photos.push(photo);
    });
    return Object.entries(grouped).sort((a, b) => b[0].localeCompare(a[0]));
});

const uploadPhoto = () => {
    if (!photoForm.beforeFile) {
        alert('Por favor selecciona al menos una foto ANTES');
        return;
    }

    // Componer time_period desde time_value y time_unit
    if (photoForm.time_value) {
        photoForm.time_period = `${photoForm.time_value} ${photoForm.time_unit}`;
    } else {
        photoForm.time_period = '';
    }

    // Asignar los archivos al form de Inertia
    photoForm.image = photoForm.beforeFile;
    if (photoForm.afterFile) {
        photoForm.after_image = photoForm.afterFile;
    }

    photoForm.post(route('client.photos.upload'), {
        onSuccess: () => {
            showUploadModal.value = false;
            photoForm.reset();
            photoForm.image = null;
            photoForm.after_image = null;
            photoForm.beforeFile = null;
            photoForm.afterFile = null;
            photoForm.beforePreview = null;
            photoForm.afterPreview = null;
        },
        onError: (errors) => {
        }
    });
};

const openPhoto = (photo) => {
    selectedPhoto.value = photo;
    showPhotoModal.value = true;
    modalSlideIndex.value = 0;
    hasLiked.value = false;
    likesCount.value = photo.likes_count || 0;
    showCommentSection.value = false;
    newComment.value = '';
    photoComments.value = [];
};

// Agregar comentario
const addComment = () => {
    if (!newComment.value.trim()) return;

    photoComments.value.unshift({
        id: Date.now(),
        author: props.client?.name || 'Tú',
        text: newComment.value,
        date: new Date().toISOString()
    });

    newComment.value = '';
};

// Toggle sección de comentarios
const toggleComments = () => {
    showCommentSection.value = !showCommentSection.value;
};

// Generar imagen combinada ANTES/DESPUÉS
const generateCombinedImage = async (photo) => {
    if (!photo.after_image_path) {
        alert('Esta foto no tiene imagen DESPUÉS');
        return null;
    }

    try {
        const response = await axios.post(route('client.photos.generate-combined', photo.id));
        return response.data.combined_url;
    } catch (error) {
        throw error;
    }
};

// Abrir modal de compartir con imagen combinada
const openShareProgressModal = async (photo) => {
    if (!photo.after_image_path) {
        alert('Esta foto no tiene imagen DESPUÉS para crear el montaje');
        return;
    }

    photoToShare.value = photo;
    showShareProgressModal.value = true;

    try {
        combinedImageUrl.value = await generateCombinedImage(photo);
        shareUrl.value = combinedImageUrl.value;
    } catch (error) {
        alert('Error al crear la imagen combinada');
        showShareProgressModal.value = false;
    }
};

// Toggle like en el modal
const toggleLike = () => {
    hasLiked.value = !hasLiked.value;
    likesCount.value += hasLiked.value ? 1 : -1;
};

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

const setCompareMode = () => {
    viewMode.value = 'compare';
    if (firstPhoto.value && latestPhoto.value) {
        compareBeforePhoto.value = firstPhoto.value;
        compareAfterPhoto.value = latestPhoto.value;
    }
};

const openShareModal = async (photo) => {
    photoToShare.value = photo;
    showShareModal.value = true;
    copiedLink.value = false;

    try {
        // FASE 4: Make photo public and get shareable URL
        const response = await axios.post(route('client.photos.make-public', photo.id));
        shareUrl.value = response.data.public_url;
    } catch (error) {
        // Fallback to hash URL
        shareUrl.value = `${window.location.origin}/client/photos#photo-${photo.id}`;
    }
};

const downloadWithWatermark = async () => {
    if (!photoToShare.value) {
        return;
    }

    isDownloadingWithWatermark.value = true;
    try {
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
        if (!csrfToken) {
            throw new Error('CSRF token no encontrado');
        }


        const response = await fetch(route('client.photos.watermark', photoToShare.value.id), {
            method: 'POST',
            headers: {
                'Accept': 'image/jpeg,image/png,*/*',
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest',
            },
        });

        if (!response.ok) {
            const errorText = await response.text();
            throw new Error(`Error: ${response.status}`);
        }

        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `progreso-${photoToShare.value.date}-${typeLabels[photoToShare.value.type]?.label || 'foto'}.jpg`;
        document.body.appendChild(a);
        a.click();

        setTimeout(() => {
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        }, 100);

    } catch (error) {
        alert('Error al descargar la imagen: ' + error.message);
    } finally {
        isDownloadingWithWatermark.value = false;
    }
};

const shareToSocial = (platform) => {
    if (!photoToShare.value) {
        return;
    }

    const text = `¡Mira mi progreso! 💪 ${photoToShare.value.weight ? `${photoToShare.value.weight}kg` : ''}`;
    const url = shareUrl.value || window.location.href;

    const urls = {
        facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
        twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`,
        whatsapp: `https://wa.me/?text=${encodeURIComponent(text + ' ' + url)}`,
        telegram: `https://t.me/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`,
    };

    if (urls[platform]) {
        window.open(urls[platform], '_blank', 'width=600,height=400');
    } else {
    }
};

const copyShareLink = async () => {
    if (!shareUrl.value) {
        return;
    }

    try {
        await navigator.clipboard.writeText(shareUrl.value);
        copiedLink.value = true;
        setTimeout(() => copiedLink.value = false, 2000);
    } catch (error) {
        alert('Error al copiar el enlace: ' + error.message);
    }
};

const shareViaWebShare = async () => {
    if (!navigator.share) {
        alert('Tu navegador no soporta la función de compartir');
        return;
    }

    if (!photoToShare.value) {
        return;
    }

    try {
        await navigator.share({
            title: '¡Mi progreso!',
            text: `Mira mi transformación 💪 ${photoToShare.value.weight ? `${photoToShare.value.weight}kg` : ''}`,
            url: shareUrl.value,
        });
    } catch (error) {
        if (error.name !== 'AbortError') {
            alert('Error al compartir: ' + error.message);
        } else {
        }
    }
};

// Descargar imagen combinada
const downloadCombinedImage = async () => {
    if (!combinedImageUrl.value) {
        alert('La imagen combinada aún no está lista');
        return;
    }

    try {
        const response = await fetch(combinedImageUrl.value);
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `transformacion-${photoToShare.value.date}-${typeLabels[photoToShare.value.type]?.label || 'progreso'}.jpg`;
        document.body.appendChild(a);
        a.click();

        setTimeout(() => {
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        }, 100);
    } catch (error) {
        alert('Error al descargar la imagen combinada');
    }
};

// Funciones para manejar antes/después
const handleImageChange = (e, type) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (event) => {
        if (type === 'before') {
            photoForm.beforeFile = file;
            photoForm.beforePreview = event.target.result;
        } else {
            photoForm.afterFile = file;
            photoForm.afterPreview = event.target.result;
        }
    };
    reader.readAsDataURL(file);
};

const clearImage = (type) => {
    if (type === 'before') {
        photoForm.beforeFile = null;
        photoForm.beforePreview = null;
    } else {
        photoForm.afterFile = null;
        photoForm.afterPreview = null;
    }
};

const typeLabels = {
    front: { label: 'Frente', emoji: '🧍', color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-400' },
    side: { label: 'Lateral', emoji: '📐', color: 'bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-400' },
    back: { label: 'Espalda', emoji: '🔙', color: 'bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400' },
};
</script>

<template>
    <Head title="Mis Fotos" />

    <ClientLayout>
        <template #header>
            <div class="flex flex-col gap-4">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div>
                        <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                            📸 Tu Transformación
                        </h2>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                            Documenta cada paso de tu progreso
                        </p>
                    </div>
                    <button
                        @click="showUploadModal = true"
                        class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-emerald-600 to-green-500 hover:from-emerald-700 hover:to-green-600 text-white font-semibold rounded-xl shadow-lg shadow-emerald-500/25 transition-all"
                    >
                        <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="M12 4v16m8-8H4" />
                        </svg>
                        Nueva Foto
                    </button>
                </div>

                <!-- Stats Cards -->
                <div v-if="progressStats" class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-xl p-4 border-2 border-blue-200 dark:border-blue-800">
                        <p class="text-xs font-medium text-blue-600 dark:text-blue-400 mb-1">📅 Tiempo Total</p>
                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ progressStats.days }} <span class="text-sm">días</span></p>
                    </div>
                    <div v-if="progressStats.weightChange" class="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-xl p-4 border-2 border-purple-200 dark:border-purple-800">
                        <p class="text-xs font-medium text-purple-600 dark:text-purple-400 mb-1">⚖️ Cambio de Peso</p>
                        <p class="text-2xl font-bold" :class="parseFloat(progressStats.weightChange) < 0 ? 'text-green-600 dark:text-green-400' : 'text-blue-600 dark:text-blue-400'">
                            {{ progressStats.weightChange > 0 ? '+' : '' }}{{ progressStats.weightChange }} <span class="text-sm">kg</span>
                        </p>
                    </div>
                    <div class="bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 rounded-xl p-4 border-2 border-emerald-200 dark:border-emerald-800">
                        <p class="text-xs font-medium text-emerald-600 dark:text-emerald-400 mb-1">📷 Total Fotos</p>
                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ photos?.length || 0 }} <span class="text-sm">fotos</span></p>
                    </div>
                </div>
            </div>
        </template>

        <div class="space-y-6">
            <!-- View Mode Selector -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-4">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="flex gap-2">
                        <button
                            @click="viewMode = 'reels'"
                            :class="[
                                'px-4 py-2.5 rounded-xl text-sm font-semibold transition-all flex items-center gap-2',
                                viewMode === 'reels'
                                    ? 'bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg shadow-purple-500/25'
                                    : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
                            ]"
                        >
                            <span class="text-lg">📱</span>
                            Reels
                        </button>
                        <button
                            @click="viewMode = 'grid'"
                            :class="[
                                'px-4 py-2.5 rounded-xl text-sm font-semibold transition-all flex items-center gap-2',
                                viewMode === 'grid'
                                    ? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-500/25'
                                    : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
                            ]"
                        >
                            <span class="text-lg">⊞</span>
                            Cuadrícula
                        </button>
                        <button
                            @click="setCompareMode"
                            :disabled="!firstPhoto || !latestPhoto || firstPhoto.id === latestPhoto.id"
                            :class="[
                                'px-4 py-2.5 rounded-xl text-sm font-semibold transition-all flex items-center gap-2',
                                viewMode === 'compare'
                                    ? 'bg-gradient-to-r from-emerald-600 to-green-600 text-white shadow-lg shadow-emerald-500/25'
                                    : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed'
                            ]"
                        >
                            <span class="text-lg">⚡</span>
                            Antes/Después
                        </button>
                    </div>

                    <!-- Filter Tabs -->
                    <div class="flex gap-2">
                        <button
                            @click="filterType = 'all'"
                            :class="[
                                'px-3 py-1.5 rounded-lg text-xs font-medium transition-colors',
                                filterType === 'all'
                                    ? 'bg-emerald-100 dark:bg-emerald-900/50 text-emerald-700 dark:text-emerald-400'
                                    : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
                            ]"
                        >
                            Todas
                        </button>
                        <button
                            v-for="(type, key) in typeLabels"
                            :key="key"
                            @click="filterType = key"
                            :class="[
                                'px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center gap-1',
                                filterType === key
                                    ? type.color
                                    : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
                            ]"
                        >
                            <span>{{ type.emoji }}</span>
                            {{ type.label }}
                        </button>
                    </div>
                </div>
            </div>

            <!-- VISTA REELS: Estilo Instagram Stories con Slider Antes/Después -->
            <div v-if="viewMode === 'reels' && filteredPhotos?.length" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                <div
                    v-for="photo in sortedPhotos"
                    :key="photo.id"
                    class="relative group rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1"
                    style="aspect-ratio: 9/16;"
                >
                    <!-- Slider de imágenes si tiene ANTES y DESPUÉS -->
                    <div v-if="photo.after_image_path" class="relative h-full">
                        <!-- Imagen ANTES -->
                        <div
                            :class="['absolute inset-0 transition-opacity duration-500', currentSlideIndex[photo.id] === 1 ? 'opacity-0' : 'opacity-100']"
                        >
                            <img
                                :src="photo.image_path"
                                :alt="'Foto ANTES'"
                                class="w-full h-full object-cover"
                            />
                            <!-- Badge ANTES -->
                            <div class="absolute top-4 left-4 bg-gradient-to-r from-red-500 to-pink-500 text-white px-4 py-2 rounded-full font-bold text-xs shadow-lg">
                                📉 ANTES
                            </div>
                        </div>

                        <!-- Imagen DESPUÉS -->
                        <div
                            :class="['absolute inset-0 transition-opacity duration-500', currentSlideIndex[photo.id] === 1 ? 'opacity-100' : 'opacity-0']"
                        >
                            <img
                                :src="photo.after_image_path"
                                :alt="'Foto DESPUÉS'"
                                class="w-full h-full object-cover"
                            />
                            <!-- Badge DESPUÉS -->
                            <div class="absolute top-4 left-4 bg-gradient-to-r from-emerald-500 to-green-500 text-white px-4 py-2 rounded-full font-bold text-xs shadow-lg">
                                📈 DESPUÉS
                            </div>
                        </div>

                        <!-- Indicadores y controles del slider -->
                        <div class="absolute top-4 left-1/2 transform -translate-x-1/2 flex gap-2 z-10">
                            <button
                                v-for="i in 2"
                                :key="i"
                                @click="currentSlideIndex[photo.id] = i - 1"
                                :class="[
                                    'w-12 h-1.5 rounded-full transition-all',
                                    currentSlideIndex[photo.id] === (i - 1) || (!currentSlideIndex[photo.id] && i === 1)
                                        ? 'bg-white'
                                        : 'bg-white/40'
                                ]"
                            ></button>
                        </div>

                        <!-- Botones navegación -->
                        <button
                            @click="currentSlideIndex[photo.id] = 0"
                            class="absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 bg-black/50 hover:bg-black/70 text-white rounded-full flex items-center justify-center backdrop-blur-sm transition-all z-10"
                        >
                            <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="M15 19l-7-7 7-7" />
                            </svg>
                        </button>
                        <button
                            @click="currentSlideIndex[photo.id] = 1"
                            class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 bg-black/50 hover:bg-black/70 text-white rounded-full flex items-center justify-center backdrop-blur-sm transition-all z-10"
                        >
                            <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="M9 5l7 7-7 7" />
                            </svg>
                        </button>
                    </div>

                    <!-- Solo imagen ANTES si no hay DESPUÉS -->
                    <div v-else class="relative h-full">
                        <img
                            :src="photo.image_path"
                            :alt="`Foto de progreso - ${typeLabels[photo.type]?.label}`"
                            class="w-full h-full object-cover"
                        />
                        <!-- Badge tipo de foto -->
                        <div class="absolute top-4 left-4">
                            <span :class="['px-3 py-1.5 text-xs font-bold rounded-full backdrop-blur-sm border-2', typeLabels[photo.type]?.color]">
                                {{ typeLabels[photo.type]?.emoji }} {{ typeLabels[photo.type]?.label }}
                            </span>
                        </div>
                    </div>

                    <!-- Overlay gradiente -->
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent pointer-events-none"></div>

                    <!-- Botones de acción (superior derecho) -->
                    <div class="absolute top-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity z-20">
                        <button
                            @click.stop="openShareModal(photo)"
                            class="p-2 bg-blue-500/90 hover:bg-blue-600 text-white rounded-full shadow-lg backdrop-blur-sm"
                            title="Compartir"
                        >
                            <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="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                            </svg>
                        </button>
                        <button
                            @click.stop="deletePhoto(photo.id)"
                            class="p-2 bg-red-500/90 hover:bg-red-600 text-white rounded-full shadow-lg backdrop-blur-sm"
                            title="Eliminar"
                        >
                            <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>
                        <button
                            @click.stop="openPhoto(photo)"
                            class="p-2 bg-purple-500/90 hover:bg-purple-600 text-white rounded-full shadow-lg backdrop-blur-sm"
                            title="Ver detalles"
                        >
                            <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                            </svg>
                        </button>
                    </div>

                    <!-- Información (inferior) -->
                    <div class="absolute bottom-0 left-0 right-0 p-4 text-white z-10">
                        <div class="flex items-end justify-between">
                            <div class="flex-1">
                                <p class="text-sm font-medium opacity-90 mb-1">
                                    {{ new Date(photo.date).toLocaleDateString('es-ES', { day: 'numeric', month: 'short', year: 'numeric' }) }}
                                </p>
                                <div class="flex items-center gap-3 flex-wrap">
                                    <div v-if="photo.weight" class="flex items-center gap-1.5 bg-white/20 backdrop-blur-sm rounded-full px-3 py-1">
                                        <span class="text-lg">⚖️</span>
                                        <span class="text-sm font-bold">{{ photo.weight }} kg</span>
                                    </div>
                                    <div v-if="photo.time_period" class="flex items-center gap-1.5 bg-white/20 backdrop-blur-sm rounded-full px-3 py-1">
                                        <span class="text-lg">⏱️</span>
                                        <span class="text-sm font-bold">{{ photo.time_period }}</span>
                                    </div>
                                    <span v-if="!photo.after_image_path" :class="['px-2 py-0.5 text-xs font-bold rounded-full', typeLabels[photo.type]?.color]">
                                        {{ typeLabels[photo.type]?.emoji }} {{ typeLabels[photo.type]?.label }}
                                    </span>
                                </div>
                                <p v-if="photo.notes" class="text-xs opacity-80 mt-2 line-clamp-2">
                                    "{{ photo.notes }}"
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Timeline indicator lateral -->
                    <div class="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-emerald-400 via-blue-500 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity"></div>
                </div>
            </div>

            <!-- VISTA CUADRÍCULA: Por mes con timeline -->
            <div v-if="viewMode === 'grid' && filteredPhotos?.length">
                <div v-for="[monthKey, monthData] in photosByMonth" :key="monthKey" class="mb-8">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 dark:via-gray-700 to-transparent"></div>
                        <h3 class="text-lg font-bold text-gray-900 dark:text-white capitalize px-4 py-2 bg-white dark:bg-gray-800 rounded-xl border-2 border-gray-200 dark:border-gray-700 shadow-sm">
                            📅 {{ monthData.label }}
                        </h3>
                        <div class="h-px flex-1 bg-gradient-to-r from-transparent via-gray-300 dark:via-gray-700 to-transparent"></div>
                    </div>
                    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
                        <div
                            v-for="photo in monthData.photos"
                            :key="photo.id"
                            @click="openPhoto(photo)"
                            class="relative group cursor-pointer rounded-xl overflow-hidden shadow-sm hover:shadow-xl border-2 border-gray-100 dark:border-gray-700 hover:border-emerald-400 dark:hover:border-emerald-600 transition-all duration-300 aspect-[3/4]"
                        >
                            <img
                                :src="photo.image_path"
                                :alt="`Foto de progreso - ${typeLabels[photo.type]?.label}`"
                                class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                            />
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/20 opacity-0 group-hover:opacity-100 transition-opacity">
                                <div class="absolute top-2 left-2">
                                    <span :class="['px-2 py-1 text-xs font-bold rounded-full', typeLabels[photo.type]?.color]">
                                        {{ typeLabels[photo.type]?.emoji }}
                                    </span>
                                </div>
                                <div class="absolute bottom-2 left-2 right-2">
                                    <p class="text-white text-xs font-medium">
                                        {{ new Date(photo.date).toLocaleDateString('es-ES', { day: 'numeric', month: 'short' }) }}
                                    </p>
                                    <p v-if="photo.weight" class="text-white/90 text-xs">
                                        {{ photo.weight }} kg
                                    </p>
                                </div>
                                <div class="absolute top-2 right-2 flex gap-1">
                                    <button
                                        @click.stop="openShareModal(photo)"
                                        class="p-1.5 bg-blue-500 hover:bg-blue-600 text-white rounded-full shadow-lg"
                                        title="Compartir"
                                    >
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                                        </svg>
                                    </button>
                                    <button
                                        @click.stop="deletePhoto(photo.id)"
                                        class="p-1.5 bg-red-500 hover:bg-red-600 text-white rounded-full shadow-lg"
                                        title="Eliminar"
                                    >
                                        <svg class="w-3.5 h-3.5" 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>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- VISTA COMPARACIÓN: Antes/Después -->
            <div v-if="viewMode === 'compare' && compareBeforePhoto && compareAfterPhoto" class="space-y-6">
                <!-- Selector de fotos para comparar -->
                <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">
                        🎯 Selecciona fotos para comparar
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Selector ANTES -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">📉 ANTES</label>
                            <select
                                v-model="compareBeforePhoto"
                                class="w-full rounded-xl border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-white font-medium p-3"
                            >
                                <option v-for="photo in sortedPhotos.slice().reverse()" :key="photo.id" :value="photo">
                                    {{ new Date(photo.date).toLocaleDateString('es-ES') }} - {{ typeLabels[photo.type]?.label }}
                                    {{ photo.weight ? `(${photo.weight} kg)` : '' }}
                                </option>
                            </select>
                        </div>

                        <!-- Selector DESPUÉS -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">📈 DESPUÉS</label>
                            <select
                                v-model="compareAfterPhoto"
                                class="w-full rounded-xl border-2 border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-white font-medium p-3"
                            >
                                <option v-for="photo in sortedPhotos" :key="photo.id" :value="photo">
                                    {{ new Date(photo.date).toLocaleDateString('es-ES') }} - {{ typeLabels[photo.type]?.label }}
                                    {{ photo.weight ? `(${photo.weight} kg)` : '' }}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Comparación visual -->
                <div class="bg-gradient-to-br from-purple-50 via-pink-50 to-orange-50 dark:from-purple-900/20 dark:via-pink-900/20 dark:to-orange-900/20 rounded-2xl shadow-xl border-2 border-purple-200 dark:border-purple-800 p-6 md:p-8">
                    <!-- Stats de comparación -->
                    <div v-if="compareBeforePhoto.weight && compareAfterPhoto.weight" class="grid grid-cols-3 gap-4 mb-8">
                        <div class="text-center p-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl">
                            <p class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Cambio de peso</p>
                            <p class="text-2xl font-bold" :class="(compareAfterPhoto.weight - compareBeforePhoto.weight) < 0 ? 'text-green-600 dark:text-green-400' : 'text-blue-600 dark:text-blue-400'">
                                {{ (compareAfterPhoto.weight - compareBeforePhoto.weight) > 0 ? '+' : '' }}{{ (compareAfterPhoto.weight - compareBeforePhoto.weight).toFixed(1) }} kg
                            </p>
                        </div>
                        <div class="text-center p-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl">
                            <p class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Tiempo transcurrido</p>
                            <p class="text-2xl font-bold text-purple-600 dark:text-purple-400">
                                {{ Math.floor((new Date(compareAfterPhoto.date) - new Date(compareBeforePhoto.date)) / (1000 * 60 * 60 * 24)) }} días
                            </p>
                        </div>
                        <div class="text-center p-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl">
                            <p class="text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Promedio semanal</p>
                            <p class="text-2xl font-bold text-orange-600 dark:text-orange-400">
                                {{ ((compareAfterPhoto.weight - compareBeforePhoto.weight) / (Math.floor((new Date(compareAfterPhoto.date) - new Date(compareBeforePhoto.date)) / (1000 * 60 * 60 * 24)) / 7)).toFixed(2) }} kg
                            </p>
                        </div>
                    </div>

                    <!-- Imagen con hover effect para mostrar antes/después -->
                    <div class="max-w-2xl mx-auto">
                        <div class="relative group rounded-2xl overflow-hidden shadow-2xl border-4 border-white dark:border-gray-700 cursor-pointer">
                            <!-- Badge que cambia con hover -->
                            <div class="absolute -top-4 left-4 z-20 bg-gradient-to-r from-red-500 to-pink-500 group-hover:from-emerald-500 group-hover:to-green-500 text-white px-6 py-2 rounded-full font-bold text-sm shadow-lg transition-all duration-300">
                                <span class="group-hover:hidden">📉 ANTES</span>
                                <span class="hidden group-hover:inline">📈 DESPUÉS</span>
                            </div>

                            <!-- Imagen ANTES (default) -->
                            <img
                                :src="compareBeforePhoto.image_path"
                                class="w-full h-auto aspect-[3/4] object-cover transition-opacity duration-500 group-hover:opacity-0"
                            />

                            <!-- Imagen DESPUÉS (hover) -->
                            <img
                                :src="compareAfterPhoto.after_image_path || compareAfterPhoto.image_path"
                                class="absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100"
                            />

                            <!-- Info overlay ANTES -->
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 text-white transition-opacity duration-500 group-hover:opacity-0">
                                <p class="text-sm font-semibold">{{ new Date(compareBeforePhoto.date).toLocaleDateString('es-ES', { day: 'numeric', month: 'long', year: 'numeric' }) }}</p>
                                <div class="flex items-center gap-3 mt-2">
                                    <span v-if="compareBeforePhoto.weight" class="px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-sm font-bold">
                                        ⚖️ {{ compareBeforePhoto.weight }} kg
                                    </span>
                                    <span :class="['px-3 py-1 rounded-full text-xs font-bold', typeLabels[compareBeforePhoto.type]?.color]">
                                        {{ typeLabels[compareBeforePhoto.type]?.emoji }} {{ typeLabels[compareBeforePhoto.type]?.label }}
                                    </span>
                                </div>
                            </div>

                            <!-- Info overlay DESPUÉS -->
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 text-white opacity-0 transition-opacity duration-500 group-hover:opacity-100">
                                <p class="text-sm font-semibold">{{ new Date(compareAfterPhoto.date).toLocaleDateString('es-ES', { day: 'numeric', month: 'long', year: 'numeric' }) }}</p>
                                <div class="flex items-center gap-3 mt-2">
                                    <span v-if="compareAfterPhoto.weight" class="px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-sm font-bold">
                                        ⚖️ {{ compareAfterPhoto.weight }} kg
                                    </span>
                                    <span :class="['px-3 py-1 rounded-full text-xs font-bold', typeLabels[compareAfterPhoto.type]?.color]">
                                        {{ typeLabels[compareAfterPhoto.type]?.emoji }} {{ typeLabels[compareAfterPhoto.type]?.label }}
                                    </span>
                                </div>
                            </div>

                            <!-- Hint tooltip -->
                            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black/60 backdrop-blur-sm text-white px-6 py-3 rounded-full text-sm font-medium pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                Pasa el mouse para ver el cambio 🔄
                            </div>
                        </div>
                    </div>

                    <!-- Motivación -->
                    <div class="mt-6 text-center p-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-xl">
                        <p class="text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 dark:from-purple-400 dark:to-pink-400">
                            🎉 ¡Increíble transformación! Sigue así 💪
                        </p>
                    </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">
                    <svg class="w-10 h-10 text-gray-400" 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>
                </div>
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                    {{ filterType === 'all' ? 'Sin fotos de progreso' : 'Sin fotos de este tipo' }}
                </h3>
                <p class="text-gray-500 dark:text-gray-400 max-w-md mx-auto mb-6">
                    Las fotos de progreso son una excelente manera de ver tu transformación a lo largo del tiempo.
                </p>
                <button
                    @click="showUploadModal = true"
                    class="inline-flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg transition-colors"
                >
                    Subir primera foto →
                </button>
            </div>
        </div>

        <!-- Upload Modal -->
        <div v-if="showUploadModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm overflow-y-auto">
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-3xl w-full p-6 my-8">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">📸 Nueva Transformación</h3>
                    <button @click="showUploadModal = false" class="text-gray-400 hover:text-gray-600">
                        <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="space-y-6">
                    <!-- Fotos Antes/Después -->
                    <div class="bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-900/20 dark:to-blue-900/20 rounded-xl p-6">
                        <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">
                            📷 Sube tus fotos de progreso
                        </h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Foto ANTES -->
                            <div>
                                <label class="block text-xs font-bold text-red-500 mb-2">ANTES *</label>
                                <div v-if="photoForm.beforePreview" class="relative">
                                    <img :src="photoForm.beforePreview" class="w-full h-64 object-cover rounded-lg">
                                    <button
                                        type="button"
                                        @click="clearImage('before')"
                                        class="absolute top-2 right-2 p-1.5 bg-red-500 text-white rounded-full hover:bg-red-600 transition"
                                    >
                                        <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="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>
                                <label v-else class="flex flex-col items-center justify-center w-full h-64 border-2 border-red-300 border-dashed rounded-lg cursor-pointer bg-red-50 dark:bg-red-900/20 hover:bg-red-100 transition">
                                    <svg class="w-12 h-12 text-red-400 mb-2" 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>
                                    <span class="text-sm text-red-500 font-medium">Subir foto ANTES</span>
                                    <span class="text-xs text-gray-400 mt-1">Máx. 10MB</span>
                                    <input type="file" class="hidden" @change="handleImageChange($event, 'before')" accept="image/*">
                                </label>
                            </div>

                            <!-- Foto DESPUÉS -->
                            <div>
                                <label class="block text-xs font-bold text-green-500 mb-2">DESPUÉS (opcional)</label>
                                <div v-if="photoForm.afterPreview" class="relative">
                                    <img :src="photoForm.afterPreview" class="w-full h-64 object-cover rounded-lg">
                                    <button
                                        type="button"
                                        @click="clearImage('after')"
                                        class="absolute top-2 right-2 p-1.5 bg-red-500 text-white rounded-full hover:bg-red-600 transition"
                                    >
                                        <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="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>
                                <label v-else class="flex flex-col items-center justify-center w-full h-64 border-2 border-green-300 border-dashed rounded-lg cursor-pointer bg-green-50 dark:bg-green-900/20 hover:bg-green-100 transition">
                                    <svg class="w-12 h-12 text-green-400 mb-2" 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>
                                    <span class="text-sm text-green-500 font-medium">Subir foto DESPUÉS</span>
                                    <span class="text-xs text-gray-400 mt-1">Máx. 10MB</span>
                                    <input type="file" class="hidden" @change="handleImageChange($event, 'after')" accept="image/*">
                                </label>
                            </div>
                        </div>
                        <p v-if="photoForm.errors.image" class="text-red-500 text-sm mt-2">{{ photoForm.errors.image }}</p>
                    </div>

                    <!-- Detalles -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">⏱️ Tiempo</label>
                            <div class="flex gap-2">
                                <input
                                    type="number"
                                    v-model.number="photoForm.time_value"
                                    min="1"
                                    max="99"
                                    placeholder="Ej: 4"
                                    class="w-24 rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                />
                                <select v-model="photoForm.time_unit" class="flex-1 rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                    <option value="Semanas">Semanas</option>
                                    <option value="Meses">Meses</option>
                                </select>
                            </div>
                        </div>
                        <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"
                                placeholder="Ej: 75.5"
                                class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                            />
                        </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"
                            />
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notas / ¿Cómo te sientes? (opcional)</label>
                        <textarea
                            v-model="photoForm.notes"
                            rows="3"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                            placeholder="Describe tu progreso, cómo te sientes, qué has logrado..."
                        ></textarea>
                    </div>

                    <div class="flex justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                        <button
                            type="button"
                            @click="showUploadModal = false"
                            class="px-6 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                        >
                            Cancelar
                        </button>
                        <button
                            type="submit"
                            :disabled="photoForm.processing || !photoForm.beforeFile"
                            class="px-6 py-2.5 bg-gradient-to-r from-emerald-600 to-green-600 hover:from-emerald-700 hover:to-green-700 text-white text-sm font-medium rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                        >
                            <svg v-if="photoForm.processing" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            {{ photoForm.processing ? 'Subiendo...' : 'Guardar Progreso' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Photo View Modal - Estilo Instagram -->
        <div v-if="showPhotoModal && selectedPhoto" class="fixed inset-0 z-50 flex items-center justify-center bg-black/95 backdrop-blur-sm">
            <!-- Botón cerrar -->
            <button @click="showPhotoModal = false" class="absolute top-4 right-4 z-50 text-white/70 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>

            <!-- Layout estilo Instagram: Imagen izquierda + Sidebar derecha -->
            <div class="w-full h-full max-w-7xl mx-auto flex flex-col lg:flex-row">
                <!-- Columna izquierda: Foto con slider (sticky en desktop) -->
                <div class="flex-1 lg:max-w-[65%] bg-black flex items-center justify-center p-4 lg:p-8 relative">
                    <!-- Slider si tiene ANTES y DESPUÉS -->
                    <div v-if="selectedPhoto.after_image_path" class="relative w-full h-full flex items-center justify-center">
                        <!-- Imagen ANTES -->
                        <div
                            :class="['absolute inset-0 flex items-center justify-center transition-opacity duration-500', modalSlideIndex === 1 ? 'opacity-0' : 'opacity-100']"
                        >
                            <img
                                :src="selectedPhoto.image_path"
                                alt="Foto ANTES"
                                class="max-w-full max-h-[85vh] object-contain rounded-lg shadow-2xl"
                            />
                            <!-- Badge ANTES -->
                            <div class="absolute top-4 left-4 bg-gradient-to-r from-red-500 to-pink-500 text-white px-6 py-3 rounded-full font-bold text-sm shadow-2xl">
                                📉 ANTES
                            </div>
                        </div>

                        <!-- Imagen DESPUÉS -->
                        <div
                            :class="['absolute inset-0 flex items-center justify-center transition-opacity duration-500', modalSlideIndex === 1 ? 'opacity-100' : 'opacity-0']"
                        >
                            <img
                                :src="selectedPhoto.after_image_path"
                                alt="Foto DESPUÉS"
                                class="max-w-full max-h-[85vh] object-contain rounded-lg shadow-2xl"
                            />
                            <!-- Badge DESPUÉS -->
                            <div class="absolute top-4 left-4 bg-gradient-to-r from-emerald-500 to-green-500 text-white px-6 py-3 rounded-full font-bold text-sm shadow-2xl">
                                📈 DESPUÉS
                            </div>
                        </div>

                        <!-- Indicadores horizontales -->
                        <div class="absolute top-4 left-1/2 transform -translate-x-1/2 flex gap-2 z-10">
                            <button
                                v-for="i in 2"
                                :key="i"
                                @click="modalSlideIndex = i - 1"
                                :class="[
                                    'w-16 h-1.5 rounded-full transition-all',
                                    modalSlideIndex === (i - 1) ? 'bg-white' : 'bg-white/40'
                                ]"
                            ></button>
                        </div>

                        <!-- Botones de navegación -->
                        <button
                            @click="modalSlideIndex = 0"
                            class="absolute left-4 top-1/2 -translate-y-1/2 bg-white/10 backdrop-blur-sm hover:bg-white/20 text-white p-3 rounded-full transition-all z-20"
                        >
                            <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="M15 19l-7-7 7-7" />
                            </svg>
                        </button>
                        <button
                            @click="modalSlideIndex = 1"
                            class="absolute right-4 top-1/2 -translate-y-1/2 bg-white/10 backdrop-blur-sm hover:bg-white/20 text-white p-3 rounded-full transition-all z-20"
                        >
                            <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="M9 5l7 7-7 7" />
                            </svg>
                        </button>

                        <!-- Efecto hover: Pasar mouse cambia la imagen -->
                        <div
                            @mouseenter="modalSlideIndex = 1"
                            @mouseleave="modalSlideIndex = 0"
                            class="absolute inset-0 cursor-pointer"
                        ></div>
                    </div>

                    <!-- Si solo tiene imagen ANTES -->
                    <img
                        v-else
                        :src="selectedPhoto.image_path"
                        alt="Foto de progreso"
                        class="max-w-full max-h-[85vh] object-contain rounded-lg shadow-2xl"
                    />
                </div>

                <!-- Columna derecha: Info y acciones estilo Instagram -->
                <div class="lg:w-[35%] lg:max-w-md bg-white dark:bg-gray-900 flex flex-col">
                    <!-- Header con info del usuario -->
                    <div class="p-4 border-b border-gray-200 dark:border-gray-800">
                        <div class="flex items-center gap-3">
                            <!-- Foto de perfil o iniciales -->
                            <div v-if="props.client?.avatar" class="w-10 h-10 rounded-full overflow-hidden ring-2 ring-purple-500">
                                <img :src="props.client.avatar" :alt="props.client.name" class="w-full h-full object-cover" />
                            </div>
                            <div v-else class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-bold ring-2 ring-purple-500">
                                {{ props.client?.name?.charAt(0).toUpperCase() || 'U' }}
                            </div>
                            <div class="flex-1">
                                <p class="font-semibold text-gray-900 dark:text-white text-sm">{{ props.client?.name || 'Usuario' }}</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ new Date(selectedPhoto.date).toLocaleDateString('es-ES', { day: 'numeric', month: 'short', year: 'numeric' }) }}
                                </p>
                            </div>
                            <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                                <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                                {{ selectedPhoto.views_count || 0 }}
                            </div>
                        </div>
                    </div>

                    <!-- Info de la foto -->
                    <div class="p-4 border-b border-gray-200 dark:border-gray-800">
                        <div class="flex items-center gap-2 flex-wrap">
                            <span :class="['px-3 py-1 text-xs font-medium rounded-full', typeLabels[selectedPhoto.type]?.color]">
                                {{ typeLabels[selectedPhoto.type]?.emoji }} {{ typeLabels[selectedPhoto.type]?.label }}
                            </span>
                            <span v-if="selectedPhoto.weight" class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs font-semibold rounded-full">
                                ⚖️ {{ selectedPhoto.weight }} kg
                            </span>
                            <span v-if="selectedPhoto.after_image_path" class="px-3 py-1 bg-gradient-to-r from-emerald-500 to-green-500 text-white text-xs font-bold rounded-full">
                                ✨ ANTES/DESPUÉS
                            </span>
                        </div>
                    </div>

                    <!-- Acciones estilo Instagram -->
                    <div class="flex-1 overflow-y-auto p-4">
                        <div class="space-y-4">
                            <!-- Botón Like -->
                            <button
                                @click="toggleLike"
                                class="flex items-center gap-3 text-sm font-medium transition-all"
                            >
                                <svg
                                    :class="['w-7 h-7 transition-all', hasLiked ? 'fill-red-500 text-red-500 scale-110' : 'text-gray-700 dark:text-gray-300']"
                                    :fill="hasLiked ? 'currentColor' : '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>
                                <span class="text-gray-900 dark:text-white font-semibold">
                                    {{ likesCount }} Me gusta
                                </span>
                            </button>

                            <!-- Botón Compartir (Genera imagen combinada) -->
                            <button
                                v-if="selectedPhoto.after_image_path"
                                @click="openShareProgressModal(selectedPhoto)"
                                class="w-full px-4 py-3 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white rounded-xl font-semibold transition-all flex items-center justify-center gap-2 shadow-lg"
                            >
                                <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.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                                </svg>
                                Compartir Progreso
                            </button>

                            <!-- Botón compartir simple si solo tiene ANTES -->
                            <button
                                v-else
                                @click="openShareModal(selectedPhoto)"
                                class="w-full px-4 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-semibold transition-all flex items-center justify-center gap-2"
                            >
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                                </svg>
                                Compartir
                            </button>

                            <!-- Botón comentarios -->
                            <button
                                @click="toggleComments"
                                class="w-full px-4 py-3 border-2 border-gray-300 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl font-semibold transition-all flex items-center justify-center gap-2"
                            >
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 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>
                                {{ showCommentSection ? 'Ocultar comentarios' : 'Comentar' }}
                            </button>

                            <!-- Sección de comentarios -->
                            <div v-if="showCommentSection" class="mt-4 space-y-4 border-t border-gray-200 dark:border-gray-800 pt-4">
                                <!-- Formulario nuevo comentario -->
                                <div class="flex gap-2">
                                    <input
                                        v-model="newComment"
                                        type="text"
                                        placeholder="Escribe una nota..."
                                        @keyup.enter="addComment"
                                        class="flex-1 px-4 py-2 bg-gray-100 dark:bg-gray-800 border-0 rounded-xl text-sm focus:ring-2 focus:ring-purple-500"
                                    />
                                    <button
                                        @click="addComment"
                                        :disabled="!newComment.trim()"
                                        class="px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-400 text-white rounded-xl text-sm font-semibold transition-all disabled:cursor-not-allowed"
                                    >
                                        Enviar
                                    </button>
                                </div>

                                <!-- Lista de comentarios -->
                                <div class="space-y-3 max-h-64 overflow-y-auto">
                                    <div
                                        v-for="comment in photoComments"
                                        :key="comment.id"
                                        class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3"
                                    >
                                        <div class="flex items-start gap-2">
                                            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-bold text-xs shrink-0">
                                                {{ comment.author.charAt(0).toUpperCase() }}
                                            </div>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-xs font-semibold text-gray-900 dark:text-white">{{ comment.author }}</p>
                                                <p class="text-sm text-gray-700 dark:text-gray-300 mt-1">{{ comment.text }}</p>
                                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                                    {{ new Date(comment.date).toLocaleDateString('es-ES', { day: 'numeric', month: 'short' }) }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <p v-if="photoComments.length === 0" class="text-center text-sm text-gray-500 dark:text-gray-400 py-4">
                                        Aún no hay notas. ¡Sé el primero en agregar una!
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Footer con botón eliminar -->
                    <div class="p-4 border-t border-gray-200 dark:border-gray-800">
                        <button
                            @click="deletePhoto(selectedPhoto.id)"
                            class="w-full 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 text-sm font-medium"
                        >
                            Eliminar foto
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Share Modal -->
        <div v-if="showShareModal && photoToShare" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm" @click.self="showShareModal = false">
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-md w-full p-6 animate-in">
                <!-- Header -->
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                        <span class="text-2xl">📤</span> Compartir Progreso
                    </h3>
                    <button @click="showShareModal = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                        <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>

                <!-- Preview mini -->
                <div class="mb-6 relative rounded-xl overflow-hidden">
                    <img :src="photoToShare.image_path" class="w-full h-48 object-cover" />
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3">
                        <p class="text-white text-sm font-medium">
                            {{ new Date(photoToShare.date).toLocaleDateString('es-ES') }}
                        </p>
                        <p v-if="photoToShare.weight" class="text-white/90 text-xs">
                            {{ photoToShare.weight }} kg
                        </p>
                    </div>
                </div>

                <!-- Descargar con marca de agua -->
                <div class="mb-6 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-xl p-4 border-2 border-purple-200 dark:border-purple-800">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                                <span>💎</span> Descarga Premium
                            </p>
                            <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
                                Incluye marca de agua con tu logo
                            </p>
                        </div>
                        <button
                            @click="downloadWithWatermark"
                            :disabled="isDownloadingWithWatermark"
                            class="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white rounded-xl font-semibold text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                        >
                            <svg v-if="!isDownloadingWithWatermark" 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                            </svg>
                            <svg v-else class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            {{ isDownloadingWithWatermark ? 'Generando...' : 'Descargar' }}
                        </button>
                    </div>
                </div>

                <!-- Redes sociales -->
                <div class="space-y-3 mb-6">
                    <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Compartir en:</p>

                    <div class="grid grid-cols-2 gap-3">
                        <!-- Facebook -->
                        <button
                            @click="shareToSocial('facebook')"
                            class="flex items-center justify-center gap-3 px-4 py-3 bg-[#1877F2] hover:bg-[#166FE5] text-white rounded-xl font-medium transition-all transform hover:scale-105"
                        >
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                            </svg>
                            Facebook
                        </button>

                        <!-- Twitter -->
                        <button
                            @click="shareToSocial('twitter')"
                            class="flex items-center justify-center gap-3 px-4 py-3 bg-[#1DA1F2] hover:bg-[#1A94DA] text-white rounded-xl font-medium transition-all transform hover:scale-105"
                        >
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                            </svg>
                            Twitter
                        </button>

                        <!-- WhatsApp -->
                        <button
                            @click="shareToSocial('whatsapp')"
                            class="flex items-center justify-center gap-3 px-4 py-3 bg-[#25D366] hover:bg-[#22C55E] text-white rounded-xl font-medium transition-all transform hover:scale-105"
                        >
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                            </svg>
                            WhatsApp
                        </button>

                        <!-- Telegram -->
                        <button
                            @click="shareToSocial('telegram')"
                            class="flex items-center justify-center gap-3 px-4 py-3 bg-[#0088CC] hover:bg-[#0077B5] text-white rounded-xl font-medium transition-all transform hover:scale-105"
                        >
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
                            </svg>
                            Telegram
                        </button>
                    </div>
                </div>

                <!-- Copiar enlace -->
                <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4">
                    <p class="text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2">O copia el enlace:</p>
                    <div class="flex gap-2">
                        <input
                            type="text"
                            :value="shareUrl"
                            readonly
                            class="flex-1 px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-700 dark:text-gray-300"
                        />
                        <button
                            @click="copyShareLink"
                            :class="[
                                'px-4 py-2 rounded-lg font-medium text-sm transition-all',
                                copiedLink
                                    ? 'bg-green-600 text-white'
                                    : 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-500'
                            ]"
                        >
                            {{ copiedLink ? '✓ Copiado' : 'Copiar' }}
                        </button>
                    </div>
                </div>

                <!-- Botón nativo de compartir (móviles) -->
                <button
                    v-if="canShare"
                    @click="shareViaWebShare"
                    class="mt-4 w-full px-4 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white rounded-xl font-semibold transition-all flex items-center justify-center gap-2"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                    </svg>
                    Compartir con...
                </button>
            </div>
        </div>

        <!-- Share Progress Modal - Imagen Combinada ANTES/DESPUÉS -->
        <div v-if="showShareProgressModal && photoToShare" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm" @click.self="showShareProgressModal = false">
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-2xl w-full p-6 animate-in">
                <!-- Header -->
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                        <span class="text-3xl">✨</span> Compartir Mi Transformación
                    </h3>
                    <button @click="showShareProgressModal = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
                        <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>

                <!-- Preview de imagen combinada -->
                <div class="mb-6 relative rounded-xl overflow-hidden border-4 border-purple-200 dark:border-purple-800">
                    <div v-if="combinedImageUrl" class="relative">
                        <img :src="combinedImageUrl" class="w-full h-auto" alt="ANTES y DESPUÉS combinados" />
                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
                            <p class="text-white font-bold text-lg text-center">
                                💪 Mi Transformación
                            </p>
                            <p v-if="photoToShare.weight" class="text-white/90 text-sm text-center">
                                {{ new Date(photoToShare.date).toLocaleDateString('es-ES') }} | {{ photoToShare.weight }} kg
                            </p>
                        </div>
                    </div>
                    <div v-else class="flex items-center justify-center h-64 bg-gray-100 dark:bg-gray-700">
                        <div class="text-center">
                            <svg class="w-12 h-12 mx-auto text-gray-400 animate-spin" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            <p class="text-gray-500 dark:text-gray-400 mt-3">Generando montaje...</p>
                        </div>
                    </div>
                </div>

                <p class="text-sm text-center text-gray-600 dark:text-gray-400 mb-6 bg-purple-50 dark:bg-purple-900/20 p-3 rounded-lg border border-purple-200 dark:border-purple-800">
                    📸 Esta imagen combina tu foto ANTES y DESPUÉS en un solo montaje perfecto para compartir
                </p>

                <!-- Descargar imagen combinada -->
                <div class="mb-6">
                    <button
                        @click="downloadCombinedImage"
                        :disabled="!combinedImageUrl"
                        class="w-full px-6 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white rounded-xl font-bold text-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3 shadow-xl"
                    >
                        <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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                        </svg>
                        Descargar Transformación
                    </button>
                </div>

                <!-- Redes sociales -->
                <div class="space-y-3">
                    <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">O compartir directamente en:</p>

                    <div class="grid grid-cols-2 gap-3">
                        <!-- Facebook -->
                        <button
                            @click="shareToSocial('facebook')"
                            :disabled="!combinedImageUrl"
                            class="flex items-center justify-center gap-3 px-4 py-3 bg-[#1877F2] hover:bg-[#166FE5] text-white rounded-xl font-medium transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                            </svg>
                            Facebook
                        </button>

                        <!-- WhatsApp -->
                        <button
                            @click="shareToSocial('whatsapp')"
                            :disabled="!combinedImageUrl"
                            class="flex items-center justify-center gap-3 px-4 py-3 bg-[#25D366] hover:bg-[#22C55E] text-white rounded-xl font-medium transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                            </svg>
                            WhatsApp
                        </button>

                        <!-- Instagram (placeholder) -->
                        <button
                            @click="shareToSocial('instagram')"
                            :disabled="!combinedImageUrl"
                            class="flex items-center justify-center gap-3 px-4 py-3 bg-gradient-to-br from-purple-600 via-pink-600 to-orange-500 hover:from-purple-700 hover:via-pink-700 hover:to-orange-600 text-white rounded-xl font-medium transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                            </svg>
                            Instagram
                        </button>

                        <!-- Twitter -->
                        <button
                            @click="shareToSocial('twitter')"
                            :disabled="!combinedImageUrl"
                            class="flex items-center justify-center gap-3 px-4 py-3 bg-[#1DA1F2] hover:bg-[#1A94DA] text-white rounded-xl font-medium transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                            </svg>
                            Twitter
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </ClientLayout>
</template>
