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

const { locale } = usePublicLocale()

const props = defineProps({
  compareList: {
    type: Array,
    default: () => [],
  },
  notice: {
    type: String,
    default: '',
  },
})

const searchContent = useSearchContent()
const searchUi = computed(() => searchContent.searchUi.value)
const compareSelectedLabel = computed(() => searchContent.formatSearchCompareSelectedLabel(props.compareList.length))
const priceLabel = (car) => formatPublicMoney(car.price, car.currency || 'USD', locale.value)

defineEmits(['clear', 'open', 'remove'])
</script>

<template>
  <AnimatePresence>
    <motion.div
      v-if="compareList.length > 0"
      :initial="{ y: '100%' }"
      :animate="{ y: 0 }"
      :exit="{ y: '100%' }"
      :transition="{ type: 'spring', damping: 25, stiffness: 200 }"
      class="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-2xl border-t border-white/40 shadow-[0_-20px_40px_rgba(0,0,0,0.08)] z-50 p-4 md:p-6"
    >
      <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-6">
          <div>
            <h3 class="text-xl font-display font-bold text-slate-900 tracking-tight">{{ searchUi.compareTitle }}</h3>
            <p class="text-sm font-medium text-slate-500">{{ compareSelectedLabel }}</p>
            <p v-if="notice" class="mt-1 text-xs font-semibold text-brand-orange uppercase tracking-wider">
              {{ notice }}
            </p>
          </div>
          <div class="flex gap-3 w-full md:w-auto">
            <button
              type="button"
              class="flex-1 md:flex-none px-5 py-2.5 text-sm font-bold text-slate-500 hover:text-slate-900 hover:bg-slate-100 rounded-xl transition-all"
              @click="$emit('clear')"
            >
              {{ searchUi.compareClearAllLabel }}
            </button>
            <button
              type="button"
              :disabled="compareList.length < 2"
              class="flex-1 md:flex-none px-8 py-2.5 rounded-xl text-sm font-bold transition-all duration-300 bg-brand-orange text-white hover:bg-brand-orange/90 shadow-lg shadow-brand-orange/20 hover:shadow-brand-orange/40 hover:-translate-y-0.5 disabled:pointer-events-none"
              @click="$emit('open')"
            >
              {{ searchUi.compareNowLabel }}
            </button>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div
            v-for="car in compareList"
            :key="car.id"
            class="flex items-center gap-4 bg-white/60 backdrop-blur-md p-3 rounded-2xl border border-white/60 relative pr-12 shadow-sm group hover:border-brand-orange/30 transition-colors"
          >
            <img v-if="car.images.length" :src="car.images[0]" :alt="car.model" class="w-20 h-14 object-cover rounded-xl">
            <div v-else class="w-20 h-14 rounded-xl bg-slate-100 text-slate-400 flex items-center justify-center shrink-0">
              <Search class="w-4 h-4" />
            </div>
            <div class="min-w-0">
              <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider truncate">{{ car.brand }}</div>
              <div class="text-sm font-bold text-slate-900 truncate">{{ car.model }}</div>
              <div class="text-xs font-bold text-brand-orange mt-0.5">{{ priceLabel(car) }}/{{ searchUi.daySingularLabel }}</div>
            </div>
            <button
              type="button"
              class="absolute right-4 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:text-red-500 hover:bg-red-50 transition-all opacity-100 md:opacity-0 md:group-hover:opacity-100"
              @click="$emit('remove', car)"
            >
              <X class="w-4 h-4" />
            </button>
          </div>

          <div
            v-for="index in 3 - compareList.length"
            :key="`empty-${index}`"
            class="hidden md:flex items-center justify-center gap-3 bg-white/40 backdrop-blur-sm border border-dashed border-white/60 p-3 rounded-2xl h-[82px]"
          >
            <div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center">
              <Search class="w-4 h-4 text-slate-300" />
            </div>
            <span class="text-xs font-bold uppercase tracking-wider text-slate-400">{{ searchUi.compareAddVehicleLabel }}</span>
          </div>
        </div>
      </div>
    </motion.div>
  </AnimatePresence>
</template>
