<script setup>
import { computed } from 'vue'
import { motion } from 'motion-v'
import { ArrowRight, Fuel, Settings2, Star, Users, Zap } from 'lucide-vue-next'
import { useVehiclesContent } from '~/content/vehicles'

const props = defineProps({
  vehicle: {
    type: Object,
    required: true,
  },
  smartMatch: {
    type: Boolean,
    default: false,
  },
  delay: {
    type: Number,
    default: 0,
  },
})

const vehiclesContent = useVehiclesContent()
const vehicleCatalogUi = computed(() => vehiclesContent.vehicleCatalogUi.value || {})
const vehicleDetailPath = computed(() => props.vehicle?.path || vehiclesContent.vehiclesPage.value?.path || '/vehicles')
const ratingLabel = computed(() => {
  const rating = Number(props.vehicle?.rating)

  return Number.isFinite(rating) && rating > 0
    ? rating.toFixed(1)
    : (vehicleCatalogUi.value.ratingNewLabel || 'No rating')
})
</script>

<template>
  <motion.div
    layout
    :initial="{ opacity: 0, scale: 0.95, y: 20 }"
    :animate="{ opacity: 1, scale: 1, y: 0 }"
    :exit="{ opacity: 0, scale: 0.95, y: 20 }"
    :transition="{ duration: 0.3, delay }"
    class="bg-white/60 backdrop-blur-xl rounded-[2rem] overflow-hidden border border-white/60 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgb(0,0,0,0.08)] hover:bg-white/80 hover:-translate-y-1 transition-all duration-300 flex flex-col group"
  >
    <NuxtLink
      :to="vehicleDetailPath"
      class="relative aspect-[4/3] bg-gradient-to-br from-slate-50 via-white to-slate-100/80 overflow-hidden block"
      :aria-label="`Open ${vehicle.brand} ${vehicle.model} details`"
    >
      <div class="absolute inset-0 p-2.5 sm:p-4">
        <img
          :src="vehicle.image"
          :alt="`${vehicle.brand} ${vehicle.model}`"
          class="h-full w-full object-contain object-center scale-[1.18] translate-y-1 transition-transform duration-700 group-hover:scale-[1.24] group-hover:translate-y-0 will-change-transform"
          referrerpolicy="no-referrer"
        >
      </div>
    </NuxtLink>

    <div class="p-6 flex-1 flex flex-col">
      <div class="mb-4 flex flex-wrap gap-2">
        <span
          v-for="tag in vehicle.tags"
          :key="tag"
          class="px-3 py-1.5 bg-white/90 backdrop-blur-md text-slate-900 rounded-xl text-[10px] font-bold uppercase tracking-widest shadow-sm"
        >
          {{ tag }}
        </span>
        <span
          v-if="smartMatch"
          class="px-3 py-1.5 bg-brand-orange text-white rounded-xl text-[10px] font-bold uppercase tracking-widest shadow-sm flex items-center gap-1"
        >
          <Zap class="w-3 h-3" fill="currentColor" />
          Smart Match
        </span>
      </div>

      <div class="flex justify-between items-start mb-2">
        <div>
          <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{ vehicle.brand }}</div>
          <h3 class="text-xl font-display font-bold text-slate-900 leading-tight">{{ vehicle.model }}</h3>
        </div>
        <div class="flex items-center gap-1 bg-white/60 backdrop-blur-md px-2 py-1 rounded-lg shadow-sm border border-white/60">
          <Star class="w-3.5 h-3.5 text-brand-orange fill-current" />
          <span class="text-xs font-bold text-slate-700">{{ ratingLabel }}</span>
        </div>
      </div>

      <div class="flex flex-wrap gap-3 mt-4 mb-6">
        <div class="flex items-center gap-1.5 text-xs font-medium text-slate-600 bg-white/50 backdrop-blur-md px-2.5 py-1.5 rounded-lg border border-white/60 shadow-sm">
          <Users class="w-3.5 h-3.5 text-slate-400" />
          {{ vehicle.specs.seats }}
        </div>
        <div class="flex items-center gap-1.5 text-xs font-medium text-slate-600 bg-white/50 backdrop-blur-md px-2.5 py-1.5 rounded-lg border border-white/60 shadow-sm">
          <Settings2 class="w-3.5 h-3.5 text-slate-400" />
          {{ vehicle.specs.transmission }}
        </div>
        <div class="flex items-center gap-1.5 text-xs font-medium text-slate-600 bg-white/50 backdrop-blur-md px-2.5 py-1.5 rounded-lg border border-white/60 shadow-sm">
          <Fuel class="w-3.5 h-3.5 text-slate-400" />
          {{ vehicle.specs.fuel }}
        </div>
      </div>

      <div class="mt-auto pt-4 border-t border-white/40 flex items-end justify-between">
        <div>
          <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-0.5">{{ vehicleCatalogUi.dailyRateLabel }}</div>
          <div class="flex items-baseline gap-1">
            <span class="text-2xl font-black text-brand-orange">${{ vehicle.price }}</span>
            <span class="text-xs font-bold text-slate-500">{{ vehicleCatalogUi.pricePerDaySuffix }}</span>
          </div>
        </div>
        <NuxtLink
          :to="vehicleDetailPath"
          class="w-12 h-12 rounded-2xl bg-slate-900 text-white flex items-center justify-center hover:bg-brand-orange transition-colors shadow-md group/btn"
        >
          <ArrowRight class="w-5 h-5 group-hover/btn:translate-x-1 transition-transform" />
        </NuxtLink>
      </div>
    </div>
  </motion.div>
</template>
