<script setup>
import { ref } from 'vue'
import AddExpenseModal from './AddExpenseModal.vue'
import SmartVehicleRegistration from './SmartVehicleRegistration.vue'
import FindServiceModal from './FindServiceModal.vue'

const isOpen = ref(false)
const showExpenseModal = ref(false)
const showSmartVehicleRegistration = ref(false)
const showServiceModal = ref(false)

const toggleMenu = () => {
  isOpen.value = !isOpen.value
}

const openExpenseModal = () => {
  showExpenseModal.value = true
  isOpen.value = false
}

const openSmartVehicleRegistration = () => {
  showSmartVehicleRegistration.value = true
  isOpen.value = false
}

const openServiceModal = () => {
  showServiceModal.value = true
  isOpen.value = false
}

const closeExpenseModal = () => {
  showExpenseModal.value = false
}

const closeSmartVehicleRegistration = () => {
  showSmartVehicleRegistration.value = false
}

const closeServiceModal = () => {
  showServiceModal.value = false
}
</script>

<template>
  <!-- Floating Action Button -->
  <div class="fixed bottom-6 right-6 z-50 flex flex-col items-end">
    <!-- Action Menu (shown when open) -->
    <div v-if="isOpen" class="mb-4 space-y-3">
      <!-- Add Expense Button -->
      <button
        @click="openExpenseModal"
        class="flex items-center justify-end gap-3 bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-full shadow-lg transition-all duration-200 transform hover:scale-105"
      >
        <span class="text-sm font-semibold">Költség / Üzemanyag</span>
        <div class="w-10 h-10 flex items-center justify-center bg-blue-800 rounded-full">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
        </div>
      </button>

      <!-- Find Service Button -->
      <button
        @click="openServiceModal"
        class="flex items-center justify-end gap-3 bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-full shadow-lg transition-all duration-200 transform hover:scale-105"
      >
        <span class="text-sm font-semibold">Szerviz Keresése</span>
        <div class="w-10 h-10 flex items-center justify-center bg-green-800 rounded-full">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
      </button>

      <!-- Add Vehicle Button -->
      <button
        @click="openSmartVehicleRegistration"
        class="flex items-center justify-end gap-3 bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-full shadow-lg transition-all duration-200 transform hover:scale-105"
      >
        <span class="text-sm font-semibold">Jármű Hozzáadása</span>
        <div class="w-10 h-10 flex items-center justify-center bg-purple-800 rounded-full">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
        </div>
      </button>
    </div>

    <!-- Main FAB Button -->
    <button
      @click="toggleMenu"
      class="w-14 h-14 flex items-center justify-center bg-blue-700 hover:bg-blue-800 text-white rounded-full shadow-xl transition-all duration-200 transform hover:scale-110"
      :class="{ 'rotate-45': isOpen }"
    >
      <svg v-if="!isOpen" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
      </svg>
      <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

  <!-- Modals -->
  <AddExpenseModal v-if="showExpenseModal" @close="closeExpenseModal" />
  <SmartVehicleRegistration v-if="showSmartVehicleRegistration" @close="closeSmartVehicleRegistration" />
  <FindServiceModal v-if="showServiceModal" @close="closeServiceModal" />
</template>

<style scoped>
/* Smooth transitions */
button {
  transition: all 0.2s ease-in-out;
}
</style>