<script setup>
import { ArrowLeft, Clock, Compass } from 'lucide-vue-next'
import PublicArticleImage from '~/components/shared/PublicArticleImage.vue'
import { buildPublicLocaleSwitchContext, useRegisterPublicLocaleSwitchContext } from '~/composables/usePublicLocaleSwitchContext'
import { buildGuideDetailSeo, resolveGuidesPagePath, resolveGuidesSectionPathsByLocale, useGuidesContent } from '~/content/guides'
import { renderPublicRichText } from '~/utils/public-rich-text'
import { buildRentSearchRoute } from '~/utils/public-routes'
import { DEFAULT_PUBLIC_LOCALE } from '~/utils/public-locales'
import { buildPublicSeoLinks } from '~/utils/public-seo'

const route = useRoute()
const { locale } = usePublicLocale()
const runtimeConfig = useRuntimeConfig()
const ui = usePublicUi()
const { guidesPage, guidesUi, useResolvedGuideDetail } = await useGuidesContent()
const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))

const guide = useResolvedGuideDetail(computed(() => route.params.slug))
const guideSeo = computed(() => buildGuideDetailSeo(guide.value, pageOrigin.value))
const guidesIndexRoute = computed(() => guidesPage.value?.path || resolveGuidesPagePath(locale.value))
const guidesIndexPathsByLocale = computed(() => resolveGuidesSectionPathsByLocale(guidesPage.value))
const guideBodyHtml = computed(() => renderPublicRichText(guide.value?.bodyHtml || guide.value?.body || ''))
const localeSwitchContext = computed(() => buildPublicLocaleSwitchContext(guide.value, {
  sectionPath: guidesIndexRoute.value,
  sectionPathsByLocale: guidesIndexPathsByLocale.value,
}))

useRegisterPublicLocaleSwitchContext(localeSwitchContext)

if (!guide.value) {
  throw createError({
    statusCode: 404,
    statusMessage: ui.value.guides.routeGuideNotFound,
  })
}

if (!guide.value?.availableLocales?.includes(locale.value) && locale.value !== DEFAULT_PUBLIC_LOCALE) {
  await navigateTo(guidesIndexRoute.value, { redirectCode: 302 })
}

useSeoMeta({
  title: () => guideSeo.value?.title || guide.value?.title || '',
  description: () => guideSeo.value?.description || guide.value?.excerpt || '',
  ogTitle: () => guideSeo.value?.ogTitle || guide.value?.title || '',
  ogDescription: () => guideSeo.value?.ogDescription || guide.value?.excerpt || '',
  ogImage: () => guideSeo.value?.ogImage || guide.value?.heroImage || '',
  robots: () => guideSeo.value?.robots || 'index,follow',
})

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

