<script setup lang="ts">
import { ref } from 'vue'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardFooter, CardImage } from '@/components/ui/card'
import { Image } from '@/components/ui/image'
import { Price } from '@/components/ui/price'
import { Rating } from '@/components/ui/rating'
import { SwatchFallback, SwatchImage } from '@/components/ui/swatch'
import { SwatchGroup, SwatchGroupItem } from '@/components/ui/swatch-group'
import type { PriceType } from '@/lib/format'

interface Sibling {
  key: string
  name?: string
  cover?: { src?: string }
  link?: { path?: string }
  colors?: {
    mainColorHex?: string
    exactColorHex?: string
    exactColorName?: string
  }
}

interface Product {
  name?: string
  key?: string
  link?: { path?: string }
  price: PriceType
  cover?: { src?: string }
  rating?: number
  reviewCount?: number
  badge?: string
  clearout?: boolean
  inStore?: boolean
  siblings?: { items?: Sibling[] }
}

const props = withDefaults(defineProps<{
  product?: Product
}>(), {
  product: () => ({
    name: 'Classic Leather Sneakers',
    key: 'product-1',
    price: { amount: 12999, currency: 'EUR', ref: 15999 },
    cover: { src: '/placeholder.svg' },
    rating: 4.5,
    reviewCount: 128,
    badge: 'Sale',
    clearout: true,
    inStore: false,
    siblings: {
      items: [
        { key: 'sibling-1', name: 'White', cover: { src: '/placeholder.svg' }, colors: { exactColorHex: '#FFFFFF', exactColorName: 'White' } },
        { key: 'sibling-2', name: 'Black', cover: { src: '/placeholder.svg' }, colors: { exactColorHex: '#1A1A1A', exactColorName: 'Black' } },
        { key: 'sibling-3', name: 'Navy', cover: { src: '/placeholder.svg' }, colors: { exactColorHex: '#1E3A5F', exactColorName: 'Navy' } },
      ],
    },
  }),
})

const selectedSibling = ref(props.product.key ?? props.product.siblings?.items?.[0]?.key ?? '')
</script>

<template>
  <Card class="group w-full max-w-xs overflow-hidden">
    <CardImage class="relative">
      <Image
        :src="product.cover?.src ?? '/placeholder.svg'"
        :alt="product.name"
        class="aspect-[3/4] w-full object-cover transition-transform duration-300 group-hover:scale-105"
      />
      <Badge
        v-if="product.badge"
        variant="default"
        color="promo"
        class="absolute left-3 top-3"
      >
        {{ product.badge }}
      </Badge>
      <div v-if="product.clearout || product.inStore" class="absolute right-3 top-3 flex flex-col gap-1">
        <Badge v-if="product.clearout" variant="default" color="discount">
          Clearout
        </Badge>
        <Badge v-if="product.inStore" variant="default" color="positive">
          In Store
        </Badge>
      </div>
    </CardImage>

    <CardContent class="space-y-2 p-4">
      <p class="text-xs text-muted-foreground">
        Flagship
      </p>
      <h3 class="line-clamp-1 text-sm font-medium">
        {{ product.name }}
      </h3>

      <Rating v-if="product.rating" :rating="product.rating" size="sm">
        <template #meta>
          <span class="text-xs text-muted-foreground">({{ product.reviewCount }})</span>
        </template>
      </Rating>

      <Price
        :price="product.price"
      />

      <SwatchGroup
        v-if="product.siblings?.items?.length"
        v-model="selectedSibling"
        type="single"
        size="sm"
        class="pt-1"
      >
        <SwatchGroupItem
          v-for="sibling in product.siblings.items.slice(0, 5)"
          :key="sibling.key"
          :value="sibling.key"
          :hex="sibling.colors?.exactColorHex"
        >
          <SwatchImage
            v-if="sibling.cover?.src"
            :src="sibling.cover.src"
            :alt="sibling.colors?.exactColorName ?? sibling.name"
          />
          <SwatchFallback />
        </SwatchGroupItem>
      </SwatchGroup>
    </CardContent>

    <CardFooter class="p-4 pt-0">
      <Button class="w-full" color="buy">
        Add to Cart
      </Button>
    </CardFooter>
  </Card>
</template>
Gipfelstürmer Ausflugjacke
