<script setup>
import { ArrowLeft, ArrowUpRight, CalendarRange, Clock3, Sparkles, Ticket } from 'lucide-vue-next'
import OfferBookingForm from '~/components/offers/OfferBookingForm.vue'
import { buildPublicLocaleSwitchContext, useRegisterPublicLocaleSwitchContext } from '~/composables/usePublicLocaleSwitchContext'
import { useOffersContent } from '~/content/offers'
import { resolveFleetVehicle } from '~/content/vehicles'
import { buildPublicSeoLinks } from '~/utils/public-seo'

const route = useRoute()
const { localizedPath, locale } = usePublicLocale()
const offersContent = useOffersContent()
const ui = usePublicUi()
const offer = offersContent.useResolvedOffer(computed(() => route.params.slug))
const offerSeo = computed(() => offer.value?.seo || null)
const offersIndexRoute = computed(() => localizedPath('/offers', locale.value))
const localeSwitchContext = computed(() => buildPublicLocaleSwitchContext(offer.value, {
  sectionPath: '/offers',
}))

useRegisterPublicLocaleSwitchContext(localeSwitchContext)

if (offer.value?.isFallback && locale.value !== offer.value?.sourceLocale) {
  await navigateTo(offersIndexRoute.value, { redirectCode: 302 })
}

if (!offer.value) {
  throw createError({
    statusCode: 404,
    statusMessage: ui.value.pages.offerNotFound,
  })
}

definePageMeta({
  siteHeaderTheme: 'dark',
  siteHeaderOverlay: true,
})

useSeoMeta({
  title: () => offerSeo.value?.title || `${offer.value?.title || 'Offer'} | bent.ge`,
  description: () => offerSeo.value?.description || offer.value?.description || '',
  ogTitle: () => offerSeo.value?.ogTitle || offer.value?.title || '',
  ogDescription: () => offerSeo.value?.ogDescription || offer.value?.description || '',
  ogImage: () => offerSeo.value?.ogImage || offer.value?.heroImage || '',
  robots: () => offerSeo.value?.robots || 'index,follow',
})

useHead(() => ({
  link: buildPublicSeoLinks(offerSeo.value),
}))

const detailSections = computed(() => offer.value?.detailSections || [])
const bodyParagraphs = computed(() => offer.value?.bodyParagraphs || [])
const focusCards = computed(() => offer.value?.focusCards || [])
const relatedVehicleRoute = computed(() => {
  if (!offer.value?.relatedVehicle) {
    return null
  }

  return offer.value.relatedVehicle.path
    || resolveFleetVehicle(offer.value.relatedVehicle.slug, locale.value)?.path
    || null
})
</script>

