<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useQuery } from '@tanstack/vue-query'
import { computed } from 'vue'
import { fetchDashboard } from '@/api/dashboard'
import { fetchSearch } from '@/api/search'
import OrgDashboard from '@/components/dashboard/OrgDashboard.vue'
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'

const route = useRoute()
const org = computed(() => route.params.org as string)

const { data: overview, isLoading: overviewLoading } = useQuery({
  queryKey: ['dashboard', org],
  queryFn: () => fetchDashboard(org.value),
})

// Derive facets from a no-query search
const { data: searchData } = useQuery({
  queryKey: ['facets', org],
  queryFn: () => fetchSearch(org.value, {}),
})

const facets = computed(() => searchData.value?.facets ?? { status: {}, repo: {}, team: {}, tag: {} })
</script>

<template>
  <LoadingSpinner v-if="overviewLoading" />
  <OrgDashboard v-else-if="overview" :overview="overview" :facets="facets" />
</template>
