<script setup>
import { motion } from 'motion-v'
import { ArrowLeft, ArrowRight, Building, Clock3, MapPin, Phone, Plane } from 'lucide-vue-next'
import { buildPublicLocaleSwitchContext, useRegisterPublicLocaleSwitchContext } from '~/composables/usePublicLocaleSwitchContext'
import { buildLocationDetailSeo, useLocationsContent } from '~/content/locations'
import { buildPublicSeoLinks } from '~/utils/public-seo'
import { normalizePublicInternalPath } from '~/utils/public-routes'

const route = useRoute()
const { locale } = usePublicLocale()
const runtimeConfig = useRuntimeConfig()
const ui = usePublicUi()
const {
  resolveLocation,
  buildLocationSearchRoute,
  buildLocationMapUrl,
} = useLocationsContent()

const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))
const locationSlug = computed(() => String(route.params.slug || '').trim())
const location = computed(() => resolveLocation(locationSlug.value))
const locationsIndexRoute = computed(() => normalizePublicInternalPath('/locations', locale.value))

if (!location.value) {
  throw createError({
    statusCode: 404,
    statusMessage: ui.value.pages.locationNotFound || 'Location not found',
  })
}

const locationsPageUi = computed(() => ui.value.locationsPage || {})
const detailSeo = computed(() => buildLocationDetailSeo(location.value, locale.value, pageOrigin.value))
const locationType = computed(() => {
  if (location.value?.isAirport || location.value?.type === 'airport') {
    return locationsPageUi.value.typeAirport || 'Airport'
  }

  if (String(location.value?.type || '').toLowerCase() === 'office') {
    return locationsPageUi.value.typeOffice || 'Office'
  }

  return locationsPageUi.value.typeDelivery || 'Delivery'
})
const locationMapUrl = computed(() => buildLocationMapUrl(location.value))
const locationSearchUrl = computed(() => buildLocationSearchRoute(location.value?.id))
const localeSwitchContext = computed(() => buildPublicLocaleSwitchContext(location.value, {
  sectionPath: '/locations',
}))

useRegisterPublicLocaleSwitchContext(localeSwitchContext)

useSeoMeta({
  title: () => detailSeo.value.title,
  description: () => detailSeo.value.description,
  ogTitle: () => detailSeo.value.ogTitle,
  ogDescription: () => detailSeo.value.ogDescription,
  ogImage: () => detailSeo.value.ogImage,
  robots: () => detailSeo.value.robots,
})

useHead(() => ({
  link: buildPublicSeoLinks(detailSeo.value),
}))
</script>

