<script setup>
import { AnimatePresence, motion } from 'motion-v'
import { Calendar, Car, DollarSign, FileText, MapPin, X } from 'lucide-vue-next'
import { loadHomeRequestStatus } from '~/content/home-export'
import { DEFAULT_PUBLIC_LOCALE, normalizePublicLocale } from '~/utils/public-locales'

const { locale } = usePublicLocale()
const { showRequestDetails, requestDetails } = useRequestOverlay()
const homeHeroRequestStatus = shallowRef({})
const requestStatusCache = new Map()

async function loadRequestStatus(localeCode = DEFAULT_PUBLIC_LOCALE) {
  const normalizedLocale = normalizePublicLocale(localeCode)

  if (!requestStatusCache.has(normalizedLocale)) {
    requestStatusCache.set(normalizedLocale, loadHomeRequestStatus(normalizedLocale).catch(() => ({})))
  }

  homeHeroRequestStatus.value = await requestStatusCache.get(normalizedLocale)
}

watch(
  [showRequestDetails, locale],
  async ([isOpen, currentLocale]) => {
    if (!isOpen) {
      return
    }

    await loadRequestStatus(currentLocale)
  },
  { immediate: true },
)

const requestMetaLine = computed(() => {
  const parts = [
    requestDetails.value?.requestLabel,
    homeHeroRequestStatus.value.trackPendingLabel,
  ].filter(Boolean)

  return parts.join(' • ')
})

function resolveValue(value) {
  return String(value || '').trim() || '-'
}

function close() {
  showRequestDetails.value = false
}
</script>

<template>
  <AnimatePresence>
    <template v-if="showRequestDetails">
      <motion.div
        :initial="{ opacity: 0 }"
        :animate="{ opacity: 1 }"
        :exit="{ opacity: 0 }"
        class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50"
        @click="close"
      />
      <motion.div
        :initial="{ opacity: 0, scale: 0.95, y: 20 }"
        :animate="{ opacity: 1, scale: 1, y: 0 }"
        :exit="{ opacity: 0, scale: 0.95, y: 20 }"
        class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg bg-white rounded-[2rem] shadow-2xl z-50 overflow-hidden"
      >
        <div class="p-6 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-600">
              <FileText class="w-5 h-5" />
            </div>
            <div>
              <h3 class="text-lg font-bold text-slate-900">{{ homeHeroRequestStatus.activeTitle }}</h3>
              <p v-if="requestMetaLine" class="text-xs text-slate-500 font-medium">
                {{ requestMetaLine }}
              </p>
            </div>
          </div>
          <button
            class="w-8 h-8 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-500 hover:text-slate-900 hover:bg-slate-50 transition-colors"
            @click="close"
          >
            <X class="w-4 h-4" />
          </button>
        </div>

        <div class="p-6 space-y-6">
          <div class="flex items-center justify-between p-4 rounded-2xl bg-emerald-50 border border-emerald-100">
            <div class="flex items-center gap-3">
              <div class="w-2 h-2 rounded-full bg-emerald-500 animate-ping" />
              <span class="text-sm font-bold text-emerald-700">{{ homeHeroRequestStatus.liveUpdatesLabel }}</span>
            </div>
            <span class="text-xs font-bold text-emerald-600 uppercase tracking-wider">{{ homeHeroRequestStatus.trackPendingLabel }}</span>
          </div>

          <div class="space-y-4">
            <div class="text-xs font-bold text-slate-400 uppercase tracking-wider">{{ homeHeroRequestStatus.detailsTitle }}</div>

            <div class="grid grid-cols-2 gap-4">
              <div class="p-4 rounded-2xl border border-slate-100 bg-slate-50/50">
                <div class="flex items-center gap-2 text-slate-500 mb-2">
                  <MapPin class="w-4 h-4" />
                  <span class="text-[10px] font-bold uppercase tracking-wider">{{ homeHeroRequestStatus.locationLabel }}</span>
                </div>
                <div class="text-sm font-semibold text-slate-900">
                  {{ resolveValue(requestDetails?.location) }}
                </div>
              </div>

              <div class="p-4 rounded-2xl border border-slate-100 bg-slate-50/50">
                <div class="flex items-center gap-2 text-slate-500 mb-2">
                  <Car class="w-4 h-4" />
                  <span class="text-[10px] font-bold uppercase tracking-wider">{{ homeHeroRequestStatus.vehicleTypeLabel }}</span>
                </div>
                <div class="text-sm font-semibold text-slate-900">
                  {{ resolveValue(requestDetails?.carType) }}
                </div>
              </div>

              <div class="p-4 rounded-2xl border border-slate-100 bg-slate-50/50">
                <div class="flex items-center gap-2 text-slate-500 mb-2">
                  <Calendar class="w-4 h-4" />
                  <span class="text-[10px] font-bold uppercase tracking-wider">{{ homeHeroRequestStatus.datesLabel }}</span>
                </div>
                <div class="text-sm font-semibold text-slate-900">
                  {{ resolveValue(requestDetails?.dates) }}
                </div>
              </div>

              <div class="p-4 rounded-2xl border border-slate-100 bg-slate-50/50">
                <div class="flex items-center gap-2 text-slate-500 mb-2">
                  <DollarSign class="w-4 h-4" />
                  <span class="text-[10px] font-bold uppercase tracking-wider">{{ homeHeroRequestStatus.budgetLabel }}</span>
                </div>
                <div class="text-sm font-semibold text-slate-900">
                  {{ resolveValue(requestDetails?.budget) }}
                </div>
              </div>
            </div>
          </div>

          <div class="pt-2">
            <button
              class="w-full py-3.5 rounded-xl bg-slate-900 text-white font-bold text-xs uppercase tracking-wider hover:bg-slate-800 transition-colors"
              @click="close"
            >
              {{ homeHeroRequestStatus.closeLabel }}
            </button>
          </div>
        </div>
      </motion.div>
    </template>
  </AnimatePresence>
</template>
