<template>
  <nav class="main-menu">
    <div
      v-for="section in visibleSections"
      :key="section.title"
      class="menu-section"
    >
      <!-- Direkter Link (z.B. Export) -->
      <RouterLink 
        v-if="!section.hasDropdown" 
        :to="section.to" 
        class="section-title section-link"
      >
        {{ section.title }}
      </RouterLink>
      
      <!-- Dropdown-Menü -->
      <template v-else>
        <button class="section-title" @click="toggleSection(section.title)">
          {{ section.title }}
          <span class="chev">{{ isSectionOpen(section.title) ? '▾' : '▸' }}</span>
        </button>
        <div v-show="isSectionOpen(section.title)" class="dropdown">
          <RouterLink
            v-for="item in section.items"
            :key="item.to"
            :to="item.to"
            class="dropdown-item"
            @click="openSection = null"
          >
            {{ item.label }}
          </RouterLink>
        </div>
      </template>
    </div>
  </nav>
</template>

<script setup>
import { ref, computed } from 'vue'
import { RouterLink } from 'vue-router'
import { useAuthStore } from '../stores/authStore'

const auth = useAuthStore()

// Rolle: 'user' | 'admin' (Fallback: 'user')
// Verwende role_string (vom Backend gemappt) oder fallback zu 'user'
const role = computed(() => {
  if (auth.user?.role_string) {
    return auth.user.role_string.toLowerCase()
  }
  // Fallback für alte Implementierung oder wenn role ein Number ist
  if (typeof auth.user?.role === 'number') {
    return auth.user.role === 1 ? 'admin' : 'user'
  }
  return (auth.user?.role || 'user').toString().toLowerCase()
})

const SECTIONS_USER = [
  {
    title: 'Buchungen',
    hasDropdown: true,
    items: [
      { label: 'Wochenübersicht', to: '/bookings/week' },
      { label: 'Zeitkorrekturen', to: '/bookings/timefix' },
      { label: 'Urlaub', to: '/bookings/vacation' },
      { label: 'Krankheit', to: '/bookings/sick' },
      { label: 'Arbeitstage', to: '/bookings/workdays' },
      { label: 'Kalender', to: '/calendar' }
    ]
  },
  {
    title: 'Export',
    hasDropdown: false,
    to: '/export'
  },
  {
    title: 'Einstellungen',
    hasDropdown: true,
    items: [
      { label: 'Persönliches', to: '/settings/profile' },
      { label: 'Paßwort ändern', to: '/settings/password' },
      { label: 'Zeitwünsche', to: '/settings/timewish' },
      { label: 'Zugriffe verwalten', to: '/settings/permissions' },
      { label: 'Einladen', to: '/settings/invite' }
    ]
  }
]

const SECTIONS_ADMIN_EXTRA = [
  {
    title: 'Verwaltung',
    hasDropdown: true,
    items: [
      { label: 'Feiertage', to: '/admin/holidays' },
      { label: 'Rechte', to: '/admin/roles' }
    ]
  }
]

const visibleSections = computed(() => {
  return role.value === 'admin'
    ? [...SECTIONS_USER, ...SECTIONS_ADMIN_EXTRA]
    : SECTIONS_USER
})

// Auf-/Zuklappen je Sektion (nur eins gleichzeitig offen)
const openSection = ref(null)
const isSectionOpen = (title) => openSection.value === title
const toggleSection = (title) => {
  // Wenn die Sektion bereits offen ist, schließen; sonst öffnen und andere schließen
  openSection.value = openSection.value === title ? null : title
}
</script>

<style scoped>
.main-menu {
  display: flex;
  gap: 0;
  align-items: center;
}

.menu-section {
  position: relative;
  display: inline-block;
}

.section-title {
  background: transparent;
  border: none;
  color: #555;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 14px;
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}

.section-title:hover {
  color: #000;
}

.section-link {
  text-decoration: none;
}

.section-link.router-link-active {
  color: #000;
  font-weight: 600;
}

.chev {
  font-size: 10px;
  color: #888;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  z-index: 1000;
  padding: 8px 0;
  margin-top: 4px;
}

.dropdown-item {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 8px 16px;
  transition: background-color 0.2s;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

.dropdown-item.router-link-active {
  background-color: #e8f5e9;
  color: #000;
  font-weight: 500;
}
</style>


