<script setup>
/**
 * Admin Categories Management
 */
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head, useForm, router } from '@inertiajs/vue3';
import { ref } from 'vue';

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

const showModal = ref(false);
const editingCategory = ref(null);

const form = useForm({
    name: '',
    description: '',
    color: '#3B82F6',
});

const openModal = (category = null) => {
    editingCategory.value = category;
    if (category) {
        form.name = category.name;
        form.description = category.description || '';
        form.color = category.color || '#3B82F6';
    } else {
        form.reset();
    }
    showModal.value = true;
};

const closeModal = () => {
    showModal.value = false;
    editingCategory.value = null;
    form.reset();
};

const submit = () => {
    if (editingCategory.value) {
        form.put(route('admin.categories.update', editingCategory.value.id), {
            onSuccess: closeModal,
        });
    } else {
        form.post(route('admin.categories.store'), {
            onSuccess: closeModal,
        });
    }
};

const deleteCategory = (category) => {
    if (confirm(`¿Eliminar la categoría "${category.name}"?`)) {
        router.delete(route('admin.categories.destroy', category.id));
    }
};
</script>

<template>
    <Head title="Categorías" />

    <AdminLayout>
        <div class="py-6">
            <!-- Header -->
            <div class="mb-6 px-4 sm:px-0">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Categorías</h1>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            Organiza los artículos del blog por categorías
                        </p>
                    </div>
                    <button 
                        @click="openModal()"
                        class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                    >
                        <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 Categoría
                    </button>
                </div>
            </div>

            <!-- Categories Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div 
                    v-for="category in categories" 
                    :key="category.id"
                    class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover:shadow-md transition-shadow"
                >
                    <div class="flex items-start justify-between mb-3">
                        <div class="flex items-center gap-3">
                            <div 
                                class="w-4 h-4 rounded-full"
                                :style="{ backgroundColor: category.color }"
                            ></div>
                            <h3 class="font-semibold text-gray-900 dark:text-white">{{ category.name }}</h3>
                        </div>
                        <span class="text-sm text-gray-500 dark:text-gray-400">
                            {{ category.posts_count || 0 }} artículos
                        </span>
                    </div>
                    
                    <p v-if="category.description" class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                        {{ category.description }}
                    </p>
                    
                    <div class="flex items-center gap-2 pt-4 border-t border-gray-100 dark:border-gray-700">
                        <button 
                            @click="openModal(category)"
                            class="flex-1 text-center px-3 py-2 text-sm text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
                        >
                            Editar
                        </button>
                        <button 
                            @click="deleteCategory(category)"
                            :disabled="category.posts_count > 0"
                            class="flex-1 text-center px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                            :title="category.posts_count > 0 ? 'No se puede eliminar: tiene artículos' : 'Eliminar'"
                        >
                            Eliminar
                        </button>
                    </div>
                </div>
            </div>

            <!-- Empty State -->
            <div v-if="!categories?.length" class="text-center py-12 bg-white dark:bg-gray-800 rounded-xl">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No hay categorías</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Crea tu primera categoría para organizar los artículos.
                </p>
            </div>
        </div>

        <!-- Modal -->
        <Teleport to="body">
            <div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center">
                <div class="fixed inset-0 bg-black/50" @click="closeModal"></div>
                <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-md w-full p-6 m-4">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                        {{ editingCategory ? 'Editar Categoría' : 'Nueva Categoría' }}
                    </h3>
                    
                    <form @submit.prevent="submit" class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                Nombre *
                            </label>
                            <input
                                v-model="form.name"
                                type="text"
                                class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                required
                            />
                            <p v-if="form.errors.name" class="mt-1 text-sm text-red-600">{{ form.errors.name }}</p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                Descripción
                            </label>
                            <textarea
                                v-model="form.description"
                                rows="2"
                                class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                            ></textarea>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                                Color
                            </label>
                            <div class="flex items-center gap-3">
                                <input
                                    v-model="form.color"
                                    type="color"
                                    class="w-12 h-10 rounded border-gray-300 cursor-pointer"
                                />
                                <input
                                    v-model="form.color"
                                    type="text"
                                    class="flex-1 rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white font-mono"
                                    pattern="^#[0-9A-Fa-f]{6}$"
                                />
                            </div>
                        </div>

                        <div class="flex justify-end gap-3 pt-4">
                            <button 
                                type="button"
                                @click="closeModal"
                                class="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                            >
                                Cancelar
                            </button>
                            <button 
                                type="submit"
                                :disabled="form.processing"
                                class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
                            >
                                {{ form.processing ? 'Guardando...' : 'Guardar' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </Teleport>
    </AdminLayout>
</template>
