<template>
    <div>
        <Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
        <div class="container mx-auto px-4">
            <MangaGrid :mangas="collection?.items || []" />
            <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 { onMounted } from 'vue';
    import { useRouter } from 'vue-router';
    import { storeToRefs } from 'pinia';
    import { useMangaStore } from '../../application/store/mangaStore';
    import MangaGrid from '../components/MangaGrid.vue';
    import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
    import {
        ArrowPathIcon,
        MagnifyingGlassIcon,
        Cog6ToothIcon,
        EyeIcon,
        ArrowsUpDownIcon,
        FunnelIcon
    } from '@heroicons/vue/24/outline';

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

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

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

    const toolbarConfig = {
        leftSection: [
            {
                icon: ArrowPathIcon,
                label: 'Refresh',
                type: 'button',
                onClick: () => mangaStore.refreshCollectionInBackground(),
                active: isBackgroundLoading
            },
            { icon: MagnifyingGlassIcon, label: 'Search', type: 'button', onClick: () => {} }
        ],
        rightSection: [
            { icon: Cog6ToothIcon, type: 'button', onClick: () => {} },
            {
                icon: EyeIcon,
                type: 'dropdown',
                label: 'View',
                items: [
                    { label: 'List', onClick: () => {} },
                    { label: 'Grid', onClick: () => {} }
                ]
            },
            {
                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>
