<script setup>
import { AnimatePresence, motion } from 'motion-v'
import { ArrowRight, Calendar, Car, Check, Info, MapPin, Sparkles } from 'lucide-vue-next'
import { format } from 'date-fns'
import { formatPublicMoney } from '~/content/utils'
import { useHomeContent } from '~/content/home'

const homeContent = useHomeContent()
const homeFleetVehicles = computed(() => homeContent.homeFleetVehicles.value || [])
const homeHeroRequestStatus = computed(() => homeContent.homeHeroRequestStatus.value || {})

const props = defineProps({
  locationName: {
    type: String,
    default: '',
  },
  dateRange: {
    type: Object,
    default: () => ({ from: null, to: null }),
  },
  carLabel: {
    type: String,
    default: '',
  },
})

const { locale, localizedPath } = usePublicLocale()
const step = ref(0)

const previewVehicles = computed(() => {
  const query = String(props.carLabel || '').toLowerCase()

  const matches = homeFleetVehicles.value.filter((vehicle) => {
    const category = String(vehicle.category || '').toLowerCase()
    const tags = vehicle.tags.map((item) => String(item || '').toLowerCase())

    if (!query) {
      return true
    }

    if (query.includes('premium') || query.includes('luxury')) {
      return tags.includes('premium') || category.includes('premium') || category.includes('luxury')
    }

    if (query.includes('suv')) {
      return category.includes('suv') || category.includes('luxury')
    }

    return category.includes(query)
  })

  return (matches.length ? matches : homeFleetVehicles.value).slice(0, 3).map((vehicle) => ({
    id: vehicle.id,
    name: vehicle.name,
    type: [vehicle.category, vehicle.specs.transmission].filter(Boolean).join(' • '),
    price: formatVehiclePrice(vehicle.price, vehicle.currency || 'USD'),
    img: vehicle.image,
    href: vehicle.ctaUrl,
  }))
})

const currentStepCopy = computed(() => {
  if (step.value === 0) {
    return {
      title: homeHeroRequestStatus.value.waitTitle,
      description: homeHeroRequestStatus.value.waitDescription,
    }
  }

  if (step.value === 1) {
    return {
      title: homeHeroRequestStatus.value.previewTitle,
      description: homeHeroRequestStatus.value.previewDescription,
    }
  }

  return {
    title: homeHeroRequestStatus.value.bannerTitle,
    description: homeHeroRequestStatus.value.bannerDescription,
  }
})

let firstTimer
let secondTimer

function formatVehiclePrice(value, currency = 'USD') {
  const amount = Number(value)

  if (!Number.isFinite(amount)) {
    return ''
  }

  return formatPublicMoney(amount, currency, locale.value)
}

onMounted(() => {
  firstTimer = window.setTimeout(() => {
    step.value = 1
  }, 2500)

  secondTimer = window.setTimeout(() => {
    step.value = 2
  }, 5000)
})

onBeforeUnmount(() => {
  if (firstTimer) {
    window.clearTimeout(firstTimer)
  }

  if (secondTimer) {
    window.clearTimeout(secondTimer)
  }
})
</script>

