<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,
  loading,
  error,
  isBackgroundLoading
} = storeToRefs(mangaStore);

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

const toolbarConfig = {
  leftSection: [
    {
      icon: ArrowPathIcon,
      label: 'Refresh',
      onClick: () => mangaStore.refreshCollectionInBackground(),
      active: isBackgroundLoading
    },
    { icon: MagnifyingGlassIcon, label: 'Search', onClick: () => {} }
  ],
  rightSection: [
    { icon: Cog6ToothIcon, onClick: () => {} },
    { icon: EyeIcon, onClick: () => {} },
    { icon: ArrowsUpDownIcon, onClick: () => {} },
    { icon: FunnelIcon, onClick: () => {} }
  ]
};
</script>
