<template>
  <div class="container mx-auto px-4 py-8">
    <!-- Success Message -->
    <div v-if="orderSuccess" class="mb-8">
      <div class="bg-green-500/10 border border-green-200 rounded-lg p-6">
        <div class="flex items-center space-x-3">
          <div class="w-8 h-8 bg-green-500/20 rounded-full flex items-center justify-center">
            <CheckCircle class="w-5 h-5 text-green-600" />
          </div>
          <div>
            <h3 class="text-lg font-semibold text-green-900">Order Placed Successfully!</h3>
            <p class="text-green-700">
              Your order has been placed and sent to the merchant. 
              <span v-if="orderId" class="font-medium">Order ID: {{ orderId }}</span>
            </p>
            <!-- Nostr Status -->
            <div v-if="orderId && marketStore.orders[orderId]" class="mt-2">
              <div v-if="marketStore.orders[orderId].sentViaNostr" class="flex items-center gap-2 text-sm text-green-600">
                <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                <span>✓ Sent via Nostr network</span>
              </div>
              <div v-else class="flex items-center gap-2 text-sm text-yellow-600">
                <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
                <span>⚠ Stored locally only</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Page Header -->
    <div class="mb-8">
      <h1 class="text-3xl font-bold text-foreground">Shopping Cart</h1>
      <p class="text-muted-foreground mt-2">
        Review your items and proceed to checkout for each stall
      </p>
    </div>

    <!-- Cart Content -->
    <div class="max-w-4xl mx-auto">
      <ShoppingCart />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useMarketStore } from '@/modules/market/stores/market'
import { CheckCircle } from 'lucide-vue-next'
import ShoppingCart from '@/modules/market/components/ShoppingCart.vue'

const route = useRoute()
const marketStore = useMarketStore()

// Check for order success from query params
const orderSuccess = computed(() => route.query.orderSuccess === 'true')
const orderId = computed(() => route.query.orderId as string)

// Set the first cart as active if none is selected (for navigation purposes)
onMounted(() => {
  if (marketStore.allStallCarts.length > 0 && !marketStore.activeStallCart) {
    const firstCart = marketStore.allStallCarts[0]
    marketStore.setCheckoutCart(firstCart.id)
  }
})
</script>
