<script setup>
/**
 * Public Blog Index
 */
import { Head, Link, router, usePage } from '@inertiajs/vue3';
import { ref, watch, computed } from 'vue';
import debounce from 'lodash/debounce';

const props = defineProps({
    posts: Object,
    categories: Array,
    popularTags: Array,
    filters: Object,
    systemLogo: String,
    siteName: String,
});

const $page = usePage();
const user = computed(() => $page.props.auth?.user);
const userMenuOpen = ref(false);
const mobileMenuOpen = ref(false);

const search = ref(props.filters?.search || '');

const doSearch = debounce(() => {
    router.get(route('blog.index'), {
        search: search.value || undefined,
    }, {
        preserveState: true,
        replace: true,
    });
}, 300);

watch(search, doSearch);

const formatDate = (date) => {
    return new Date(date).toLocaleDateString('es-ES', {
        day: 'numeric',
        month: 'long',
        year: 'numeric',
    });
};

// Fitness colors
const colors = {
    primary: '#39FF14',
    secondary: '#FF6B35',
    accent: '#00D4FF',
};

// Navigation links
const navLinks = [
    { href: '/#features', label: 'Características' },
    { href: '/#plans', label: 'Planes' },
    { href: '/#testimonials', label: 'Testimonios' },
    { href: '/contacto', label: 'Contacto' },
];
</script>

