<script setup lang="ts">
import { computed, reactive } from 'vue'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { type PriceType, formatPrice } from '@/lib/format'

interface OrderItem {
  name: string
  variant: string
  price: PriceType
  quantity: number
  image?: string
}

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

const form = reactive({
  email: '',
  firstName: '',
  lastName: '',
  address: '',
  apartment: '',
  city: '',
  zip: '',
  country: 'DE',
  cardNumber: '',
  expiry: '',
  cvc: '',
})

const defaultItems: OrderItem[] = [
  { name: 'Classic Leather Sneakers', variant: 'White / 42', price: { amount: 12999, currency: props.currency }, quantity: 1 },
  { name: 'Organic Cotton T-Shirt', variant: 'Navy / M', price: { amount: 3999, currency: props.currency }, quantity: 2 },
]

const orderItems = computed(() => props.initialItems ?? defaultItems)

const orderSummary = computed(() => {
  const items = orderItems.value
  const subtotal = items.reduce((sum, item) => sum + item.price.amount * item.quantity, 0)
  const shipping = subtotal > 10000 ? 0 : 599
  return { items, subtotal, shipping, total: subtotal + shipping }
})
</script>

<template>
  <div>
    <h1 class="mb-6 text-2xl font-semibold">
      Checkout
    </h1>

    <div class="grid gap-6 md:grid-cols-[1fr_360px]">
      <!-- Form -->
      <div class="space-y-6">
        <!-- Contact -->
        <Card>
          <CardHeader>
            <CardTitle class="text-base">Contact</CardTitle>
          </CardHeader>
          <CardContent>
            <input
              v-model="form.email"
              type="email"
              placeholder="Email address"
              class="h-10 w-full rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
            />
          </CardContent>
        </Card>

        <!-- Shipping Address -->
        <Card>
          <CardHeader>
            <CardTitle class="text-base">Shipping Address</CardTitle>
          </CardHeader>
          <CardContent class="space-y-3">
            <select
              v-model="form.country"
              class="h-10 w-full rounded-md border bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
            >
              <option value="DE">Germany</option>
              <option value="AT">Austria</option>
              <option value="CH">Switzerland</option>
              <option value="GB">United Kingdom</option>
              <option value="US">United States</option>
            </select>
            <div class="grid grid-cols-2 gap-3">
              <input
                v-model="form.firstName"
                type="text"
                placeholder="First name"
                class="h-10 w-full rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
              />
              <input
                v-model="form.lastName"
                type="text"
                placeholder="Last name"
                class="h-10 w-full rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
              />
            </div>
            <input
              v-model="form.address"
              type="text"
              placeholder="Address"
              class="h-10 w-full rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
            />
            <input
              v-model="form.apartment"
              type="text"
              placeholder="Apartment, suite, etc. (optional)"
              class="h-10 w-full rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
            />
            <div class="grid grid-cols-2 gap-3">
              <input
                v-model="form.zip"
                type="text"
                placeholder="Postal code"
                class="h-10 w-full rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
              />
              <input
                v-model="form.city"
                type="text"
                placeholder="City"
                class="h-10 w-full rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
              />
            </div>
          </CardContent>
        </Card>

        <!-- Payment -->
        <Card>
          <CardHeader>
            <CardTitle class="text-base">Payment</CardTitle>
          </CardHeader>
          <CardContent class="space-y-3">
            <input
              v-model="form.cardNumber"
              type="text"
              placeholder="Card number"
              class="h-10 w-full rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
            />
            <div class="grid grid-cols-2 gap-3">
              <input
                v-model="form.expiry"
                type="text"
                placeholder="MM / YY"
                class="h-10 w-full rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
              />
              <input
                v-model="form.cvc"
                type="text"
                placeholder="CVC"
                class="h-10 w-full rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
              />
            </div>
          </CardContent>
        </Card>

        <Button class="w-full" size="lg" color="checkout">
          Place Order
        </Button>
      </div>

      <!-- Order Summary -->
      <Card class="h-fit">
        <CardHeader>
          <CardTitle class="text-base">Order Summary</CardTitle>
        </CardHeader>
        <CardContent class="space-y-4">
          <div
            v-for="item in orderSummary.items"
            :key="item.name"
            class="flex items-center gap-3"
          >
            <div class="relative size-12 shrink-0">
              <img
                v-if="item.image"
                :src="item.image"
                :alt="item.name"
                class="size-12 rounded-md border object-cover"
              />
              <div
                v-else
                class="flex size-12 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground"
              >
                {{ item.quantity }}×
              </div>
              <span
                v-if="item.image && item.quantity > 1"
                class="absolute -top-1.5 -right-1.5 flex size-5 items-center justify-center rounded-full bg-foreground text-[10px] font-medium text-background"
              >
                {{ item.quantity }}
              </span>
            </div>
            <div class="flex-1 text-sm">
              <p class="font-medium">{{ item.name }}</p>
              <p class="text-xs text-muted-foreground">{{ item.variant }}</p>
            </div>
            <span class="text-sm">{{ formatPrice({ amount: item.price.amount * item.quantity, currency }) }}</span>
          </div>

          <div class="space-y-2 border-t pt-3 text-sm">
            <div class="flex justify-between">
              <span class="text-muted-foreground">Subtotal</span>
              <span>{{ formatPrice({ amount: orderSummary.subtotal, currency }) }}</span>
            </div>
            <div class="flex justify-between">
              <span class="text-muted-foreground">Shipping</span>
              <span>{{ orderSummary.shipping === 0 ? 'Free' : formatPrice({ amount: orderSummary.shipping, currency }) }}</span>
            </div>
            <div class="flex justify-between border-t pt-2 text-base font-semibold">
              <span>Total</span>
              <span>{{ formatPrice({ amount: orderSummary.total, currency }) }}</span>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  </div>
</template>