<template>
  <div class="min-h-screen font-sans text-slate-900 flex flex-col relative overflow-hidden">
    <main class="flex-1 flex flex-col relative z-10 py-8 pb-24">
      <div class="max-w-6xl mx-auto px-4 sm:px-6 w-full">
        <NuxtLink
          :to="locationsIndexRoute"
          class="inline-flex items-center gap-2 text-sm font-bold text-slate-500 hover:text-brand-orange uppercase tracking-wider mb-8 transition-colors"
        >
          <ArrowLeft class="w-4 h-4" />
          {{ locationsPageUi.detailBackLabel }}
        </NuxtLink>

        <section class="relative overflow-hidden rounded-[2.5rem] bg-slate-900 text-white mb-10">
          <img
            :src="location.cityHeroImage"
            :alt="location.name"
            class="absolute inset-0 h-full w-full object-cover opacity-30"
          >
          <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/80 to-slate-900/40" />

          <div class="relative z-10 px-6 py-12 md:px-10 md:py-16 lg:px-14">
            <motion.div
              :initial="{ opacity: 0, y: 18 }"
              :animate="{ opacity: 1, y: 0 }"
              class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur border border-white/10 mb-6"
            >
              <Plane v-if="location.isAirport || location.type === 'airport'" class="w-4 h-4 text-brand-orange" />
              <Building v-else-if="location.type === 'office'" class="w-4 h-4 text-brand-orange" />
              <MapPin v-else class="w-4 h-4 text-brand-orange" />
              <span class="text-xs font-bold uppercase tracking-widest">{{ locationType }}</span>
            </motion.div>

            <motion.h1
              :initial="{ opacity: 0, y: 18 }"
              :animate="{ opacity: 1, y: 0 }"
              :transition="{ delay: 0.05 }"
              class="text-4xl md:text-6xl font-black uppercase tracking-tight max-w-4xl"
            >
              {{ location.name }}
            </motion.h1>

            <motion.p
              :initial="{ opacity: 0, y: 18 }"
              :animate="{ opacity: 1, y: 0 }"
              :transition="{ delay: 0.1 }"
              class="mt-6 max-w-3xl text-lg text-slate-200 leading-relaxed"
            >
              {{ location.cityDescription }}
            </motion.p>

            <motion.div
              :initial="{ opacity: 0, y: 18 }"
              :animate="{ opacity: 1, y: 0 }"
              :transition="{ delay: 0.15 }"
              class="mt-8 flex flex-wrap gap-4"
            >
              <NuxtLink
                :to="locationSearchUrl"
                class="inline-flex items-center gap-2 rounded-2xl bg-brand-orange px-6 py-3 font-bold text-white hover:bg-white hover:text-slate-900 transition-colors"
              >
                {{ locationsPageUi.detailSearchLabel }}
                <ArrowRight class="w-4 h-4" />
              </NuxtLink>

              <a
                v-if="locationMapUrl"
                :href="locationMapUrl"
                target="_blank"
                rel="noopener noreferrer"
                class="inline-flex items-center gap-2 rounded-2xl border border-white/15 bg-white/10 px-6 py-3 font-bold text-white hover:bg-white hover:text-slate-900 transition-colors"
              >
                {{ locationsPageUi.detailMapLabel }}
              </a>
            </motion.div>
          </div>
        </section>

        <section
          v-if="location.cityText"
          class="relative overflow-hidden rounded-[2.25rem] border border-slate-100 bg-white mb-10"
        >
          <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,145,45,0.14),transparent_40%)]" />
          <div class="relative z-10 p-6 md:p-8 lg:p-10">
            <div class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-4">
              {{ locationsPageUi.detailCityLabel || 'City' }}
            </div>
            <p class="text-lg md:text-xl leading-relaxed text-slate-800 max-w-4xl whitespace-pre-line">
              {{ location.cityText }}
            </p>
          </div>
        </section>

        <section class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6">
          <div class="rounded-[2rem] border border-slate-100 bg-white p-6 shadow-sm">
            <div class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-3">
              {{ locationsPageUi.detailPointTypeLabel }}
            </div>
            <div class="text-xl font-black text-slate-900">
              {{ locationType }}
            </div>
          </div>

          <div class="rounded-[2rem] border border-slate-100 bg-white p-6 shadow-sm">
            <div class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-3">
              {{ locationsPageUi.detailCityLabel }}
            </div>
            <div class="text-xl font-black text-slate-900">
              {{ location.cityName || location.city }}
            </div>
          </div>

          <div v-if="location.address" class="rounded-[2rem] border border-slate-100 bg-white p-6 shadow-sm">
            <div class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-3">
              {{ locationsPageUi.detailAddressLabel }}
            </div>
            <div class="text-base font-semibold text-slate-900 leading-relaxed">
              {{ location.address }}
            </div>
          </div>

          <div v-if="location.workingHours" class="rounded-[2rem] border border-slate-100 bg-white p-6 shadow-sm">
            <div class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-3">
              {{ locationsPageUi.detailHoursLabel }}
            </div>
            <div class="inline-flex items-start gap-3 text-base font-semibold text-slate-900 leading-relaxed">
              <Clock3 class="w-5 h-5 text-brand-orange mt-0.5 shrink-0" />
              <span>{{ location.workingHours }}</span>
            </div>
          </div>

          <div v-if="location.phone" class="rounded-[2rem] border border-slate-100 bg-white p-6 shadow-sm md:col-span-2 xl:col-span-4">
            <div class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-3">
              {{ locationsPageUi.detailPhoneLabel }}
            </div>
            <a
              :href="`tel:${location.phone}`"
              class="inline-flex items-center gap-3 text-lg font-black text-slate-900 hover:text-brand-orange transition-colors"
            >
              <Phone class="w-5 h-5 text-brand-orange" />
              {{ location.phone }}
            </a>
          </div>
        </section>
      </div>
    </main>
  </div>
</template>
