<template>
  <div class="relative min-h-screen text-white">
    <!-- Garage Background Image -->
    <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>

    <!-- ── Zen Mode FAB ── -->
    <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 ? t('zen.hide') : t('zen.show')"
    >
      <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 with fade transition ── -->
    <Transition name="fade">
      <div v-if="isUiVisible" class="relative z-10">
        <!-- ── Bottom-aligned 5-card container ── -->
        <div class="flex flex-col justify-end min-h-[85vh] pb-8">
          <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 w-full">
            <!-- ── 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>

            <!-- ── 5-Card Grid ── -->
            <div
              v-if="!vehicleStore.isLoading"
              class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"
              style="perspective: 1200px;"
            >
              <!-- ════════════════════════════════════════════════════════════
                   Card 1: 🚗 My Garage (Járműveim)
                   ════════════════════════════════════════════════════════════ -->
              <div
                class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative cursor-pointer transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
                @click="openCard('vehicles')"
              >
                <!-- Top header bar -->
                <div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
                  <span class="text-white font-bold text-sm tracking-wide">🚗 {{ t('dashboard.myVehicles') }}</span>
                  <span class="ml-auto text-xs text-white/60">{{ vehicleStore.vehicles.length }} {{ t('dashboard.vehicles') }}</span>
                </div>
                <!-- Content -->
                <div class="p-4 flex-1 flex flex-col text-slate-800 min-h-0">
                  <div class="flex-1 overflow-y-auto space-y-2">
                    <VehicleCardCompact
                      v-for="vehicle in displayVehicles.slice(0, 3)"
                      :key="vehicle.id"
                      :vehicle="vehicle"
                      @click="openCard('vehicles')"
                      @plate-click="openVehicleDetail(vehicle)"
                    />
                    <!-- Empty state (only when BOTH real and mock are empty) -->
                    <div
                      v-if="displayVehicles.length === 0"
                      class="flex flex-col items-center justify-center py-6 text-slate-400"
                    >
                      <svg class="w-10 h-10 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z" />
                      </svg>
                      <p class="text-sm">{{ t('dashboard.noVehicles') }}</p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- ════════════════════════════════════════════════════════════
                   Card 2: 💰 Költségek & Gyorsműveletek (Action Center)
                   ════════════════════════════════════════════════════════════ -->
              <div
                class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
              >
                <!-- Top header bar -->
                <div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4 gap-2">
                  <span class="text-white font-bold text-sm tracking-wide">💰 Költségek & Gyorsműveletek</span>
                </div>
                <!-- Content -->
                <div class="p-4 flex-1 flex flex-col text-slate-800 overflow-hidden">
                  <!-- Vehicle Selector Dropdown -->
                  <div class="mb-3">
                    <label class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1 block">Jármű</label>
                    <select
                      v-model="selectedActionVehicleId"
                      class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-800 focus:border-sf-accent focus:ring-2 focus:ring-sf-accent/20 outline-none transition-all"
                    >
                      <option
                        v-for="v in vehicleStore.sortedVehicles"
                        :key="v.id"
                        :value="v.id"
                      >
                        {{ v.license_plate || '—' }} ({{ v.brand || '' }} {{ v.model || '' }})
                      </option>
                    </select>
                  </div>

                  <!-- Action Buttons -->
                  <div class="flex-1 flex flex-col gap-2.5 justify-center">
                    <!-- No vehicle warning -->
                    <div
                      v-if="!selectedActionVehicle"
                      class="flex items-center justify-center rounded-xl bg-amber-50 border border-amber-200 px-4 py-3 text-sm text-amber-700"
                    >
                      <span>⚠️ Nincs kiválasztva jármű. Adj hozzá egy járművet először!</span>
                    </div>

                    <!-- ⛽ Tankolás (Big, prominent) -->
                    <button
                      v-if="selectedActionVehicle"
                      @click="openFuelModal"
                      class="flex items-center gap-3 rounded-xl bg-gradient-to-r from-sf-accent to-emerald-500 px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg hover:scale-[1.02] active:scale-[0.98]"
                    >
                      <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/20 text-lg">⛽</span>
                      <span>Tankolás rögzítése</span>
                      <span class="ml-auto text-white/60 text-xs">→</span>
                    </button>

                    <!-- 🅿️ Parkolás / Útdíj (Medium) -->
                    <button
                      v-if="selectedActionVehicle"
                      @click="openFeeModal"
                      class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm font-semibold text-slate-700 transition-all hover:bg-slate-100 hover:shadow-md active:scale-[0.98]"
                    >
                      <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-200 text-base">🅿️</span>
                      <span>Parkolás / Útdíj</span>
                      <span class="ml-auto text-slate-400 text-xs">→</span>
                    </button>

                    <!-- ➕ További költségek (Medium) -->
                    <button
                      v-if="selectedActionVehicle"
                      @click="openComplexModal"
                      class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm font-semibold text-slate-700 transition-all hover:bg-slate-100 hover:shadow-md active:scale-[0.98]"
                    >
                      <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-200 text-base">➕</span>
                      <span>További költségek</span>
                      <span class="ml-auto text-slate-400 text-xs">→</span>
                    </button>
                  </div>
                </div>
              </div>

                            <!-- ════════════════════════════════════════════════════════════
                   Card 3: 🔧 Service Finder (3-Way Indítópult)
                   ════════════════════════════════════════════════════════════ -->
              <div
                class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
              >
                <!-- Top header bar -->
                <div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
                  <span class="text-white font-bold text-sm tracking-wide">{{ t('serviceFinder.title') }}</span>
                </div>
                <!-- Content: 3 simple buttons stacked vertically -->
                <div class="p-4 flex-1 flex flex-col justify-center gap-2">
                  <button
                    @click="router.push('/dashboard/service-finder?mode=planned')"
                    class="w-full rounded-xl bg-sf-accent px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-sf-accent/90 hover:shadow-md active:scale-[0.97] cursor-pointer"
                  >
                    🔍 {{ t('serviceFinder.plannedMaintenance') }}
                  </button>
                  <button
                    @click="router.push('/dashboard/service-finder?mode=sos')"
                    class="w-full rounded-xl border border-red-300 bg-red-50 px-4 py-2.5 text-sm font-semibold text-red-700 shadow-sm transition-all hover:bg-red-100 hover:shadow-md active:scale-[0.97] cursor-pointer"
                  >
                    🚨 SOS {{ t('serviceFinder.sosTitle') }}
                  </button>
                  <button
                    @click="isSfQuickAddOpen = true"
                    class="w-full rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition-all hover:border-sf-accent hover:bg-sf-accent/5 hover:shadow-md active:scale-[0.97] cursor-pointer"
                  >
                    ➕ {{ t('provider.quickAddTitle') }}
                  </button>
                </div>
              </div>

                            <!-- ════════════════════════════════════════════════════════════
                   Card 4: 🏆 Gamification (Játékosítás)
                   ════════════════════════════════════════════════════════════ -->
              <div
                class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative cursor-pointer transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
                @click="openCard('gamification')"
              >
                <!-- Top header bar -->
                <div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
                  <span class="text-white font-bold text-sm tracking-wide">🏆 {{ t('dashboard.statsAndPoints') }}</span>
                  <span class="ml-auto inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">
                    {{ t('dashboard.live') }}
                  </span>
                </div>
                <!-- Content -->
                <div class="p-4 flex-1 flex flex-col text-slate-800 overflow-hidden">
                  <div class="flex-1 space-y-3">
                    <!-- Score card -->
                    <div class="rounded-xl border border-slate-200 bg-slate-50 p-3 text-center">
                      <p class="text-3xl font-extrabold text-emerald-600">2,450</p>
                      <p class="text-xs text-slate-500 mt-1">{{ t('dashboard.monthlyScore') }}</p>
                    </div>
                    <!-- Achievement badges -->
                    <div>
                      <p class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">
                        {{ t('dashboard.achievements') }}
                      </p>
                      <div class="flex flex-wrap gap-2">
                        <span
                          v-for="badge in badges"
                          :key="badge.label"
                          class="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs text-slate-600"
                        >
                          {{ badge.icon }} {{ badge.label }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Bottom CTA button -->
                <button class="mt-auto mb-4 mx-auto px-8 py-3 bg-slate-700 hover:bg-slate-800 text-white rounded-2xl font-medium text-sm transition-colors shadow-md">
                  {{ t('dashboard.refresh') }} 🏆
                </button>
              </div>

              <!-- ════════════════════════════════════════════════════════════
                   Card 5: 🛡️ My Profile & Trust (Profil & Trust Score)
                   ════════════════════════════════════════════════════════════ -->
              <div
                class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative cursor-pointer transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
                @click="openCard('stats')"
              >
                <!-- Top header bar -->
                <div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
                  <span class="text-white font-bold text-sm tracking-wide">🛡️ {{ t('header.profile') }}</span>
                </div>
                <!-- Content -->
                <div class="p-4 flex-1 flex flex-col text-slate-800 overflow-hidden">
                  <div class="flex-1 space-y-3">
                    <!-- User info -->
                    <div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
                      <p class="text-sm font-bold text-slate-800">{{ authStore.userName || t('dashboard.guest') }}</p>
                      <p class="text-xs text-slate-400 mt-0.5">{{ authStore.user?.email }}</p>
                    </div>
                    <!-- Trust Score -->
                    <div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
                      <div class="flex items-center justify-between mb-1">
                        <span class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Trust Score</span>
                        <span class="text-sm font-bold text-emerald-600">A+</span>
                      </div>
                      <div class="h-2 overflow-hidden rounded-full bg-slate-200">
                        <div class="h-full rounded-full bg-gradient-to-r from-emerald-400 to-emerald-600 transition-all duration-500" style="width: 92%" />
                      </div>
                    </div>
                    <!-- Quick stats -->
                    <div class="grid grid-cols-2 gap-2">
                      <div class="rounded-lg border border-slate-200 bg-slate-50 p-2 text-center">
                        <p class="text-lg font-bold text-slate-800">{{ authStore.myOrganizations.length }}</p>
                        <p class="text-xs text-slate-400">{{ t('header.myCompanies') }}</p>
                      </div>
                      <div class="rounded-lg border border-slate-200 bg-slate-50 p-2 text-center">
                        <p class="text-lg font-bold text-slate-800">{{ vehicleStore.vehicles.length }}</p>
                        <p class="text-xs text-slate-400">{{ t('dashboard.totalVehicles') }}</p>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Bottom CTA button -->
                <button class="mt-auto mb-4 mx-auto px-8 py-3 bg-slate-700 hover:bg-slate-800 text-white rounded-2xl font-medium text-sm transition-colors shadow-md">
                  {{ t('header.profile') }} →
                </button>
              </div>
            </div>
          </div>
        </div>
      </div><!-- end relative z-10 content wrapper -->
    </Transition>

    <!-- ═══════════════════════════════════════════════════════════════════
         Flip Modal – 3D átforduló részletes nézet (Teleport to body)
         ═══════════════════════════════════════════════════════════════════ -->
    <Teleport to="body">
      <div
        v-if="activeCard"
        class="fixed inset-0 z-[9999] flex items-center justify-center bg-slate-900/85 backdrop-blur-md"
        @click.self="activeCard = null"
      >
        <div class="bg-white w-11/12 max-w-5xl h-auto min-h-[500px] pb-6 rounded-3xl shadow-2xl flex flex-col overflow-hidden animate-flip-in relative">
          <!-- Close button (X) -->
          <button
            class="absolute top-4 right-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-slate-200/80 text-slate-600 hover:bg-slate-300 hover:text-slate-800 transition-colors text-xl font-bold"
            @click="activeCard = null"
          >
            ✕
          </button>

          <!-- Dynamic content area -->
          <div class="flex-1 p-8 overflow-y-auto text-slate-800">
            <!-- ── Private Vehicle Manager ── -->
            <PrivateVehicleManager
              v-if="activeCard === 'vehicles'"
              :target-vehicle-id="selectedTargetId"
              @add-new="handleAddNew"
              @edit-vehicle="handleEditVehicle"
            />

            <!-- ── Fallback for other cards ── -->
            <template v-if="activeCard && activeCard !== 'vehicles'">
              <h2 class="text-2xl font-bold mb-6">
                {{ t('dashboard.detailedView') }}: <span class="text-slate-500">{{ activeCard }}</span>
              </h2>
              <p class="text-slate-500">
                {{ t('dashboard.modalPlaceholder') }}
              </p>
            </template>
          </div>
        </div>
      </div>
    </Teleport>

    <!-- ═══════════════════════════════════════════════════════════════════
         Cost Action Modals (Teleported to body)
         ═══════════════════════════════════════════════════════════════════ -->
    <SimpleFuelModal
      :is-open="isFuelModalOpen"
      :vehicle="selectedActionVehicle"
      @close="isFuelModalOpen = false"
      @saved="onModalSaved"
    />
    <ComplexExpenseModal
      :is-open="isFeeModalOpen"
      :vehicle="selectedActionVehicle"
      :is-fee-mode="true"
      @close="isFeeModalOpen = false"
      @saved="onModalSaved"
    />
    <ComplexExpenseModal
      :is-open="isComplexModalOpen"
      :vehicle="selectedActionVehicle"
      :is-fee-mode="false"
      @close="isComplexModalOpen = false"
      @saved="onModalSaved"
    />

    <!-- ═══════════════════════════════════════════════════════════════════
         Vehicle Detail Modal (Digital Twin — 3-Tab Deep Link)
         ═══════════════════════════════════════════════════════════════════ -->
    <VehicleDetailModal
      :is-open="isVehicleDetailOpen"
      :vehicle="detailVehicle"
      @close="closeVehicleDetail"
      @edit="handleEditFromDetail"
      @set-primary="handleSetPrimaryFromDetail"
    />

    <!-- ═══════════════════════════════════════════════════════════════════
         Vehicle Form Modal (Add) — standalone, decoupled from Manager
         ═══════════════════════════════════════════════════════════════════ -->
    <VehicleFormModal
      :is-open="isAddFormOpen"
      @close="isAddFormOpen = false"
      @saved="onAddVehicleSaved"
    />

    <!-- ═══════════════════════════════════════════════════════════════════
         Vehicle Form Modal (Edit) — standalone, decoupled from Manager
         ═══════════════════════════════════════════════════════════════════ -->
    <VehicleFormModal
      :is-open="isEditFormOpen"
      :vehicle="editTargetVehicle"
      @close="closeEditForm"
      @saved="onEditVehicleSaved"
      @deleted="onVehicleDeleted"
    />
    <!-- ═══════════════════════════════════════════════════════════════════
         Provider Quick Add Modal (Service Finder Card 3)
         ═══════════════════════════════════════════════════════════════════ -->
    <ProviderQuickAddModal
      :is-open="isSfQuickAddOpen"
      @close="isSfQuickAddOpen = false"
      @saved="onSfQuickAddSaved"
    />
  </div><!-- end min-h-screen -->
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useAuthStore } from '../stores/auth'
import { useVehicleStore } from '../stores/vehicle'
import type { VehicleData } from '../types/vehicle'
import api from '../api/axios'
import PrivateVehicleManager from '../components/dashboard/PrivateVehicleManager.vue'
import VehicleCardCompact from '../components/vehicle/VehicleCardCompact.vue'
import VehicleDetailModal from '../components/vehicle/VehicleDetailModal.vue'
import VehicleFormModal from '../components/dashboard/VehicleFormModal.vue'
import SimpleFuelModal from '../components/dashboard/SimpleFuelModal.vue'
import ComplexExpenseModal from '../components/dashboard/ComplexExpenseModal.vue'
import ProviderQuickAddModal from '../components/provider/ProviderQuickAddModal.vue'

