<template>
  <Section variant="plain" paddingY="md">
    <Stack gap="6">
      <PageHeader
        :title="t('profileAddresses.header.title')"
        :actions="[{ label: t('profileAddresses.actions.add'), icon: 'lucide:plus', to: localePath('/clientarea/addresses/new') }]"
      />

      <Card v-if="isLoading" padding="lg">
        <Stack align="center" gap="3">
          <Spinner />
          <Text tone="muted">{{ t('profileAddresses.states.loading') }}</Text>
        </Stack>
      </Card>

      <template v-else-if="items.length">
        <NuxtLink :to="localePath('/clientarea/addresses/map')" class="block h-48 rounded-lg overflow-hidden cursor-pointer">
          <ClientOnly>
            <MapboxGlobe
              map-id="addresses-map"
              :locations="itemsWithCoords"
              :height="192"
            />
          </ClientOnly>
        </NuxtLink>

        <Grid :cols="1" :md="2" :gap="4">
          <NuxtLink v-for="addr in items" :key="addr.uuid" :to="localePath(`/clientarea/addresses/${addr.uuid}`)" class="block">
            <Card padding="small" interactive>
              <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>
        </Grid>
      </template>

      <EmptyState
        v-else
        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"
      />
    </Stack>
  </Section>
</template>

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

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

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

await init()
</script>