<template>
  <div class="absolute inset-0 w-full h-full z-10 overflow-hidden flex flex-col bg-gradient-to-br from-slate-950 via-slate-900 to-slate-800">
    <div class="absolute top-0 right-0 w-96 h-96 bg-brand-orange/10 rounded-full blur-[100px]" />
    <div class="absolute bottom-0 left-0 w-96 h-96 bg-blue-500/10 rounded-full blur-[100px]" />

    <div class="relative z-10 flex-1 flex flex-col">
      <AnimatePresence mode="wait">
        <motion.div
          v-if="step < 2"
          :key="step"
          :initial="{ opacity: 0, y: 20 }"
          :animate="{ opacity: 1, y: 0 }"
          :exit="{ opacity: 0, y: -20 }"
          :transition="{ duration: 0.5 }"
          class="flex-1 flex flex-col items-center justify-center text-center p-8"
        >
          <div :class="['w-16 h-16 rounded-full flex items-center justify-center mb-6 relative', step === 0 ? 'bg-brand-orange/10' : 'bg-emerald-500/10']">
            <motion.div
              :animate="{ scale: [1, 1.2, 1], opacity: [0.5, 0, 0.5] }"
              :transition="{ repeat: Infinity, duration: 2 }"
              :class="['absolute inset-0 rounded-full', step === 0 ? 'bg-brand-orange/20' : 'bg-emerald-500/20']"
            />
            <component :is="step === 0 ? Info : Sparkles" :class="['w-8 h-8', step === 0 ? 'text-brand-orange' : 'text-emerald-400']" />
          </div>
          <h3 class="text-3xl font-display font-light text-white mb-4">
            <span class="font-semibold">{{ currentStepCopy.title }}</span>
          </h3>
          <p class="text-slate-400 max-w-sm">
            {{ currentStepCopy.description }}
          </p>
        </motion.div>

        <motion.div
          v-else
          key="results"
          :initial="{ opacity: 0, scale: 0.95, filter: 'blur(10px)' }"
          :animate="{ opacity: 1, scale: 1, filter: 'blur(0px)' }"
          :transition="{ duration: 0.6, ease: 'easeOut' }"
          class="absolute inset-0 w-full h-full p-6 lg:p-8 overflow-hidden flex flex-col"
        >
          <div class="bg-blue-500/10 backdrop-blur-xl border border-blue-500/20 rounded-2xl p-3 mb-5 flex items-start gap-3 shrink-0">
            <div class="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center shrink-0">
              <Info class="w-4 h-4 text-blue-400" />
            </div>
            <div>
              <h4 class="text-sm font-bold text-blue-100 mb-0.5">{{ homeHeroRequestStatus.bannerTitle }}</h4>
              <p class="text-[11px] text-blue-300/80 leading-relaxed">
                {{ homeHeroRequestStatus.bannerDescription }}
              </p>
            </div>
          </div>

          <div class="flex items-center justify-between mb-5 shrink-0">
            <div>
              <h3 class="text-xl font-display font-bold text-white mb-2">{{ homeHeroRequestStatus.fleetTitle }}</h3>
              <div class="flex flex-wrap items-center gap-2 text-[10px] font-medium text-slate-300">
                <div class="flex items-center gap-1 bg-white/10 backdrop-blur-md border border-white/10 px-2 py-1 rounded-md shadow-sm">
                  <MapPin class="w-3 h-3 text-brand-orange" />
                  <span>{{ locationName }}</span>
                </div>
                <div class="flex items-center gap-1 bg-white/10 backdrop-blur-md border border-white/10 px-2 py-1 rounded-md shadow-sm">
                  <Calendar class="w-3 h-3 text-brand-orange" />
                  <span>{{ dateRange?.from ? format(dateRange.from, 'MMM d') : '' }} - {{ dateRange?.to ? format(dateRange.to, 'MMM d') : '' }}</span>
                </div>
                <div class="flex items-center gap-1 bg-white/10 backdrop-blur-md border border-white/10 px-2 py-1 rounded-md shadow-sm">
                  <Car class="w-3 h-3 text-brand-orange" />
                  <span>{{ carLabel }}</span>
                </div>
              </div>
            </div>
            <div class="w-10 h-10 rounded-full bg-brand-orange/20 backdrop-blur-md border border-brand-orange/30 flex items-center justify-center text-brand-orange shrink-0 shadow-sm">
              <span class="font-bold text-sm">{{ previewVehicles.length }}</span>
            </div>
          </div>

          <div class="space-y-2.5 flex-1 min-h-0 flex flex-col justify-center">
            <motion.div
              v-for="(car, carIndex) in previewVehicles"
              :key="car.id"
              :initial="{ opacity: 0, y: 10 }"
              :animate="{ opacity: 1, y: 0 }"
              :transition="{ delay: 0.2 + (carIndex * 0.1) }"
              class="flex items-center gap-3 p-2 bg-white/10 backdrop-blur-xl border border-white/10 rounded-2xl hover:bg-white/20 transition-all group shrink-0 shadow-lg"
            >
              <div class="relative w-24 h-16 shrink-0 rounded-xl overflow-hidden">
                <img :src="car.img" :alt="car.name" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                <div class="absolute top-1 left-1 bg-brand-orange px-1.5 py-0.5 rounded text-[7px] font-black uppercase tracking-widest text-white shadow-sm">
                  {{ homeHeroRequestStatus.publicFleetLabel }}
                </div>
              </div>
              <div class="flex-1">
                <div class="font-bold text-sm text-white group-hover:text-brand-orange transition-colors">{{ car.name }}</div>
                <div class="text-[10px] text-slate-400 mb-1">{{ car.type }}</div>
                <div class="flex items-center gap-1 text-[8px] font-bold text-emerald-400 uppercase tracking-wider">
                  <Check class="w-2.5 h-2.5" /> Available
                </div>
              </div>
              <div class="text-right pr-2">
                <div class="text-lg font-black text-white">{{ car.price }}</div>
                <div class="text-[8px] text-slate-500 uppercase font-bold tracking-wider">/ day</div>
              </div>
            </motion.div>
          </div>

          <NuxtLink
            :to="localizedPath('/vehicles')"
            class="w-full mt-5 py-3.5 rounded-xl bg-brand-orange/90 backdrop-blur-xl border border-brand-orange/50 text-white font-bold text-xs uppercase tracking-widest hover:bg-brand-orange transition-colors flex items-center justify-center gap-2 shadow-xl shadow-brand-orange/20 shrink-0"
          >
            {{ homeHeroRequestStatus.fleetCtaLabel }} <ArrowRight class="w-4 h-4" />
          </NuxtLink>
        </motion.div>
      </AnimatePresence>
    </div>
  </div>
</template>
