<script setup lang="ts">
definePageMeta({ middleware: 'auth' })
const { t } = useI18n()
const { api } = useApi()

interface Sess { id: number, title: string | null, started_at: string, total_volume: number | null, set_count: number }
const { data, pending } = await useAsyncData('history', () => api<{ data: Sess[] }>('/api/history'), { lazy: true })
</script>

<template>
  <div class="space-y-4">
    <h1 class="text-2xl font-black tracking-tight">{{ t('nav.history') }}</h1>
    <div v-if="pending && !data" class="flex justify-center py-16"><SfLogo :size="56" loader /></div>
    <p v-else-if="!data?.data.length" class="text-center text-zinc-400 py-16">{{ t('dashboard.noSessions') }}</p>
    <div v-else class="space-y-2">
      <UCard v-for="s in data.data" :key="s.id" :ui="{ body: 'p-3' }">
        <div class="flex items-center justify-between">
          <div>
            <p class="font-medium">{{ s.title || t('dashboard.session') }}</p>
            <p class="text-xs text-zinc-500">{{ new Date(s.started_at).toLocaleString() }} · {{ s.set_count }} {{ t('dashboard.sets') }}</p>
          </div>
          <span v-if="s.total_volume" class="text-sm font-bold sf-flame-text">{{ Math.round(s.total_volume) }} kg</span>
        </div>
      </UCard>
    </div>
  </div>
</template>
