<template>
  <Stack gap="0">
    <!-- Loading -->
    <Section v-if="isLoading" variant="plain" paddingY="lg">
      <Stack align="center" justify="center" gap="4">
        <Spinner />
        <Text tone="muted">{{ t('catalogProducts.states.loading') }}</Text>
      </Stack>
    </Section>

    <!-- Empty -->
    <Section v-else-if="products.length === 0" variant="plain" paddingY="lg">
      <Card padding="lg">
        <Stack align="center" gap="4">
          <IconCircle tone="primary">
            <Icon name="lucide:package" size="24" />
          </IconCircle>
          <Heading :level="2">{{ t('catalogProducts.empty.title') }}</Heading>
          <Text tone="muted">{{ t('catalogProducts.empty.subtitle') }}</Text>
        </Stack>
      </Card>
    </Section>

    <!-- Content -->
    <Section v-else variant="plain" paddingY="lg">
      <Stack gap="4">
        <!-- Header -->
        <div>
          <Heading :level="1">{{ t('catalogProducts.header.title') }}</Heading>
          <Text tone="muted" size="sm">{{ t('catalogProducts.header.subtitle', { count: products.length }) }}</Text>
        </div>

        <!-- Products grid -->
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
          <HubProductCard
            v-for="product in products"
            :key="product.uuid"
            :name="product.name || ''"
            :price-history="getMockPriceHistory(product.uuid)"
            @select="goToProduct(product.uuid)"
          />
        </div>
      </Stack>
    </Section>
  </Stack>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'topnav'
})

const localePath = useLocalePath()
const { t } = useI18n()

const { items: products, isLoading, init } = useCatalogProducts()

// Navigate to product detail
const goToProduct = (productId: string) => {
  navigateTo(localePath(`/catalog/offers/${productId}`))
}

// Mock price history generator (seeded by uuid for consistent results)
const getMockPriceHistory = (uuid: string): number[] => {
  const seed = uuid.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
  const basePrice = 100 + (seed % 200)
  return Array.from({ length: 7 }, (_, i) => {
    const variation = Math.sin(seed + i * 0.5) * 20 + Math.cos(seed * 0.3 + i) * 10
    return Math.round(basePrice + variation)
  })
}

// Initialize
await init()

useHead(() => ({
  title: t('catalogProducts.header.title')
}))
</script>
