<script setup lang="ts">
import { LayoutDashboard } from '@lucide/vue'

import AdminDashboardActivitySection from '../../components/admin/AdminDashboardActivitySection.vue'
import AdminDashboardChecksSection from '../../components/admin/AdminDashboardChecksSection.vue'
import AdminDashboardHeroSection from '../../components/admin/AdminDashboardHeroSection.vue'
import AdminDashboardPublicHealthCard from '../../components/admin/AdminDashboardPublicHealthCard.vue'
import AdminDashboardQueueCard from '../../components/admin/AdminDashboardQueueCard.vue'
import AdminDashboardReadinessCard from '../../components/admin/AdminDashboardReadinessCard.vue'
import AdminDashboardTimelineStrip from '../../components/admin/AdminDashboardTimelineStrip.vue'
import AdminDashboardTopCategoriesSection from '../../components/admin/AdminDashboardTopCategoriesSection.vue'
import AdminDashboardYearTotalsSection from '../../components/admin/AdminDashboardYearTotalsSection.vue'
import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
import AdminSeasonToolbar from '../../components/admin/AdminSeasonToolbar.vue'
import { useAdminDashboardOverview } from '../../components/admin/useAdminDashboardOverview'

const {
  store,
  activities,
  topCategories,
  metricCards,
  liveSummary,
  liveStatusBadge,
  liveStatusTone,
  maxCategoryValue,
  topCategoryTitle,
  topCategoryTotalLabel,
  yearTotals,
  queueItems,
  operationChecks,
  timelinePhases,
  activeCountdown,
  phaseMismatch,
  phaseMismatchLabel,
  readinessItems,
  readinessScore,
  publicHealthItems,
  adminGreeting,
  canViewAuditLog,
  canOpenYears,
} = useAdminDashboardOverview()
</script>

<template>
  <div class="space-y-6">
    <AdminPageHeader
      eyebrow="Dashboard"
      :description="`${adminGreeting} · Saisonlage, Queues und Public-Readiness für das gewählte Jahr.`"
      :icon="LayoutDashboard"
    />

    <AdminSeasonToolbar />

    <AdminDashboardTimelineStrip
      :timeline-phases="timelinePhases"
      :active-countdown="activeCountdown"
      :phase-mismatch="phaseMismatch"
      :phase-mismatch-label="phaseMismatchLabel"
      :can-open-years="canOpenYears"
    />

    <section class="grid gap-4 xl:grid-cols-[1.15fr_0.85fr]">
      <AdminDashboardHeroSection
        :metric-cards="metricCards"
        :live-summary="liveSummary"
        :live-status-badge="liveStatusBadge"
        :live-status-tone="liveStatusTone"
      />

      <AdminDashboardQueueCard :queue-items="queueItems" />
    </section>

    <AdminDashboardChecksSection :operation-checks="operationChecks" />

    <section class="grid gap-6 xl:grid-cols-[0.95fr_1.05fr]">
      <AdminDashboardReadinessCard
        :readiness-items="readinessItems"
        :readiness-score="readinessScore"
      />

      <AdminDashboardPublicHealthCard :public-health-items="publicHealthItems" />
    </section>

    <section class="grid gap-6 xl:grid-cols-[0.92fr_1.08fr]">
      <AdminDashboardYearTotalsSection
        :year="store.adminSeasonDetail.year"
        :year-totals="yearTotals"
      />

      <AdminDashboardTopCategoriesSection
        :max-category-value="maxCategoryValue"
        :top-category-title="topCategoryTitle"
        :top-category-total-label="topCategoryTotalLabel"
        :top-categories="topCategories"
      />
    </section>

    <AdminDashboardActivitySection
      :activities="activities"
      :can-view-audit-log="canViewAuditLog"
    />
  </div>
</template>
