<template>
  <v-sheet
    v-if="!statsStore.state.loading && !statsStore.state.error"
    :style="sheetStyles"
    class="d-flex"
    color="transparent">
    <StatsListSection title="Stats">
      <StatItem
        v-for="(stat, key) in generalStats"
        :key="key"
        :color="stat.color"
        :count="stat.count"
        :title="key" />
    </StatsListSection>

    <StatsListSection v-if="showLto" title="LTO">
      <StatItem
        v-for="(stat, key) in ltoStats"
        :key="key"
        :color="stat.color"
        :count="stat.count"
        :title="key" />
    </StatsListSection>
  </v-sheet>
  <v-sheet
    v-else-if="statsStore.state.loading"
    :style="sheetStyles"
    class="d-flex align-center"
    color="transparent">
    <v-progress-circular class="mr-2" color="white" indeterminate size="20"></v-progress-circular>
    <span class="text-caption">Loading stats...</span>
  </v-sheet>
  <v-sheet
    v-else-if="statsStore.state.error"
    :style="sheetStyles"
    class="d-flex align-center"
    color="transparent">
    <span class="text-caption text-error">Error loading stats</span>
  </v-sheet>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useStatsStore } from '@/stores/statsStore'
import StatsListSection from '@/components/MainNav/BuildStats/StatsListSection.vue'
import StatItem from '@/components/MainNav/BuildStats/StatItem.vue'

interface Props {
  showLto?: boolean
}

withDefaults(defineProps<Props>(), {
  showLto: true
})

const COLORS = {
  SUCCESS: '#069b35',
  WARNING: '#b97808',
  ERROR: '#b30303',
  NEUTRAL: '#878787'
}

const sheetStyles = { gap: '50px' }

const statsStore = useStatsStore()

const generalStats = computed(() => ({
  latest: {
    count: statsStore.state.stats?.latest || 0,
    color: COLORS.SUCCESS
  },
  queued: {
    count: statsStore.state.stats?.queued || 0,
    color: COLORS.WARNING
  },
  building: {
    count: statsStore.state.stats?.building || 0,
    color: COLORS.WARNING
  },
  skipped: {
    count: statsStore.state.stats?.skipped || 0,
    color: COLORS.NEUTRAL
  },
  failed: {
    count: statsStore.state.stats?.failed || 0,
    color: COLORS.ERROR
  }
}))

const ltoStats = computed(() => ({
  enabled: {
    count: statsStore.state.stats?.lto?.enabled || 0,
    color: COLORS.SUCCESS
  },
  disabled: {
    count: statsStore.state.stats?.lto?.disabled || 0,
    color: COLORS.ERROR
  },
  unknown: {
    count: statsStore.state.stats?.lto?.unknown || 0,
    color: COLORS.NEUTRAL
  }
}))
</script>
