<script setup>
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
import DarkModeToggle from '@/Components/DarkModeToggle.vue';
import { Link, usePage } from '@inertiajs/vue3';
import { computed, onMounted } from 'vue';
import { useDarkMode } from '@/Composables/useDarkMode';

const page = usePage();
const appName = computed(() => page.props.appName || 'CoachPro');
const appLogo = computed(() => page.props.appLogo || null);

// Landing colors - sync with Welcome page
const colors = computed(() => {
    const settings = page.props.landingSettings || {};
    return {
        primary: settings?.colors?.primary || '#39FF14', // Neon green
        secondary: settings?.colors?.secondary || '#FF6B35', // Energetic orange
        accent: settings?.colors?.accent || '#00D4FF', // Electric blue
    };
});

// Initialize dark mode
const { initDarkMode } = useDarkMode();
onMounted(() => {
    initDarkMode();
});
</script>

<template>
    <div class="min-h-screen flex bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
        <!-- Panel Izquierdo - Branding estilo Welcome (oculto en móvil) -->
        <div class="hidden lg:flex lg:w-1/2 relative overflow-hidden bg-[#0A0A0A]">
            <!-- Gradientes de fondo animados -->
            <div class="absolute inset-0">
                <div class="absolute top-0 left-0 w-[600px] h-[600px] rounded-full opacity-30 blur-[120px] animate-pulse-slow"
                     :style="{ background: colors.primary }"></div>
                <div class="absolute bottom-0 right-0 w-[500px] h-[500px] rounded-full opacity-20 blur-[100px] animate-pulse-slow"
                     :style="{ background: colors.secondary, animationDelay: '1s' }"></div>
                <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] rounded-full opacity-10 blur-[80px]"
                     :style="{ background: colors.accent }"></div>
            </div>
            
            <!-- Patrón de puntos -->
            <div class="absolute inset-0 opacity-20">
                <svg width="100%" height="100%">
                    <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
                        <circle cx="2" cy="2" r="1" fill="white" opacity="0.3"/>
                    </pattern>
                    <rect width="100%" height="100%" fill="url(#dots)" />
                </svg>
            </div>
            
            <!-- Contenido del panel izquierdo -->
            <div class="relative z-10 flex flex-col justify-center items-center w-full px-12 text-white">
                <!-- Logo -->
                <Link href="/" class="mb-12 flex items-center gap-3">
                    <template v-if="appLogo">
                        <img :src="appLogo" :alt="appName" class="h-16 max-w-[200px] object-contain logo-white" />
                    </template>
                    <template v-else>
                        <div class="w-16 h-16 rounded-2xl flex items-center justify-center shadow-2xl"
                             :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})` }">
                            <svg class="w-9 h-9 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M3 6h2m0 0v12m0-12h2m14 0h2m-2 0v12m0-12h-2M7 6v12m10-12v12M7 12h10" />
                            </svg>
                        </div>
                        <span class="text-3xl font-black text-white">{{ appName }}</span>
                    </template>
                </Link>
                
                <!-- Tagline -->
                <p class="text-xl text-gray-400 text-center max-w-md mb-16">
                    La plataforma profesional para entrenadores personales y sus clientes
                </p>
                
                <!-- Features con iconos -->
                <div class="space-y-5 w-full max-w-sm">
                    <div class="flex items-center gap-4 p-4 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-all duration-300">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                             :style="{ background: `linear-gradient(135deg, ${colors.primary}30, ${colors.accent}30)` }">
                            <svg class="w-6 h-6" :style="{ color: colors.primary }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-white font-semibold">Planes Personalizados</h3>
                            <p class="text-gray-500 text-sm">Entrenamientos adaptados a cada cliente</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center gap-4 p-4 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-all duration-300">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                             :style="{ background: `linear-gradient(135deg, ${colors.secondary}30, ${colors.primary}30)` }">
                            <svg class="w-6 h-6" :style="{ color: colors.secondary }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-white font-semibold">Nutrición Completa</h3>
                            <p class="text-gray-500 text-sm">Planes nutricionales personalizados</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center gap-4 p-4 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm hover:bg-white/10 transition-all duration-300">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                             :style="{ background: `linear-gradient(135deg, ${colors.accent}30, ${colors.secondary}30)` }">
                            <svg class="w-6 h-6" :style="{ color: colors.accent }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-white font-semibold">Seguimiento en Tiempo Real</h3>
                            <p class="text-gray-500 text-sm">Monitorea el progreso de tus clientes</p>
                        </div>
                    </div>
                </div>

                <!-- Stats en la parte inferior -->
                <div class="mt-16 grid grid-cols-3 gap-8 w-full max-w-sm">
                    <div class="text-center">
                        <div class="text-2xl font-bold bg-clip-text text-transparent"
                             :style="{ backgroundImage: `linear-gradient(135deg, ${colors.primary}, ${colors.accent})` }">500+</div>
                        <div class="text-gray-500 text-xs mt-1">Coaches Activos</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold bg-clip-text text-transparent"
                             :style="{ backgroundImage: `linear-gradient(135deg, ${colors.secondary}, ${colors.primary})` }">10K+</div>
                        <div class="text-gray-500 text-xs mt-1">Clientes</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold bg-clip-text text-transparent"
                             :style="{ backgroundImage: `linear-gradient(135deg, ${colors.accent}, ${colors.secondary})` }">98%</div>
                        <div class="text-gray-500 text-xs mt-1">Satisfacción</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Panel Derecho - Formulario -->
        <div class="w-full lg:w-1/2 flex flex-col justify-center items-center bg-gray-50 dark:bg-gray-900 p-6 sm:p-12 transition-colors duration-200 relative">
            <!-- Dark mode toggle -->
            <div class="absolute top-4 right-4 z-50">
                <DarkModeToggle />
            </div>

            <!-- Logo para móvil -->
            <div class="lg:hidden mb-8">
                <Link href="/" class="flex items-center gap-3">
                    <template v-if="appLogo">
                        <img :src="appLogo" :alt="appName" class="h-12 max-w-[160px] object-contain" />
                    </template>
                    <template v-else>
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center shadow-lg"
                             :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})` }">
                            <svg class="w-7 h-7 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6h2m0 0v12m0-12h2m14 0h2m-2 0v12m0-12h-2M7 6v12m10-12v12M7 12h10" />
                            </svg>
                        </div>
                        <span class="text-2xl font-bold bg-clip-text text-transparent"
                              :style="{ backgroundImage: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})` }">{{ appName }}</span>
                    </template>
                </Link>
            </div>
            
            <!-- Contenedor del formulario -->
            <div class="w-full max-w-md">
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-100 dark:border-gray-700 transition-colors duration-200">
                    <slot />
                </div>
                
                <!-- Footer -->
                <p class="text-center text-gray-500 dark:text-gray-400 text-sm mt-8">
                    © {{ new Date().getFullYear() }} {{ appName }}. Todos los derechos reservados.
                </p>
            </div>
        </div>
    </div>
</template>

<style scoped>
/* Logo blanco para fondos oscuros */
.logo-white {
    filter: brightness(0) invert(1);
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(1.05);
    }
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}
</style>
