<script setup>
import { inject } from "vue";

const {
  logo,
  items,
  isOpen,
  isMobileMenuOpen,
  toggleDropdown,
  toggleMobileMenu,
  closeMobileMenu,
  logout
} = inject('navigationData');
</script>

<template>
  <div class="md:hidden">
    <!-- Top Spacer -->
    <div class="h-6"></div>

    <div class="px-4 fixed flex items-center">
      <!-- Hamburger Menu Button -->
      <button @click="toggleMobileMenu"
        class="text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-50">
        <svg :class="{ 'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen }" class="w-7 h-7" fill="none"
          stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
        <svg :class="{ 'block': isMobileMenuOpen, 'hidden': !isMobileMenuOpen }" 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="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Mobile Menu -->
    <div :class="{ 'translate-x-0': isMobileMenuOpen, '-translate-x-full': !isMobileMenuOpen }"
      class="fixed inset-y-0 left-0 w-64 bg-A transform transition-transform duration-300 ease-in-out z-50 shadow-xl">
      <!-- Mobile Menu Header -->
      <div class="px-4 py-3 flex justify-between items-center">
        <img :src="logo" alt="Logo" class="h-8 w-auto" />
        <button @click="closeMobileMenu" class="text-D hover:bg-B transition-colors duration-200">
          <svg 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="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Mobile Menu Items -->
      <div class="py-4">
        <!-- Kasir with Dropdown -->
        <div class="px-4 py-2">
          <button @click="toggleDropdown"
            class="w-full flex justify-between items-center text-left text-lg text-D hover:bg-B rounded-md px-3 py-2 transition-colors duration-200">
            {{ items[0].label }}
            <svg :class="{ 'rotate-180': isOpen }" class="w-4 h-4 transition-transform duration-200" fill="none"
              stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </button>

          <!-- Mobile Dropdown -->
          <div v-if="isOpen" class="mt-2 ml-4 space-y-1">
            <router-link v-for="(sub, index) in items[0].subItems" :key="index" :to="sub.route" @click="closeMobileMenu"
              class="block px-3 py-2 text-D hover:bg-B rounded-md transition-colors duration-200">
              {{ sub.label }}
            </router-link>
          </div>
        </div>

        <!-- Other Menu Items -->
        <div class="px-4 space-y-1">
          <template v-for="(item, index) in items.slice(1)" :key="index">
            <router-link :to="item.route" @click="closeMobileMenu"
              class="block px-3 py-2 text-lg text-D hover:bg-B rounded-md transition-colors duration-200">
              {{ item.label }}
            </router-link>
          </template>
        </div>

        <!-- Logout -->
        <div class="fixed bottom-0 w-full px-4 py-3 bg-A border-t border-B">
          <button @click="logout"
            class="block w-full text-left px-3 py-2 text-lg font-bold text-red-400 hover:text-white hover:bg-red-400 rounded-md transition-colors duration-200">
            Logout
          </button>
        </div>
      </div>
    </div>

    <!-- Mobile Menu Overlay -->
    <div v-if="isMobileMenuOpen" @click="closeMobileMenu" class="fixed inset-0 bg-black/75 z-40"></div>
  </div>
</template>