<template>
  <Section variant="plain" paddingY="md">
    <Card>
      <Stack gap="4">
        <Stack direction="row" align="center" justify="between">
          <Heading :level="2">Предложения</Heading>
          <NuxtLink :to="localePath('/catalog/offers')">
            <Button variant="secondary" size="small">Смотреть все</Button>
          </NuxtLink>
        </Stack>

        <Grid :cols="1" :md="2" :lg="3" :gap="4">
          <Card
            v-for="offer in displayedOffers"
            :key="offer.uuid"
            padding="sm"
            tone="muted"
            interactive
          >
            <Stack gap="3">
              <Stack gap="1">
                <Text size="base" weight="semibold">{{ offer.title }}</Text>
                <Text tone="muted">{{ offer.locationName || 'Локация не указана' }}</Text>
              </Stack>

              <Stack direction="row" gap="2" wrap>
                <Pill
                  v-for="line in (offer.lines || []).slice(0, 3)"
                  :key="line?.uuid"
                  variant="outline"
                >
                  {{ line?.productName }}
                </Pill>
                <Pill v-if="(offer.lines?.length || 0) > 3" variant="outline">
                  +{{ (offer.lines?.length || 0) - 3 }}
                </Pill>
              </Stack>

              <Stack direction="row" align="center" justify="between">
                <Badge :variant="getStatusVariant(offer.status)">
                  {{ getStatusLabel(offer.status) }}
                </Badge>
                <Text v-if="offer.validUntil" tone="muted" size="sm">
                  до {{ formatDate(offer.validUntil) }}
                </Text>
              </Stack>
            </Stack>
          </Card>
        </Grid>

        <Stack v-if="offers.length === 0" align="center" gap="2">
          <Text tone="muted">Нет активных предложений</Text>
        </Stack>
      </Stack>
    </Card>
  </Section>
</template>

<script setup lang="ts">
interface OfferLine {
  uuid?: string | null
  productName?: string | null
}

interface Offer {
  uuid?: string | null
  title?: string | null
  locationName?: string | null
  status?: string | null
  validUntil?: string | null
  lines?: (OfferLine | null)[] | null
}

const props = defineProps<{
  offers: Offer[]
}>()

const localePath = useLocalePath()

const displayedOffers = computed(() => props.offers.slice(0, 6))

const getStatusVariant = (status: string | null | undefined) => {
  const variants: Record<string, string> = {
    ACTIVE: 'success',
    DRAFT: 'warning',
    CANCELLED: 'error',
    CLOSED: 'muted'
  }
  return variants[status || ''] || 'muted'
}

const getStatusLabel = (status: string | null | undefined) => {
  const labels: Record<string, string> = {
    ACTIVE: 'Активно',
    DRAFT: 'Черновик',
    CANCELLED: 'Отменено',
    CLOSED: 'Закрыто'
  }
  return labels[status || ''] || status || 'Неизвестно'
}

const formatDate = (dateStr: string | null | undefined) => {
  if (!dateStr) return ''
  try {
    return new Intl.DateTimeFormat('ru', {
      day: 'numeric',
      month: 'short'
    }).format(new Date(dateStr))
  } catch {
    return dateStr
  }
}
</script>
