<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">
          <Card
            v-for="addr in items"
            :key="addr.uuid"
            padding="small"
            interactive
            :as="NuxtLink"
            :to="localePath(`/clientarea/addresses/${addr.uuid}`)"
          >
            <div class="flex flex-col gap-1">
              <div class="flex items-center justify-between">
                <Text size="base" weight="semibold" class="truncate">{{ addr.name }}</Text>
                <div class="dropdown dropdown-end">
                  <label tabindex="0" class="btn btn-ghost btn-xs btn-circle">
                    <Icon name="lucide:more-vertical" size="16" />
                  </label>
                  <ul tabindex="0" class="dropdown-content z-10 menu p-2 shadow bg-base-100 rounded-box w-40">
                    <li>
                      <a class="text-error" @click="deleteAddress(addr.uuid)">
                        <Icon name="lucide:trash-2" size="16" />
                        {{ t('profileAddresses.actions.delete') }}
                      </a>
                    </li>
                  </ul>
                </div>
              </div>

              <Text tone="muted" size="sm" class="line-clamp-2">{{ addr.address }}</Text>

              <div class="flex items-center justify-between mt-1">
                <span class="text-lg">{{ isoToEmoji(addr.countryCode) }}</span>
              </div>
            </div>
          </Card>
        </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({
  middleware: ['auth-oidc']
})

import { NuxtLink } from '#components'

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

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

await init()
</script>
