<script setup lang="ts">
import { useQuery, useQueryClient } from '@tanstack/vue-query'
import { fetchIndexingOverview, triggerReindex } from '@/api/admin'
import IndexingDashboard from '@/components/admin/IndexingDashboard.vue'
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'

const queryClient = useQueryClient()

const { data, isLoading } = useQuery({
  queryKey: ['admin-indexing'],
  queryFn: fetchIndexingOverview,
  refetchInterval: 5000,
})

async function handleReindex(installationId: number) {
  await triggerReindex(installationId)
  queryClient.invalidateQueries({ queryKey: ['admin-indexing'] })
}
</script>

<template>
  <div>
    <h1 class="text-2xl font-bold font-display text-slate-800 dark:text-slate-100 mb-6">Indexing Administration</h1>
    <LoadingSpinner v-if="isLoading" />
    <IndexingDashboard v-else-if="data" :overview="data" @reindex="handleReindex" />
  </div>
</template>
