<script setup>
import { AnimatePresence, motion } from 'motion-v'
import { ArrowRightLeft, Sparkles, Wand2, X } from 'lucide-vue-next'

const props = defineProps({
  compareCars: {
    type: Array,
    default: () => [],
  },
  compareSummary: {
    type: String,
    default: '',
  },
  compareLoading: {
    type: Boolean,
    default: false,
  },
  canRunCompare: {
    type: Boolean,
    default: false,
  },
  compareError: {
    type: String,
    default: '',
  },
  showCompareSummary: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['clear', 'toggle-summary', 'close-summary', 'continue-booking'])
</script>

<template>
  <AnimatePresence>
    <motion.div
      v-if="compareCars.length > 0"
      :initial="{ y: 100, opacity: 0 }"
      :animate="{ y: 0, opacity: 1 }"
      :exit="{ y: 100, opacity: 0 }"
      :transition="{ type: 'spring', damping: 25, stiffness: 300 }"
      class="fixed bottom-6 left-0 right-0 z-50 flex justify-center pointer-events-none px-4"
    >
      <div
        :class="[
          'bg-slate-900/90 backdrop-blur-xl border border-white/10 p-3 rounded-[28px] shadow-2xl flex flex-col pointer-events-auto transition-all duration-500 overflow-hidden',
          showCompareSummary ? 'max-w-md w-full' : 'items-center gap-4 flex-row w-auto',
        ]"
      >
        <template v-if="showCompareSummary">
          <div class="flex flex-col animate-in fade-in zoom-in duration-300">
            <div class="flex items-center justify-between mb-4 px-2 pt-1">
              <div class="flex -space-x-4">
                <div
                  v-for="(car, index) in compareCars.slice(0, 3)"
                  :key="car.id"
                  class="w-10 h-10 rounded-full border-2 border-slate-900 overflow-hidden relative bg-white"
                  :style="{ zIndex: 10 - index }"
                >
                  <img :src="car.image" alt="car" class="w-full h-full object-contain p-1 drop-shadow-sm">
                </div>
              </div>
              <button
                type="button"
                class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white/70 hover:text-white hover:bg-white/20 transition-colors"
                @click="emit('close-summary')"
              >
                <X class="w-4 h-4" />
              </button>
            </div>

            <div class="px-3 pb-3">
              <div class="flex items-center gap-2 mb-2">
                <Sparkles class="w-4 h-4 text-brand-orange" />
                <span class="text-white text-xs font-bold uppercase tracking-widest opacity-80">AI-Comparison</span>
              </div>
              <p v-if="compareLoading" class="text-white/70 text-[15px] font-medium leading-relaxed mb-4">
                Comparing cars...
              </p>
              <p v-else-if="compareError" class="text-rose-300 text-[15px] font-medium leading-relaxed mb-4">
                {{ compareError }}
              </p>
              <p v-else class="text-white text-[15px] font-medium leading-relaxed mb-4">
                {{ compareSummary }}
              </p>

              <div class="flex items-center justify-between">
                <button
                  type="button"
                  class="text-white/50 text-xs font-bold uppercase tracking-widest hover:text-white transition-colors"
                  @click="emit('clear')"
                >
                  Reset
                </button>
                <button
                  type="button"
                  class="bg-brand-orange text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg hover:bg-orange-600 transition-colors"
                  @click="emit('continue-booking')"
                >
                  Continue booking
                </button>
              </div>
            </div>
          </div>
        </template>

        <template v-else>
          <div class="flex -space-x-4 pl-2">
            <div
              v-for="(car, index) in compareCars.slice(0, 3)"
              :key="car.id"
              class="w-12 h-12 rounded-full border-[3px] border-slate-900 overflow-hidden relative bg-white"
              :style="{ zIndex: 10 - index }"
            >
              <img :src="car.image" alt="car" class="w-full h-full object-contain p-1 drop-shadow-md">
            </div>
            <div
              v-if="compareCars.length > 3"
              class="w-12 h-12 rounded-full border-[3px] border-slate-900 bg-slate-800 text-white flex items-center justify-center text-sm font-bold relative z-0"
            >
              +{{ compareCars.length - 3 }}
            </div>
          </div>

          <div class="flex flex-col px-2">
            <span class="text-white font-bold text-sm leading-tight">Comparison of {{ compareCars.length }} cars</span>
            <button
              type="button"
              class="text-white/50 text-[11px] font-bold hover:text-white/80 text-left uppercase tracking-wider transition-colors"
              @click="emit('clear')"
            >
              Clear
            </button>
          </div>

          <div class="pr-1 flex items-center gap-2">
              <button
                type="button"
              :disabled="compareCars.length < 2"
                :class="[
                'px-6 py-3 rounded-[20px] font-bold text-sm transition-all flex items-center gap-2',
                compareCars.length >= 2
                  ? 'bg-brand-orange text-white hover:scale-105 shadow-lg'
                  : 'bg-white/10 text-white/50 cursor-not-allowed',
              ]"
              @click="emit('toggle-summary')"
            >
              <Wand2 class="w-4 h-4" /> Smart Compare
            </button>
          </div>
        </template>
      </div>
    </motion.div>
  </AnimatePresence>
</template>
