<template>
    <AppLayout>
        <PanelFolder title="CSV Product Import" :badge="productImportCount">
            <ProductImport :import-jobs="importJobs" />
        </PanelFolder>
        <PanelFolder title="Order Fulfillment · Saga" :badge="orders.length || undefined">
            <OrderFulfillment :orders="orders" />
        </PanelFolder>
        <PanelFolder title="User Data Migration" :badge="migrationCount">
            <UserMigration :import-jobs="importJobs" />
        </PanelFolder>
        <PanelFolder title="External API Sync" :default-open="false">
            <ExternalApiSync />
        </PanelFolder>
        <PanelFolder title="Webhook Delivery" :default-open="false">
            <WebhookDelivery />
        </PanelFolder>
        <PanelFolder title="Data Enrichment Pipeline" :default-open="false">
            <DataEnrichment />
        </PanelFolder>
        <PanelFolder title="Eloquent Query Pipeline" :default-open="false">
            <EloquentQuery />
        </PanelFolder>
        <PanelFolder title="System Health Monitor" :default-open="false">
            <SystemMonitor />
        </PanelFolder>
    </AppLayout>
</template>

<script setup>
import { computed } from 'vue';
import AppLayout from '../Layouts/AppLayout.vue';
import PanelFolder from '../Components/PanelFolder.vue';
import ProductImport from '../Components/ProductImport.vue';
import OrderFulfillment from '../Components/OrderFulfillment.vue';
import UserMigration from '../Components/UserMigration.vue';
import ExternalApiSync from '../Components/ExternalApiSync.vue';
import WebhookDelivery from '../Components/WebhookDelivery.vue';
import DataEnrichment from '../Components/DataEnrichment.vue';
import EloquentQuery from '../Components/EloquentQuery.vue';
import SystemMonitor from '../Components/SystemMonitor.vue';

const props = defineProps({
    importJobs: { type: Array, default: () => [] },
    orders: { type: Array, default: () => [] },
});

const productImportCount = computed(() => {
    const count = props.importJobs.filter(j => j.type === 'product_import').length;
    return count || undefined;
});

const migrationCount = computed(() => {
    const count = props.importJobs.filter(j => j.type === 'user_migration').length;
    return count || undefined;
});
</script>
