<template>
    <div>
        <Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
        <div class="container mx-auto px-4">
            <MangaGrid v-if="viewMode === 'grid'" :mangas="collection?.items || []" />
            <MangaList
                v-else-if="viewMode === 'list'"
                :mangas="collection?.items || []"
                @manga-click="handleMangaClick" />
            <div
                v-if="isBackgroundLoading"
                class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg">
                Mise à jour en cours...
            </div>
        </div>
    </div>
</template>

<script setup>
    import {
    ArrowPathIcon,
    ArrowsUpDownIcon,
    Cog6ToothIcon,
    EyeIcon,
    FunnelIcon,
    MagnifyingGlassIcon
} from '@heroicons/vue/24/outline';
import { storeToRefs } from 'pinia';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
import { useMangaStore } from '../../application/store/mangaStore';
import MangaGrid from '../components/MangaGrid.vue';
import MangaList from '../components/MangaList.vue';

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

    const {
        collection,
        loadingCollection: loading,
        errorCollection: error,
        isBackgroundLoadingCollection: isBackgroundLoading
    } = storeToRefs(mangaStore);

    const viewMode = ref('grid');

    onMounted(() => {
        mangaStore.loadCollection();
    });

    const handleMangaClick = manga => {
        router.push({ name: 'manga-details', params: { id: manga.id } });
    };

    const toolbarConfig = {
        leftSection: [
            {
                icon: ArrowPathIcon,
                label: 'Refresh',
                type: 'button',
                onClick: () => mangaStore.refreshCollectionInBackground(),
                active: isBackgroundLoading.value
            },
            { icon: MagnifyingGlassIcon, label: 'Search', type: 'button', onClick: () => {} }
        ],
        rightSection: [
            { icon: Cog6ToothIcon, type: 'button', onClick: () => {} },
            {
                icon: EyeIcon,
                type: 'dropdown',
                label: 'View',
                items: [
                    { label: 'List', onClick: () => (viewMode.value = 'list') },
                    { label: 'Grid', onClick: () => (viewMode.value = 'grid') }
                ]
            },
            {
                icon: ArrowsUpDownIcon,
                type: 'dropdown',
                label: 'Sort',
                items: [
                    { label: 'Title', onClick: () => {} },
                    { label: 'Author', onClick: () => {} },
                    { label: 'Status', onClick: () => {} },
                    { label: 'Year', onClick: () => {} }
                ]
            },
            {
                icon: FunnelIcon,
                type: 'dropdown',
                label: 'Filter',
                items: [
                    { label: 'All', onClick: () => {} },
                    { label: 'Completed', onClick: () => {} },
                    { label: 'In Progress', onClick: () => {} }
                ]
            }
        ]
    };
</script>
