<template>
  <aside 
    :class="[
      'fixed top-16 bottom-0 left-0 w-60 bg-white transform transition-transform duration-300 ease-in-out z-40',
      isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
    ]"
  >
    <nav class="h-full overflow-y-auto py-4">
      <div v-for="(item, index) in menuItems" :key="index" class="mb-2">
        <!-- Menu item with submenu -->
        <template v-if="item.id">
          <button
            @click="toggleMenu(item.id)"
            class="w-full px-4 py-2 flex items-center justify-between hover:bg-gray-100"
          >
            <div class="flex items-center">
              <component :is="item.icon" class="w-5 h-5 mr-3" />
              <span>{{ item.text }}</span>
            </div>
            <component 
              :is="expandedMenus[item.id] ? ChevronUpIcon : ChevronDownIcon" 
              class="w-4 h-4"
            />
          </button>
          
          <div v-show="expandedMenus[item.id]">
            <template v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
              <router-link
                v-if="subItem.to"
                :to="subItem.to"
                class="block px-4 py-2 pl-12 hover:bg-gray-100"
              >
                {{ subItem.text }}
              </router-link>
              <button
                v-else
                @click="subItem.onClick"
                class="w-full text-left px-4 py-2 pl-12 hover:bg-gray-100"
              >
                {{ subItem.text }}
              </button>
            </template>
          </div>
        </template>

        <!-- Simple menu item -->
        <router-link
          v-else
          :to="item.to"
          class="block px-4 py-2 hover:bg-gray-100"
        >
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <component :is="item.icon" class="w-5 h-5 mr-3" />
              <span>{{ item.text }}</span>
            </div>
            <span
              v-if="item.badge"
              class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full"
            >
              {{ item.badge }}
            </span>
          </div>
        </router-link>
      </div>
    </nav>
  </aside>
</template>

<script setup>
import { ref } from 'vue';
import { 
  BookOpenIcon,
  PlusIcon, 
  ArrowDownTrayIcon, 
  GlobeAltIcon, 
  ArrowsRightLeftIcon,
  CalendarIcon,
  ClockIcon,
  Cog6ToothIcon,
  ComputerDesktopIcon,
  ChevronDownIcon,
  ChevronUpIcon
} from '@heroicons/vue/24/outline';

const props = defineProps({
  isOpen: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['close', 'add-manga-click']);

const expandedMenus = ref({
  mangas: true,
  settings: false,
  system: false
});

const toggleMenu = (menuId) => {
  expandedMenus.value[menuId] = !expandedMenus.value[menuId];
};

const menuItems = [
  {
    icon: BookOpenIcon,
    text: 'Mangas',
    id: 'mangas',
    subItems: [
      { icon: PlusIcon, text: 'Ajouter un nouveau', onClick: () => emit('add-manga-click') },
      { icon: ArrowDownTrayIcon, text: 'Import bibliothèque', to: '/import' },
      { icon: GlobeAltIcon, text: 'Découvrir', to: '/discover' },
    ]
  },
  {
    icon: ArrowsRightLeftIcon,
    text: 'Convertir CBR en CBZ',
    to: '/convert'
  },
  {
    icon: CalendarIcon,
    text: 'Calendrier',
    to: '/calendar'
  },
  {
    icon: ClockIcon,
    text: 'Activité',
    to: '/activity',
    badge: '3'
  },
  {
    icon: Cog6ToothIcon,
    text: 'Paramètres',
    id: 'settings',
    subItems: [
      { text: 'Général', to: '/settings/general' },
      { text: 'Dossiers', to: '/settings/folders' },
      { text: 'Scrappers', to: '/settings/scrappers' },
      { text: 'UI', to: '/settings/ui' }
    ]
  },
  {
    icon: ComputerDesktopIcon,
    text: 'Système',
    id: 'system',
    subItems: [
      { text: 'Status', to: '/system/status' },
      { text: 'Backup', to: '/system/backup' },
      { text: 'Logs', to: '/system/logs' },
      { text: 'Updates', to: '/system/updates' }
    ]
  },
];
</script> 