<script setup lang="ts">
import { computed } from 'vue'
import Column from 'primevue/column'
import DataTable from 'primevue/datatable'

import Card from '../../components/ui/Card.vue'
import { useAwardsStore } from '../../stores/awards'

const store = useAwardsStore()

const metrics = computed(() => store.admin.metrics)
const activities = computed(() => store.admin.activities)
const topCategories = computed(() => store.admin.topCategories)
</script>

<template>
  <div class="space-y-6">
    <div class="grid gap-5 lg:grid-cols-4">
      <Card
        v-for="metric in metrics"
        :key="metric.label"
        class="p-7"
      >
        <p class="text-xs font-semibold uppercase tracking-[0.25em] text-violet-500">{{ metric.label }}</p>
        <strong class="mt-4 block text-4xl text-violet-800">{{ metric.value.toLocaleString('de-DE') }}</strong>
        <p class="mt-2 text-sm text-slate-500">{{ metric.note }}</p>
      </Card>
    </div>

    <div class="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
      <Card class="p-7">
        <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Top Kategorien nach Votes</h2>
        <DataTable :value="topCategories" class="mt-6" striped-rows>
          <Column field="category" header="Kategorie" />
          <Column field="votes" header="Votes">
            <template #body="{ data }">
              {{ Number(data.votes).toLocaleString('de-DE') }}
            </template>
          </Column>
        </DataTable>
      </Card>

      <Card class="p-7">
        <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Letzte Aktivitaeten</h2>
        <div class="mt-6 space-y-4">
          <div
            v-for="activity in activities"
            :key="activity.label"
            class="rounded-[26px] border border-violet-100 bg-violet-50/60 px-5 py-5"
          >
            <p class="font-semibold text-slate-800">{{ activity.label }}</p>
            <p class="mt-1 text-sm text-slate-500">{{ activity.age }}</p>
          </div>
          <p v-if="activities.length === 0" class="rounded-[26px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
            Noch keine aktuellen Audit-Aktivitaeten vorhanden.
          </p>
        </div>
      </Card>
    </div>
  </div>
</template>
