<template>
  <div class="flex flex-col gap-4 h-full">
    <!-- Quote form -->
    <QuoteForm
      :product-id="productId"
      :product-label="productLabel"
      :hub-id="hubId"
      :hub-label="hubLabel"
      :supplier-id="supplierId"
      :supplier-label="supplierLabel"
      :quantity="quantity"
      :can-search="canSearch"
      @edit-filter="emit('edit-filter', $event)"
      @remove-filter="emit('remove-filter', $event)"
      @update-quantity="emit('update-quantity', $event)"
      @search="emit('search')"
      @clear-all="emit('clear-all')"
    />

    <!-- Divider -->
    <div v-if="showResults" class="divider my-0" />

    <!-- Results section -->
    <div v-if="showResults" class="flex-1 overflow-y-auto">
      <div v-if="loading" class="flex items-center justify-center py-8">
        <span class="loading loading-spinner loading-md" />
      </div>

      <div v-else-if="offers.length === 0" class="text-center py-8 text-base-content/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-3">
        <Text tone="muted" class="text-sm">
          {{ $t('catalog.headers.offers') }}: {{ offers.length }}
        </Text>
        <div
          v-for="offer in offers"
          :key="offer.uuid"
          class="cursor-pointer"
          @click="emit('select-offer', offer)"
        >
          <slot name="offer-card" :offer="offer">
            <OfferCard :offer="offer" linkable />
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Offer {
  uuid: string
  [key: string]: any
}

defineProps<{
  productId?: string
  productLabel?: string
  hubId?: string
  hubLabel?: string
  supplierId?: string
  supplierLabel?: string
  quantity?: string
  canSearch: boolean
  showResults: boolean
  loading: boolean
  offers: Offer[]
}>()

const emit = defineEmits<{
  'edit-filter': [type: string]
  'remove-filter': [type: string]
  'update-quantity': [value: string]
  'search': []
  'clear-all': []
  'select-offer': [offer: Offer]
}>()
</script>
