<script setup>
import { AnimatePresence, motion } from 'motion-v'
import { Check, Search, X } from 'lucide-vue-next'
import { formatPublicMoney } from '~/content/utils'
import { useSearchContent } from '~/content/search'

const { locale } = usePublicLocale()
const searchContent = useSearchContent()
const searchUi = computed(() => searchContent.searchUi.value)
const priceLabel = (car) => formatPublicMoney(car.price, car.currency || 'USD', locale.value)

defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  compareList: {
    type: Array,
    default: () => [],
  },
})

defineEmits(['close', 'remove', 'book', 'browse'])

function hasExactVehicleId(car) {
  return Boolean(Number(car?.vehicle?.id || 0))
}
</script>

<template>
  <AnimatePresence>
    <div
      v-if="open"
      class="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6 md:p-12"
    >
      <motion.div
        :initial="{ opacity: 0 }"
        :animate="{ opacity: 1 }"
        :exit="{ opacity: 0 }"
        class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm"
        @click="$emit('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="relative w-full max-w-6xl max-h-[90vh] bg-white/90 backdrop-blur-2xl rounded-[2rem] shadow-2xl overflow-hidden flex flex-col z-10 border border-white/40"
      >
        <div class="px-6 py-4 border-b border-white/20 flex items-center justify-between bg-white/40 shrink-0">
          <h2 class="text-2xl font-display font-bold text-slate-900 tracking-tight">{{ searchUi.compareTitle }}</h2>
          <button
            type="button"
            class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-500 hover:bg-slate-100 hover:text-slate-900 transition-colors"
            @click="$emit('close')"
          >
            <X class="w-5 h-5" />
          </button>
        </div>

        <div class="flex-1 overflow-y-auto p-6 bg-white/20">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div
              v-for="car in compareList"
              :key="car.id"
              class="bg-white/60 backdrop-blur-md rounded-2xl border border-white/60 overflow-hidden shadow-sm flex flex-col"
            >
              <div class="aspect-[4/3] relative">
                <img v-if="car.images.length" :src="car.images[0]" :alt="car.model" class="w-full h-full object-cover">
                <div v-else class="w-full h-full bg-slate-100 text-slate-400 flex flex-col items-center justify-center gap-3">
                  <Search class="w-8 h-8" />
                  <span class="text-[11px] font-bold uppercase tracking-[0.24em]">{{ searchUi.imageComingSoonLabel }}</span>
                </div>
                <button
                  type="button"
                  class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/90 backdrop-blur flex items-center justify-center text-slate-500 hover:text-red-500 hover:bg-white shadow-sm transition-colors"
                  @click="$emit('remove', car)"
                >
                  <X class="w-4 h-4" />
                </button>
              </div>

              <div class="p-5 flex-1 flex flex-col">
                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">
                  {{ car.brand }}
                </div>
                <h3 class="text-xl font-display font-bold text-slate-900 mb-2 truncate">
                  {{ car.model }}
                </h3>
                <div class="flex items-baseline gap-1 mb-6">
                  <span class="text-2xl font-black text-brand-orange">{{ priceLabel(car) }}</span>
                  <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">/{{ searchUi.daySingularLabel }}</span>
                </div>

                <div class="space-y-4 flex-1">
                  <div class="flex items-center justify-between py-2 border-b border-white/40">
                    <span class="text-xs font-medium text-slate-500">{{ searchUi.compareYearLabel }}</span>
                    <span class="text-sm font-bold text-slate-900">{{ car.year || 'N/A' }}</span>
                  </div>
                  <div class="flex items-center justify-between py-2 border-b border-white/40">
                    <span class="text-xs font-medium text-slate-500">{{ searchUi.compareTypeLabel }}</span>
                    <span class="text-sm font-bold text-slate-900">{{ car.type }}</span>
                  </div>
                  <div class="flex items-center justify-between py-2 border-b border-white/40">
                    <span class="text-xs font-medium text-slate-500">{{ searchUi.compareSeatsLabel }}</span>
                    <span class="text-sm font-bold text-slate-900">{{ car.seats || 'N/A' }}</span>
                  </div>
                  <div class="flex items-center justify-between py-2 border-b border-white/40">
                    <span class="text-xs font-medium text-slate-500">{{ searchUi.compareTransmissionLabel }}</span>
                    <span class="text-sm font-bold text-slate-900">{{ car.transmission }}</span>
                  </div>
                  <div class="flex items-center justify-between py-2 border-b border-white/40">
                    <span class="text-xs font-medium text-slate-500">{{ searchUi.compareEngineLabel }}</span>
                    <span class="text-sm font-bold text-slate-900">{{ car.engine }}</span>
                  </div>

                  <div class="pt-2">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3 block">{{ searchUi.compareFeaturesLabel }}</span>
                    <div class="flex flex-col gap-2">
                      <div
                        v-for="feature in car.features"
                        :key="feature"
                        class="flex items-center gap-2 text-sm text-slate-700 font-medium"
                      >
                        <Check class="w-4 h-4 text-emerald-500 shrink-0" />
                        <span>{{ feature }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="pt-2">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3 block">{{ searchUi.compareOptionsLabel }}</span>
                    <div class="flex flex-col gap-2">
                      <div
                        v-for="option in car.options"
                        :key="option"
                        class="flex items-center gap-2 text-sm text-slate-700 font-medium"
                      >
                        <Check class="w-4 h-4 text-brand-orange shrink-0" />
                        <span>{{ option }}</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="pt-6 mt-auto">
                  <button
                    type="button"
                    :disabled="!car.available || !hasExactVehicleId(car)"
                    class="w-full py-3 bg-slate-900 text-white rounded-xl font-bold hover:bg-brand-orange transition-colors shadow-lg shadow-slate-900/20 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-slate-900"
                    @click="$emit('book', car)"
                  >
                    {{ car.available && hasExactVehicleId(car) ? searchUi.bookLabel : searchUi.unavailableLabel }}
                  </button>
                </div>
              </div>
            </div>

            <div
              v-if="compareList.length === 2"
              class="hidden lg:flex flex-col items-center justify-center bg-white/40 backdrop-blur-sm border-2 border-dashed border-white/60 rounded-2xl p-8 text-center h-full min-h-[400px]"
            >
              <div class="w-16 h-16 rounded-full bg-white shadow-sm flex items-center justify-center mb-4">
                <Search class="w-6 h-6 text-slate-300" />
              </div>
              <h4 class="text-lg font-bold text-slate-900 mb-2">{{ searchUi.compareAddVehicleLabel }}</h4>
              <p class="text-sm text-slate-500 max-w-[200px]">
                {{ searchUi.compareAddDescription }}
              </p>
              <button
                type="button"
                class="mt-6 px-6 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-xl font-bold hover:bg-slate-50 hover:text-slate-900 transition-colors shadow-sm"
                @click="$emit('browse')"
              >
                {{ searchUi.compareBrowseLabel }}
              </button>
            </div>
          </div>
        </div>
      </motion.div>
    </div>
  </AnimatePresence>
</template>
