<template>
  <ClientAreaMapPage
    :items="items"
    :loading="isLoading"
    map-id="addresses-map"
    point-color="#10b981"
    :hovered-id="hoveredAddressId"
    :total-count="items.length"
    :title="t('cabinetNav.addresses')"
    :search-query="searchQuery"
    @select="onSelectAddress"
    @update:hovered-id="hoveredAddressId = $event"
    @update:search-query="searchQuery = $event"
  >
    <template #header>
      <NuxtLink :to="localePath('/clientarea/addresses/new')">
        <button class="btn btn-sm w-full bg-white/10 border-white/20 text-white hover:bg-white/20">
          <Icon name="lucide:plus" size="14" class="mr-1" />
          {{ t('profileAddresses.actions.add') }}
        </button>
      </NuxtLink>
    </template>

    <template #card="{ item }">
      <NuxtLink :to="localePath(`/clientarea/addresses/${item.uuid}`)" class="block">
        <div class="bg-white/10 rounded-lg p-4 hover:bg-white/20 transition-colors">
          <div class="flex items-start gap-3">
            <span class="text-2xl">{{ isoToEmoji(item.countryCode) }}</span>
            <div class="flex-1 min-w-0">
              <div class="font-semibold truncate">{{ item.name }}</div>
              <div class="text-sm text-white/60 line-clamp-2">{{ item.address }}</div>
            </div>
          </div>
        </div>
      </NuxtLink>
    </template>

    <template #empty>
      <div class="text-center py-8">
        <div class="text-4xl mb-2">📍</div>
        <div class="font-semibold mb-1">{{ t('profileAddresses.empty.title') }}</div>
        <div class="text-sm text-white/60 mb-4">{{ t('profileAddresses.empty.description') }}</div>
        <NuxtLink :to="localePath('/clientarea/addresses/new')">
          <button class="btn btn-sm bg-white/10 border-white/20 text-white hover:bg-white/20">
            <Icon name="lucide:plus" size="14" class="mr-1" />
            {{ t('profileAddresses.empty.cta') }}
          </button>
        </NuxtLink>
      </div>
    </template>
  </ClientAreaMapPage>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'topnav',
  middleware: ['auth-oidc']
})

const { t } = useI18n()
const localePath = useLocalePath()

const {
  items,
  isLoading,
  isoToEmoji,
  init
} = useTeamAddresses()

const hoveredAddressId = ref<string>()
const searchQuery = ref('')

const onSelectAddress = (item: { uuid?: string | null }) => {
  if (item.uuid) {
    navigateTo(localePath(`/clientarea/addresses/${item.uuid}`))
  }
}

await init()
</script>
