<template>
    <div v-if="isOpen" class="fixed inset-0 z-50 overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <!-- Overlay avec effet de flou Material Design -->
            <div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="handleClose"></div>

            <!-- Modal avec style Material Design -->
            <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-5xl sm:w-full border border-gray-100 dark:border-gray-700">
                <!-- Header Material Design -->
                <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                <FolderIcon class="h-5 w-5 text-green-600" />
                            </div>
                            <div>
                                <h3 class="text-xl font-medium text-gray-900 dark:text-gray-100 leading-6">
                                    Gérer les chapitres
                                </h3>
                                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ manga?.title }}</p>
                            </div>
                        </div>
                        <button
                            @click="handleClose"
                            class="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center transition-colors duration-200"
                        >
                            <XMarkIcon class="h-5 w-5 text-gray-600 dark:text-gray-300" />
                        </button>
                    </div>
                </div>

                <!-- Content avec style Material Design -->
                <div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-8">
                    <div v-if="isLoading" class="flex justify-center items-center h-32">
                        <div class="relative">
                            <div class="w-8 h-8 border-4 border-green-200 rounded-full"></div>
                            <div class="absolute top-0 left-0 w-8 h-8 border-4 border-green-600 rounded-full border-t-transparent animate-spin"></div>
                        </div>
                    </div>

                    <div v-else-if="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded-xl mb-6 flex items-center space-x-2">
                        <div class="w-5 h-5 bg-red-100 rounded-full flex items-center justify-center">
                            <XMarkIcon class="h-3 w-3 text-red-600" />
                        </div>
                        <span>{{ error }}</span>
                    </div>

                    <div v-else class="space-y-6">
                        <!-- Actions avec style Material Design -->
                        <div class="flex items-center justify-between bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4">
                            <div class="flex items-center space-x-3">
                                <button
                                    @click="showCreateVolumeModal = true"
                                    class="bg-green-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-green-700 shadow-md hover:shadow-lg transition-all duration-200 flex items-center space-x-2"
                                >
                                    <PlusIcon class="h-4 w-4" />
                                    <span>Créer un volume</span>
                                </button>
                                <button
                                    @click="showUnassignedChapters = !showUnassignedChapters"
                                    class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700 px-3 py-2 rounded-lg transition-colors duration-200"
                                >
                                    {{ showUnassignedChapters ? 'Masquer' : 'Afficher' }} les chapitres non assignés
                                </button>
                                <!-- Bouton de séparation automatique du volume fourre-tout -->
                                <button
                                    v-if="hasVolumeZero && canSplitVolumeZero"
                                    @click="showSplitVolumeZeroModal = true"
                                    class="bg-green-600 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-green-700 shadow-md hover:shadow-lg transition-all duration-200 flex items-center space-x-2"
                                >
                                    <ArrowPathIcon class="h-4 w-4" />
                                    <span>Séparer le volume 00</span>
                                </button>
                                <!-- Actions de sélection multiple -->
                                <div v-if="selectedChapters.length > 0" class="flex items-center space-x-3 bg-green-50 px-4 py-2 rounded-xl border border-green-200">
                                    <span class="text-sm font-medium text-green-700">{{ selectedChapters.length }} chapitre(s) sélectionné(s)</span>
                                    <button
                                        @click="showMoveToVolumeModal = true"
                                        class="bg-green-600 text-white px-3 py-1.5 rounded-lg text-xs font-medium hover:bg-green-700 shadow-sm transition-colors duration-200"
                                    >
                                        Déplacer vers un volume
                                    </button>
                                    <button
                                        @click="clearSelection"
                                        class="text-green-600 hover:text-green-800 text-xs font-medium hover:bg-green-100 px-2 py-1 rounded transition-colors duration-200"
                                    >
                                        Annuler
                                    </button>
                                </div>
                            </div>
                            <div class="text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-600">
                                {{ totalChapters }} chapitres, {{ volumes.length }} volumes
                            </div>
                        </div>

                        <!-- Arborescence avec style Material Design -->
                        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden shadow-sm">
                            <!-- Chapitres non assignés -->
                            <div v-if="showUnassignedChapters && unassignedChapters.length > 0" class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700/50 dark:to-gray-700/30 border-b border-gray-200 dark:border-gray-600">
                                <div class="px-6 py-4">
                                    <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center space-x-2">
                                        <DocumentIcon class="h-4 w-4 text-gray-500" />
                                        <span>Chapitres non assignés ({{ unassignedChapters.length }})</span>
                                    </h4>
                                    <div class="space-y-2">
                                        <div
                                            v-for="chapter in unassignedChapters"
                                            :key="chapter.id"
                                            class="flex items-center space-x-3 p-3 hover:bg-white rounded-lg transition-colors duration-200 border border-transparent hover:border-gray-200"
                                            :class="{ 'bg-green-50 border-green-200 shadow-sm': isChapterSelected(chapter) }"
                                        >
                                            <!-- Checkbox de sélection Material Design -->
                                            <div class="relative">
                                                <input
                                                    type="checkbox"
                                                    :checked="isChapterSelected(chapter)"
                                                    @change="toggleChapterSelection(chapter)"
                                                    class="h-5 w-5 text-green-600 border-gray-300 rounded focus:ring-green-500 focus:ring-2 transition-colors duration-200"
                                                />
                                            </div>
                                            <DocumentIcon class="h-5 w-5 text-gray-400" />
                                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300 w-12 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-center">{{ chapter.number }}</span>
                                            <div class="flex-1">
                                                <div v-if="!chapter.isEditing" class="flex items-center">
                                                    <span
                                                        class="text-sm text-gray-900 dark:text-gray-100 cursor-pointer hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200"
                                                        @click="startEditingTitle(chapter)"
                                                    >
                                                        {{ chapter.title || 'Sans titre' }}
                                                    </span>
                                                    <button
                                                        @click="startEditingTitle(chapter)"
                                                        class="ml-2 text-gray-400 hover:text-gray-600 p-1 rounded-full hover:bg-gray-100 transition-colors duration-200"
                                                    >
                                                        <PencilIcon class="h-3 w-3" />
                                                    </button>
                                                </div>
                                                <div v-else class="flex items-center space-x-2">
                                                    <input
                                                        v-model="chapter.editingTitle"
                                                        type="text"
                                                        class="flex-1 border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors duration-200"
                                                        @keyup.enter="saveTitle(chapter)"
                                                        @keyup.esc="cancelEditingTitle(chapter)"
                                                        ref="titleInput"
                                                    />
                                                    <button
                                                        @click="saveTitle(chapter)"
                                                        class="text-green-600 hover:text-green-800 p-1 rounded-full hover:bg-green-100 transition-colors duration-200"
                                                    >
                                                        <CheckIcon class="h-4 w-4" />
                                                    </button>
                                                    <button
                                                        @click="cancelEditingTitle(chapter)"
                                                        class="text-red-600 hover:text-red-800 p-1 rounded-full hover:bg-red-100 transition-colors duration-200"
                                                    >
                                                        <XMarkIcon class="h-4 w-4" />
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="flex items-center space-x-2">
                                                <button
                                                    @click="assignToVolume(chapter)"
                                                    class="bg-green-600 text-white px-3 py-1.5 rounded-lg text-xs font-medium hover:bg-green-700 shadow-sm transition-colors duration-200"
                                                >
                                                    Assigner
                                                </button>
                                            </div>
                                            <div v-if="chapter.isModified" class="w-3 h-3 bg-yellow-400 rounded-full shadow-sm"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Volumes avec style Material Design -->
                            <div class="divide-y divide-gray-100 dark:divide-gray-700">
                                <div
                                    v-for="volume in volumes"
                                    :key="volume.number"
                                    class="bg-white dark:bg-gray-800"
                                >
                                    <!-- En-tête du volume Material Design -->
                                    <div class="px-6 py-4 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border-b border-green-100 dark:border-green-900/30">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center space-x-3">
                                                <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                                                    <FolderIcon class="h-4 w-4 text-green-600" />
                                                </div>
                                                <div>
                                                    <span class="text-sm font-semibold text-green-900 dark:text-green-300">Volume {{ volume.number }}</span>
                                                    <span class="text-xs text-green-600 dark:text-green-400 ml-2">({{ volume.chapters.length }} chapitres)</span>
                                                </div>
                                            </div>
                                            <div class="flex items-center space-x-2">
                                                <button
                                                    @click="toggleVolumeExpanded(volume)"
                                                    class="w-8 h-8 rounded-full bg-green-100 hover:bg-green-200 flex items-center justify-center transition-colors duration-200"
                                                >
                                                    <ChevronDownIcon v-if="volume.isExpanded" class="h-4 w-4 text-green-600" />
                                                    <ChevronRightIcon v-else class="h-4 w-4 text-green-600" />
                                                </button>
                                                <button
                                                    @click="deleteVolume(volume.number)"
                                                    class="text-red-600 hover:text-red-800 text-sm font-medium hover:bg-red-100 px-3 py-1.5 rounded-lg transition-colors duration-200"
                                                >
                                                    Supprimer
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Chapitres du volume -->
                                    <div v-if="volume.isExpanded" class="px-6 py-4">
                                        <div v-if="volume.chapters.length === 0" class="text-center py-8 text-gray-500 dark:text-gray-400">
                                            <DocumentIcon class="h-12 w-12 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
                                            <p class="text-sm">Aucun chapitre assigné à ce volume.</p>
                                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Utilisez le bouton "Assigner" sur les chapitres non assignés pour les ajouter.</p>
                                        </div>
                                        <div v-else class="space-y-2">
                                            <div
                                                v-for="chapter in volume.chapters"
                                                :key="chapter.id"
                                                class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg transition-colors duration-200 border border-transparent hover:border-gray-200"
                                                :class="{ 'bg-green-50 border-green-200 shadow-sm': isChapterSelected(chapter) }"
                                            >
                                                <!-- Checkbox de sélection -->
                                                <div class="relative">
                                                    <input
                                                        type="checkbox"
                                                        :checked="isChapterSelected(chapter)"
                                                        @change="toggleChapterSelection(chapter)"
                                                        class="h-5 w-5 text-green-600 border-gray-300 rounded focus:ring-green-500 focus:ring-2 transition-colors duration-200"
                                                    />
                                                </div>
                                                <DocumentIcon class="h-5 w-5 text-gray-400" />
                                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300 w-12 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-center">{{ chapter.number }}</span>
                                                <div class="flex-1">
                                                    <div v-if="!chapter.isEditing" class="flex items-center">
                                                        <span
                                                            class="text-sm text-gray-900 dark:text-gray-100 cursor-pointer hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200"
                                                            @click="startEditingTitle(chapter)"
                                                        >
                                                            {{ chapter.title || 'Sans titre' }}
                                                        </span>
                                                        <button
                                                            @click="startEditingTitle(chapter)"
                                                            class="ml-2 text-gray-400 hover:text-gray-600 p-1 rounded-full hover:bg-gray-100 transition-colors duration-200"
                                                        >
                                                            <PencilIcon class="h-3 w-3" />
                                                        </button>
                                                    </div>
                                                    <div v-else class="flex items-center space-x-2">
                                                        <input
                                                            v-model="chapter.editingTitle"
                                                            type="text"
                                                            class="flex-1 border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors duration-200"
                                                            @keyup.enter="saveTitle(chapter)"
                                                            @keyup.esc="cancelEditingTitle(chapter)"
                                                            ref="titleInput"
                                                        />
                                                        <button
                                                            @click="saveTitle(chapter)"
                                                            class="text-green-600 hover:text-green-800 p-1 rounded-full hover:bg-green-100 transition-colors duration-200"
                                                        >
                                                            <CheckIcon class="h-4 w-4" />
                                                        </button>
                                                        <button
                                                            @click="cancelEditingTitle(chapter)"
                                                            class="text-red-600 hover:text-red-800 p-1 rounded-full hover:bg-red-100 transition-colors duration-200"
                                                        >
                                                            <XMarkIcon class="h-4 w-4" />
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="flex items-center space-x-2">
                                                    <button
                                                        @click="removeFromVolume(chapter)"
                                                        class="text-red-600 hover:text-red-800 text-xs font-medium hover:bg-red-100 px-3 py-1.5 rounded-lg transition-colors duration-200"
                                                    >
                                                        Retirer
                                                    </button>
                                                </div>
                                                <div v-if="chapter.isModified" class="w-3 h-3 bg-yellow-400 rounded-full shadow-sm"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Footer Material Design -->
                <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
                    <div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
                        <button
                            @click="handleClose"
                            :disabled="isSaving"
                            class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-6 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 transition-all duration-200 shadow-sm hover:shadow-md"
                        >
                            Annuler
                        </button>
                        <button
                            @click="handleSave"
                            :disabled="isSaving || !hasChanges"
                            class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-transparent bg-green-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 transition-all duration-200 shadow-md hover:shadow-lg"
                        >
                            <span v-if="isSaving" class="flex items-center space-x-2">
                                <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                                <span>Sauvegarde...</span>
                            </span>
                            <span v-else>Sauvegarder</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal de création de volume Material Design -->
        <div v-if="showCreateVolumeModal" class="fixed inset-0 z-60 overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="showCreateVolumeModal = false"></div>
                <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full border border-gray-100 dark:border-gray-700">
                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100 dark:border-gray-700">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                <PlusIcon class="h-5 w-5 text-green-600" />
                            </div>
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Créer un nouveau volume</h3>
                        </div>
                    </div>
                    <div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-6">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Numéro du volume</label>
                                <input
                                    v-model="newVolumeNumber"
                                    type="number"
                                    min="1"
                                    class="block w-full border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-3 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors duration-200"
                                    placeholder="Ex: 1"
                                />
                            </div>
                            <div v-if="volumeExists" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center space-x-2">
                                <XMarkIcon class="h-4 w-4 text-red-600" />
                                <span class="text-sm">Ce volume existe déjà.</span>
                            </div>
                            <div v-if="newVolumeNumber && !isValidVolumeNumber" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg flex items-center space-x-2">
                                <XMarkIcon class="h-4 w-4 text-red-600" />
                                <span class="text-sm">Le numéro de volume doit être entre 1 et 999.</span>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
                        <div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
                            <button
                                @click="showCreateVolumeModal = false"
                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 shadow-sm hover:shadow-md"
                            >
                                Annuler
                            </button>
                            <button
                                @click="createVolume"
                                :disabled="!isValidVolumeNumber || volumeExists"
                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-transparent bg-green-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 transition-all duration-200 shadow-md hover:shadow-lg"
                            >
                                Créer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal d'assignation Material Design -->
        <div v-if="showAssignModal" class="fixed inset-0 z-60 overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="showAssignModal = false"></div>
                <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full border border-gray-100 dark:border-gray-700">
                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100 dark:border-gray-700">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                <DocumentIcon class="h-5 w-5 text-green-600" />
                            </div>
                            <h3 class="text-lg font-medium text-gray-900">Assigner le chapitre {{ selectedChapter?.number }}</h3>
                        </div>
                    </div>
                    <div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-6">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Volume</label>
                                <select
                                    v-model="selectedVolumeForAssignment"
                                    class="block w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors duration-200"
                                >
                                    <option value="">Sélectionner un volume</option>
                                    <option v-for="volume in volumes" :key="volume.number" :value="volume.number">
                                        Volume {{ volume.number }}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
                        <div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
                            <button
                                @click="showAssignModal = false"
                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 shadow-sm hover:shadow-md"
                            >
                                Annuler
                            </button>
                            <button
                                @click="confirmAssignToVolume"
                                :disabled="!selectedVolumeForAssignment"
                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-transparent bg-green-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 transition-all duration-200 shadow-md hover:shadow-lg"
                            >
                                Assigner
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal de déplacement multiple Material Design -->
        <div v-if="showMoveToVolumeModal" class="fixed inset-0 z-60 overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="showMoveToVolumeModal = false"></div>
                <div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full border border-gray-100 dark:border-gray-700">
                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100 dark:border-gray-700">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                <ArrowPathIcon class="h-5 w-5 text-green-600" />
                            </div>
                            <h3 class="text-lg font-medium text-gray-900">Déplacer {{ selectedChapters.length }} chapitre(s)</h3>
                        </div>
                    </div>
                    <div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-6">
                        <div class="space-y-4">
                            <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                                <p class="text-sm text-green-800 font-medium">
                                    Chapitres sélectionnés : {{ selectedChapters.map(c => c.number).join(', ') }}
                                </p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Volume de destination</label>
                                <select
                                    v-model="selectedVolumeForMove"
                                    class="block w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors duration-200"
                                >
                                    <option value="">Sélectionner un volume</option>
                                    <option v-for="volume in volumes" :key="volume.number" :value="volume.number">
                                        Volume {{ volume.number }}
                                    </option>
                                    <option value="unassigned">Chapitres non assignés</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
                        <div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
                            <button
                                @click="showMoveToVolumeModal = false"
                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 shadow-sm hover:shadow-md"
                            >
                                Annuler
                            </button>
                            <button
                                @click="confirmMoveToVolume"
                                :disabled="!selectedVolumeForMove"
                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-transparent bg-green-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 transition-all duration-200 shadow-md hover:shadow-lg"
                            >
                                Déplacer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal de séparation du volume fourre-tout Material Design -->
        <div v-if="showSplitVolumeZeroModal" class="fixed inset-0 z-60 overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" @click="showSplitVolumeZeroModal = false"></div>
                <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border border-gray-100">
                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 px-6 pt-6 pb-4 sm:px-8 sm:pb-6 border-b border-gray-100">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                                <ArrowPathIcon class="h-5 w-5 text-green-600" />
                            </div>
                            <h3 class="text-lg font-medium text-gray-900">Séparer le volume 00</h3>
                        </div>
                    </div>
                    <div class="bg-white dark:bg-gray-800 px-6 py-6 sm:px-8 sm:py-6">
                        <div class="space-y-4">
                            <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                                <p class="text-sm text-green-800 font-medium">
                                    Le volume 00 contient {{ volumeZeroChapters.length }} chapitres et sera séparé en {{ numberOfNewVolumes }} nouveaux volumes.
                                </p>
                            </div>
                            <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                                <p class="text-sm text-green-800">
                                    <strong>Moyenne des autres volumes :</strong> {{ averageChaptersPerVolume.toFixed(1) }} chapitres par volume
                                </p>
                                <p class="text-sm text-green-800 mt-1">
                                    <strong>Chapitres par nouveau volume :</strong> {{ chaptersPerNewVolume }}
                                </p>
                            </div>
                            <div class="space-y-3">
                                <h4 class="text-sm font-medium text-gray-700">Répartition proposée :</h4>
                                <div class="space-y-2 max-h-32 overflow-y-auto">
                                    <div v-for="(group, index) in proposedVolumeGroups" :key="index" class="text-sm text-gray-600 bg-gray-50 p-3 rounded-lg border border-gray-200">
                                        <strong>Volume {{ group.volumeNumber }} :</strong>
                                        Chapitres {{ group.chapters.map(c => c.number).join(', ') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 sm:px-8 sm:py-6 border-t border-gray-200 dark:border-gray-700">
                        <div class="flex flex-col sm:flex-row sm:justify-end sm:space-x-3 space-y-3 sm:space-y-0">
                            <button
                                @click="showSplitVolumeZeroModal = false"
                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-gray-300 bg-white px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 shadow-sm hover:shadow-md"
                            >
                                Annuler
                            </button>
                            <button
                                @click="confirmSplitVolumeZero"
                                class="w-full sm:w-auto inline-flex justify-center items-center rounded-lg border border-transparent bg-green-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 shadow-md hover:shadow-lg"
                            >
                                Confirmer la séparation
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {
    ArrowPathIcon,
    CheckIcon,
    ChevronDownIcon,
    ChevronRightIcon,
    DocumentIcon,
    FolderIcon,
    PencilIcon,
    PlusIcon,
    XMarkIcon
} from '@heroicons/vue/24/outline';
import { computed, nextTick, ref, watch } from 'vue';

const props = defineProps({
    isOpen: {
        type: Boolean,
        required: true
    },
    manga: {
        type: Object,
        default: null
    },
    chapters: {
        type: Array,
        default: () => []
    },
    isLoading: {
        type: Boolean,
        default: false
    },
    isSaving: {
        type: Boolean,
        default: false
    },
    error: {
        type: String,
        default: null
    }
});

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

// État local
const localChapters = ref([]);
const showCreateVolumeModal = ref(false);
const showAssignModal = ref(false);
const showMoveToVolumeModal = ref(false);
const showSplitVolumeZeroModal = ref(false);
const showUnassignedChapters = ref(true);
const newVolumeNumber = ref('');
const selectedChapter = ref(null);
const selectedVolumeForAssignment = ref('');
const selectedVolumeForMove = ref('');
const titleInput = ref(null);
const expandedVolumes = ref(new Set());
const selectedChapters = ref([]);

// Computed properties
const volumes = computed(() => {
    const volumeMap = new Map();

    // Ajouter les volumes existants avec leurs chapitres
    localChapters.value.forEach(chapter => {
        if (chapter.volume) {
            if (!volumeMap.has(chapter.volume)) {
                volumeMap.set(chapter.volume, {
                    number: chapter.volume,
                    chapters: []
                });
            }
            volumeMap.get(chapter.volume).chapters.push(chapter);
        }
    });

    // Ajouter les volumes vides qui sont dans expandedVolumes
    expandedVolumes.value.forEach(volumeNumber => {
        if (!volumeMap.has(volumeNumber)) {
            volumeMap.set(volumeNumber, {
                number: volumeNumber,
                chapters: []
            });
        }
    });

    const volumesArray = Array.from(volumeMap.values())
        .sort((a, b) => b.number - a.number) // Tri décroissant (derniers volumes en premier)
        .map(volume => ({
            ...volume,
            chapters: volume.chapters.sort((a, b) => b.number - a.number), // Chapitres décroissants
            isExpanded: expandedVolumes.value.has(volume.number)
        }));

    return volumesArray;
});

const unassignedChapters = computed(() => {
    return localChapters.value
        .filter(chapter => !chapter.volume)
        .sort((a, b) => b.number - a.number); // Tri décroissant (derniers chapitres en premier)
});

const totalChapters = computed(() => localChapters.value.length);

const volumeExists = computed(() => {
    if (!newVolumeNumber.value) return false;
    const volumeNumber = parseInt(newVolumeNumber.value);
    return volumes.value.some(volume => volume.number === volumeNumber);
});

const isValidVolumeNumber = computed(() => {
    if (!newVolumeNumber.value) return false;
    const volumeNumber = parseInt(newVolumeNumber.value);
    return volumeNumber > 0 && volumeNumber <= 999;
});

const hasChanges = computed(() => {
    return localChapters.value.some(chapter => chapter.isModified);
});

// Computed properties pour la séparation du volume fourre-tout
const volumeZeroChapters = computed(() => {
    return localChapters.value.filter(chapter => chapter.volume === 0);
});

const hasVolumeZero = computed(() => {
    return volumeZeroChapters.value.length > 0;
});

const otherVolumes = computed(() => {
    return volumes.value.filter(volume => volume.number !== 0 && volume.chapters.length > 0);
});

const averageChaptersPerVolume = computed(() => {
    if (otherVolumes.value.length === 0) return 10; // Valeur par défaut si aucun autre volume
    const totalChapters = otherVolumes.value.reduce((sum, volume) => sum + volume.chapters.length, 0);
    return totalChapters / otherVolumes.value.length;
});

const canSplitVolumeZero = computed(() => {
    return hasVolumeZero.value && volumeZeroChapters.value.length > averageChaptersPerVolume.value;
});

const numberOfNewVolumes = computed(() => {
    if (!canSplitVolumeZero.value) return 0;
    return Math.ceil(volumeZeroChapters.value.length / averageChaptersPerVolume.value);
});

const chaptersPerNewVolume = computed(() => {
    if (!canSplitVolumeZero.value) return 0;
    return Math.ceil(volumeZeroChapters.value.length / numberOfNewVolumes.value);
});

const proposedVolumeGroups = computed(() => {
    if (!canSplitVolumeZero.value) return [];

    const chapters = [...volumeZeroChapters.value].sort((a, b) => a.number - b.number); // Tri croissant par numéro
    const groups = [];
    const chaptersPerGroup = chaptersPerNewVolume.value;

    // Trouver le prochain numéro de volume disponible
    const existingVolumeNumbers = volumes.value.map(v => v.number).filter(n => n !== 0);
    const maxVolumeNumber = existingVolumeNumbers.length > 0 ? Math.max(...existingVolumeNumbers) : 0;

    for (let i = 0; i < numberOfNewVolumes.value; i++) {
        const startIndex = i * chaptersPerGroup;
        const endIndex = Math.min(startIndex + chaptersPerGroup, chapters.length);
        const groupChapters = chapters.slice(startIndex, endIndex);

        if (groupChapters.length > 0) {
            groups.push({
                volumeNumber: maxVolumeNumber + i + 1,
                chapters: groupChapters
            });
        }
    }

    return groups;
});

// Méthodes
const handleClose = () => {
    if (!props.isSaving) {
        emit('close');
    }
};

const handleSave = () => {
    const modifiedChapters = localChapters.value
        .filter(chapter => chapter.isModified)
        .map(chapter => ({
            id: chapter.id,
            title: chapter.title,
            volume: chapter.volume || null
        }));

    if (modifiedChapters.length > 0) {
        emit('save', modifiedChapters);
    }
};

const toggleVolumeExpanded = (volume) => {
    if (expandedVolumes.value.has(volume.number)) {
        expandedVolumes.value.delete(volume.number);
    } else {
        expandedVolumes.value.add(volume.number);
    }
};

const createVolume = () => {
    if (newVolumeNumber.value && !volumeExists.value && isValidVolumeNumber.value) {
        const volumeNumber = parseInt(newVolumeNumber.value);

        // Ajouter le nouveau volume à la liste des volumes dépliés
        expandedVolumes.value.add(volumeNumber);

        // Fermer la modale et réinitialiser
        showCreateVolumeModal.value = false;
        newVolumeNumber.value = '';
    }
};

const deleteVolume = (volumeNumber) => {
    localChapters.value.forEach(chapter => {
        if (chapter.volume === volumeNumber) {
            chapter.volume = null;
            chapter.isModified = true;
        }
    });
};

const assignToVolume = (chapter) => {
    selectedChapter.value = chapter;
    selectedVolumeForAssignment.value = '';
    showAssignModal.value = true;
};

const confirmAssignToVolume = () => {
    if (selectedChapter.value && selectedVolumeForAssignment.value) {
        selectedChapter.value.volume = parseInt(selectedVolumeForAssignment.value);
        selectedChapter.value.isModified = true;
        showAssignModal.value = false;
        selectedChapter.value = null;
        selectedVolumeForAssignment.value = '';
    }
};

const removeFromVolume = (chapter) => {
    chapter.volume = null;
    chapter.isModified = true;
};

const startEditingTitle = async (chapter) => {
    chapter.isEditing = true;
    chapter.editingTitle = chapter.title || '';

    await nextTick();
    if (titleInput.value) {
        titleInput.value.focus();
    }
};

const saveTitle = (chapter) => {
    if (chapter.editingTitle !== chapter.title) {
        chapter.title = chapter.editingTitle;
        chapter.isModified = true;
    }
    chapter.isEditing = false;
    chapter.editingTitle = '';
};

const cancelEditingTitle = (chapter) => {
    chapter.isEditing = false;
    chapter.editingTitle = '';
};

// Méthodes de sélection multiple
const isChapterSelected = (chapter) => {
    return selectedChapters.value.some(selected => selected.id === chapter.id);
};

const toggleChapterSelection = (chapter) => {
    const index = selectedChapters.value.findIndex(selected => selected.id === chapter.id);
    if (index > -1) {
        selectedChapters.value.splice(index, 1);
    } else {
        selectedChapters.value.push(chapter);
    }
};

const clearSelection = () => {
    selectedChapters.value = [];
};

const confirmMoveToVolume = () => {
    if (selectedVolumeForMove.value && selectedChapters.value.length > 0) {
        const targetVolume = selectedVolumeForMove.value === 'unassigned' ? null : parseInt(selectedVolumeForMove.value);

        selectedChapters.value.forEach(chapter => {
            chapter.volume = targetVolume;
            chapter.isModified = true;
        });

        // Vider la sélection et fermer la modale
        selectedChapters.value = [];
        showMoveToVolumeModal.value = false;
        selectedVolumeForMove.value = '';
    }
};

const confirmSplitVolumeZero = () => {
    if (!canSplitVolumeZero.value) return;

    // Appliquer la répartition proposée
    proposedVolumeGroups.value.forEach(group => {
        group.chapters.forEach(chapter => {
            chapter.volume = group.volumeNumber;
            chapter.isModified = true;
        });
    });

    // Fermer la modale
    showSplitVolumeZeroModal.value = false;
};

// Initialiser les chapitres locaux quand les props changent
watch(() => props.chapters, (newChapters) => {
    localChapters.value = newChapters.map(chapter => ({
        ...chapter,
        isModified: false,
        isEditing: false,
        editingTitle: ''
    }));
}, { immediate: true });

// Réinitialiser quand la modale s'ouvre
watch(() => props.isOpen, (isOpen) => {
    if (isOpen) {
        localChapters.value = props.chapters.map(chapter => ({
            ...chapter,
            isModified: false,
            isEditing: false,
            editingTitle: ''
        }));
        showCreateVolumeModal.value = false;
        showAssignModal.value = false;
        showMoveToVolumeModal.value = false;
        showSplitVolumeZeroModal.value = false;
        showUnassignedChapters.value = true;
        newVolumeNumber.value = '';
        selectedChapter.value = null;
        selectedVolumeForAssignment.value = '';
        selectedVolumeForMove.value = '';
        expandedVolumes.value.clear();
        selectedChapters.value = [];

        // S'assurer que le dernier volume est déplié après l'initialisation
        nextTick(() => {
            if (volumes.value.length > 0) {
                expandedVolumes.value.add(volumes.value[0].number);
            }
        });
    }
});
</script>
