<template>
  <Card class="h-full flex flex-col overflow-hidden">
    <!-- Tabs -->
    <div class="flex border-b border-gray-200 flex-shrink-0">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        class="flex-1 px-4 py-3 text-sm font-medium transition-colors"
        :class="[
          activeTab === tab.id
            ? 'text-primary border-b-2 border-primary bg-primary/5'
            : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
        ]"
        @click="activeTab = tab.id"
      >
        {{ tab.label }}
        <span class="ml-1 text-xs text-gray-400">({{ tab.count }})</span>
      </button>
    </div>

    <!-- List -->
    <div class="flex-1 overflow-y-auto p-3 space-y-2">
      <!-- Hubs Tab -->
      <template v-if="activeTab === 'hubs'">
        <CatalogMapItem
          v-for="hub in hubs"
          :key="hub.uuid"
          :title="hub.name || 'Без названия'"
          :subtitle="hub.country || undefined"
          icon-name="lucide:warehouse"
          icon-tone="primary"
          :badges="hub.distance ? [{ label: hub.distance, variant: 'muted' }] : []"
          :is-selected="selectedId === hub.uuid"
          @click="selectHub(hub)"
        />
        <Text v-if="hubs.length === 0" tone="muted" size="sm" class="text-center py-4">
          Нет хабов
        </Text>
      </template>

      <!-- Offers Tab -->
      <template v-if="activeTab === 'offers'">
        <CatalogMapItem
          v-for="offer in offers"
          :key="offer.uuid"
          :title="offer.title || 'Без названия'"
          :subtitle="offer.locationName || undefined"
          icon-name="lucide:package"
          icon-tone="success"
          :badges="getOfferBadges(offer)"
          :is-selected="selectedId === offer.uuid"
          @click="selectOffer(offer)"
        />
        <Text v-if="offers.length === 0" tone="muted" size="sm" class="text-center py-4">
          Нет предложений
        </Text>
      </template>

      <!-- Suppliers Tab -->
      <template v-if="activeTab === 'suppliers'">
        <CatalogMapItem
          v-for="supplier in suppliers"
          :key="supplier.uuid"
          :title="supplier.name || 'Без названия'"
          :subtitle="supplier.country || undefined"
          icon-name="lucide:building-2"
          icon-tone="warning"
          :badges="getSupplierBadges(supplier)"
          :is-selected="selectedId === supplier.uuid"
          @click="selectSupplier(supplier)"
        />
        <Text v-if="suppliers.length === 0" tone="muted" size="sm" class="text-center py-4">
          Нет компаний
        </Text>
      </template>
    </div>
  </Card>
</template>

<script setup lang="ts">
interface Hub {
  uuid?: string | null
  name?: string | null
  country?: string | null
  latitude?: number | null
  longitude?: number | null
  distance?: string
}

interface Offer {
  uuid?: string | null
  title?: string | null
  locationName?: string | null
  status?: string | null
  latitude?: number | null
  longitude?: number | null
  lines?: any[] | null
}

interface Supplier {
  uuid?: string | null
  name?: string | null
  country?: string | null
  offersCount?: number | null
  isVerified?: boolean | null
}

const props = defineProps<{
  hubs: Hub[]
  offers: Offer[]
  suppliers: Supplier[]
}>()

const emit = defineEmits<{
  (e: 'fly-to', location: { uuid: string; name: string; latitude: number; longitude: number; country?: string }): void
}>()

type TabId = 'hubs' | 'offers' | 'suppliers'

const activeTab = ref<TabId>('hubs')
const selectedId = ref<string | null>(null)

const tabs = computed(() => [
  { id: 'hubs' as const, label: 'Хабы', count: props.hubs.length },
  { id: 'offers' as const, label: 'Офферы', count: props.offers.length },
  { id: 'suppliers' as const, label: 'Компании', count: props.suppliers.length }
])

const getOfferBadges = (offer: Offer) => {
  const badges: Array<{ label: string; variant: string }> = []

  if (offer.status) {
    const statusMap: Record<string, { label: string; variant: string }> = {
      ACTIVE: { label: 'Активно', variant: 'success' },
      DRAFT: { label: 'Черновик', variant: 'warning' },
      CANCELLED: { label: 'Отменено', variant: 'error' },
      CLOSED: { label: 'Закрыто', variant: 'muted' }
    }
    const statusInfo = statusMap[offer.status]
    if (statusInfo) {
      badges.push(statusInfo)
    }
  }

  const linesCount = offer.lines?.length || 0
  if (linesCount > 0) {
    badges.push({ label: `${linesCount} поз.`, variant: 'muted' })
  }

  return badges
}

const getSupplierBadges = (supplier: Supplier) => {
  const badges: Array<{ label: string; variant: string }> = []

  if (supplier.isVerified) {
    badges.push({ label: 'Проверен', variant: 'success' })
  }

  if (supplier.offersCount && supplier.offersCount > 0) {
    badges.push({ label: `${supplier.offersCount} офф.`, variant: 'muted' })
  }

  return badges
}

const selectHub = (hub: Hub) => {
  selectedId.value = hub.uuid || null

  if (hub.latitude && hub.longitude) {
    emit('fly-to', {
      uuid: hub.uuid!,
      name: hub.name || '',
      latitude: hub.latitude,
      longitude: hub.longitude,
      country: hub.country || undefined
    })
  }
}

const selectOffer = (offer: Offer) => {
  selectedId.value = offer.uuid || null

  if (offer.latitude && offer.longitude) {
    emit('fly-to', {
      uuid: offer.uuid!,
      name: offer.title || '',
      latitude: offer.latitude,
      longitude: offer.longitude,
      country: offer.locationName || undefined
    })
  }
}

const selectSupplier = (supplier: Supplier) => {
  selectedId.value = supplier.uuid || null
  // Suppliers don't have coordinates currently
}
</script>
