<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head, Link, router } from '@inertiajs/vue3';
import { ref } from 'vue';

const props = defineProps({
    staticPages: Array,
    dynamicPages: Array,
});

const activeTab = ref('static');

const togglePage = (id) => {
    router.post(route('admin.dynamic-pages.toggle', id), {}, {
        preserveScroll: true,
    });
};

const toggleVisibility = (id, field) => {
    router.post(route('admin.dynamic-pages.toggle-visibility', id), { field }, {
        preserveScroll: true,
    });
};

const deletePage = (id, title) => {
    if (confirm(`¿Estás seguro de eliminar la página "${title}"?`)) {
        router.delete(route('admin.dynamic-pages.destroy', id), {
            preserveScroll: true,
        });
    }
};

const getStatusClass = (isActive) => {
    return isActive 
        ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' 
        : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
};

const stripHtml = (html) => {
    return html?.replace(/<[^>]+>/g, '').substring(0, 100) || '';
};
</script>

<template>
    <Head title="Gestión de Páginas" />

    <AdminLayout>
        <template #header>
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="text-xl font-bold text-gray-900 dark:text-white">
                        Gestión de Páginas
                    </h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Administra las páginas estáticas y dinámicas del sitio
                    </p>
                </div>
                <Link 
                    :href="route('admin.dynamic-pages.create')"
                    class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium"
                >
                    <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 Página
                </Link>
            </div>
        </template>

        <div class="py-6">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <!-- Tabs -->
                <div class="flex space-x-1 bg-gray-100 dark:bg-gray-800 p-1 rounded-xl mb-6">
                    <button 
                        @click="activeTab = 'static'"
                        :class="[
                            'flex-1 py-2.5 px-4 rounded-lg text-sm font-medium transition-all',
                            activeTab === 'static' 
                                ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow' 
                                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
                        ]"
                    >
                        📄 Páginas del Sistema ({{ staticPages?.length || 0 }})
                    </button>
                    <button 
                        @click="activeTab = 'dynamic'"
                        :class="[
                            'flex-1 py-2.5 px-4 rounded-lg text-sm font-medium transition-all',
                            activeTab === 'dynamic' 
                                ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow' 
                                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
                        ]"
                    >
                        ✨ Páginas Personalizadas ({{ dynamicPages?.length || 0 }})
                    </button>
                </div>

                <!-- Static Pages -->
                <div v-if="activeTab === 'static'" class="space-y-4">
                    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-4 mb-6">
                        <div class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <div>
                                <p class="text-sm text-blue-800 dark:text-blue-200 font-medium">Páginas del Sistema</p>
                                <p class="text-sm text-blue-700 dark:text-blue-300">Estas páginas son esenciales y no se pueden eliminar. Puedes editar su contenido.</p>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <div 
                            v-for="page in staticPages" 
                            :key="page.slug"
                            class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5 hover:shadow-md transition"
                        >
                            <div class="flex justify-between items-start mb-3">
                                <div>
                                    <h3 class="font-semibold text-gray-900 dark:text-white">{{ page.title }}</h3>
                                    <span class="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">
                                        /{{ page.slug }}
                                    </span>
                                </div>
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
                                    Sistema
                                </span>
                            </div>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4 line-clamp-2">
                                {{ stripHtml(page.content) || 'Sin contenido' }}...
                            </p>
                            <div class="flex justify-between items-center pt-4 border-t border-gray-100 dark:border-gray-700">
                                <span class="text-xs text-gray-400">
                                    {{ page.updated_at ? new Date(page.updated_at).toLocaleDateString('es-ES') : 'Sin cambios' }}
                                </span>
                                <Link 
                                    :href="route('admin.static-pages.edit', page.slug)"
                                    class="px-3 py-1.5 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition"
                                >
                                    Editar
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Dynamic Pages -->
                <div v-if="activeTab === 'dynamic'" class="space-y-4">
                    <div v-if="!dynamicPages?.length" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
                        <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">No hay páginas personalizadas</h3>
                        <p class="text-gray-500 dark:text-gray-400 mb-6">Crea tu primera página personalizada para mostrar contenido adicional.</p>
                        <Link 
                            :href="route('admin.dynamic-pages.create')"
                            class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
                        >
                            <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>
                            Crear Primera Página
                        </Link>
                    </div>

                    <div v-else class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
                        <table class="w-full">
                            <thead class="bg-gray-50 dark:bg-gray-700/50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Página</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Ubicación</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Estado</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actualizado</th>
                                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Acciones</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                                <tr v-for="page in dynamicPages" :key="page.id" class="hover:bg-gray-50 dark:hover:bg-gray-700/30">
                                    <td class="px-6 py-4">
                                        <div>
                                            <p class="font-medium text-gray-900 dark:text-white">{{ page.title }}</p>
                                            <p class="text-sm text-gray-500 dark:text-gray-400 font-mono">/p/{{ page.slug }}</p>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="flex gap-2">
                                            <button 
                                                @click="toggleVisibility(page.id, 'show_in_header')"
                                                :class="[
                                                    'px-2 py-1 text-xs rounded-full cursor-pointer transition-colors',
                                                    page.show_in_header 
                                                        ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400 hover:bg-purple-200 dark:hover:bg-purple-900/50' 
                                                        : 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
                                                ]"
                                                title="Click para alternar visibilidad en Header"
                                            >
                                                Header {{ page.show_in_header ? '✓' : '✗' }}
                                            </button>
                                            <button 
                                                @click="toggleVisibility(page.id, 'show_in_footer')"
                                                :class="[
                                                    'px-2 py-1 text-xs rounded-full cursor-pointer transition-colors',
                                                    page.show_in_footer 
                                                        ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-900/50' 
                                                        : 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
                                                ]"
                                                title="Click para alternar visibilidad en Footer"
                                            >
                                                Footer {{ page.show_in_footer ? '✓' : '✗' }}
                                            </button>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <button 
                                            @click="togglePage(page.id)"
                                            :class="['px-2 py-1 text-xs font-medium rounded-full', getStatusClass(page.is_active)]"
                                        >
                                            {{ page.is_active ? 'Activa' : 'Inactiva' }}
                                        </button>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                                        {{ page.updated_at || '-' }}
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <div class="flex justify-end gap-2">
                                            <a 
                                                :href="`/p/${page.slug}`"
                                                target="_blank"
                                                class="p-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
                                                title="Ver página"
                                            >
                                                <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 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                                </svg>
                                            </a>
                                            <Link 
                                                :href="route('admin.dynamic-pages.edit', page.id)"
                                                class="p-2 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition"
                                                title="Editar"
                                            >
                                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                                </svg>
                                            </Link>
                                            <button 
                                                @click="deletePage(page.id, page.title)"
                                                class="p-2 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition"
                                                title="Eliminar"
                                            >
                                                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                </svg>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