<template>
  <div class="min-h-screen bg-[#050505] text-white selection:bg-brand-orange/30">
    <section class="relative pt-32 pb-20 md:pt-44 md:pb-28 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden">
      <div class="grid lg:grid-cols-[minmax(0,1fr)_480px] gap-10 items-end relative z-10">
        <div>
          <NuxtLink
            :to="localizedPath('/offers')"
            class="inline-flex items-center gap-2 text-white/60 hover:text-white transition-colors mb-8"
          >
            <ArrowLeft class="w-4 h-4" />
            {{ ui.common.back }} {{ ui.header.nav.offers.toLowerCase() }}
          </NuxtLink>

          <div class="flex flex-wrap items-center gap-3 mb-6">
            <span class="inline-flex items-center gap-2 rounded-full bg-brand-orange/10 border border-brand-orange/20 px-4 py-2 text-brand-orange text-[11px] font-bold tracking-[0.24em] uppercase">
              <Sparkles class="w-3.5 h-3.5" />
              {{ offer.discount }}
            </span>
            <span
              v-for="tag in offer.tags"
              :key="tag"
              class="inline-flex items-center rounded-full border border-white/10 bg-white/5 px-4 py-2 text-[11px] font-bold tracking-[0.24em] uppercase text-white/55"
            >
              {{ tag }}
            </span>
          </div>

          <h1 class="text-4xl md:text-6xl lg:text-7xl font-black tracking-tight uppercase leading-[0.92]">
            {{ offer.title }}
          </h1>
          <p v-if="offer.subtitle" class="text-brand-orange text-xl md:text-2xl font-serif italic mt-5">
            {{ offer.subtitle }}
          </p>
          <p class="text-lg md:text-xl text-white/65 max-w-3xl mt-8 leading-relaxed">
            {{ offer.description }}
          </p>

          <div class="flex flex-wrap items-center gap-6 mt-8 text-white/55 text-sm">
            <div class="inline-flex items-center gap-2">
              <Clock3 class="w-4 h-4 text-brand-orange" />
              {{ offer.validUntil }}
            </div>
            <div v-if="offer.bookingPrefill?.pickupAt || offer.bookingPrefill?.dropoffAt" class="inline-flex items-center gap-2">
              <CalendarRange class="w-4 h-4 text-brand-orange" />
              {{ focusCards.find((item) => item.id === 'dates')?.value }}
            </div>
            <div v-if="offer.bookingPrefill?.promoCode" class="inline-flex items-center gap-2">
              <Ticket class="w-4 h-4 text-brand-orange" />
              {{ offer.bookingPrefill.promoCode }}
            </div>
          </div>
        </div>

        <div class="relative">
          <div class="absolute -inset-8 bg-brand-orange/15 blur-[120px] rounded-full pointer-events-none" />
          <div class="relative aspect-[4/5] rounded-[2.5rem] overflow-hidden border border-white/10 shadow-[0_30px_80px_-40px_rgba(0,0,0,0.8)]">
            <img
              v-if="offer.heroImage"
              :src="offer.heroImage"
              :alt="offer.title"
              class="w-full h-full object-cover"
              referrerpolicy="no-referrer"
            >
            <div v-else class="w-full h-full bg-white/5 flex items-center justify-center text-white/30 text-sm tracking-[0.24em] uppercase">
              {{ ui.offers.offerDetailsTitle }}
            </div>

            <div class="absolute inset-0 bg-gradient-to-t from-black/75 via-black/10 to-transparent" />
            <div class="absolute bottom-0 left-0 right-0 p-8">
              <div class="inline-flex items-center rounded-full bg-white/10 backdrop-blur-md px-4 py-2 text-sm font-bold tracking-[0.22em] uppercase text-white">
                {{ offer.discount }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="absolute top-0 right-0 w-[720px] h-[720px] bg-brand-orange/10 rounded-full blur-[140px] pointer-events-none -translate-y-1/2 translate-x-1/4" />
    </section>

    <section class="bg-[#FAFAFA] text-slate-900 rounded-t-[3rem] md:rounded-t-[4rem] py-16 md:py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-[minmax(0,1fr)_420px] gap-10 items-start">
        <div class="space-y-8">
          <div class="grid md:grid-cols-2 gap-4">
            <div
              v-for="card in focusCards"
              :key="card.id"
              class="rounded-[2rem] bg-white border border-slate-200 p-6 shadow-sm"
            >
              <div class="text-[11px] font-bold tracking-[0.24em] uppercase text-slate-400 mb-3">{{ card.title }}</div>
              <div class="text-2xl font-display font-black tracking-tight text-slate-900">{{ card.value }}</div>
              <p class="text-slate-500 mt-3 leading-relaxed">{{ card.description }}</p>
            </div>
          </div>

          <div
            v-if="offer.relatedVehicle"
            class="rounded-[2rem] bg-white border border-slate-200 p-6 shadow-sm"
          >
            <div class="flex flex-col md:flex-row gap-6">
              <img
                v-if="offer.relatedVehicle.image"
                :src="offer.relatedVehicle.image"
                :alt="offer.relatedVehicle.name"
                class="w-full md:w-72 h-56 rounded-[1.75rem] object-cover"
                referrerpolicy="no-referrer"
              >
              <div
                v-else
                class="flex w-full md:w-72 h-56 items-center justify-center rounded-[1.75rem] border border-slate-200 bg-slate-100"
              >
                <div class="h-14 w-14 rounded-[1.5rem] border border-slate-200 bg-white shadow-sm" />
              </div>
              <div class="flex-1">
                <div class="text-[11px] font-bold tracking-[0.24em] uppercase text-brand-orange mb-3">{{ ui.offers.offerVehicleTitle }}</div>
                <h2 class="text-3xl font-display font-black tracking-tight">{{ offer.relatedVehicle.name }}</h2>
                <p class="text-slate-500 mt-3 leading-relaxed">
                  {{ offer.relatedVehicle.description || ui.offers.offerVehicleDescription }}
                </p>

                <NuxtLink
                  v-if="relatedVehicleRoute"
                  :to="relatedVehicleRoute"
                  class="inline-flex items-center gap-2 mt-6 rounded-full bg-slate-900 text-white px-5 py-3 font-bold uppercase tracking-[0.22em]"
                >
                  {{ ui.header.nav.vehicles }}
                  <ArrowUpRight class="w-4 h-4" />
                </NuxtLink>
              </div>
            </div>
          </div>

          <div class="rounded-[2rem] bg-white border border-slate-200 p-6 md:p-8 shadow-sm">
            <div class="text-[11px] font-bold tracking-[0.24em] uppercase text-brand-orange mb-4">{{ ui.offers.offerDetailsTitle }}</div>
            <div class="space-y-5 text-lg leading-relaxed text-slate-600">
              <p v-for="paragraph in bodyParagraphs" :key="paragraph">
                {{ paragraph }}
              </p>
              <p v-if="!bodyParagraphs.length">
                {{ offer.description }}
              </p>
            </div>
          </div>

          <div
            v-for="section in detailSections"
            :key="section.id"
            class="rounded-[2rem] bg-white border border-slate-200 p-6 md:p-8 shadow-sm"
          >
            <div v-if="section.eyebrow" class="text-[11px] font-bold tracking-[0.24em] uppercase text-brand-orange mb-3">
              {{ section.eyebrow }}
            </div>
            <h3 v-if="section.title" class="text-3xl font-display font-black tracking-tight mb-4">{{ section.title }}</h3>
            <p v-if="section.description" class="text-slate-500 text-lg leading-relaxed mb-6">{{ section.description }}</p>

            <div v-if="section.items.length" class="grid md:grid-cols-2 gap-4">
              <div
                v-for="item in section.items"
                :key="`${section.id}-${item.title}-${item.description}`"
                class="rounded-[1.5rem] bg-slate-50 border border-slate-200 p-5"
              >
                <div v-if="item.title" class="font-bold text-slate-900 text-lg">{{ item.title }}</div>
                <p v-if="item.description" class="text-slate-500 mt-2 leading-relaxed">{{ item.description }}</p>
              </div>
            </div>
          </div>
        </div>

        <aside class="lg:sticky lg:top-28 self-start">
          <OfferBookingForm :offer="offer" />
        </aside>
      </div>
    </section>
  </div>
</template>
