<script setup>
import { AnimatePresence, motion } from 'motion-v'
import { ArrowRight, Check, Clock, Cpu, LoaderCircle, ShieldCheck } from 'lucide-vue-next'
import { useHomeContent } from '~/content/home'

const homeContent = useHomeContent()
const homeHeroRequestStatus = computed(() => homeContent.homeHeroRequestStatus.value || {})
const ui = usePublicUi()

const props = defineProps({
  requestLabel: {
    type: String,
    default: '',
  },
  trackHref: {
    type: String,
    default: '',
  },
  trackPath: {
    type: String,
    default: '',
  },
  requestDetails: {
    type: Object,
    default: () => ({}),
  },
  isPending: {
    type: Boolean,
    default: false,
  },
})

const progressIndex = ref(0)

const progressSteps = computed(() => {
  return homeHeroRequestStatus.value.progressSteps.length
    ? homeHeroRequestStatus.value.progressSteps
    : [homeHeroRequestStatus.value.trackPendingLabel]
})

const currentStepLabel = computed(() => {
  return progressSteps.value[progressIndex.value] || homeHeroRequestStatus.value.trackPendingLabel
})

const sentDescription = computed(() => {
  const template = homeHeroRequestStatus.value.sentDescriptionTemplate || ''

  return template
    .replace('{carType}', props.requestDetails?.carType || homeHeroRequestStatus.value.trackPendingLabel)
    .replace('{location}', props.requestDetails?.location || homeHeroRequestStatus.value.trackPendingLabel)
    .replace('{budget}', props.requestDetails?.budget || homeHeroRequestStatus.value.trackPendingLabel)
})

const statusTitle = computed(() => {
  if (props.isPending) {
    return ui.value.common.sendingRequest || homeHeroRequestStatus.value.waitTitle || homeHeroRequestStatus.value.sentTitle
  }

  return homeHeroRequestStatus.value.sentTitle
})

const statusDescription = computed(() => {
  if (props.isPending) {
    return homeHeroRequestStatus.value.waitDescription || homeHeroRequestStatus.value.bannerDescription || sentDescription.value
  }

  return sentDescription.value
})

const vehicleShape = computed(() => {
  const carType = String(props.requestDetails?.carType || '').toLowerCase()

  if (carType.includes('suv')) {
    return 'suv'
  }

  if (carType.includes('sedan')) {
    return 'sedan'
  }

  return 'sports'
})

const stats = computed(() => {
  return [
    {
      label: homeHeroRequestStatus.value.statTypeLabel,
      value: props.requestDetails?.carType || homeHeroRequestStatus.value.trackPendingLabel,
      left: '10%',
      top: '-10px',
      delay: 0.9,
    },
    {
      label: homeHeroRequestStatus.value.statLocationLabel,
      value: props.requestDetails?.location || homeHeroRequestStatus.value.trackPendingLabel,
      left: '45%',
      top: '-35px',
      delay: 1.1,
    },
    {
      label: homeHeroRequestStatus.value.statStatusLabel,
      value: currentStepLabel.value,
      left: '75%',
      top: '-15px',
      delay: 1.3,
    },
  ]
})

let intervalId

onMounted(() => {
  intervalId = window.setInterval(() => {
    progressIndex.value = (progressIndex.value + 1) % progressSteps.value.length
  }, 4000)
})

onBeforeUnmount(() => {
  if (intervalId) {
    window.clearInterval(intervalId)
  }
})
</script>

