<template>
    <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-7 xl:grid-cols-8 gap-2 p-4">
        <MangaCard
            v-for="manga in mangas"
            :key="manga.id"
            :manga="manga"
            @edit="openEdit"
            @sources="openSources"
            @refresh="doRefresh" />
    </div>

    <!-- Modales -->
    <MangaEditModal
        :is-open="isEditModalOpen"
        :manga="selectedManga"
        :is-saving="editIsLoading"
        :error="editError"
        @close="closeEditModal"
        @save="handleSaveEdit" />

    <MangaPreferredSourcesModal
        :is-open="isSourcesModalOpen"
        :sources="preferredSources"
        :is-loading="sourcesIsLoading"
        :error="sourcesError"
        :is-saving="sourcesIsSaving"
        @close="isSourcesModalOpen = false"
        @save="handleSaveSources" />
</template>

<script setup>
import { computed, ref } from 'vue';
import { useMangaEdit } from '../composables/useMangaEdit';
import { useMangaPreferredSources } from '../composables/useMangaPreferredSources';
import { useMangaRefresh } from '../composables/useMangaRefresh';
import MangaCard from './MangaCard.vue';
import MangaEditModal from './MangaEditModal.vue';
import MangaPreferredSourcesModal from './MangaPreferredSourcesModal.vue';

defineProps({
    mangas: {
        type: Array,
        required: true
    }
});

const selectedManga = ref(null);
const isSourcesModalOpen = ref(false);

// ── Edit ──────────────────────────────────────────────────
const { isEditModalOpen, openEditModal, closeEditModal, editManga, isLoading: editIsLoading, error: editError } = useMangaEdit();

function openEdit(manga) {
    selectedManga.value = manga;
    openEditModal();
}

async function handleSaveEdit(data) {
    if (!selectedManga.value) return;
    await editManga(selectedManga.value.id, data);
}

// ── Sources préférées ─────────────────────────────────────
const selectedMangaId = computed(() => selectedManga.value?.id ?? null);
const {
    sources: preferredSources,
    isLoading: sourcesIsLoading,
    error: sourcesError,
    isSaving: sourcesIsSaving,
    savePreferredSources
} = useMangaPreferredSources(selectedMangaId);

function openSources(manga) {
    selectedManga.value = manga;
    isSourcesModalOpen.value = true;
}

function handleSaveSources(sourceIds) {
    savePreferredSources(sourceIds);
    isSourcesModalOpen.value = false;
}

// ── Refresh ───────────────────────────────────────────────
const { refreshMetadata } = useMangaRefresh();
const refreshingId = ref(null);

async function doRefresh(manga) {
    if (refreshingId.value) return;
    refreshingId.value = manga.id;
    try {
        await refreshMetadata(manga.id);
    } finally {
        refreshingId.value = null;
    }
}
</script>
