<template>
  <v-app class="app-root">
    <main-nav />

    <v-main class="main-content">
      <v-container class="content-container" fluid>
        <build-server-stats />
        <currently-building />
        <packages />
      </v-container>
    </v-main>
  </v-app>
</template>

<script lang="ts" setup>
import MainNav from '@/components/MainNav.vue'
import BuildServerStats from '@/components/BuildServerStats.vue'
import CurrentlyBuilding from '@/components/CurrentlyBuilding.vue'
import Packages from '@/components/Packages.vue'
import { useStatsStore } from '@/stores/statsStore'
import { onBeforeMount } from 'vue'
import { usePackagesStore } from '@/stores'
import { useAutoRefresh } from '@/composables/useAutoRefresh'

const statsStore = useStatsStore()
const packagesStore = usePackagesStore()

const intervalMinutes = Number(import.meta.env.VITE_UPDATE_INTERVAL) || 5
const { start: startAutoRefresh } = useAutoRefresh(() => {
  statsStore.fetchStats()
  packagesStore.fetchPackages()
  packagesStore.fetchCurrentlyBuilding()
}, intervalMinutes * 60 * 1000)

onBeforeMount(() => {
  statsStore.fetchStats()
  packagesStore.fetchPackages(true)
  packagesStore.fetchCurrentlyBuilding()
  startAutoRefresh()
})
</script>

<style scoped>
.app-root {
  background: var(--color-bg-primary) !important;
  min-height: 100vh;
}

.main-content {
  padding-top: var(--space-4);
  padding-bottom: var(--space-8);
}

.content-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-4);
}

@media (max-width: 600px) {
  .main-content {
    padding-top: var(--space-2);
  }

  .content-container {
    padding: var(--space-4);
  }
}
</style>
