<template>
  <div class="flex flex-col flex-1 min-h-0">
    <!-- Loading state -->
    <div v-if="isLoading" class="flex-1 flex items-center justify-center">
      <Card padding="lg">
        <Stack align="center" justify="center" gap="3">
          <Spinner />
          <Text tone="muted">{{ t('profileAddresses.states.loading') }}</Text>
        </Stack>
      </Card>
    </div>

    <!-- ListMapLayout -->
    <ListMapLayout
      v-else-if="items.length"
      :items="itemsForMap"
      :selected-item-id="selectedAddressId"
      map-id="addresses-map"
      point-color="#10b981"
      @select-item="onSelectAddress"
    >
      <template #list>
        <Stack gap="4">
          <!-- Add new address button -->
          <NuxtLink :to="localePath('/clientarea/addresses/new')">
            <Button variant="outline" class="w-full">
              <Icon name="lucide:plus" size="16" class="mr-2" />
              {{ t('profileAddresses.actions.add') }}
            </Button>
          </NuxtLink>

          <!-- Address cards -->
          <Stack gap="3">
            <NuxtLink
              v-for="addr in items"
              :key="addr.uuid"
              :to="localePath(`/clientarea/addresses/${addr.uuid}`)"
              class="block"
            >
              <Card
                padding="sm"
                interactive
                :class="{ 'ring-2 ring-primary': addr.uuid === selectedAddressId }"
                @click.prevent="onSelectAddress(addr.uuid)"
              >
                <div class="flex flex-col gap-1">
                  <Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
                  <Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>
                  <div class="flex items-center mt-1">
                    <span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
                  </div>
                </div>
              </Card>
            </NuxtLink>
          </Stack>

          <Stack v-if="items.length === 0" align="center" gap="2">
            <Text tone="muted">{{ t('profileAddresses.empty.title') }}</Text>
          </Stack>
        </Stack>
      </template>
    </ListMapLayout>

    <!-- Empty state -->
    <div v-else class="flex-1 flex items-center justify-center">
      <EmptyState
        icon="📍"
        :title="t('profileAddresses.empty.title')"
        :description="t('profileAddresses.empty.description')"
        :action-label="t('profileAddresses.empty.cta')"
        :action-to="localePath('/clientarea/addresses/new')"
        action-icon="lucide:plus"
      />
    </div>
  </div>
</template>

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

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

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

const selectedAddressId = ref<string>()

// Map items for ListMapLayout
const itemsForMap = computed(() => {
  return items.value.map(addr => ({
    uuid: addr.uuid,
    name: addr.name,
    latitude: addr.latitude,
    longitude: addr.longitude,
    country: addr.countryCode
  }))
})

const onSelectAddress = (uuid: string) => {
  selectedAddressId.value = uuid
}

await init()
</script>