const { t } = useI18n()

const router = useRouter()
const route = useRoute()

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

// ── Zen Mode ──
const isUiVisible = ref(true)

// ── Flip Modal State ──
const activeCard = ref<string | null>(null)
const selectedTargetId = ref<string | null>(null)
const openCard = (cardId: string, targetId: string | null = null) => {
  activeCard.value = cardId
  selectedTargetId.value = targetId
}

// ── Service Finder (Card 3) — Launcher ──
const isSearchModalOpen = ref(false)
const isSfQuickAddOpen = ref(false)

/**
 * Called when ProviderQuickAddModal saves a new provider.
 */
function onSfQuickAddSaved(provider: { id: number; name: string; category?: string | null; city?: string | null; address?: string | null }) {
  isSfQuickAddOpen.value = false
  alert(`🎉 ${t('provider.successMessage', { points: 0 })}`)
}

// ── Vehicle Detail Modal (Deep Link from plate click) ──
const isVehicleDetailOpen = ref(false)
const detailVehicle = ref<VehicleData | null>(null)

function openVehicleDetail(vehicle: VehicleData) {
  detailVehicle.value = vehicle
  isVehicleDetailOpen.value = true
}

function closeVehicleDetail() {
  isVehicleDetailOpen.value = false
  detailVehicle.value = null
}

