<template>
  <div class="relative min-h-screen text-white">
    <!-- Garage Background Image (no dark overlay — bright, light garage) -->
    <div class="fixed inset-0 z-0">
      <div class="absolute inset-0 bg-[url('@/assets/garage-bg.png')] bg-cover bg-center bg-fixed"></div>
    </div>

    <!-- ── Spatial UI Layer: Hotspots (always visible, even in Zen mode) ── -->
    <div class="fixed inset-0 z-[5] pointer-events-none">
      <div class="relative w-full h-full">
        <!-- Hotspot 1: Szervizkönyv/Naptár (bal fal) -->
        <div class="absolute top-[30%] left-[20%] pointer-events-auto group">
          <!-- Pulzáló hotspot kör -->
          <div class="relative flex items-center justify-center cursor-pointer">
            <div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring"></div>
            <div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring-delayed"></div>
            <div class="relative w-6 h-6 rounded-full bg-[#FF3366] shadow-[0_0_20px_#FF3366] animate-hotspot-pulse"></div>
          </div>
          <!-- Glassmorphism Bento Box (hover opens) -->
          <div class="absolute mt-4 w-64 opacity-0 pointer-events-none scale-95 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto bg-[#04151F]/80 backdrop-blur-xl border border-white/20 rounded-xl p-4 shadow-2xl z-40">
            <div class="flex items-center gap-3 mb-3">
              <svg class="w-6 h-6 text-[#00E5A0]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
              <h3 class="text-lg font-bold text-white">Szerviznaptár</h3>
            </div>
            <p class="text-sm text-white/60">Közelgő események</p>
            <div class="mt-3 space-y-2">
              <div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
                <span>Olajcsere</span>
                <span class="text-[#00E5A0]">2 hét</span>
              </div>
              <div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
                <span>Műszaki vizsga</span>
                <span class="text-[#00E5A0]">3 hónap</span>
              </div>
              <div class="flex items-center justify-between text-xs text-white/40">
                <span>Gumi szezonális</span>
                <span class="text-yellow-400">1 hónap</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Hotspot 2: Szerszámok/Beállítások (jobb fal) -->
        <div class="absolute top-[30%] right-[20%] pointer-events-auto group">
          <div class="relative flex items-center justify-center cursor-pointer">
            <div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring"></div>
            <div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring-delayed"></div>
            <div class="relative w-6 h-6 rounded-full bg-[#FF3366] shadow-[0_0_20px_#FF3366] animate-hotspot-pulse"></div>
          </div>
          <div class="absolute mt-4 w-64 opacity-0 pointer-events-none scale-95 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto bg-[#04151F]/80 backdrop-blur-xl border border-white/20 rounded-xl p-4 shadow-2xl z-40">
            <div class="flex items-center gap-3 mb-3">
              <svg class="w-6 h-6 text-[#418890]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
              <h3 class="text-lg font-bold text-white">Felszerelés</h3>
            </div>
            <p class="text-sm text-white/60">Alkatrészek és Skinek</p>
            <div class="mt-3 space-y-2">
              <div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
                <span>Alkatrész katalógus</span>
                <span class="text-[#418890]">42 tétel</span>
              </div>
              <div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
                <span>Skin csomagok</span>
                <span class="text-[#418890]">6 elérhető</span>
              </div>
              <div class="flex items-center justify-between text-xs text-white/40">
                <span>Beállítások</span>
                <span class="text-white/30">→</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Hotspot 3: Diagnosztika (monitor) -->
        <div class="absolute top-[60%] right-[30%] pointer-events-auto group">
          <div class="relative flex items-center justify-center cursor-pointer">
            <div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring"></div>
            <div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring-delayed"></div>
            <div class="relative w-6 h-6 rounded-full bg-[#FF3366] shadow-[0_0_20px_#FF3366] animate-hotspot-pulse"></div>
          </div>
          <div class="absolute mt-4 w-64 opacity-0 pointer-events-none scale-95 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto bg-[#04151F]/80 backdrop-blur-xl border border-white/20 rounded-xl p-4 shadow-2xl z-40">
            <div class="flex items-center gap-3 mb-3">
              <svg class="w-6 h-6 text-[#70BC84]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
              <h3 class="text-lg font-bold text-white">Élő Diagnosztika</h3>
            </div>
            <p class="text-sm text-white/60">Rendszerállapot</p>
            <div class="mt-3 space-y-2">
              <div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
                <span>Motor állapot</span>
                <span class="text-[#70BC84]">● Optimális</span>
              </div>
              <div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
                <span>Akkumulátor</span>
                <span class="text-[#70BC84]">● 87%</span>
              </div>
              <div class="flex items-center justify-between text-xs text-white/40">
                <span>Hibakódok</span>
                <span class="text-white/30">0 találat</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ── Zen Mode FAB (always visible, above everything) ── -->
    <button
      @click="isUiVisible = !isUiVisible"
      class="fixed bottom-8 right-8 z-50 btn-premium rounded-full p-4 shadow-2xl shadow-black/40"
      :title="isUiVisible ? 'UI elrejtése (Zen mód)' : 'UI megjelenítése'"
    >
      <!-- Eye icon when visible, eye-off when hidden -->
      <svg
        v-if="isUiVisible"
        class="w-6 h-6"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
      </svg>
      <svg
        v-else
        class="w-6 h-6"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
      </svg>
    </button>

    <!-- ── Content (above the overlay) with fade transition ── -->
    <Transition name="fade">
      <div v-if="isUiVisible" class="relative z-10">
        <!-- ── Top Navbar ──────────────────────────────────────────────── -->
        <DashboardHeader
          :first-name="authStore.user?.first_name || 'Vendég'"
          subtitle="Irányítópultod és járműveid áttekintése"
        />

        <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
          <!-- ── Loading State ──────────────────────────────────────────── -->
          <div
            v-if="vehicleStore.isLoading"
            class="flex items-center justify-center py-20"
          >
            <div
              class="h-10 w-10 animate-spin rounded-full border-4 border-white/10 border-t-[#70BC84]"
            />
          </div>

          <!-- ── Garage Grid ────────────────────────────────────────────── -->
          <div
            v-if="!vehicleStore.isLoading"
            class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3"
          >
            <div
              v-for="vehicle in vehicleStore.vehicles"
              :key="vehicle.id"
              class="group relative overflow-hidden rounded-2xl border border-white/[0.08] bg-white/[0.05] p-6 backdrop-blur-xl shadow-xl shadow-black/20 transition-all duration-300 hover:border-[#70BC84]/30 hover:bg-white/[0.08] hover:shadow-2xl hover:shadow-black/30"
            >
              <!-- ── License Plate (EU-style) ──────────────────────────── -->
              <div
                v-if="vehicle.license_plate"
                class="mb-4 inline-flex items-center overflow-hidden rounded-md border border-gray-600 shadow-sm"
              >
                <!-- Blue EU band -->
                <div class="flex h-9 w-9 items-center justify-center bg-[#003399] text-[10px] font-bold leading-tight text-white">
                  <span class="block text-center leading-tight">SF</span>
                </div>
                <!-- White plate area -->
                <div class="flex h-9 items-center bg-white px-3">
                  <span class="font-mono text-sm font-bold tracking-widest text-gray-900">
                    {{ vehicle.license_plate }}
                  </span>
                </div>
              </div>

              <!-- ── Brand + Model ─────────────────────────────────────── -->
              <h3 class="text-xl font-bold text-white">
                {{ vehicle.brand || 'Ismeretlen' }}
                <span v-if="vehicle.model" class="font-normal text-white/70">{{ vehicle.model }}</span>
              </h3>

              <!-- Year of manufacture -->
              <p v-if="vehicle.year_of_manufacture" class="mt-0.5 text-sm text-white/40">
                {{ vehicle.year_of_manufacture }}
              </p>

              <!-- ── Divider ────────────────────────────────────────────── -->
              <div class="my-4 border-t border-white/[0.06]" />

              <!-- ── Condition Score Bar ────────────────────────────────── -->
              <div class="mb-3">
                <div class="mb-1 flex items-center justify-between text-xs">
                  <span class="text-white/50">Állapot</span>
                  <span class="font-semibold text-[#70BC84]">{{ vehicle.condition_score }}%</span>
                </div>
                <div class="h-2 overflow-hidden rounded-full bg-white/10">
                  <div
                    class="h-full rounded-full bg-gradient-to-r from-[#70BC84] to-[#008CA4] transition-all duration-500"
                    :style="{ width: Math.min(vehicle.condition_score, 100) + '%' }"
                  />
                </div>
              </div>

              <!-- ── Mileage ────────────────────────────────────────────── -->
              <div class="flex items-center gap-2 text-sm text-white/60">
                <svg class="h-4 w-4 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M13 10V3L4 14h7v7l9-11h-7z"
                  />
                </svg>
                <span>{{ vehicle.current_mileage?.toLocaleString() || 0 }} km</span>
              </div>

              <!-- ── Status Badge ───────────────────────────────────────── -->
              <div class="mt-4 flex items-center gap-2">
                <span
                  class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
                  :class="vehicle.status === 'active'
                    ? 'bg-[#70BC84]/15 text-[#70BC84]'
                    : 'bg-white/5 text-white/40'"
                >
                  <span
                    class="mr-1.5 inline-block h-1.5 w-1.5 rounded-full"
                    :class="vehicle.status === 'active' ? 'bg-[#70BC84]' : 'bg-white/20'"
                  />
                  {{ vehicle.status === 'active' ? 'Aktív' : vehicle.status }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div><!-- end relative z-10 content wrapper -->
    </Transition>
  </div><!-- end min-h-screen -->
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useAuthStore } from '../stores/auth'
import { useVehicleStore } from '../stores/vehicle'
import DashboardHeader from '../components/DashboardHeader.vue'

const authStore = useAuthStore()
const vehicleStore = useVehicleStore()

// ── Zen Mode: UI láthatóság állapota ─────────────────────────────────
const isUiVisible = ref(true)

onMounted(() => {
  vehicleStore.fetchVehicles()
})
</script>
