webapp/app/components/catalog/AddressDetailBottomSheet.vue

<template>
  <Transition name="address-slide">
    <div
      v-if="isOpen && addressUuid"
      class="fixed inset-x-0 bottom-0 z-50 flex justify-center px-3 md:px-4"
      style="height: 72vh"
    >
      <!-- Backdrop (clickable to close) -->
      <div
        class="absolute inset-0 -top-[32vh] bg-gradient-to-t from-black/45 via-black/20 to-transparent"
        @click="emit('close')"
      />

      <!-- Sheet content -->
      <div class="relative flex w-full max-w-[980px] flex-col overflow-hidden rounded-t-[2rem] border border-white/60 bg-base-100/95 shadow-[0_-24px_70px_rgba(15,23,42,0.3)] backdrop-blur-xl">
        <!-- Header with drag handle and close -->
        <div class="sticky top-0 z-10 border-b border-base-300 bg-base-100/90">
          <div class="flex justify-center py-2">
            <div class="h-1.5 w-12 rounded-full bg-base-content/20" />
          </div>
          <div class="flex items-center justify-between px-6 pb-4">
            <template v-if="address">
              <div class="flex items-center gap-3 flex-1 min-w-0">
                <div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-success/20 text-2xl">
                  {{ isoToEmoji(address.countryCode) }}
                </div>
                <div class="min-w-0">
                  <div class="truncate text-xl font-black text-base-content">{{ address.name }}</div>
                  <div class="truncate text-sm text-base-content/60">{{ address.address }}</div>
                </div>
              </div>
            </template>

            <template v-else>
              <div class="flex items-center gap-3 flex-1">
                <div class="h-10 w-10 animate-pulse rounded-xl bg-base-300/70" />
                <div class="flex-1">
                  <div class="h-5 w-48 animate-pulse rounded bg-base-300/70" />
                  <div class="mt-1 h-4 w-32 animate-pulse rounded bg-base-300/70" />
                </div>
              </div>
            </template>

            <button class="btn btn-ghost btn-sm btn-circle flex-shrink-0 text-base-content/60 hover:text-base-content" @click="emit('close')">
              <Icon name="lucide:x" size="20" />
            </button>
          </div>
        </div>

        <!-- Content -->
        <div v-if="address" class="h-[calc(72vh-110px)] overflow-y-auto px-6 py-4 space-y-4">
          <!-- Location info -->
          <div class="rounded-2xl border border-base-300 bg-base-100 p-4">
            <div class="mb-3 flex items-center gap-2 text-base-content">
              <Icon name="lucide:map-pin" size="18" />
              <span class="text-lg font-black">{{ t('profileAddresses.detail.location') }}</span>
            </div>
            <div class="space-y-2 text-sm">
              <div class="flex items-start gap-2 text-base-content/80">
                <Icon name="lucide:navigation" size="14" class="mt-0.5 flex-shrink-0 text-base-content/50" />
                <span>{{ address.address }}</span>
              </div>
              <div v-if="address.latitude && address.longitude" class="flex items-center gap-2 text-base-content/60">
                <Icon name="lucide:crosshair" size="14" class="text-base-content/50" />
                <span class="font-mono text-xs">{{ address.latitude.toFixed(6) }}, {{ address.longitude.toFixed(6) }}</span>
              </div>
            </div>
          </div>

          <!-- Map preview -->
          <div v-if="address.latitude && address.longitude" class="rounded-2xl border border-base-300 bg-base-100 p-4">
            <div class="mb-3 flex items-center gap-2 text-base-content">
              <Icon name="lucide:map" size="18" />
              <span class="text-lg font-black">{{ t('profileAddresses.detail.map') }}</span>
            </div>
            <div class="h-48 overflow-hidden rounded-xl">
              <ClientOnly>
                <MapboxMap
                  :map-id="'address-preview-' + addressUuid"
                  style="width: 100%; height: 100%"
                  :options="{
                    style: 'mapbox://styles/mapbox/light-v11',
                    center: [address.longitude, address.latitude],
                    zoom: 14,
                    interactive: false
                  }"
                >
                  <MapboxDefaultMarker
                    :marker-id="'address-marker'"
                    :lnglat="[address.longitude, address.latitude]"
                    color="#10b981"
                  />
                </MapboxMap>
              </ClientOnly>
            </div>
          </div>

          <!-- Actions -->
          <div class="flex gap-3">
            <NuxtLink :to="localePath(`/clientarea/addresses/${addressUuid}`)" class="flex-1">
              <button class="btn btn-sm w-full btn-outline">
                <Icon name="lucide:pencil" size="14" class="mr-2" />
                {{ t('profileAddresses.actions.edit') }}
              </button>
            </NuxtLink>
            <button
              class="btn btn-sm bg-error/20 border-error/30 text-error hover:bg-error/30"
              @click="handleDelete"
              :disabled="isDeleting"
            >
              <Icon name="lucide:trash-2" size="14" />
            </button>
          </div>
        </div>

        <!-- Loading state -->
        <div v-else class="px-6 py-4 space-y-4">
          <div class="h-24 animate-pulse rounded-xl bg-base-300/70" />
          <div class="h-48 animate-pulse rounded-xl bg-base-300/70" />
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
const props = defineProps<{
  isOpen: boolean
  addressUuid: string | null
}>()

const emit = defineEmits<{
  'close': []
  'deleted': []
}>()

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

const { items, isoToEmoji, deleteAddress } = useTeamAddresses()

const isDeleting = ref(false)

const address = computed(() => {
  if (!props.addressUuid) return null
  return items.value.find(a => a.uuid === props.addressUuid) || null
})

const handleDelete = async () => {
  if (!props.addressUuid) return
  isDeleting.value = true
  const success = await deleteAddress(props.addressUuid)
  isDeleting.value = false
  if (success) {
    emit('deleted')
    emit('close')
  }
}
</script>

<style scoped>
.address-slide-enter-active,
.address-slide-leave-active {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.address-slide-enter-from,
.address-slide-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

.address-slide-enter-to,
.address-slide-leave-from {
  transform: translateY(0);
  opacity: 1;
}
</style>