// ── Vehicle Form Modal State (standalone, decoupled from Manager) ──
const isAddFormOpen = ref(false)
const isEditFormOpen = ref(false)
const editTargetVehicle = ref<VehicleData | null>(null)
const isCheckingQuota = ref(false)

/**
 * Return-State flag: when true, closing the edit form should re-open
 * the VehicleDetailModal instead of returning to the dashboard.
 */
const returnToVehicleDetail = ref(false)

/**
 * Preemptive quota check before opening the add-vehicle modal.
 * Calls GET /api/v1/assets/vehicles/quota-status.
 * If the user has reached their limit, shows a blocking toast/alert instead of opening the form.
 */
async function handleAddNew() {
  if (isCheckingQuota.value) return
  isCheckingQuota.value = true

  try {
    const res = await api.get('/assets/vehicles/quota-status')
    const { can_add, current_count, limit } = res.data

    if (!can_add) {
      alert(
        `Elérted a csomagodhoz tartozó járműlimitet (${current_count}/${limit})! ` +
        'Kérjük, válts magasabb csomagra az új jármű rögzítéséhez.'
      )
      return
    }

    isAddFormOpen.value = true
  } catch (err: any) {
    console.error('[DashboardView] Quota check failed:', err)
    isAddFormOpen.value = true
  } finally {
    isCheckingQuota.value = false
  }
}

