<script setup>
import { motion } from 'motion-v'
import { ArrowRightLeft, Cog, Fuel, Users, Zap } from 'lucide-vue-next'

const props = defineProps({
  car: {
    type: Object,
    required: true,
  },
  isCompared: {
    type: Boolean,
    default: false,
  },
  locale: {
    type: String,
    default: 'en',
  },
})

const emit = defineEmits(['open', 'compare'])

const displayPrice = computed(() => Number(props.car?.price || 0))
const displayTotal = computed(() => displayPrice.value * 3)
const isBundle = computed(() => props.car?.category === 'Experience')
const primaryTag = computed(() => {
  const tags = Array.isArray(props.car?.tags) ? props.car.tags : []

  return tags[0] || 'AUTO'
})

function formatPlainAmount(value) {
  return new Intl.NumberFormat(props.locale, {
    maximumFractionDigits: Number.isInteger(value) ? 0 : 2,
  }).format(Number(value || 0))
}
</script>

<template>
  <motion.div
    layout
    :initial="{ opacity: 0, y: 20, scale: 0.98 }"
    :while-in-view="{ opacity: 1, y: 0, scale: 1 }"
    :viewport="{ once: true, margin: '-80px' }"
    :transition="{ duration: 0.35 }"
    class="group relative flex flex-col h-full z-10 hover:z-50 cursor-pointer"
    @click="emit('open', props.car)"
  >
    <div class="flex flex-col h-full p-6 opacity-0 pointer-events-none">
      <div class="text-[11px] mb-1">Category</div>
      <h3 class="text-[22px] mb-4 uppercase">Name</h3>
      <div class="flex-1 aspect-[16/9] my-4"></div>
      <div class="mt-auto text-[24px]">$100</div>
    </div>

    <div class="absolute top-0 left-0 w-full min-h-full bg-[#f4f4f5] rounded-[24px] transition-all duration-500 group-hover:bg-white overflow-hidden flex flex-col group-hover:shadow-[0_20px_50px_-20px_rgba(0,0,0,0.15)] outline outline-1 outline-transparent hover:outline-slate-100">
      <div class="absolute top-[20%] left-1/2 -translate-x-1/2 text-[60px] sm:text-[75px] font-black text-slate-200/50 group-hover:text-slate-200/80 group-hover:-translate-y-6 transition-all duration-700 ease-[cubic-bezier(0.2,0.8,0.2,1)] z-0 pointer-events-none select-none whitespace-nowrap leading-none uppercase tracking-widest">
        {{ car.category }}
      </div>

      <div class="flex flex-col h-full p-6 relative z-10">
        <div class="flex justify-between items-start">
          <div class="flex flex-col gap-1">
            <div class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">{{ primaryTag }}</div>
            <h3 class="text-[15px] font-display font-black text-slate-900 leading-tight uppercase tracking-wide">{{ car.name }}</h3>
          </div>

          <button
            type="button"
            :class="[
              'w-10 h-10 rounded-full flex items-center justify-center transition-all duration-500 shrink-0',
              isCompared ? 'bg-brand-orange text-white' : 'bg-slate-100/50 hover:bg-slate-200 text-slate-600',
            ]"
            @click.stop="emit('compare', props.car)"
          >
            <ArrowRightLeft class="w-4 h-4" />
          </button>
        </div>

        <div class="relative aspect-[16/10] my-4 flex items-center justify-center rounded-[20px] overflow-hidden group-hover:shadow-[inset_0_0_20px_rgba(0,0,0,0.05)] transition-all duration-[1s] group-hover:delay-[1000ms] delay-0 ease-[cubic-bezier(0.2,0.8,0.2,1)]">
          <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700 group-hover:delay-[1000ms] delay-0 ease-[cubic-bezier(0.2,0.8,0.2,1)] z-0">
            <img
              src="https://images.pexels.com/photos/33987617/pexels-photo-33987617.jpeg"
              alt="Real view"
              class="w-full h-full object-cover scale-110 group-hover:scale-100 transition-transform duration-[1.2s] group-hover:delay-[1000ms] delay-0 ease-[cubic-bezier(0.2,0.8,0.2,1)]"
            >
            <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent mix-blend-multiply" />
          </div>

          <img
            :src="car.image"
            :alt="car.name"
            class="relative z-10 w-[105%] object-contain mix-blend-multiply group-hover:scale-90 group-hover:opacity-0 transition-all duration-[1s] group-hover:delay-[1000ms] delay-0 ease-[cubic-bezier(0.2,0.8,0.2,1)] pointer-events-none drop-shadow-xl group-hover:drop-shadow-none"
            referrerpolicy="no-referrer"
          >
        </div>

        <div class="mt-auto flex items-end justify-between">
          <div class="flex flex-col gap-1.5 text-[12px] font-medium text-slate-500">
            <template v-if="!isBundle">
              <span>{{ car.specs?.transmission || 'Automatic' }}</span>
              <span>{{ car.specs?.seats || 5 }} Seats</span>
            </template>
            <span v-else class="truncate max-w-[120px]">{{ car.bundleFeatures?.[0] || 'Bundle experience' }}</span>
          </div>

          <div class="bg-white/60 backdrop-blur-xl px-4 py-2.5 rounded-[20px] relative z-20 flex flex-col items-center justify-center group-hover:-translate-y-1 transition-transform duration-500 border border-white/50">
            <div class="flex items-center gap-1.5 mb-1">
              <div class="w-1.5 h-1.5 rounded-full bg-[#00d084]" />
              <div class="text-[22px] font-black text-slate-900 leading-none tracking-tight font-display">
                <span class="text-[14px] text-slate-500 font-bold">$</span>{{ formatPlainAmount(displayTotal) }}
              </div>
            </div>

            <div class="text-[10px] text-slate-500 flex items-baseline gap-1 mt-0.5">
              <span class="font-bold tracking-tight">${{ displayPrice }}</span>
              <span class="text-[7px] font-normal uppercase tracking-[0.1em] opacity-70">/ day</span>
            </div>
          </div>
        </div>
      </div>

      <div class="grid grid-rows-[0fr] group-hover:grid-rows-[1fr] transition-[grid-template-rows] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] bg-white z-20 relative">
        <div class="overflow-hidden">
          <div class="px-6 pb-6 flex flex-col gap-4">
            <div class="grid grid-cols-2 gap-2 text-[11px] text-slate-600 font-medium">
              <div class="flex items-center gap-2 bg-[#f4f4f5] px-3 py-2.5 rounded-xl">
                <Fuel class="w-3.5 h-3.5 text-slate-400 group-hover:text-brand-orange transition-colors duration-500" />
                {{ car.specs?.fuel || 'Petrol' }}
              </div>
              <div class="flex items-center gap-2 bg-[#f4f4f5] px-3 py-2.5 rounded-xl">
                <Cog class="w-3.5 h-3.5 text-slate-400 group-hover:text-brand-orange transition-colors duration-500" />
                {{ car.specs?.transmission || 'Automatic' }}
              </div>
              <div class="flex items-center gap-2 bg-[#f4f4f5] px-3 py-2.5 rounded-xl">
                <Users class="w-3.5 h-3.5 text-slate-400 group-hover:text-brand-orange transition-colors duration-500" />
                {{ car.specs?.seats || 5 }} Seats
              </div>
              <div class="flex items-center gap-2 bg-[#f4f4f5] px-3 py-2.5 rounded-xl">
                <Zap class="w-3.5 h-3.5 text-slate-400 group-hover:text-brand-orange transition-colors duration-500" />
                {{ car.specs?.power || 150 }} HP
              </div>
            </div>

            <button type="button" class="w-full bg-slate-900 hover:bg-slate-800 text-white py-4 rounded-xl font-bold uppercase tracking-widest text-[11px] transition-colors">
              View Details
            </button>
          </div>
        </div>
      </div>
    </div>
  </motion.div>
</template>