<template>
  <div class="bg-slate-50 min-h-screen pb-28">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 pt-28">
      <NuxtLink
        :to="guidesIndexRoute"
        class="inline-flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-slate-500 hover:text-brand-orange transition-colors mb-10 group"
      >
        <ArrowLeft class="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
        {{ ui.guides.backToRoutes }}
      </NuxtLink>

      <div class="rounded-[2.5rem] overflow-hidden bg-slate-900 text-white shadow-2xl relative">
        <PublicArticleImage
          :src="guide.heroImage"
          :alt="guide.title"
          img-class="absolute inset-0 w-full h-full object-cover opacity-35"
          fallback-class="absolute inset-0 w-full h-full"
        />
        <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-900/70 to-slate-900/10" />

        <div class="relative z-10 px-6 sm:px-10 lg:px-14 pt-16 pb-14 lg:pt-24 lg:pb-20">
          <div class="flex flex-wrap items-center gap-4 mb-8">
            <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-[10px] font-bold uppercase tracking-widest">
              <Compass class="w-4 h-4 text-brand-orange" />
              {{ guide.badge || guidesUi.dateFallback }}
            </span>
            <span class="inline-flex items-center gap-2 text-sm text-white/70">
              <Clock class="w-4 h-4" />
              {{ guide.date }}
            </span>
            <span v-if="guide.readTime" class="text-white/30">•</span>
            <span v-if="guide.readTime" class="text-sm text-white/70">{{ guide.readTime }}</span>
          </div>

          <h1 class="text-4xl md:text-6xl lg:text-7xl font-black tracking-tight leading-[0.95] max-w-4xl mb-6">
            {{ guide.title }}
          </h1>

          <p class="text-lg md:text-2xl text-white/75 max-w-3xl leading-relaxed">
            {{ guide.excerpt }}
          </p>

        </div>
      </div>
    </div>

    <div class="max-w-5xl mx-auto px-4 sm:px-6 pt-14">
      <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm p-8 md:p-12">
        <div
          v-if="guideBodyHtml"
          class="article-rich-content text-lg md:text-xl text-slate-600 leading-relaxed"
          v-html="guideBodyHtml"
        />

        <div v-else class="space-y-8 text-lg md:text-xl text-slate-600 leading-relaxed">
          <p class="first-letter:text-7xl md:first-letter:text-8xl first-letter:font-black first-letter:text-brand-orange first-letter:mr-4 first-letter:float-left first-letter:leading-[0.8]">
            {{ guide.lead }}
          </p>

          <p
            v-for="paragraph in guide.paragraphs"
            :key="paragraph"
            class="whitespace-pre-line"
          >
            {{ paragraph }}
          </p>

          <ul v-if="guide.listItems.length" class="grid grid-cols-1 md:grid-cols-3 gap-4 my-10">
            <li
              v-for="item in guide.listItems"
              :key="item.count + item.label"
              class="rounded-[1.75rem] border border-slate-100 bg-slate-50 p-5 shadow-sm"
            >
              <div class="text-[10px] font-bold uppercase tracking-widest text-brand-orange mb-3">{{ item.count }}</div>
              <div class="text-base font-bold text-slate-900 leading-snug">{{ item.label }}</div>
            </li>
          </ul>

          <blockquote
            v-if="guide.quote"
            class="border-l-4 border-brand-orange pl-6 py-2 italic text-2xl font-medium text-slate-700"
          >
            "{{ guide.quote }}"
            <footer v-if="guide.quoteAuthor" class="text-sm font-bold uppercase tracking-widest text-slate-400 mt-4 not-italic">
              - {{ guide.quoteAuthor }}
            </footer>
          </blockquote>
        </div>

        <div class="mt-12 grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-6 items-center rounded-[2rem] border border-slate-100 bg-slate-50 px-6 py-6 md:px-8">
          <div>
            <div class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">{{ guidesUi.recommendedVehicleLabel }}</div>
            <div class="text-2xl md:text-3xl font-black tracking-tight text-slate-900">{{ guide.recommendedVehicle }}</div>
            <p class="text-slate-500 mt-3 max-w-2xl">
              {{ ui.guides.liveRentalHint }}
            </p>
          </div>

          <NuxtLink
            :to="buildRentSearchRoute({}, { locale: locale })"
            class="inline-flex items-center justify-center px-8 py-4 rounded-full bg-slate-900 text-white text-xs font-bold uppercase tracking-widest hover:bg-brand-orange transition-colors"
          >
            {{ ui.guides.findYourDrive }}
          </NuxtLink>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.article-rich-content :deep(p) {
  margin: 0 0 1.75rem;
}

.article-rich-content :deep(p:first-child)::first-letter {
  float: left;
  margin-right: 1rem;
  color: rgb(249 115 22);
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 0.8;
}

.article-rich-content :deep(h2) {
  margin: 3rem 0 1.25rem;
  color: rgb(15 23 42);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.article-rich-content :deep(h3) {
  margin: 2rem 0 1rem;
  color: rgb(15 23 42);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.article-rich-content :deep(ul),
.article-rich-content :deep(ol) {
  margin: 1.75rem 0 2rem;
  padding-left: 1.5rem;
}

.article-rich-content :deep(li) {
  margin: 0.75rem 0;
  padding-left: 0.35rem;
}

.article-rich-content :deep(li::marker) {
  color: rgb(249 115 22);
  font-weight: 700;
}

.article-rich-content :deep(strong) {
  color: rgb(15 23 42);
  font-weight: 700;
}

.article-rich-content :deep(a) {
  color: rgb(249 115 22);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.article-rich-content :deep(blockquote) {
  margin: 3rem 0;
  border-left: 4px solid rgb(249 115 22);
  padding: 0.5rem 0 0.5rem 1.5rem;
  color: rgb(51 65 85);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-style: italic;
  font-weight: 500;
}

.article-rich-content :deep(code) {
  border-radius: 0.5rem;
  background: rgb(241 245 249);
  padding: 0.15rem 0.45rem;
  color: rgb(15 23 42);
  font-size: 0.88em;
}
</style>
