<template>
  <div class="flex flex-col h-full">
    <!-- Header -->
    <div class="flex-shrink-0 p-4 border-b border-white/10">
      <div class="flex items-center justify-between">
        <h3 class="font-semibold text-base text-white">{{ $t('catalog.headers.offers') }}</h3>
        <span class="badge badge-neutral">{{ offers.length }}</span>
      </div>
    </div>

    <!-- Content (scrollable) -->
    <div class="flex-1 overflow-y-auto p-4">
      <div v-if="loading" class="flex items-center justify-center py-8">
        <span class="loading loading-spinner loading-md text-white" />
      </div>

      <div v-else-if="offersWithPrice.length === 0" class="text-center py-8 text-white/60">
        <Icon name="lucide:search-x" size="32" class="mb-2" />
        <p>{{ $t('catalog.empty.noOffers') }}</p>
      </div>

      <div v-else class="flex flex-col gap-2">
        <div
          v-for="offer in offersWithPrice"
          :key="offer.uuid"
          class="cursor-pointer"
          @click="emit('select-offer', offer)"
        >
          <OfferResultCard
            :location-name="offer.locationName || offer.locationCountry"
            :product-name="offer.productName"
            :price-per-unit="offer.pricePerUnit ? Number(offer.pricePerUnit) : null"
            :currency="offer.currency"
            :unit="offer.unit"
            :stages="[]"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Offer {
  uuid: string
  productName?: string | null
  productUuid?: string | null
  quantity?: number | string | null
  unit?: string | null
  pricePerUnit?: number | string | null
  currency?: string | null
  locationName?: string | null
  locationCountry?: string | null
  locationCountryCode?: string | null
}

const emit = defineEmits<{
  'select-offer': [offer: Offer]
}>()

const props = defineProps<{
  loading: boolean
  offers: Offer[]
}>()

const offersWithPrice = computed(() =>
  (props.offers || []).filter(o => o?.pricePerUnit != null)
)
</script>
