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

const form = useForm({
    title: '',
    slug: '',
    content: '',
    meta_title: '',
    meta_description: '',
    show_in_header: false,
    show_in_footer: true,
    is_active: true,
});

const autoSlug = ref(true);

// Auto-generate slug from title
watch(() => form.title, (title) => {
    if (autoSlug.value && title) {
        form.slug = title
            .toLowerCase()
            .normalize('NFD')
            .replace(/[\u0300-\u036f]/g, '')
            .replace(/[^a-z0-9]+/g, '-')
            .replace(/^-+|-+$/g, '');
    }
});

const handleSlugInput = () => {
    autoSlug.value = false;
};

const submit = () => {
    form.post(route('admin.dynamic-pages.store'));
};
</script>

<template>
    <Head title="Crear Página" />

    <AdminLayout>
        <template #header>
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="text-xl font-bold text-gray-900 dark:text-white">
                        Crear Nueva Página
                    </h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Añade una nueva página personalizada al sitio
                    </p>
                </div>
                <Link 
                    :href="route('admin.pages.index')"
                    class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                >
                    &larr; Volver
                </Link>
            </div>
        </template>

        <div class="py-6">
            <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
                <form @submit.prevent="submit" class="space-y-6">
                    <!-- Basic Info -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Información Básica</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Título <span class="text-red-500">*</span>
                                </label>
                                <input 
                                    v-model="form.title"
                                    type="text"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-blue-500"
                                    placeholder="Ej: Nuestra Historia"
                                />
                                <p v-if="form.errors.title" class="mt-1 text-sm text-red-600">{{ form.errors.title }}</p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    URL (Slug)
                                </label>
                                <div class="flex items-center">
                                    <span class="text-gray-500 dark:text-gray-400 mr-2">/p/</span>
                                    <input 
                                        v-model="form.slug"
                                        @input="handleSlugInput"
                                        type="text"
                                        class="flex-1 rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-blue-500 font-mono text-sm"
                                        placeholder="nuestra-historia"
                                    />
                                </div>
                                <p v-if="form.errors.slug" class="mt-1 text-sm text-red-600">{{ form.errors.slug }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Contenido <span class="text-red-500">*</span></h3>
                        
                        <TiptapEditor 
                            v-model="form.content"
                            placeholder="Escribe el contenido de la página..."
                            :upload-url="route('admin.posts.upload-image')"
                        />
                        <p v-if="form.errors.content" class="mt-2 text-sm text-red-600">{{ form.errors.content }}</p>
                    </div>

                    <!-- SEO -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">SEO (Opcional)</h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Meta Título
                                </label>
                                <input 
                                    v-model="form.meta_title"
                                    type="text"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-blue-500"
                                    placeholder="Título para buscadores (opcional)"
                                />
                                <p class="mt-1 text-xs text-gray-500">{{ form.meta_title?.length || 0 }}/60 caracteres recomendados</p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Meta Descripción
                                </label>
                                <textarea 
                                    v-model="form.meta_description"
                                    rows="3"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-blue-500 focus:ring-blue-500"
                                    placeholder="Descripción para buscadores (opcional)"
                                ></textarea>
                                <p class="mt-1 text-xs text-gray-500">{{ form.meta_description?.length || 0 }}/160 caracteres recomendados</p>
                            </div>
                        </div>
                    </div>

                    <!-- Visibility -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Visibilidad</h3>
                        
                        <div class="space-y-4">
                            <label class="flex items-center gap-3 cursor-pointer">
                                <input 
                                    v-model="form.show_in_header" 
                                    type="checkbox"
                                    class="w-5 h-5 rounded text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500"
                                />
                                <div>
                                    <p class="font-medium text-gray-900 dark:text-white">Mostrar en Header</p>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">El enlace aparecerá en la navegación superior</p>
                                </div>
                            </label>

                            <label class="flex items-center gap-3 cursor-pointer">
                                <input 
                                    v-model="form.show_in_footer" 
                                    type="checkbox"
                                    class="w-5 h-5 rounded text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500"
                                />
                                <div>
                                    <p class="font-medium text-gray-900 dark:text-white">Mostrar en Footer</p>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">El enlace aparecerá en el pie de página</p>
                                </div>
                            </label>

                            <label class="flex items-center gap-3 cursor-pointer">
                                <input 
                                    v-model="form.is_active" 
                                    type="checkbox"
                                    class="w-5 h-5 rounded text-green-600 border-gray-300 dark:border-gray-600 focus:ring-green-500"
                                />
                                <div>
                                    <p class="font-medium text-gray-900 dark:text-white">Página Activa</p>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">La página será accesible públicamente</p>
                                </div>
                            </label>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex justify-end gap-4">
                        <Link 
                            :href="route('admin.pages.index')"
                            class="px-6 py-3 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition"
                        >
                            Cancelar
                        </Link>
                        <button 
                            type="submit"
                            :disabled="form.processing"
                            class="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition disabled:opacity-50"
                        >
                            <span v-if="form.processing">Guardando...</span>
                            <span v-else>Crear Página</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </AdminLayout>
</template>
