<script setup lang="ts">
import { ref } from 'vue'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Price } from '@/components/ui/price'
import { Rating } from '@/components/ui/rating'
import type { PriceType } from '@/lib/format'

interface Color {
  name: string
  value: string
}

interface Size {
  name: string
  inStock: boolean
}

interface ProductDetailData {
  name: string
  brand: string
  price: PriceType
  compareAtPrice?: PriceType
  image: string
  images?: string[]
  rating?: number
  reviewCount?: number
  colors?: Color[]
  sizes?: Size[]
  description?: string
  details?: string[]
  badge?: string
}

const props = withDefaults(defineProps<{
  product?: ProductDetailData
}>(), {
  product: () => ({
    name: 'Basic Tee 6-Pack',
    brand: 'Urban Craft',
    price: { amount: 19200, currency: 'EUR' },
    image: '/placeholder.svg',
    images: ['/placeholder.svg', '/placeholder.svg'],
    rating: 3.9,
    reviewCount: 512,
    colors: [
      { name: 'White', value: '#FFFFFF' },
      { name: 'Gray', value: '#9CA3AF' },
      { name: 'Black', value: '#1A1A1A' },
    ],
    sizes: [
      { name: 'XXS', inStock: true },
      { name: 'XS', inStock: true },
      { name: 'S', inStock: true },
      { name: 'M', inStock: true },
      { name: 'L', inStock: true },
      { name: 'XL', inStock: false },
      { name: 'XXL', inStock: true },
      { name: '3XL', inStock: true },
    ],
    description: 'The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Rinse, repeat, and add some variety with our multipacks designed for everyday wear.',
    details: [
      'Hand cut and sewn locally',
      'Dyed with our proprietary colors',
      'Pre-washed & pre-shrunk',
      'Ultra-soft 100% cotton',
    ],
  }),
})

const selectedColor = ref(props.product.colors?.[0])
const selectedSize = ref(props.product.sizes?.find(s => s.inStock))
</script>

