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

interface Routine { id: number, name: string, description: string | null, estimated_minutes: number | null, exercises?: unknown[] }
const { data, pending } = await useAsyncData('routines', () => api<{ data: Routine[] }>('/api/routines'), { lazy: true })
</script>

<template>
  <div class="space-y-4">
    <div class="flex items-center justify-between">
      <h1 class="text-2xl font-black tracking-tight">{{ t('nav.routines') }}</h1>
      <UButton to="/routines/new" icon="i-lucide-plus" color="primary" size="sm" :label="t('routines.new')" />
    </div>
    <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('routines.none') }}</p>
    <div v-else class="space-y-2">
      <UCard v-for="r in data.data" :key="r.id" :ui="{ body: 'p-3' }" class="cursor-pointer hover:border-flame-400 transition-colors" @click="navigateTo(`/routines/${r.id}`)">
        <div class="flex items-center justify-between gap-2">
          <div class="min-w-0">
            <p class="font-semibold truncate">{{ r.name }}</p>
            <p class="text-xs text-zinc-500">{{ (r.exercises?.length ?? 0) }} {{ t('routines.exercises') }}<span v-if="r.estimated_minutes"> · ~{{ r.estimated_minutes }} min</span></p>
          </div>
          <UButton icon="i-lucide-play" color="primary" variant="soft" size="sm" @click.stop="navigateTo(`/session/new?routine=${r.id}`)" />
        </div>
      </UCard>
    </div>
  </div>
</template>