function onAddVehicleSaved() {
  isAddFormOpen.value = false
}

function handleEditVehicle(vehicle: VehicleData) {
  editTargetVehicle.value = vehicle ? { ...vehicle } : null
  isEditFormOpen.value = true
}

function closeEditForm() {
  isEditFormOpen.value = false
  // If we came from the detail modal, return to it
  if (returnToVehicleDetail.value) {
    returnToVehicleDetail.value = false
    const vehicle = editTargetVehicle.value
    editTargetVehicle.value = null
    if (vehicle) {
      nextTick(() => {
        detailVehicle.value = vehicle
        isVehicleDetailOpen.value = true
      })
    }
  } else {
    editTargetVehicle.value = null
  }
}

function onEditVehicleSaved(savedVehicle?: VehicleData) {
  isEditFormOpen.value = false
  // If we came from the detail modal, return to it
  if (returnToVehicleDetail.value) {
    returnToVehicleDetail.value = false
    // Use the saved vehicle (with updated data) if available, otherwise fallback
    const vehicle = savedVehicle || editTargetVehicle.value
    editTargetVehicle.value = null
    if (vehicle) {
      nextTick(() => {
        detailVehicle.value = vehicle
        isVehicleDetailOpen.value = true
      })
    }
  } else {
    editTargetVehicle.value = null
  }
}

