<template>
    <TransitionRoot as="template" :show="isOpen">
        <Dialog as="div" class="relative z-50" @close="closeModal">
            <TransitionChild
                as="template"
                enter="ease-out duration-300"
                enter-from="opacity-0"
                enter-to="opacity-100"
                leave="ease-in duration-200"
                leave-from="opacity-100"
                leave-to="opacity-0"
            >
                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
            </TransitionChild>

            <div class="fixed inset-0 z-10 overflow-y-auto">
                <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                    <TransitionChild
                        as="template"
                        enter="ease-out duration-300"
                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                        enter-to="opacity-100 translate-y-0 sm:scale-100"
                        leave="ease-in duration-200"
                        leave-from="opacity-100 translate-y-0 sm:scale-100"
                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    >
                        <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white px-6 pb-6 pt-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
                            <div class="mb-6">
                                <DialogTitle as="h3" class="text-lg font-semibold leading-6 text-gray-900">
                                    Supprimer le manga
                                </DialogTitle>
                            </div>

                            <!-- Error state -->
                            <div v-if="error" class="mb-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
                                {{ error.message || 'Une erreur est survenue lors de la suppression.' }}
                            </div>

                            <!-- Warning message -->
                            <div class="mb-6">
                                <div class="flex items-center mb-4">
                                    <ExclamationTriangleIcon class="h-6 w-6 text-red-500 mr-3" />
                                    <span class="text-sm font-medium text-gray-900">Action irréversible</span>
                                </div>
                                <p class="text-sm text-gray-600 mb-4">
                                    Êtes-vous sûr de vouloir supprimer le manga <strong>"{{ manga?.title }}"</strong> ?
                                </p>
                                <div class="bg-yellow-50 border border-yellow-200 rounded-md p-4">
                                    <div class="flex">
                                        <ExclamationTriangleIcon class="h-5 w-5 text-yellow-400" />
                                        <div class="ml-3">
                                            <h3 class="text-sm font-medium text-yellow-800">
                                                Attention
                                            </h3>
                                            <div class="mt-2 text-sm text-yellow-700">
                                                <p>Cette action supprimera définitivement :</p>
                                                <ul class="list-disc list-inside mt-1 space-y-1">
                                                    <li>Le manga et toutes ses métadonnées</li>
                                                    <li>Tous les chapitres associés</li>
                                                    <li>Tous les fichiers CBZ téléchargés</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Action buttons -->
                            <div class="mt-6 flex justify-end space-x-3">
                                <button
                                    type="button"
                                    class="inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                                    @click="closeModal"
                                    :disabled="isLoading"
                                >
                                    Annuler
                                </button>
                                <button
                                    type="button"
                                    class="inline-flex justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
                                    @click="confirmDelete"
                                    :disabled="isLoading"
                                >
                                    <ArrowPathIcon v-if="isLoading" class="h-4 w-4 mr-2 animate-spin" />
                                    {{ isLoading ? 'Suppression...' : 'Supprimer définitivement' }}
                                </button>
                            </div>
                        </DialogPanel>
                    </TransitionChild>
                </div>
            </div>
        </Dialog>
    </TransitionRoot>
</template>

<script setup>
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
import { ArrowPathIcon, ExclamationTriangleIcon } from '@heroicons/vue/24/outline';

const props = defineProps({
    isOpen: {
        type: Boolean,
        required: true
    },
    manga: {
        type: Object,
        default: null
    },
    isLoading: {
        type: Boolean,
        default: false
    },
    error: {
        type: Object,
        default: null
    }
});

const emit = defineEmits(['close', 'confirm']);

const closeModal = () => {
    emit('close');
};

const confirmDelete = () => {
    emit('confirm');
};
</script>
