<template>
    <TransitionRoot as="template" :show="isOpen">
        <Dialog as="div" class="relative z-50" @close="$emit('close')">
            <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 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 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 dark:bg-gray-800 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 dark:text-gray-100">
                                    Options d'affichage
                                </DialogTitle>
                            </div>

                            <div class="space-y-6">
                                <!-- Vue Grid -->
                                <section>
                                    <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
                                        Vue Grille
                                    </h4>
                                    <div class="space-y-3">
                                        <ToggleRow
                                            label="Titre"
                                            :value="options.grid.showTitle"
                                            @update="setOption('grid', 'showTitle', $event)" />
                                        <ToggleRow
                                            label="Année de publication"
                                            :value="options.grid.showYear"
                                            @update="setOption('grid', 'showYear', $event)" />
                                        <ToggleRow
                                            label="Auteur(s)"
                                            :value="options.grid.showAuthor"
                                            @update="setOption('grid', 'showAuthor', $event)" />
                                    </div>
                                </section>

                                <div class="border-t border-gray-200 dark:border-gray-700" />

                                <!-- Vue Overview -->
                                <section>
                                    <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
                                        Vue Overview
                                    </h4>
                                    <div class="space-y-3">
                                        <ToggleRow
                                            label="Couverture"
                                            :value="options.overview.showCover"
                                            @update="setOption('overview', 'showCover', $event)" />
                                        <ToggleRow
                                            label="Statut"
                                            :value="options.overview.showStatus"
                                            @update="setOption('overview', 'showStatus', $event)" />
                                        <ToggleRow
                                            label="Description"
                                            :value="options.overview.showDescription"
                                            @update="setOption('overview', 'showDescription', $event)" />
                                        <ToggleRow
                                            label="Auteur(s)"
                                            :value="options.overview.showAuthor"
                                            @update="setOption('overview', 'showAuthor', $event)" />
                                        <ToggleRow
                                            label="Année de publication"
                                            :value="options.overview.showYear"
                                            @update="setOption('overview', 'showYear', $event)" />
                                    </div>
                                </section>

                                <div class="border-t border-gray-200 dark:border-gray-700" />

                                <!-- Vue Table -->
                                <section>
                                    <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
                                        Vue Table
                                    </h4>
                                    <div class="space-y-3">
                                        <ToggleRow
                                            label="Monitoring"
                                            :value="options.table.showMonitoring"
                                            @update="setOption('table', 'showMonitoring', $event)" />
                                        <ToggleRow
                                            label="Source préférée"
                                            :value="options.table.showPreferredSource"
                                            @update="setOption('table', 'showPreferredSource', $event)" />
                                        <ToggleRow
                                            label="Progression chapitres"
                                            :value="options.table.showChapters"
                                            @update="setOption('table', 'showChapters', $event)" />
                                        <ToggleRow
                                            label="Statut"
                                            :value="options.table.showStatus"
                                            @update="setOption('table', 'showStatus', $event)" />
                                        <ToggleRow
                                            label="Auteur(s)"
                                            :value="options.table.showAuthor"
                                            @update="setOption('table', 'showAuthor', $event)" />
                                        <ToggleRow
                                            label="Année de publication"
                                            :value="options.table.showYear"
                                            @update="setOption('table', 'showYear', $event)" />
                                    </div>
                                </section>
                            </div>

                            <div class="mt-6 flex justify-end">
                                <button
                                    type="button"
                                    class="inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                                    @click="$emit('close')"
                                >
                                    Fermer
                                </button>
                            </div>
                        </DialogPanel>
                    </TransitionChild>
                </div>
            </div>
        </Dialog>
    </TransitionRoot>
</template>

<script setup>
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
import ToggleRow from '../../../../shared/components/ui/ToggleRow.vue';

defineProps({
    isOpen: {
        type: Boolean,
        required: true
    },
    options: {
        type: Object,
        required: true
    }
});

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

function setOption(view, key, value) {
    emit('update', { view, key, value });
}
</script>