<template>
  <motion.div
    :initial="{ opacity: 0, scale: 0.95 }"
    :animate="{ opacity: 1, scale: 1 }"
    class="flex flex-col items-center text-center py-2"
  >
    <div :class="['w-16 h-16 rounded-full flex items-center justify-center mb-4 relative', isPending ? 'bg-brand-orange/10' : 'bg-emerald-500/10']">
      <motion.div
        :initial="{ scale: 0 }"
        :animate="{ scale: 1 }"
        :transition="{ type: 'spring', delay: 0.2 }"
        :class="['absolute inset-0 rounded-full animate-ping', isPending ? 'bg-brand-orange/20' : 'bg-emerald-500/20']"
      />
      <LoaderCircle v-if="isPending" class="w-8 h-8 text-brand-orange animate-spin" :stroke-width="2.5" />
      <Check v-else class="w-8 h-8 text-emerald-500" :stroke-width="3" />
    </div>

    <h3 class="text-2xl font-black text-slate-900 uppercase tracking-tight mb-2">{{ statusTitle }}</h3>
    <p class="text-slate-500 text-sm mb-6 max-w-sm">
      {{ statusDescription }}
    </p>

    <NuxtLink
      v-if="trackPath"
      :to="trackPath"
      class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 mb-6 flex items-center justify-between group cursor-pointer hover:border-brand-orange/30 transition-colors"
    >
      <div class="text-left flex items-center gap-3">
        <div class="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center text-brand-orange">
          <Clock class="w-5 h-5" />
        </div>
        <div>
          <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">{{ homeHeroRequestStatus.trackStatusLabel }}</div>
          <div class="text-sm font-semibold text-slate-900">{{ requestLabel || homeHeroRequestStatus.openTrackingLabel }}</div>
        </div>
      </div>
      <div class="w-8 h-8 rounded-full bg-white shadow-sm flex items-center justify-center group-hover:bg-brand-orange group-hover:text-white transition-colors text-slate-400">
        <ArrowRight class="w-4 h-4" />
      </div>
    </NuxtLink>

    <a
      v-else-if="trackHref"
      :href="trackHref"
      class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 mb-6 flex items-center justify-between group cursor-pointer hover:border-brand-orange/30 transition-colors"
    >
      <div class="text-left flex items-center gap-3">
        <div class="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center text-brand-orange">
          <Clock class="w-5 h-5" />
        </div>
        <div>
          <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">{{ homeHeroRequestStatus.trackStatusLabel }}</div>
          <div class="text-sm font-semibold text-slate-900">{{ requestLabel || homeHeroRequestStatus.openTrackingLabel }}</div>
        </div>
      </div>
      <div class="w-8 h-8 rounded-full bg-white shadow-sm flex items-center justify-center group-hover:bg-brand-orange group-hover:text-white transition-colors text-slate-400">
        <ArrowRight class="w-4 h-4" />
      </div>
    </a>

    <div
      v-else
      class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 mb-6 flex items-center justify-between"
    >
      <div class="text-left flex items-center gap-3">
        <div class="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center text-brand-orange">
          <Clock class="w-5 h-5" />
        </div>
        <div>
          <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">{{ homeHeroRequestStatus.trackStatusLabel }}</div>
          <div class="text-sm font-semibold text-slate-900">{{ requestLabel || homeHeroRequestStatus.openTrackingLabel }}</div>
        </div>
      </div>
      <div class="w-8 h-8 rounded-full bg-white shadow-sm flex items-center justify-center text-slate-400">
        <ArrowRight class="w-4 h-4" />
      </div>
    </div>

    <div class="w-full h-48 relative overflow-hidden rounded-2xl bg-white mb-6 flex items-end justify-center shadow-inner border border-slate-200 pb-8">
      <div class="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:14px_24px]" />
      <div class="absolute bottom-6 left-1/2 -translate-x-1/2 w-64 h-3 bg-slate-100 rounded-[100%] blur-[4px]" />
      <div class="absolute bottom-[30px] left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-slate-300 to-transparent" />

      <div class="absolute top-4 left-0 w-full flex justify-center z-20">
        <AnimatePresence mode="wait">
          <motion.div
            :key="currentStepLabel"
            :initial="{ opacity: 0, y: -5 }"
            :animate="{ opacity: 1, y: 0 }"
            :exit="{ opacity: 0, y: 5 }"
            class="flex items-center gap-2 bg-white/90 backdrop-blur-sm px-3 py-1.5 rounded-full border border-slate-200 shadow-sm"
          >
            <Cpu class="w-3.5 h-3.5 text-brand-orange animate-pulse" />
            <span class="text-[10px] font-bold text-slate-600 uppercase tracking-widest">{{ currentStepLabel }}</span>
          </motion.div>
        </AnimatePresence>
      </div>

      <div class="absolute bottom-8 z-10">
        <svg
          v-if="vehicleShape === 'suv'"
          viewBox="0 0 160 60"
          class="w-56 h-auto drop-shadow-xl"
        >
          <path d="M 15 45 L 15 25 Q 15 20 20 20 L 45 15 L 70 5 Q 75 0 85 0 L 130 0 Q 140 0 145 10 L 155 25 L 155 45 Z" class="fill-white stroke-slate-300" stroke-width="2" stroke-linejoin="round" />
          <path d="M 65 15 L 75 5 L 125 5 L 135 15 Z" class="fill-slate-100 stroke-slate-200" stroke-width="1.5" stroke-linejoin="round" />
          <circle cx="40" cy="45" r="12" class="fill-slate-800" />
          <circle cx="125" cy="45" r="12" class="fill-slate-800" />
          <circle cx="40" cy="45" r="4" class="fill-slate-200" />
          <circle cx="125" cy="45" r="4" class="fill-slate-200" />
        </svg>

        <svg
          v-else-if="vehicleShape === 'sports'"
          viewBox="0 0 160 60"
          class="w-56 h-auto drop-shadow-xl"
        >
          <path d="M 5 45 L 20 30 L 60 15 Q 75 10 90 10 L 115 15 L 155 35 L 155 45 Z" class="fill-white stroke-slate-300" stroke-width="2" stroke-linejoin="round" />
          <path d="M 55 22 L 75 15 L 105 15 L 125 22 Z" class="fill-slate-100 stroke-slate-200" stroke-width="1.5" stroke-linejoin="round" />
          <circle cx="35" cy="45" r="12" class="fill-slate-800" />
          <circle cx="130" cy="45" r="12" class="fill-slate-800" />
          <circle cx="35" cy="45" r="5" class="fill-slate-200" />
          <circle cx="130" cy="45" r="5" class="fill-slate-200" />
        </svg>

        <svg
          v-else
          viewBox="0 0 160 60"
          class="w-56 h-auto drop-shadow-xl"
        >
          <path d="M 10 45 L 15 30 L 45 20 L 75 10 Q 85 5 95 5 L 125 10 L 150 25 L 155 45 Z" class="fill-white stroke-slate-300" stroke-width="2" stroke-linejoin="round" />
          <path d="M 65 20 L 80 10 L 115 10 L 130 20 Z" class="fill-slate-100 stroke-slate-200" stroke-width="1.5" stroke-linejoin="round" />
          <circle cx="35" cy="45" r="11" class="fill-slate-800" />
          <circle cx="125" cy="45" r="11" class="fill-slate-800" />
          <circle cx="35" cy="45" r="4" class="fill-slate-200" />
          <circle cx="125" cy="45" r="4" class="fill-slate-200" />
        </svg>

        <motion.div
          v-for="(stat, statIndex) in stats"
          :key="`${stat.label}-${statIndex}`"
          :initial="{ opacity: 0, y: 10, scale: 0.8 }"
          :animate="{ opacity: 1, y: 0, scale: 1 }"
          :transition="{ delay: stat.delay, type: 'spring', stiffness: 300 }"
          class="absolute flex flex-col items-center"
          :style="{ left: stat.left, top: stat.top }"
        >
          <div class="bg-slate-800 text-white text-[8px] font-mono px-1.5 py-0.5 rounded shadow-lg border border-slate-700 whitespace-nowrap z-20">
            <span class="text-slate-400 mr-1">{{ stat.label }}:</span>
            <span class="text-brand-orange font-bold">{{ stat.value }}</span>
          </div>
          <div class="w-[1px] h-4 bg-slate-400/50 mt-0.5" />
          <div class="w-1.5 h-1.5 rounded-full bg-brand-orange shadow-[0_0_5px_#EAA80C]" />
        </motion.div>

        <motion.div
          :initial="{ left: '-20%', opacity: 0 }"
          :animate="{ left: '120%', opacity: [0, 1, 1, 0] }"
          :transition="{ duration: 1.5, delay: 0.8, ease: 'easeInOut', repeat: Infinity, repeatDelay: 1.2 }"
          class="absolute top-[-40%] bottom-[-20%] w-24 bg-gradient-to-r from-transparent via-brand-orange/10 to-transparent border-r-2 border-brand-orange/50 z-20 transform -skew-x-12 pointer-events-none"
        >
          <div class="absolute right-0 top-0 bottom-0 w-[1px] bg-brand-orange shadow-[0_0_15px_#EAA80C]" />
        </motion.div>

        <motion.div
          :initial="{ scale: 0, opacity: 0 }"
          :animate="{ scale: 1, opacity: 1 }"
          :transition="{ delay: 2.2, type: 'spring', stiffness: 400, damping: 20 }"
          class="absolute -top-4 -right-2 bg-emerald-100 border border-emerald-200 text-emerald-600 rounded-full p-1.5 shadow-md z-30"
        >
          <ShieldCheck class="w-5 h-5" />
        </motion.div>
      </div>
    </div>
  </motion.div>
</template>
