<template>
  <v-sheet :style="sheetStyles" class="d-flex" color="transparent">
    <!-- Dynamically render the "Stats" section -->
    <v-list :style="listStyles" bg-color="transparent" class="d-flex">
      <v-list-subheader>Stats:</v-list-subheader>
      <v-list-item
        v-for="item in statsList"
        :key="item.label"
        :style="{ color: item.color }"
        :title="item.label">
        {{ item.value }}
      </v-list-item>
    </v-list>
    <!-- Dynamically render the "LTO" section -->
    <v-list :style="listStyles" bg-color="transparent" class="d-flex">
      <v-list-subheader>LTO:</v-list-subheader>
      <v-list-item
        v-for="item in ltoList"
        :key="item.label"
        :style="{ color: item.color }"
        :title="item.label">
        {{ item.value }}
      </v-list-item>
    </v-list>
  </v-sheet>
</template>

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

// Define reusable styles and colors
const sheetStyles = { gap: '50px' }
const listStyles = { borderRadius: '5px' }
const colors = {
  latest: '#069b35',
  queued: '#b97808',
  skipped: '#878787',
  failed: '#b30303',
  enabled: '#069b35',
  disabled: '#b30303',
  unknown: '#878787'
}

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

// Map stats and LTO data for simpler rendering in the template
const statsList = ref([
  { label: 'latest', value: stats.value.latest, color: colors.latest },
  { label: 'queued', value: stats.value.queued, color: colors.queued },
  { label: 'skipped', value: stats.value.skipped, color: colors.skipped },
  { label: 'failed', value: stats.value.failed, color: colors.failed }
])

const ltoList = ref([
  { label: 'enabled', value: stats.value.lto.enabled, color: colors.enabled },
  { label: 'disabled', value: stats.value.lto.disabled, color: colors.disabled },
  { label: 'unknown', value: stats.value.lto.unknown, color: colors.unknown }
])

// Function to fetch stats data (refactored with async/await)
const getStats = async (): Promise<void> => {
  try {
    const response = await fetch('https://api.alhp.dev/stats')
    if (!response.ok) throw new Error(response.statusText)

    const statistics = await response.json()
    stats.value = statistics

    // Update lists with fresh data
    statsList.value = [
      { label: 'latest', value: stats.value.latest, color: colors.latest },
      { label: 'queued', value: stats.value.queued, color: colors.queued },
      { label: 'skipped', value: stats.value.skipped, color: colors.skipped },
      { label: 'failed', value: stats.value.failed, color: colors.failed }
    ]
    ltoList.value = [
      { label: 'enabled', value: stats.value.lto.enabled, color: colors.enabled },
      { label: 'disabled', value: stats.value.lto.disabled, color: colors.disabled },
      { label: 'unknown', value: stats.value.lto.unknown, color: colors.unknown }
    ]
  } catch (error) {
    console.error('Failed to fetch stats:', error)
  }
}

// Fetch stats on mount
onMounted(() => {
  getStats()
})
</script>
