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

const props = defineProps({
    slug: String,
    title: String,
    content: String,
});

const form = useForm({
    content: props.content,
});

const submit = () => {
    form.put(route('admin.static-pages.update', props.slug));
};
</script>

<template>
    <Head :title="`Editar: ${title}`" />

    <AdminLayout>
        <template #header>
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="text-xl font-bold text-gray-900 dark:text-white">
                        Editar Página del Sistema
                    </h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        {{ title }}
                    </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">
                    <!-- Info Banner -->
                    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-4">
                        <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ágina del Sistema</p>
                                <p class="text-sm text-blue-700 dark:text-blue-300">Esta es una página esencial del sistema. Solo puedes modificar su contenido, no eliminarla ni cambiar su URL.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Page Info -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ title }}</h3>
                            <span class="text-sm font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-3 py-1 rounded-lg">
                                /{{ slug }}
                            </span>
                        </div>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            URL pública: <a :href="`/${slug}`" target="_blank" class="text-blue-600 hover:underline">/{{ slug }}</a>
                        </p>
                    </div>

                    <!-- Content Editor -->
                    <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</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>

                    <!-- 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>Guardar Cambios</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </AdminLayout>
</template>
