<template>
    <div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
        <!-- Notifications Toast -->
        <NotificationToast />

        <Toolbar v-if="currentManga" :config="toolbarConfig" />

        <div class="overflow-y-auto flex-1">

        <div v-if="errorDetails" class="bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded mx-4 mt-4">
            {{ errorDetails.message || 'Une erreur est survenue lors du chargement des détails.' }}
        </div>

        <div v-else-if="currentManga" class="relative">
            <!-- Composant invisible qui écoute les mises à jour Mercure -->
            <MercureListener :manga-id="String(mangaId)" />

            <div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500 dark:text-gray-400 z-20">
                <ArrowPathIcon class="h-5 w-5 animate-spin" />
            </div>

            <MangaHeader :manga="currentManga" />

            <!-- Section Volumes avec conteneur mobile -->
            <div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 pb-8">
                <div v-if="isLoadingVolumes" class="flex justify-center items-center h-32">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                </div>
                <div v-else-if="errorVolumes" class="bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded">
                    {{ errorVolumes.message || 'Une erreur est survenue lors du chargement des volumes.' }}
                </div>
                <MangaVolumeList
                    v-else
                    ref="volumeListRef"
                    :volumes="volumes"
                    :manga-slug="currentManga.slug"
                    :manga-id="mangaId"
                    v-model:expand-all="isAllExpanded" />
            </div>

            <!-- Modale des sources préférées -->
            <MangaPreferredSourcesModal
                :is-open="isPreferredSourcesModalOpen"
                :sources="preferredSources"
                :is-loading="isLoadingSources"
                :error="sourcesError"
                :is-saving="isSavingSources"
                @close="closePreferredSourcesModal"
                @save="savePreferredSources"
            />

            <!-- Modale d'édition du manga -->
            <MangaEditModal
                :is-open="isEditModalOpen"
                :manga="currentManga"
                :is-saving="isEditLoading"
                :error="editError"
                @close="closeEditModal"
                @save="saveMangaEdit"
            />

            <!-- Modale de gestion des chapitres -->
            <ManageChaptersModal
                :is-open="isManageChaptersModalOpen"
                :manga="currentManga"
                :chapters="mangaStore.mangaChapters[mangaId]?.items || []"
                :is-loading="mangaStore.loadingChapters"
                :is-saving="isSavingChapters"
                :error="chaptersError"
                @close="closeManageChaptersModal"
                @save="saveChaptersChanges"
            />

            <!-- Modale de suppression du manga -->
            <MangaDeleteModal
                :is-open="isDeleteModalOpen"
                :manga="currentManga"
                :is-loading="isDeleting"
                :error="deleteError"
                @close="closeDeleteModal"
                @confirm="confirmDeleteManga"
            />
        </div>

        <div v-else-if="isLoadingDetails" class="flex justify-center items-center h-64">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
        </div>

        <div v-else class="text-center text-gray-500 dark:text-gray-400 py-10 px-4">
            Aucun manga sélectionné ou trouvé.
        </div>

        </div>
    </div>
</template>

