<script setup>
import { motion } from 'motion-v'
import {
  ArrowRight,
  CarFront,
  Cog,
  Gauge,
  LayoutGrid,
  List,
  Sparkles,
  Timer,
  Users,
  Zap,
} from 'lucide-vue-next'
import { formatPublicMoney } from '~/content/utils'
import { useHomeContent } from '~/content/home'

const homeContent = useHomeContent()
const { locale } = usePublicLocale()
const homeFleetCategories = computed(() => homeContent.homeFleetCategories.value || [])
const homeFleetSection = computed(() => homeContent.homeFleetSection.value || {})
const homeFleetVehicles = computed(() => homeContent.homeFleetVehicles.value || [])
const formatCarPrice = (car) => formatPublicMoney(car.price, car.currency || 'USD', locale.value)

const activeCategory = ref(homeFleetCategories.value[0]?.id || 'All')
const selectedCarId = ref(homeFleetVehicles.value[0]?.id || null)
const isListView = ref(false)

const filteredCars = computed(() => {
  return homeFleetVehicles.value.filter((car) => {
    if (activeCategory.value === 'All') {
      return true
    }

    return (car.homeTypes || []).includes(activeCategory.value) || car.category === activeCategory.value
  })
})

const selectedCar = computed(() => {
  return filteredCars.value.find((car) => car.id === selectedCarId.value) || filteredCars.value[0] || null
})

watch(
  homeFleetCategories,
  (nextCategories) => {
    if (!nextCategories.some((category) => category.id === activeCategory.value)) {
      activeCategory.value = nextCategories[0]?.id || 'All'
    }
  },
  { immediate: true },
)

watch(
  filteredCars,
  (nextCars) => {
    if (!nextCars.some((car) => car.id === selectedCarId.value)) {
      selectedCarId.value = nextCars[0]?.id || null
    }
  },
  { immediate: true },
)
</script>

