<template>
  <div class="p-3 bg-muted rounded-lg">
    <!-- Desktop Layout (horizontal) -->
    <div class="hidden md:flex items-center space-x-4">
      <!-- Product Image -->
      <div class="flex-shrink-0">
        <img
          :src="item.product.images?.[0] || '/placeholder-product.png'"
          :alt="item.product.name"
          class="w-16 h-16 object-cover rounded-md"
          @error="handleImageError"
        />
      </div>
      
      <!-- Product Details -->
      <div class="flex-1 min-w-0">
        <div class="flex items-start justify-between">
          <div class="flex-1">
            <h4 class="text-sm font-medium text-foreground truncate">
              {{ item.product.name }}
            </h4>
            <p class="text-sm text-muted-foreground">
              {{ item.product.stallName }}
            </p>
            <div class="flex items-center space-x-2 mt-1">
              <Badge 
                v-for="category in item.product.categories?.slice(0, 2)" 
                :key="category"
                variant="secondary"
                class="text-xs"
              >
                {{ category }}
              </Badge>
            </div>
          </div>
          
          <!-- Price -->
          <div class="text-right ml-4">
            <p class="text-sm font-medium text-foreground">
              {{ formatPrice(item.product.price, item.product.currency) }}
            </p>
            <p class="text-xs text-muted-foreground">
              each
            </p>
          </div>
        </div>
      </div>
      
      <!-- Quantity Controls -->
      <div class="flex items-center space-x-2">
        <Button
          @click="decreaseQuantity"
          variant="outline"
          size="sm"
          :disabled="item.quantity <= 1"
          class="w-8 h-8 p-0"
        >
          <Minus class="w-3 h-3" />
        </Button>
        
        <div class="w-12 text-center">
          <span class="text-sm font-medium text-foreground">
            {{ item.quantity }}
          </span>
        </div>
        
        <Button
          @click="increaseQuantity"
          variant="outline"
          size="sm"
          :disabled="item.quantity >= item.product.quantity"
          class="w-8 h-8 p-0"
        >
          <Plus class="w-3 h-3" />
        </Button>
      </div>
      
      <!-- Total Price -->
      <div class="text-right min-w-[80px]">
        <p class="text-sm font-semibold text-green-600">
          {{ formatPrice(item.product.price * item.quantity, item.product.currency) }}
        </p>
        <p class="text-xs text-muted-foreground">
          total
        </p>
      </div>
      
      <!-- Remove Button -->
      <Button
        @click="removeItem"
        variant="ghost"
        size="sm"
        class="text-red-500 hover:text-red-700 hover:bg-red-500/10"
      >
        <Trash2 class="w-4 h-4" />
      </Button>
    </div>

    <!-- Mobile Layout (stacked) -->
    <div class="md:hidden space-y-3">
      <!-- Product Image and Details Row -->
      <div class="flex items-start space-x-3">
        <!-- Product Image -->
        <div class="flex-shrink-0">
          <img
            :src="item.product.images?.[0] || '/placeholder-product.png'"
            :alt="item.product.name"
            class="w-16 h-16 object-cover rounded-md"
            @error="handleImageError"
          />
        </div>
        
        <!-- Product Details -->
        <div class="flex-1 min-w-0">
          <h4 class="text-sm font-medium text-foreground">
            {{ item.product.name }}
          </h4>
          <p class="text-sm text-muted-foreground">
            {{ item.product.stallName }}
          </p>
          <div class="flex items-center space-x-2 mt-1">
            <Badge 
              v-for="category in item.product.categories?.slice(0, 2)" 
              :key="category"
              variant="secondary"
              class="text-xs"
            >
              {{ category }}
            </Badge>
          </div>
        </div>
        
        <!-- Remove Button -->
        <Button
          @click="removeItem"
          variant="ghost"
          size="sm"
          class="text-red-500 hover:text-red-700 hover:bg-red-500/10 flex-shrink-0"
        >
          <Trash2 class="w-4 h-4" />
        </Button>
      </div>
      
      <!-- Price and Quantity Row -->
      <div class="flex items-center justify-between">
        <!-- Price per item -->
        <div class="text-left">
          <p class="text-sm font-medium text-foreground">
            {{ formatPrice(item.product.price, item.product.currency) }}
          </p>
          <p class="text-xs text-muted-foreground">
            each
          </p>
        </div>
        
        <!-- Quantity Controls -->
        <div class="flex items-center space-x-2">
          <Button
            @click="decreaseQuantity"
            variant="outline"
            size="sm"
            :disabled="item.quantity <= 1"
            class="w-8 h-8 p-0"
          >
            <Minus class="w-3 h-3" />
          </Button>
          
          <div class="w-12 text-center">
            <span class="text-sm font-medium text-foreground">
              {{ item.quantity }}
            </span>
          </div>
          
          <Button
            @click="increaseQuantity"
            variant="outline"
            size="sm"
            :disabled="item.quantity >= item.product.quantity"
            class="w-8 h-8 p-0"
          >
            <Plus class="w-3 h-3" />
          </Button>
        </div>
        
        <!-- Total Price -->
        <div class="text-right">
          <p class="text-sm font-semibold text-green-600">
            {{ formatPrice(item.product.price * item.quantity, item.product.currency) }}
          </p>
          <p class="text-xs text-muted-foreground">
            total
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Minus, Plus, Trash2 } from 'lucide-vue-next'
import type { CartItem as CartItemType } from '../types/market'

interface Props {
  item: CartItemType
  stallId: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update-quantity': [stallId: string, productId: string, quantity: number]
  'remove-item': [stallId: string, productId: string]
}>()

// Methods
const increaseQuantity = () => {
  const newQuantity = props.item.quantity + 1
  if (newQuantity <= props.item.product.quantity) {
    emit('update-quantity', props.stallId, props.item.product.id, newQuantity)
  }
}

const decreaseQuantity = () => {
  const newQuantity = props.item.quantity - 1
  if (newQuantity > 0) {
    emit('update-quantity', props.stallId, props.item.product.id, newQuantity)
  }
}

const removeItem = () => {
  emit('remove-item', props.stallId, props.item.product.id)
}

const handleImageError = (event: Event) => {
  const target = event.target as HTMLImageElement
  target.src = '/placeholder-product.png'
}

const formatPrice = (price: number, currency: string) => {
  if (currency === 'sats' || currency === 'sat') {
    return `${price.toLocaleString()} sats`
  }
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: currency.toUpperCase()
  }).format(price)
}
</script>