/**
 * Called when the edit VehicleFormModal emits 'deleted'.
 * Completely resets the return-state and closes the edit form,
 * then refreshes the vehicle list so the deleted vehicle disappears.
 */
function onVehicleDeleted() {
  returnToVehicleDetail.value = false
  isEditFormOpen.value = false
  editTargetVehicle.value = null
  vehicleStore.fetchVehicles()
}

// ── Bridge: Detail → Edit (opens edit modal directly, no Manager card) ──
function handleEditFromDetail(vehicle: VehicleData) {
  returnToVehicleDetail.value = true
  closeVehicleDetail()
  // Use nextTick so detail modal closes before edit opens
  nextTick(() => {
    editTargetVehicle.value = vehicle ? { ...vehicle } : null
    isEditFormOpen.value = true
  })
}

function handleSetPrimaryFromDetail(vehicle: VehicleData) {
  vehicleStore.setPrimaryVehicle(vehicle.id)
}

/**
 * Display vehicles from the backend API only.
 * Sorted by is_primary flag (favorite first), then alphabetically.
 * Shows all real vehicles; no mock/fallback data is injected.
 */
const displayVehicles = computed(() => {
  return vehicleStore.sortedVehicles
})

// ── Cost Card Action Center State ──
const selectedActionVehicleId = ref<string>('')
const isFuelModalOpen = ref(false)
const isFeeModalOpen = ref(false)
const isComplexModalOpen = ref(false)

