<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 {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'
import { Price } from '@/components/ui/price'
import { ShoppingBagIcon } from 'lucide-vue-next'
import CartItemCompact from '@/components/CartItemCompact.vue'

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

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

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',
  },
]

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 shippingProgress = computed(() =>
  Math.min((subtotalCents.value / props.freeShippingThreshold) * 100, 100),
)
const amountUntilFreeShipping = computed(() =>
  Math.max(props.freeShippingThreshold - subtotalCents.value, 0),
)
</script>

<template>
  <Sheet>
    <SheetTrigger 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>
    </SheetTrigger>

    <SheetContent side="right" class="flex w-full flex-col sm:max-w-md" :show-close-button="false">
      <SheetHeader class="border-b pb-4">
        <div class="flex items-center justify-between">
          <SheetTitle class="text-lg">Cart ({{ itemCount }})</SheetTitle>
          <SheetClose as-child>
            <Button variant="ghost" size="icon-sm">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
              <span class="sr-only">Close</span>
            </Button>
          </SheetClose>
        </div>
      </SheetHeader>

      <!-- Free shipping progress -->
      <div v-if="items.length" class="px-6">
        <div v-if="amountUntilFreeShipping > 0" class="text-center text-sm text-muted-foreground">
          Add
          <Price class="font-medium text-foreground" :price="{ amount: amountUntilFreeShipping, currency }" />
          more for free shipping
        </div>
        <div v-else class="text-center text-sm font-medium text-positive">
          You qualify for free shipping!
        </div>
        <div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-muted">
          <div
            class="h-full rounded-full bg-primary transition-all duration-300"
            :style="{ width: `${shippingProgress}%` }"
          />
        </div>
      </div>

      <!-- Cart items -->
      <div class="flex-1 overflow-y-auto px-6">
        <CartItemCompact v-if="items.length" v-model:items="items" :currency="currency" />

        <!-- Empty state -->
        <div v-else class="flex flex-col items-center justify-center py-16 text-center">
          <ShoppingBagIcon class="size-12 text-muted-foreground/50" />
          <p class="mt-4 text-lg font-medium">Your cart is empty</p>
          <p class="mt-1 text-sm text-muted-foreground">
            Add some items to get started.
          </p>
          <SheetClose as-child>
            <Button variant="outline" class="mt-4">
              Continue Shopping
            </Button>
          </SheetClose>
        </div>
      </div>

      <!-- Footer with subtotal and CTAs -->
      <SheetFooter v-if="items.length" class="border-t">
        <div class="flex w-full flex-col gap-3">
          <Separator class="hidden" />
          <div class="flex items-center justify-between text-sm">
            <span class="text-muted-foreground">Subtotal</span>
            <Price class="text-base font-semibold" :price="{ amount: subtotalCents, currency }" />
          </div>
          <p class="text-xs text-muted-foreground">Shipping and taxes calculated at checkout.</p>
          <Button class="w-full" color="checkout">
            Checkout
          </Button>
          <SheetClose as-child>
            <Button variant="outline" class="w-full">
              Continue Shopping
            </Button>
          </SheetClose>
        </div>
      </SheetFooter>
    </SheetContent>
  </Sheet>
</template>