<script setup lang="ts">
import { computed, ref } from 'vue'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
import { Price } from '@/components/ui/price'
import { ShoppingBagIcon } from 'lucide-vue-next'
import CartItemMinimal from '@/components/CartItemMinimal.vue'

interface CartItemData {
  id: string
  name: string
  variant: string
  price: { amount: number; currency: string }
  quantity: number
  image: string
}

const props = withDefaults(
  defineProps<{
    initialItems?: CartItemData[]
    currency?: string
    maxVisibleItems?: number
  }>(),
  {
    initialItems: undefined,
    currency: 'EUR',
    maxVisibleItems: 3,
  },
)

const defaultItems: CartItemData[] = [
  {
    id: '1',
    name: 'Classic Leather Sneakers',
    variant: 'White / Size 42',
    price: { amount: 12999, currency: props.currency },
    quantity: 1,
    image: '/placeholder.svg',
  },
  {
    id: '2',
    name: 'Organic Cotton T-Shirt',
    variant: 'Navy / Size M',
    price: { amount: 3999, currency: props.currency },
    quantity: 2,
    image: '/placeholder.svg',
  },
  {
    id: '3',
    name: 'Slim Fit Chinos',
    variant: 'Khaki / Size 32',
    price: { amount: 7999, currency: props.currency },
    quantity: 1,
    image: '/placeholder.svg',
  },
  {
    id: '4',
    name: 'Wool Blend Scarf',
    variant: 'Grey',
    price: { amount: 2999, currency: props.currency },
    quantity: 1,
    image: '/placeholder.svg',
  },
]

const items = ref<CartItemData[]>(props.initialItems ?? defaultItems)

const itemCount = computed(() => items.value.reduce((sum, item) => sum + item.quantity, 0))
const subtotalCents = computed(() =>
  items.value.reduce((sum, item) => sum + item.price.amount * item.quantity, 0),
)
const visibleItems = computed(() => items.value.slice(0, props.maxVisibleItems))
const hiddenItemCount = computed(() => Math.max(items.value.length - props.maxVisibleItems, 0))
</script>

<template>
  <Popover>
    <PopoverTrigger as-child>
      <Button variant="ghost" size="icon" class="relative">
        <ShoppingBagIcon class="size-5" />
        <Badge
          v-if="itemCount > 0"
          class="absolute -top-1 -right-1 flex size-5 items-center justify-center rounded-full p-0 text-[10px]"
        >
          {{ itemCount }}
        </Badge>
        <span class="sr-only">Open cart</span>
      </Button>
    </PopoverTrigger>

    <PopoverContent align="end" class="w-80 p-0">
      <!-- Header -->
      <div class="flex items-center justify-between px-4 pt-4 pb-2">
        <span class="text-sm font-semibold">Cart ({{ itemCount }})</span>
      </div>

      <!-- Items -->
      <div v-if="items.length" class="px-4 pb-3">
        <CartItemMinimal :items="visibleItems" :currency="currency" />

        <p v-if="hiddenItemCount > 0" class="mt-3 text-xs text-muted-foreground">
          + {{ hiddenItemCount }} more {{ hiddenItemCount === 1 ? 'item' : 'items' }}
        </p>
      </div>

      <!-- Empty state -->
      <div v-else class="flex flex-col items-center justify-center px-4 py-8 text-center">
        <ShoppingBagIcon class="size-8 text-muted-foreground/50" />
        <p class="mt-2 text-sm font-medium">Your cart is empty</p>
        <p class="mt-0.5 text-xs text-muted-foreground">
          Add some items to get started.
        </p>
      </div>

      <!-- Footer -->
      <template v-if="items.length">
        <Separator />
        <div class="flex flex-col gap-2 p-4">
          <div class="flex items-center justify-between">
            <span class="text-sm text-muted-foreground">Subtotal</span>
            <Price class="font-semibold" :price="{ amount: subtotalCents, currency }" />
          </div>
          <p class="text-xs text-muted-foreground">Shipping and taxes calculated at checkout.</p>
          <div class="mt-1 flex flex-col gap-2">
            <Button class="w-full" color="checkout" size="sm">
              Checkout
            </Button>
            <Button variant="outline" class="w-full" size="sm">
              View Cart
            </Button>
          </div>
        </div>
      </template>
    </PopoverContent>
  </Popover>
</template>