<template>
  <v-sheet class="d-flex" color="transparent" style="gap: 50px">
    <v-list bg-color="transparent" class="d-flex" style="border-radius: 5px">
      <v-list-subheader>Stats:</v-list-subheader>
      <v-list-item style="color: #069b35" title="latest">{{ stats.latest }}</v-list-item>
      <v-list-item style="color: #b97808" title="queued">{{ stats.queued }}</v-list-item>
      <v-list-item style="color: #878787" title="skipped">{{ stats.skipped }}</v-list-item>
      <v-list-item style="color: #b30303" title="failed">{{ stats.failed }}</v-list-item>
    </v-list>
    <v-list bg-color="transparent" class="d-flex" style="border-radius: 5px">
      <v-list-subheader>LTO:</v-list-subheader>
      <v-list-item style="color: #069b35" title="enabled">{{ stats.lto.enabled }}</v-list-item>
      <v-list-item style="color: #b30303" title="disabled">{{ stats.lto.disabled }}</v-list-item>
      <v-list-item style="color: #878787" title="unknown">{{ stats.lto.unknown }}</v-list-item>
    </v-list>
  </v-sheet>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { type Stats } from '@/types/Stats'

const stats = ref<Stats>({
  latest: 0,
  queued: 0,
  skipped: 0,
  failed: 0,
  lto: {
    enabled: 0,
    disabled: 0,
    unknown: 0
  }
})

const getStats = () => {
  fetch('https://api.alhp.dev/stats')
    .then((response) => {
      if (!response.ok) throw new Error(response.statusText)
      return response.json()
    })
    .then((statistics) => {
      stats.value = statistics
    })
    .catch((error) => {
      console.error(error)
    })
    .finally(() => {})
}

onMounted(() => {
  getStats()
})
</script>