<template>
  <div class="mx-auto max-w-2xl px-4 py-8 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8">
    <!-- Image gallery -->
    <div class="lg:row-span-2">
      <div class="grid gap-4" :class="product.images?.length ? 'grid-cols-2' : ''">
        <div :class="product.images?.length ? 'col-span-2' : ''">
          <img
            :src="product.image"
            :alt="product.name"
            class="aspect-[4/5] w-full rounded-lg bg-muted object-cover"
          />
        </div>
        <img
          v-for="(img, i) in product.images?.slice(0, 2)"
          :key="i"
          :src="img"
          :alt="`${product.name} - Image ${i + 2}`"
          class="aspect-[4/5] w-full rounded-lg bg-muted object-cover"
        />
      </div>
    </div>

    <!-- Product info -->
    <div class="mt-8 lg:mt-0">
      <p v-if="product.brand" class="text-sm text-muted-foreground">
        {{ product.brand }}
      </p>

      <div class="flex items-start justify-between gap-4">
        <h1 class="text-2xl font-bold tracking-tight sm:text-3xl">
          {{ product.name }}
        </h1>
        <Badge
          v-if="product.badge"
          variant="default"
          color="promo"
          class="mt-1 shrink-0"
        >
          {{ product.badge }}
        </Badge>
      </div>

      <!-- compareAtPrice.currency is assumed to match price.currency -->
      <Price
        class="mt-3"
        size="lg"
        :price="{ ...product.price, ref: product.compareAtPrice?.amount }"
      />

      <!-- Rating -->
      <div v-if="product.rating" class="mt-3">
        <Rating :rating="product.rating" size="sm">
          <template #meta>
            <a href="#" class="text-sm text-muted-foreground hover:text-foreground">
              {{ product.reviewCount }} reviews
            </a>
          </template>
        </Rating>
      </div>

      <!-- Color picker -->
      <div v-if="product.colors?.length" class="mt-8">
        <h3 class="text-sm font-medium">Color</h3>
        <fieldset class="mt-3">
          <legend class="sr-only">Choose a color</legend>
          <div class="flex items-center gap-3">
            <button
              v-for="color in product.colors"
              :key="color.name"
              type="button"
              :aria-label="color.name"
              :title="color.name"
              class="relative flex size-8 cursor-pointer items-center justify-center rounded-full border-2 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
              :class="[
                selectedColor?.name === color.name
                  ? 'border-foreground'
                  : 'border-transparent hover:border-muted-foreground/50',
              ]"
              @click="selectedColor = color"
            >
              <span
                class="size-6 rounded-full border border-black/10"
                :style="{ backgroundColor: color.value }"
              />
            </button>
          </div>
        </fieldset>
      </div>

      <!-- Size picker -->
      <div v-if="product.sizes?.length" class="mt-8">
        <div class="flex items-center justify-between">
          <h3 class="text-sm font-medium">Size</h3>
          <a href="#" class="text-sm font-medium text-primary hover:text-primary/80">
            Size guide
          </a>
        </div>
        <fieldset class="mt-3">
          <legend class="sr-only">Choose a size</legend>
          <div class="grid grid-cols-4 gap-3 sm:grid-cols-8">
            <button
              v-for="size in product.sizes"
              :key="size.name"
              type="button"
              :disabled="!size.inStock"
              class="relative flex items-center justify-center rounded-md border px-3 py-2.5 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
              :class="[
                size.inStock
                  ? selectedSize?.name === size.name
                    ? 'border-foreground bg-foreground text-background'
                    : 'border-border bg-background text-foreground hover:bg-accent'
                  : 'cursor-not-allowed border-border bg-muted text-muted-foreground',
              ]"
              @click="size.inStock && (selectedSize = size)"
            >
              {{ size.name }}
              <!-- Diagonal line for out-of-stock -->
              <svg
                v-if="!size.inStock"
                class="pointer-events-none absolute inset-0 size-full stroke-muted-foreground/40"
                viewBox="0 0 100 100"
                preserveAspectRatio="none"
                stroke-width="1"
              >
                <line x1="0" y1="100" x2="100" y2="0" vector-effect="non-scaling-stroke" />
              </svg>
            </button>
          </div>
        </fieldset>
      </div>

      <!-- Add to cart -->
      <Button class="mt-8 w-full" size="lg" color="buy">
        Add to Cart
      </Button>

      <!-- Description -->
      <div v-if="product.description" class="mt-8 border-t pt-8">
        <h3 class="text-sm font-medium">Description</h3>
        <p class="mt-3 text-sm leading-relaxed text-muted-foreground">
          {{ product.description }}
        </p>
      </div>

      <!-- Details -->
      <div v-if="product.details?.length" class="mt-8 border-t pt-8">
        <h3 class="text-sm font-medium">Fabric &amp; Care</h3>
        <ul class="mt-3 list-disc space-y-1.5 pl-5 text-sm text-muted-foreground">
          <li v-for="(detail, i) in product.details" :key="i">
            {{ detail }}
          </li>
        </ul>
      </div>

      <!-- Policies -->
      <div class="mt-8 border-t pt-8">
        <h3 class="sr-only">Policies</h3>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
          <div class="flex flex-col items-center rounded-lg border p-4 text-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="size-6 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-2.247m0 0A8.966 8.966 0 0 1 3 12c0-1.264.26-2.467.729-3.56" />
            </svg>
            <p class="mt-2 text-sm font-medium">International delivery</p>
            <p class="mt-1 text-xs text-muted-foreground">Get your order in 2-8 days</p>
          </div>
          <div class="flex flex-col items-center rounded-lg border p-4 text-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="size-6 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
            </svg>
            <p class="mt-2 text-sm font-medium">Loyalty rewards</p>
            <p class="mt-1 text-xs text-muted-foreground">Earn points with every purchase</p>
          </div>
          <div class="flex flex-col items-center rounded-lg border p-4 text-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="size-6 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182" />
            </svg>
            <p class="mt-2 text-sm font-medium">Free returns</p>
            <p class="mt-1 text-xs text-muted-foreground">30-day return policy</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
Gipfelstürmer Ausflugjacke

Policies