<script setup>
    import {
    ArrowPathIcon,
    BookmarkIcon,
    BookmarkSlashIcon,
    ChevronDoubleDownIcon,
    ChevronDoubleUpIcon,
    Cog6ToothIcon,
    PencilSquareIcon,
    TrashIcon,
    WrenchIcon
} from '@heroicons/vue/24/outline';
import { computed, onUnmounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

    import { useMangaDelete } from '../composables/useMangaDelete';
import { useMangaDetails } from '../composables/useMangaDetails';
import { useMangaEdit } from '../composables/useMangaEdit';
import { useMangaMonitoring } from '../composables/useMangaMonitoring';
import { useMangaPreferredSources } from '../composables/useMangaPreferredSources';
import { useMangaRefresh } from '../composables/useMangaRefresh';
import { useMangaVolumes } from '../composables/useMangaVolumes';

    import ManageChaptersModal from '../components/ManageChaptersModal.vue';
import MangaDeleteModal from '../components/MangaDeleteModal.vue';
import MangaEditModal from '../components/MangaEditModal.vue';
import MangaHeader from '../components/MangaHeader.vue';
import MangaPreferredSourcesModal from '../components/MangaPreferredSourcesModal.vue';
import MangaVolumeList from '../components/MangaVolumeList.vue';
import MercureListener from '../components/MercureListener.vue';

    import NotificationToast from '../../../../shared/components/ui/NotificationToast.vue';
import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
import { useMangaStore } from '../../application/store/mangaStore';

    const route = useRoute();
    const router = useRouter();
    const mangaStore = useMangaStore();

    const mangaId = computed(() => Number(route.params.id) || null);

    // État de la modale
    const isPreferredSourcesModalOpen = ref(false);
    const isManageChaptersModalOpen = ref(false);
    const isSavingChapters = ref(false);
    const chaptersError = ref(null);

    // État d'expansion des volumes
    const isAllExpanded = ref(false);
    const volumeListRef = ref(null);

    const {
        data: currentManga,
        isLoading: isLoadingDetails,
        isFetching: isRefreshingDetails,
        error: errorDetails,
        refetch: refetchMangaDetails
    } = useMangaDetails(mangaId);

    const {
        volumes,
        isLoading: isLoadingVolumes,
        isFetching: isRefreshingVolumes,
        error: errorVolumes
    } = useMangaVolumes(mangaId);

    const {
        sources: preferredSources,
        isLoading: isLoadingSources,
        error: sourcesError,
        isSaving: isSavingSources,
        savePreferredSources: saveSourcesOrder
    } = useMangaPreferredSources(mangaId);

    // Composable pour l'édition des mangas
    const {
        isEditModalOpen,
        openEditModal,
        closeEditModal,
        editManga,
        isLoading: isEditLoading,
        error: editError
    } = useMangaEdit();

    // Composable pour le refresh des métadonnées
    const {
        isRefreshing,
        refreshMetadata
    } = useMangaRefresh();

    // Composable pour le monitoring
    const {
        isToggling: isTogglingMonitoring,
        toggleMonitoring,
        toggleError: monitoringError
    } = useMangaMonitoring();

    // Composable pour la suppression
    const {
        isDeleteModalOpen,
        openDeleteModal,
        closeDeleteModal,
        deleteManga,
        isLoading: isDeleting,
        error: deleteError
    } = useMangaDelete();

    // Charger les chapitres dans le store quand le manga est chargé
    watch(
        mangaId,
        newId => {
            if (newId) {
                mangaStore.loadChapters(newId);
            }
        },
        { immediate: true }
    );

    const openPreferredSourcesModal = () => {
        isPreferredSourcesModalOpen.value = true;
    };

    const closePreferredSourcesModal = () => {
        isPreferredSourcesModalOpen.value = false;
    };

    const openManageChaptersModal = () => {
        isManageChaptersModalOpen.value = true;
    };

    const closeManageChaptersModal = () => {
        isManageChaptersModalOpen.value = false;
        chaptersError.value = null;
    };

    const confirmDeleteManga = async () => {
        if (!mangaId.value) return;

        try {
            await deleteManga(mangaId.value);
            // Rediriger vers la liste des mangas après suppression
            router.push('/manga');
        } catch (error) {
            console.error('Erreur lors de la suppression du manga:', error);
        }
    };

    const savePreferredSources = async (sourceIds) => {
        try {
            await saveSourcesOrder(sourceIds);
            closePreferredSourcesModal();
        } catch (error) {
            console.error('Erreur lors de la sauvegarde des sources préférées:', error);
        }
    };

    // Fonction pour sauvegarder l'édition du manga
    const saveMangaEdit = async (updateData) => {
        try {
            await editManga(mangaId.value, updateData);
        } catch (error) {
            console.error('Erreur lors de l\'édition du manga:', error);
        }
    };

    // Fonction pour sauvegarder les changements des chapitres
    const saveChaptersChanges = async (chaptersData) => {
        if (!mangaId.value) return;

        isSavingChapters.value = true;
        chaptersError.value = null;

        try {
            const response = await fetch('/api/chapters/batch-edit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    chapters: chaptersData
                })
            });

            if (!response.ok) {
                throw new Error('Erreur lors de la sauvegarde des chapitres');
            }

            // Recharger les chapitres et les volumes
            await mangaStore.loadChapters(mangaId.value);
            closeManageChaptersModal();
        } catch (error) {
            chaptersError.value = error.message;
            console.error('Erreur lors de la sauvegarde des chapitres:', error);
        } finally {
            isSavingChapters.value = false;
        }
    };

    // Fonction pour le refresh des métadonnées
    const handleRefreshMetadata = async () => {
        if (!mangaId.value) return;

        try {
            await refreshMetadata(mangaId.value);
        } catch (error) {
            // L'erreur est déjà gérée dans le composable avec les notifications
            console.error('Erreur lors du refresh:', error);
        }
    };

    // Fonction pour basculer le monitoring
    const handleToggleMonitoring = async () => {
        if (!mangaId.value || !currentManga.value) return;

        try {
            const newMonitoringState = !currentManga.value.monitored;
            await toggleMonitoring(mangaId.value, newMonitoringState);

            // Recharger les détails du manga pour mettre à jour l'état du monitoring
            await refetchMangaDetails();
        } catch (error) {
            console.error('Erreur lors du changement de monitoring:', error);
        }
    };

    // Fonction pour étendre/réduire tous les volumes
    const handleExpandAll = () => {
        if (!volumeListRef.value) return;

        if (isAllExpanded.value) {
            volumeListRef.value.collapseAllVolumes();
        } else {
            volumeListRef.value.expandAllVolumes();
        }
    };

    const toolbarConfig = computed(() => ({
        leftSection: [
            {
                icon: ArrowPathIcon,
                label: 'Refresh metadata',
                type: 'button',
                onClick: handleRefreshMetadata,
                loading: isRefreshing.value,
                disabled: isRefreshing.value
            },
            {
                icon: PencilSquareIcon,
                label: 'Manage chapters',
                type: 'button',
                onClick: openManageChaptersModal
            },
            {
                icon: Cog6ToothIcon,
                label: 'Preferred Sources',
                type: 'button',
                onClick: openPreferredSourcesModal
            }
        ],
        rightSection: [
            {
                icon: currentManga.value?.monitored ? BookmarkIcon : BookmarkSlashIcon,
                label: currentManga.value?.monitored ? 'Désactiver monitoring' : 'Activer monitoring',
                type: 'button',
                onClick: handleToggleMonitoring,
                loading: isTogglingMonitoring.value,
                disabled: isTogglingMonitoring.value,
                variant: currentManga.value?.monitored ? 'active' : 'default'
            },
            {
                icon: WrenchIcon,
                label: 'Edit',
                type: 'button',
                onClick: openEditModal
            },
            {
                icon: TrashIcon,
                label: 'Delete',
                type: 'button',
                onClick: openDeleteModal
            },
            {
                icon: isAllExpanded.value ? ChevronDoubleUpIcon : ChevronDoubleDownIcon,
                label: isAllExpanded.value ? 'Collapse all' : 'Expand all',
                type: 'button',
                onClick: handleExpandAll,
                variant: isAllExpanded.value ? 'active' : 'default'
            }
        ]
    }));

    const loading = computed(() => isLoadingDetails.value || isLoadingVolumes.value);
    const isRefreshingData = computed(() => isRefreshingDetails.value || isRefreshingVolumes.value || isRefreshing.value);
    const error = computed(() => errorDetails.value || errorVolumes.value);

    watch(
        mangaId,
        newId => {
            if (newId) {
                mangaStore.setCurrentMangaId(newId);
            }
        },
        { immediate: true }
    );

    onUnmounted(() => {
        mangaStore.clearCurrentMangaFocus();
    });
</script>