<template>
    <Head>
        <title>Blog - Artículos sobre Fitness y Nutrición</title>
        <meta name="description" content="Artículos, consejos y guías sobre entrenamiento, nutrición y bienestar para alcanzar tus objetivos fitness." />
    </Head>

    <div class="min-h-screen bg-[#0A0A0A]">
        <!-- Navigation -->
        <nav class="fixed top-0 left-0 right-0 z-50 bg-[#0A0A0A]/95 backdrop-blur-md border-b border-gray-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between items-center h-16 md:h-20">
                    <!-- Logo -->
                    <Link href="/" class="flex items-center gap-3">
                        <img 
                            v-if="systemLogo" 
                            :src="systemLogo" 
                            :alt="siteName" 
                            class="h-10 md:h-12 w-auto logo-white"
                        />
                        <template v-else>
                            <div class="w-10 h-10 md:w-12 md:h-12 rounded-xl flex items-center justify-center" 
                                 :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})` }">
                                <svg class="w-6 h-6 md:w-7 md:h-7 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-xl md:text-2xl font-black text-white">{{ siteName }}</span>
                        </template>
                    </Link>

                    <!-- Desktop Navigation -->
                    <div class="hidden md:flex items-center gap-8">
                        <a v-for="link in navLinks" 
                           :key="link.href"
                           :href="link.href"
                           class="text-gray-400 hover:text-white font-medium transition-colors duration-200">
                            {{ link.label }}
                        </a>
                        <Link href="/blog" class="text-white font-medium">Blog</Link>
                    </div>
                    
                    <!-- CTA Buttons / User Menu -->
                    <div class="hidden md:flex items-center gap-4">
                        <template v-if="!user">
                            <Link :href="route('login')" class="text-gray-300 hover:text-white font-semibold transition-colors">
                                Iniciar Sesión
                            </Link>
                            <Link :href="route('register')" 
                                  class="px-6 py-2.5 rounded-full font-bold text-black transition-all hover:scale-105"
                                  :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.accent})` }">
                                Comenzar Gratis
                            </Link>
                        </template>
                        <template v-else>
                            <div class="relative">
                                <button 
                                    @click="userMenuOpen = !userMenuOpen"
                                    class="flex items-center gap-3 px-4 py-2 rounded-full bg-gray-800/50 border border-gray-700 hover:border-gray-600"
                                >
                                    <div class="w-8 h-8 rounded-full overflow-hidden"
                                         :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})` }">
                                        <img v-if="user.avatar_url" :src="user.avatar_url" class="w-full h-full object-cover" />
                                        <span v-else class="w-full h-full flex items-center justify-center text-black font-bold text-sm">
                                            {{ user.name?.charAt(0).toUpperCase() }}
                                        </span>
                                    </div>
                                    <span class="text-white font-medium max-w-[120px] truncate">{{ user.name }}</span>
                                </button>
                                <div v-show="userMenuOpen" class="absolute right-0 mt-2 w-56 bg-gray-900 border border-gray-800 rounded-xl shadow-xl z-50">
                                    <div class="p-4 border-b border-gray-800">
                                        <p class="text-white font-medium truncate">{{ user.name }}</p>
                                        <p class="text-sm text-gray-400 truncate">{{ user.email }}</p>
                                    </div>
                                    <div class="py-2">
                                        <Link :href="route('dashboard')" class="block px-4 py-2.5 text-gray-300 hover:text-white hover:bg-gray-800/50">Mi Panel</Link>
                                        <Link :href="route('profile.edit')" class="block px-4 py-2.5 text-gray-300 hover:text-white hover:bg-gray-800/50">Mi Perfil</Link>
                                    </div>
                                    <div class="py-2 border-t border-gray-800">
                                        <Link :href="route('logout')" method="post" as="button" class="block w-full text-left px-4 py-2.5 text-red-400 hover:bg-red-900/20">Cerrar Sesión</Link>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>

                    <!-- Mobile Menu Button -->
                    <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden p-2 text-gray-400 hover:text-white">
                        <svg v-if="!mobileMenuOpen" 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 6h16M4 12h16M4 18h16" />
                        </svg>
                        <svg v-else 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>

                <!-- Mobile Menu -->
                <div v-show="mobileMenuOpen" class="md:hidden py-4 border-t border-gray-800">
                    <div class="flex flex-col gap-4">
                        <a v-for="link in navLinks" :key="link.href" :href="link.href" @click="mobileMenuOpen = false"
                           class="text-gray-400 hover:text-white font-medium py-2">{{ link.label }}</a>
                        <Link href="/blog" class="text-white font-medium py-2">Blog</Link>
                        <div v-if="!user" class="flex flex-col gap-3 pt-4 border-t border-gray-800">
                            <Link :href="route('login')" class="text-center py-3 text-gray-300 font-semibold">Iniciar Sesión</Link>
                            <Link :href="route('register')" class="text-center py-3 rounded-full font-bold text-black"
                                  :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.accent})` }">Comenzar Gratis</Link>
                        </div>
                        <div v-else class="pt-4 border-t border-gray-800">
                            <Link :href="route('dashboard')" class="block py-2 text-gray-300">Mi Panel</Link>
                            <Link :href="route('logout')" method="post" as="button" class="block w-full text-left py-2 text-red-400">Cerrar Sesión</Link>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- Hero -->
        <div class="pt-20 md:pt-24 bg-gradient-to-r from-gray-900 to-gray-800 text-white border-b border-gray-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                <div class="text-center">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4">Blog</h1>
                    <p class="text-xl text-gray-400 max-w-2xl mx-auto">
                        Artículos, consejos y guías para alcanzar tus objetivos fitness
                    </p>
                </div>
                
                <!-- Search -->
                <div class="max-w-xl mx-auto mt-8">
                    <div class="relative">
                        <input
                            v-model="search"
                            type="text"
                            placeholder="Buscar artículos..."
                            class="w-full pl-12 pr-4 py-3 rounded-xl border-0 bg-gray-800 text-white placeholder-gray-400 focus:ring-2 focus:ring-[#39FF14]"
                        />
                        <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" 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 0z" />
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
                <!-- Main Content -->
                <div class="lg:col-span-3">
                    <!-- Posts Grid -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <article 
                            v-for="post in posts.data" 
                            :key="post.id"
                            class="bg-gray-900 border border-gray-800 rounded-2xl overflow-hidden hover:border-gray-700 transition-all group"
                        >
                            <Link :href="route('blog.show', post.slug)">
                                <div class="aspect-video overflow-hidden">
                                    <img 
                                        v-if="post.featured_image"
                                        :src="`/storage/${post.featured_image}`"
                                        :alt="post.title"
                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                                    />
                                    <div v-else class="w-full h-full bg-gradient-to-br from-[#39FF14]/20 to-[#00D4FF]/20 flex items-center justify-center">
                                        <svg class="w-16 h-16 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
                                        </svg>
                                    </div>
                                </div>
                            </Link>
                            
                            <div class="p-6">
                                <div class="flex items-center gap-3 mb-3">
                                    <Link 
                                        v-if="post.category"
                                        :href="route('blog.category', post.category.slug)"
                                        class="text-xs font-medium px-2 py-1 rounded-full"
                                        :style="{ backgroundColor: post.category.color + '20', color: post.category.color }"
                                    >
                                        {{ post.category.name }}
                                    </Link>
                                    <span class="text-sm text-gray-500">
                                        {{ formatDate(post.published_at) }}
                                    </span>
                                </div>
                                
                                <Link :href="route('blog.show', post.slug)">
                                    <h2 class="text-xl font-bold text-white mb-2 group-hover:text-[#39FF14] transition-colors line-clamp-2">
                                        {{ post.title }}
                                    </h2>
                                </Link>
                                
                                <p class="text-gray-400 line-clamp-3 mb-4">
                                    {{ post.excerpt }}
                                </p>
                                
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2">
                                        <div class="w-8 h-8 rounded-full flex items-center justify-center text-black text-sm font-medium"
                                             :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})` }">
                                            {{ post.author?.name?.charAt(0) || 'A' }}
                                        </div>
                                        <span class="text-sm text-gray-400">{{ post.author?.name }}</span>
                                    </div>
                                    <span class="text-sm text-gray-500">
                                        {{ post.reading_time || Math.ceil((post.content?.length || 0) / 1000) }} min lectura
                                    </span>
                                </div>
                            </div>
                        </article>
                    </div>

                    <!-- Empty State -->
                    <div v-if="!posts.data?.length" class="text-center py-16 bg-gray-900 border border-gray-800 rounded-2xl">
                        <svg class="mx-auto h-16 w-16 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
                        </svg>
                        <h3 class="mt-4 text-lg font-medium text-white">No hay artículos</h3>
                        <p class="mt-2 text-gray-400">
                            {{ search ? 'No se encontraron artículos con tu búsqueda.' : 'Próximamente publicaremos contenido.' }}
                        </p>
                    </div>

                    <!-- Pagination -->
                    <div v-if="posts.links?.length > 3" class="mt-8 flex justify-center">
                        <div class="flex gap-1">
                            <Link 
                                v-for="link in posts.links"
                                :key="link.label"
                                :href="link.url || '#'"
                                v-html="link.label"
                                :class="[
                                    'px-4 py-2 text-sm rounded-lg transition-colors',
                                    link.active 
                                        ? 'bg-[#39FF14] text-black font-bold' 
                                        : 'bg-gray-800 text-gray-400 hover:bg-gray-700 hover:text-white',
                                    !link.url && 'opacity-50 cursor-not-allowed'
                                ]"
                            />
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="lg:col-span-1 space-y-6">
                    <!-- Categories -->
                    <div class="bg-gray-900 border border-gray-800 rounded-2xl p-6">
                        <h3 class="text-lg font-bold text-white mb-4">Categorías</h3>
                        <ul class="space-y-2">
                            <li v-for="category in categories" :key="category.id">
                                <Link 
                                    :href="route('blog.category', category.slug)"
                                    class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-gray-800 transition-colors"
                                >
                                    <div class="flex items-center gap-2">
                                        <div 
                                            class="w-3 h-3 rounded-full"
                                            :style="{ backgroundColor: category.color }"
                                        ></div>
                                        <span class="text-gray-300">{{ category.name }}</span>
                                    </div>
                                    <span class="text-sm text-gray-500">{{ category.published_posts_count }}</span>
                                </Link>
                            </li>
                        </ul>
                    </div>

                    <!-- Popular Tags -->
                    <div v-if="popularTags?.length" class="bg-gray-900 border border-gray-800 rounded-2xl p-6">
                        <h3 class="text-lg font-bold text-white mb-4">Etiquetas Populares</h3>
                        <div class="flex flex-wrap gap-2">
                            <Link 
                                v-for="tag in popularTags" 
                                :key="tag.id"
                                :href="route('blog.tag', tag.slug)"
                                class="px-3 py-1 bg-gray-800 text-gray-300 text-sm rounded-full hover:bg-[#39FF14]/20 hover:text-[#39FF14] transition-colors"
                            >
                                #{{ tag.name }}
                            </Link>
                        </div>
                    </div>

                    <!-- CTA -->
                    <div class="rounded-2xl p-6 text-white border border-gray-800"
                         :style="{ background: `linear-gradient(135deg, ${colors.primary}15, ${colors.accent}15)` }">
                        <h3 class="text-lg font-bold mb-2">¿Listo para empezar?</h3>
                        <p class="text-gray-400 text-sm mb-4">
                            Únete a nuestra comunidad de coaches y lleva tu negocio al siguiente nivel.
                        </p>
                        <Link 
                            :href="route('register')"
                            class="inline-block w-full text-center px-4 py-2 font-bold rounded-lg transition-all hover:scale-105 text-black"
                            :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.accent})` }"
                        >
                            Registrarse Gratis
                        </Link>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <footer class="bg-gray-900 border-t border-gray-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                <div class="flex flex-col md:flex-row items-center justify-between gap-6">
                    <Link href="/" class="flex items-center gap-3">
                        <img v-if="systemLogo" :src="systemLogo" :alt="siteName" class="h-8 w-auto logo-white" />
                        <span class="text-xl font-bold text-white">{{ siteName }}</span>
                    </Link>
                    <div class="flex items-center gap-6 text-gray-400 text-sm">
                        <Link href="/about" class="hover:text-white transition-colors">Sobre Nosotros</Link>
                        <Link href="/terms" class="hover:text-white transition-colors">Términos</Link>
                        <Link href="/privacy" class="hover:text-white transition-colors">Privacidad</Link>
                        <Link href="/contacto" class="hover:text-white transition-colors">Contacto</Link>
                    </div>
                </div>
                <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
                    © {{ new Date().getFullYear() }} {{ siteName }}. Todos los derechos reservados.
                </div>
            </div>
        </footer>
    </div>
</template>

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

/* Logo blanco para fondos oscuros */
.logo-white {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

.logo-white:hover {
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(57, 255, 20, 0.5));
}
</style>