<template>
  <section class="py-20 md:py-32 relative w-full bg-gradient-to-br from-slate-50 to-[#E8E8EC] overflow-hidden">
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <motion.div
        :animate="{ x: [0, 30, -10, 0], y: [0, -30, 10, 0] }"
        :transition="{ duration: 15, repeat: Infinity, ease: 'easeInOut' }"
        class="absolute top-[-10%] left-[-5%] w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-white rounded-full blur-[120px] opacity-60"
      />
      <motion.div
        :animate="{ x: [0, -20, 20, 0], y: [0, 20, -10, 0] }"
        :transition="{ duration: 20, repeat: Infinity, ease: 'easeInOut', delay: 1 }"
        class="absolute bottom-[-10%] right-[-5%] w-[50vw] h-[50vw] max-w-[700px] max-h-[700px] bg-brand-orange/5 rounded-full blur-[100px]"
      />
    </div>

    <div class="max-w-6xl mx-auto px-4 sm:px-6 relative z-10">
      <div class="mb-10 md:mb-14 flex flex-col md:flex-row md:items-end justify-between gap-6">
        <div>
          <motion.div
            :initial="{ opacity: 0, y: 10 }"
            :while-in-view="{ opacity: 1, y: 0 }"
            :viewport="{ once: true }"
            class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/80 backdrop-blur-md border border-white/60 text-[10px] font-bold tracking-[0.2em] text-slate-600 uppercase mb-4 shadow-sm"
          >
            <Sparkles class="w-3.5 h-3.5 text-brand-orange" />
            {{ homeFleetSection.eyebrow }}
          </motion.div>

          <motion.h2
            :initial="{ opacity: 0, y: 10 }"
            :while-in-view="{ opacity: 1, y: 0 }"
            :viewport="{ once: true }"
            :transition="{ delay: 0.1 }"
            class="text-4xl md:text-5xl lg:text-6xl font-display font-black text-slate-900 uppercase tracking-tight"
          >
            {{ homeFleetSection.title?.replace(` ${homeFleetSection.accent}`, '') }}
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-orange to-amber-500"> {{ homeFleetSection.accent }}</span>
          </motion.h2>
        </div>

        <div class="flex flex-col md:items-end gap-4">
          <motion.p
            :initial="{ opacity: 0, y: 10 }"
            :while-in-view="{ opacity: 1, y: 0 }"
            :viewport="{ once: true }"
            :transition="{ delay: 0.2 }"
            class="text-slate-500 text-sm font-medium max-w-sm md:text-right"
          >
            {{ homeFleetSection.description }}
          </motion.p>

          <motion.div
            :initial="{ opacity: 0 }"
            :animate="{ opacity: 1 }"
            class="relative bg-slate-200/50 backdrop-blur-md p-1 rounded-xl inline-flex shadow-inner"
          >
            <button
              type="button"
              :class="[
                'relative z-10 flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors duration-200',
                !isListView ? 'bg-white shadow-sm text-slate-900' : 'text-slate-500 hover:text-slate-700',
              ]"
              @click="isListView = false"
            >
              <LayoutGrid class="w-3.5 h-3.5" />
              {{ homeFleetSection.showcaseLabel }}
            </button>

            <button
              type="button"
              :class="[
                'relative z-10 flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wider transition-colors duration-200',
                isListView ? 'bg-white shadow-sm text-slate-900' : 'text-slate-500 hover:text-slate-700',
              ]"
              @click="isListView = true"
            >
              <List class="w-3.5 h-3.5" />
              {{ homeFleetSection.gridLabel }}
            </button>
          </motion.div>
        </div>
      </div>

      <div
        v-if="!filteredCars.length"
          class="rounded-[2.5rem] border border-white/80 bg-white/70 backdrop-blur-3xl px-8 py-16 text-center shadow-[0_20px_60px_-15px_rgba(0,0,0,0.05)]"
        >
          <h3 class="text-3xl font-display font-bold text-slate-900 mb-3">{{ homeFleetSection.emptyTitle }}</h3>
          <p class="text-slate-500 max-w-xl mx-auto">{{ homeFleetSection.emptyDescription }}</p>
        </div>

        <div
          v-else-if="!isListView && selectedCar"
          class="flex flex-col lg:flex-row gap-6 lg:gap-8"
        >
          <div class="flex-1 bg-white/60 backdrop-blur-3xl border border-white/80 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.05)] rounded-[2.5rem] p-4 flex flex-col relative ring-1 ring-black/5">
            <div class="flex flex-col h-full gap-4">
              <div class="flex flex-col lg:flex-row gap-4 flex-1">
                <div class="w-full lg:w-[60%] flex flex-col gap-4">
                  <div class="relative rounded-[2rem] overflow-hidden bg-slate-100 border border-white shadow-inner group aspect-video lg:aspect-auto lg:flex-1 shrink-0">
                    <img
                      :src="selectedCar.image"
                      :alt="selectedCar.name"
                      class="absolute inset-0 w-full h-full object-cover rounded-[2rem] group-hover:scale-[1.03] transition-transform duration-700"
                      referrerpolicy="no-referrer"
                    >
                  </div>

                  <div class="bg-white/80 backdrop-blur-md rounded-[2rem] p-5 border border-white shadow-sm shrink-0">
                    <p class="text-slate-500 text-sm leading-relaxed mb-4">
                      {{ selectedCar.description }}
                    </p>

                    <div class="flex flex-wrap items-center gap-3 text-sm font-bold text-slate-700">
                      <div class="flex items-center gap-2 bg-white/60 backdrop-blur-md px-4 py-2 rounded-xl border border-white/60">
                        <Users class="w-4 h-4 text-brand-orange" />
                        <span>{{ selectedCar.specs.seats }} {{ homeFleetSection.seatsLabel }}</span>
                      </div>
                      <div class="flex items-center gap-2 bg-slate-100/80 px-4 py-2 rounded-xl border border-slate-200/50">
                        <CarFront class="w-4 h-4 text-brand-orange" />
                        <span>{{ selectedCar.specs.doors }} {{ homeFleetSection.doorsLabel }}</span>
                      </div>
                      <div class="flex items-center gap-2 bg-slate-100/80 px-4 py-2 rounded-xl border border-slate-200/50">
                        <Cog class="w-4 h-4 text-brand-orange" />
                        <span>{{ selectedCar.specs.transmission }}</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="w-full lg:w-[40%] flex flex-col gap-4">
                  <div class="bg-white/80 backdrop-blur-md rounded-[2rem] p-5 border border-white shadow-sm shrink-0">
                    <div class="flex gap-2 mb-3">
                      <span class="px-3 py-1 bg-slate-900 text-white rounded-full text-[10px] font-bold uppercase tracking-widest shadow-sm">
                        {{ selectedCar.category }}
                      </span>
                      <span
                        v-if="selectedCar.tags.includes('PREMIUM')"
                        class="px-3 py-1 bg-gradient-to-r from-amber-200 to-amber-400 text-amber-900 rounded-full text-[10px] font-bold uppercase tracking-widest shadow-sm"
                      >
                        {{ homeFleetSection.premiumBadgeLabel }}
                      </span>
                    </div>
                    <h3 class="text-3xl lg:text-4xl font-bold text-slate-900 tracking-tight leading-tight">
                      {{ selectedCar.name }}
                    </h3>
                  </div>

                  <div class="bg-white/80 backdrop-blur-md rounded-[2rem] p-5 border border-white shadow-sm flex-1">
                    <h4 class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-4">{{ homeFleetSection.performanceTitle }}</h4>
                    <div class="space-y-1">
                      <div class="flex items-center justify-between py-3 border-b border-white/40">
                        <div class="flex items-center gap-3 text-slate-600">
                          <Zap class="w-4 h-4 text-slate-400" />
                          <span class="text-sm font-medium">{{ homeFleetSection.powerLabel }}</span>
                        </div>
                        <span class="text-sm font-bold text-slate-900">{{ selectedCar.specs.power }}</span>
                      </div>
                      <div class="flex items-center justify-between py-3 border-b border-slate-200/50">
                        <div class="flex items-center gap-3 text-slate-600">
                          <Timer class="w-4 h-4 text-slate-400" />
                          <span class="text-sm font-medium">{{ homeFleetSection.accelerationLabel }}</span>
                        </div>
                        <span class="text-sm font-bold text-slate-900">{{ selectedCar.specs.acceleration }}</span>
                      </div>
                      <div class="flex items-center justify-between py-3">
                        <div class="flex items-center gap-3 text-slate-600">
                          <Gauge class="w-4 h-4 text-slate-400" />
                          <span class="text-sm font-medium">{{ homeFleetSection.topSpeedLabel }}</span>
                        </div>
                        <span class="text-sm font-bold text-slate-900">{{ selectedCar.specs.topSpeed }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="bg-slate-900 p-5 rounded-[2rem] shadow-xl shrink-0 flex flex-col gap-5 mt-auto">
                    <div class="flex items-center justify-between">
                      <span class="text-slate-400 text-[10px] font-bold uppercase tracking-widest">{{ homeFleetSection.dailyRateLabel }}</span>
                      <div class="flex items-start gap-1 text-white">
                        <span class="font-bold text-lg mt-0.5 text-brand-orange">$</span>
                        <span class="font-black text-4xl leading-none">{{ selectedCar.price }}</span>
                      </div>
                    </div>

                    <NuxtLink
                      :to="selectedCar.ctaUrl"
                      class="w-full py-4 rounded-[1.5rem] bg-brand-orange hover:bg-amber-500 text-white font-bold text-xs uppercase tracking-widest transition-colors duration-300 flex items-center justify-center gap-3 group/btn shadow-md"
                    >
                      {{ homeFleetSection.ctaLabel }}
                      <ArrowRight class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
                    </NuxtLink>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="w-full lg:w-[380px] xl:w-[420px] shrink-0 flex flex-col h-[500px] lg:h-[600px] xl:h-[640px] gap-4">
          <div
            class="relative bg-slate-200/50 backdrop-blur-md p-1.5 rounded-2xl flex w-full overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
          >
              <button
                v-for="category in homeFleetCategories"
                :key="category.id"
                type="button"
                :class="[
                  'relative z-10 flex-1 py-2 px-3 rounded-xl text-[11px] font-bold tracking-wider uppercase transition-colors duration-200 whitespace-nowrap',
                  activeCategory === category.id ? 'bg-white shadow-sm text-slate-900' : 'text-slate-500 hover:text-slate-700',
                ]"
                @click="activeCategory = category.id"
              >
                {{ category.label }}
              </button>
            </div>

            <div class="flex-1 overflow-y-auto pr-2 space-y-2.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-slate-300/50 [&::-webkit-scrollbar-thumb]:rounded-full">
              <button
                v-for="car in filteredCars"
                :key="car.id"
                type="button"
                :class="[
                  'w-full flex items-center gap-4 p-2.5 rounded-[1.25rem] transition-colors duration-200 text-left border',
                  selectedCar?.id === car.id
                    ? 'bg-white border-brand-orange/20 shadow-[0_8px_20px_-10px_rgba(242,125,38,0.2)] ring-1 ring-brand-orange/10'
                    : 'bg-white/40 border-white/60 hover:bg-white/80 hover:border-white/80',
                ]"
                @click="selectedCarId = car.id"
              >
                  <div class="w-20 h-14 rounded-xl overflow-hidden bg-slate-100 shrink-0 shadow-inner">
                    <img
                      :src="car.image"
                      :alt="car.name"
                      class="w-full h-full object-cover"
                      referrerpolicy="no-referrer"
                    >
                  </div>

                  <div class="flex-1 min-w-0 py-1">
                    <h4 :class="['font-display font-bold truncate transition-colors', selectedCar?.id === car.id ? 'text-slate-900' : 'text-slate-700']">
                      {{ car.name }}
                    </h4>
                    <div class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mt-0.5">
                      {{ car.category }}
                    </div>
                  </div>

                  <div class="shrink-0 pl-2 pr-2 text-right">
                    <div :class="['font-black tracking-tight', selectedCar?.id === car.id ? 'text-brand-orange' : 'text-slate-900']">
                      ${{ car.price }}
                    </div>
                  </div>
              </button>
            </div>
          </div>
        </div>

        <div
          v-else
          class="flex flex-col gap-6"
        >
          <div
            class="relative bg-slate-200/50 backdrop-blur-md p-1.5 rounded-2xl inline-flex overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
          >
            <button
              v-for="category in homeFleetCategories"
              :key="category.id"
              type="button"
              :class="[
                'relative z-10 py-2.5 px-6 rounded-xl text-xs font-bold tracking-wider uppercase transition-colors duration-200 whitespace-nowrap',
                activeCategory === category.id ? 'bg-white shadow-sm text-slate-900' : 'text-slate-500 hover:text-slate-700',
              ]"
              @click="activeCategory = category.id"
            >
              {{ category.label }}
            </button>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            <div
              v-for="car in filteredCars"
              :key="car.id"
              class="bg-white/80 backdrop-blur-xl border border-white shadow-[0_8px_30px_-15px_rgba(0,0,0,0.05)] hover:shadow-[0_12px_40px_-15px_rgba(0,0,0,0.1)] hover:-translate-y-1 transition-all duration-300 rounded-[2rem] p-4 flex flex-col group"
            >
                <div class="relative w-full h-48 rounded-[1.5rem] overflow-hidden mb-5 bg-slate-100 shadow-inner">
                  <img
                    :src="car.image"
                    :alt="car.name"
                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                    referrerpolicy="no-referrer"
                  >

                  <div class="absolute top-3 left-3 flex gap-2">
                    <span class="px-2.5 py-1 bg-white/90 backdrop-blur-md border border-white/50 shadow-sm rounded-lg text-[9px] font-bold uppercase tracking-widest text-slate-600">
                      {{ car.category }}
                    </span>
                    <span
                      v-if="car.tags.includes('PREMIUM')"
                      class="px-2.5 py-1 bg-slate-900/90 backdrop-blur-md text-white rounded-lg text-[9px] font-bold uppercase tracking-widest shadow-sm"
                    >
                      {{ homeFleetSection.premiumBadgeLabel }}
                    </span>
                  </div>
                </div>

                <div class="flex justify-between items-start mb-4 px-2">
                  <div>
                    <h3 class="font-display font-black text-xl text-slate-900 uppercase tracking-tight">{{ car.name }}</h3>
                  </div>

                  <div class="text-right shrink-0">
                    <div class="text-brand-orange font-black text-xl leading-none">{{ formatCarPrice(car) }}</div>
                    <div class="text-[9px] font-bold uppercase tracking-widest text-slate-400 mt-1">{{ homeFleetSection.perDayLabel }}</div>
                  </div>
                </div>

                <div class="flex flex-wrap gap-2 mt-auto pt-4 border-t border-white/40 px-2">
                  <div class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">
                    <Users class="w-3.5 h-3.5 text-slate-400" />
                    {{ car.specs.seats }}
                  </div>
                  <div class="w-1 h-1 rounded-full bg-slate-200 my-auto" />
                  <div class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">
                    <CarFront class="w-3.5 h-3.5 text-slate-400" />
                    {{ car.specs.doors }}
                  </div>
                  <div class="w-1 h-1 rounded-full bg-slate-200 my-auto" />
                  <div class="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-slate-500">
                    <Cog class="w-3.5 h-3.5 text-slate-400" />
                    {{ car.specs.transmission }}
                  </div>
                </div>

                <NuxtLink
                  :to="car.ctaUrl"
                  class="mt-5 w-full py-3.5 rounded-xl bg-slate-100 hover:bg-slate-900 text-slate-900 hover:text-white font-bold text-xs uppercase tracking-widest transition-colors flex items-center justify-center gap-2 group/btn"
                >
                  {{ homeFleetSection.ctaLabel }}
                  <ArrowRight class="w-3.5 h-3.5 group-hover/btn:translate-x-1 transition-transform" />
                </NuxtLink>
            </div>
          </div>
        </div>
    </div>
  </section>
</template>
