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

const props = defineProps({
    plan: Object,
    coach: Object,
    results: {
        type: Array,
        default: () => []
    },
});

// Modal state
const selectedResult = ref(null);
const showModal = ref(false);

const openModal = (result) => {
    selectedResult.value = result;
    showModal.value = true;
};

const closeModal = () => {
    showModal.value = false;
    selectedResult.value = null;
};

// Image URL helper
const getImageUrl = (image) => {
    if (!image) return null;
    if (image.startsWith('http')) return image;
    if (image.startsWith('/storage')) return image;
    return `/storage/${image}`;
};

// Avatar URL helper
const getAvatarUrl = (avatar) => {
    if (!avatar) return null;
    if (avatar.startsWith('http')) return avatar;
    if (avatar.startsWith('/storage')) return avatar;
    return `/storage/${avatar}`;
};

// Scroll to top
const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
};
</script>

<template>
    <Head :title="`Resultados - ${plan.name}`">
        <meta name="description" :content="`Transformaciones reales de clientes del plan ${plan.name} por ${coach.name}`" />
    </Head>

    <div class="min-h-screen bg-black text-white">
        <!-- Header -->
        <header class="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md border-b border-gray-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex justify-between items-center">
                <div class="flex items-center gap-3">
                    <Link 
                        :href="`/plan/${plan.slug}`"
                        class="flex items-center gap-2 text-gray-400 hover:text-white transition"
                    >
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                        </svg>
                        <span class="hidden sm:inline">Volver al Plan</span>
                    </Link>
                </div>
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full overflow-hidden bg-gray-800">
                        <img 
                            v-if="coach.avatar" 
                            :src="getAvatarUrl(coach.avatar)" 
                            :alt="coach.name"
                            class="w-full h-full object-cover"
                        >
                        <div v-else class="w-full h-full flex items-center justify-center text-gray-400">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                            </svg>
                        </div>
                    </div>
                    <span class="font-semibold">{{ coach.name }}</span>
                </div>
                <Link
                    :href="`/plan/${plan.slug}`"
                    class="hidden sm:inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition"
                >
                    Ver Plan
                </Link>
            </div>
        </header>

        <!-- Hero Section -->
        <section class="relative pt-24 pb-16 px-4 sm:px-6 lg:px-8">
            <div class="absolute inset-0 bg-gradient-to-b from-red-900/20 to-transparent"></div>
            <div class="relative max-w-4xl mx-auto text-center">
                <span class="inline-block px-4 py-1 bg-red-600/20 text-red-500 text-sm font-semibold rounded-full mb-4">
                    {{ results.length }} TRANSFORMACIONES
                </span>
                <h1 class="text-4xl sm:text-5xl font-black mb-4">
                    RESULTADOS REALES
                </h1>
                <p class="text-xl text-gray-400 mb-2">
                    Clientes normales con resultados extraordinarios
                </p>
                <p class="text-gray-500">
                    Plan: <span class="text-white font-semibold">{{ plan.name }}</span> por <span class="text-red-500">{{ coach.name }}</span>
                </p>
            </div>
        </section>

        <!-- Results Grid -->
        <section class="py-12 px-4 sm:px-6 lg:px-8">
            <div class="max-w-7xl mx-auto">
                <div v-if="results.length === 0" class="text-center py-20">
                    <svg class="w-16 h-16 text-gray-600 mx-auto mb-4" 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>
                    <p class="text-gray-400 text-lg">Aún no hay resultados publicados para este plan</p>
                </div>

                <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div 
                        v-for="(result, index) in results" 
                        :key="index"
                        @click="openModal(result)"
                        class="bg-gradient-to-br from-gray-900 to-black rounded-2xl overflow-hidden border border-gray-800 hover:border-red-500/50 transition-all cursor-pointer group"
                    >
                        <!-- Before/After Preview -->
                        <div class="grid grid-cols-2 gap-1 p-1">
                            <!-- Before -->
                            <div class="relative aspect-[3/4]">
                                <div class="absolute top-2 left-2 z-10 px-2 py-0.5 bg-red-600 text-white text-xs font-bold rounded-full">
                                    ANTES
                                </div>
                                <img 
                                    v-if="result.before"
                                    :src="getImageUrl(result.before)" 
                                    :alt="`Antes - ${result.name || 'Cliente'}`"
                                    class="w-full h-full object-cover rounded-l-xl group-hover:scale-105 transition-transform duration-300"
                                />
                                <div v-else class="w-full h-full bg-gray-800 rounded-l-xl flex items-center justify-center">
                                    <span class="text-gray-600 text-xs">Sin imagen</span>
                                </div>
                            </div>

                            <!-- After -->
                            <div class="relative aspect-[3/4]">
                                <div class="absolute top-2 left-2 z-10 px-2 py-0.5 bg-green-600 text-white text-xs font-bold rounded-full">
                                    DESPUÉS
                                </div>
                                <img 
                                    v-if="result.after"
                                    :src="getImageUrl(result.after)" 
                                    :alt="`Después - ${result.name || 'Cliente'}`"
                                    class="w-full h-full object-cover rounded-r-xl group-hover:scale-105 transition-transform duration-300"
                                />
                                <div v-else class="w-full h-full bg-gray-800 rounded-r-xl flex items-center justify-center">
                                    <span class="text-gray-600 text-xs">Sin imagen</span>
                                </div>
                            </div>
                        </div>

                        <!-- Info -->
                        <div class="p-4">
                            <h3 v-if="result.name" class="font-semibold text-white">{{ result.name }}</h3>
                            <p v-if="result.description" class="text-gray-400 text-sm mt-1 line-clamp-2">{{ result.description }}</p>
                            <p v-if="!result.name && !result.description" class="text-gray-500 text-sm">Transformación #{{ index + 1 }}</p>
                            
                            <div class="flex items-center justify-between mt-3">
                                <span class="text-xs text-gray-500">Click para ampliar</span>
                                <svg class="w-5 h-5 text-gray-600 group-hover:text-red-500 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- CTA Section -->
        <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-red-900/30 to-black">
            <div class="max-w-4xl mx-auto text-center">
                <h2 class="text-3xl sm:text-4xl font-bold mb-6">
                    ¿QUIERES SER EL PRÓXIMO?
                </h2>
                <p class="text-lg text-gray-300 mb-8 max-w-2xl mx-auto">
                    Únete a estas personas que ya transformaron su vida. Tu transformación puede ser la siguiente.
                </p>
                <Link 
                    :href="`/plan/${plan.slug}`"
                    class="inline-flex items-center px-10 py-5 bg-red-600 hover:bg-red-700 text-white font-bold text-xl rounded-xl transition-all transform hover:scale-105 shadow-lg shadow-red-600/30"
                >
                    ¡QUIERO TRANSFORMARME!
                    <svg class="w-6 h-6 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                    </svg>
                </Link>
            </div>
        </section>

        <!-- Footer -->
        <footer class="py-8 px-4 sm:px-6 lg:px-8 border-t border-gray-800">
            <div class="max-w-6xl mx-auto text-center">
                <p class="text-sm text-gray-500">
                    © {{ new Date().getFullYear() }} {{ coach.name }}. Todos los derechos reservados.
                </p>
            </div>
        </footer>

        <!-- Back to Top Button -->
        <button 
            @click="scrollToTop"
            class="fixed bottom-6 left-6 w-12 h-12 bg-gray-800 hover:bg-gray-700 rounded-full flex items-center justify-center shadow-lg transition z-40"
        >
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
            </svg>
        </button>

        <!-- Modal for Full View -->
        <teleport to="body">
            <transition name="fade">
                <div 
                    v-if="showModal && selectedResult" 
                    class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/90"
                    @click.self="closeModal"
                >
                    <div class="relative w-full max-w-6xl max-h-[90vh] overflow-auto">
                        <!-- Close Button -->
                        <button 
                            @click="closeModal"
                            class="absolute top-4 right-4 z-10 w-10 h-10 bg-black/50 hover:bg-black/70 rounded-full flex items-center justify-center text-white transition"
                        >
                            <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>

                        <!-- Content -->
                        <div class="bg-gradient-to-br from-gray-900 to-black rounded-2xl p-6 md:p-8 border border-gray-800">
                            <!-- Client Name -->
                            <div v-if="selectedResult.name" class="text-center mb-6">
                                <h3 class="text-2xl font-bold text-white">{{ selectedResult.name }}</h3>
                            </div>

                            <!-- Before & After Images -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
                                <!-- Before -->
                                <div class="relative">
                                    <div class="absolute top-4 left-4 z-10 px-4 py-1.5 bg-red-600 text-white text-sm font-bold rounded-full shadow-lg">
                                        ANTES
                                    </div>
                                    <img 
                                        v-if="selectedResult.before"
                                        :src="getImageUrl(selectedResult.before)" 
                                        :alt="`Antes - ${selectedResult.name || 'Cliente'}`"
                                        class="w-full h-auto max-h-[70vh] object-contain rounded-xl"
                                    />
                                    <div v-else class="w-full h-[400px] bg-gray-800 rounded-xl flex items-center justify-center">
                                        <span class="text-gray-500">Imagen no disponible</span>
                                    </div>
                                </div>

                                <!-- After -->
                                <div class="relative">
                                    <div class="absolute top-4 left-4 z-10 px-4 py-1.5 bg-green-600 text-white text-sm font-bold rounded-full shadow-lg">
                                        DESPUÉS
                                    </div>
                                    <img 
                                        v-if="selectedResult.after"
                                        :src="getImageUrl(selectedResult.after)" 
                                        :alt="`Después - ${selectedResult.name || 'Cliente'}`"
                                        class="w-full h-auto max-h-[70vh] object-contain rounded-xl"
                                    />
                                    <div v-else class="w-full h-[400px] bg-gray-800 rounded-xl flex items-center justify-center">
                                        <span class="text-gray-500">Imagen no disponible</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Description -->
                            <div v-if="selectedResult.description" class="mt-6 text-center">
                                <p class="text-gray-300 text-lg italic">"{{ selectedResult.description }}"</p>
                            </div>

                            <!-- CTA -->
                            <div class="mt-8 text-center">
                                <Link 
                                    :href="`/plan/${plan.slug}`"
                                    class="inline-flex items-center px-8 py-4 bg-red-600 hover:bg-red-700 text-white font-bold text-lg rounded-xl transition"
                                >
                                    ¡Quiero resultados así!
                                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                    </svg>
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </teleport>
    </div>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