/** The currently selected vehicle object for the action modals */
const selectedActionVehicle = computed(() => {
  if (!selectedActionVehicleId.value) return null
  return vehicleStore.vehicles.find(v => v.id === selectedActionVehicleId.value) || null
})

/** Auto-select the first (primary/sorted) vehicle on load */
function autoSelectVehicle() {
  if (vehicleStore.sortedVehicles.length > 0 && !selectedActionVehicleId.value) {
    selectedActionVehicleId.value = vehicleStore.sortedVehicles[0].id
  }
}

function openFuelModal() {
  if (!selectedActionVehicle.value) return
  isFuelModalOpen.value = true
}

function openFeeModal() {
  if (!selectedActionVehicle.value) return
  isFeeModalOpen.value = true
}

function openComplexModal() {
  if (!selectedActionVehicle.value) return
  isComplexModalOpen.value = true
}

function onModalSaved() {
  isFuelModalOpen.value = false
  isFeeModalOpen.value = false
  isComplexModalOpen.value = false
}

// ── Placeholder notifications ──
const notifications = ref([
  { icon: '🔧', title: 'Service due for BMW X5', time: '2 hours ago' },
  { icon: '⛽', title: 'Fuel cost updated — +₿ 0.08', time: '5 hours ago' },
  { icon: '🏆', title: 'You earned "Eco Driver" badge!', time: '1 day ago' },
  { icon: '📊', title: 'Monthly report is ready', time: '2 days ago' },
])

// ── Placeholder badges ──
const badges = ref([
  { icon: '🌱', label: 'Eco Driver' },
  { icon: '📏', label: '10k km Club' },
  { icon: '🔧', label: 'Service Pro' },
  { icon: '⭐', label: 'Top Rater' },
])

onMounted(() => {
  vehicleStore.fetchVehicles()
  authStore.fetchMyOrganizations()

  // ── Handle query param card navigation ──────────────────────────
  const cardParam = route.query.card as string | undefined
  if (cardParam) {
    openCard(cardParam)
    // Clean up the query param so it doesn't re-trigger
    router.replace({ query: {} })
  }
})

// Watch for vehicles to load, then auto-select
watch(() => vehicleStore.vehicles.length, () => {
  autoSelectVehicle()
}, { immediate: true })

// ── Watch for query param changes (hamburger menu navigation) ────
watch(() => route.query.card, (newCard) => {
  if (newCard && typeof newCard === 'string') {
    openCard(newCard)
    router.replace({ query: {} })
  }
})
</script>

<style scoped>
@keyframes flipIn {
  from {
    transform: perspective(1200px) rotateY(-90deg);
    opacity: 0;
  }
  to {
    transform: perspective(1200px) rotateY(0deg);
    opacity: 1;
  }
}
.animate-flip-in {
  animation: flipIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
</style>
