<template>
  <nav
    class="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-gray-900 via-primary-900 to-gray-900 shadow-xl h-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
      <div class="flex flex-col justify-between h-full py-2">
        <!-- Hauptmenü -->
        <div class="flex justify-between items-center">
          <!-- Logo -->
          <NuxtLink to="/" class="flex items-center space-x-3 hover:scale-105 transition-transform">
            <img src="~/assets/images/logos/Harheimer TC.svg" alt="Harheimer TC Logo" class="w-12 h-12" />
            <div class="hidden sm:block">
              <span class="text-xl font-display font-bold text-white">Harheimer <span
                  class="text-primary-400">TC</span></span>
            </div>
          </NuxtLink>

          <div style="display:flex;flex-direction:column;">
            <!-- Desktop Navigation -->
            <div class="hidden lg:flex items-center space-x-1">
              <NuxtLink to="/"
                class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
                active-class="text-white bg-primary-600">
                Start
              </NuxtLink>

              <button @click="toggleSubmenu('verein')"
                class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
                :class="(route.path.startsWith('/verein/') || route.path.startsWith('/vorstand') || route.path.startsWith('/vereinsmeisterschaften') || currentSubmenu === 'verein') ? 'text-white bg-primary-600' : ''">
                Verein
              </button>

              <button @click="toggleSubmenu('mannschaften')"
                class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
                :class="(route.path.startsWith('/mannschaften') || route.path.startsWith('/spielsysteme') || currentSubmenu === 'mannschaften') ? 'text-white bg-primary-600' : ''">
                Mannschaften
              </button>

              <button @click="toggleSubmenu('training')"
                class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
                :class="(route.path.startsWith('/training') || route.path.startsWith('/tt-regeln') || currentSubmenu === 'training') ? 'text-white bg-primary-600' : ''">
                Training
              </button>

              <NuxtLink to="/mitgliedschaft"
                class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
                active-class="text-white bg-primary-600">
                Mitgliedschaft
              </NuxtLink>

              <NuxtLink to="/termine" @click="currentSubmenu = null"
                class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
                active-class="text-white bg-primary-600">
                Termine
              </NuxtLink>

              <NuxtLink v-if="hasGalleryImages" to="/galerie" @click="currentSubmenu = null"
                class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
                active-class="text-white bg-primary-600">
                Galerie
              </NuxtLink>

              <button v-if="isLoggedIn" @click="toggleSubmenu('intern')"
                class="px-4 py-2 text-gray-300 hover:text-white font-medium transition-all rounded-lg hover:bg-primary-700/50"
                :class="(route.path.startsWith('/mitgliederbereich') || route.path.startsWith('/cms') || currentSubmenu === 'intern') ? 'text-white bg-primary-600' : ''">
                Intern
              </button>

              <NuxtLink to="/kontakt" @click="currentSubmenu = null"
                class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold transition-all rounded-lg shadow-lg">
                Kontakt
              </NuxtLink>
            </div>

            <div class="hidden lg:flex items-center h-6 border-t border-primary-700/20">
              <div v-if="currentSubmenu" class="flex items-center space-x-1">
                <!-- Verein Submenu -->
                <template v-if="currentSubmenu === 'verein'">
                  <NuxtLink to="/verein/ueber-uns"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    Über uns
                  </NuxtLink>
                  <NuxtLink to="/vorstand"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    Vorstand
                  </NuxtLink>
                  <NuxtLink to="/verein/geschichte"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    Geschichte
                  </NuxtLink>
                  <NuxtLink to="/verein/satzung"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    Satzung
                  </NuxtLink>
                  <NuxtLink to="/vereinsmeisterschaften"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    Vereinsmeisterschaften
                  </NuxtLink>
                </template>

                <!-- Mannschaften Submenu -->
                <template v-if="currentSubmenu === 'mannschaften'">
                  <NuxtLink to="/mannschaften"
                    class="px-2.5 py-1 text-xs font-semibold text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="bg-primary-600">
                    Übersicht
                  </NuxtLink>
                  <div class="h-3 w-px bg-primary-700" />
                  <template v-for="mannschaft in mannschaften" :key="mannschaft.slug">
                    <NuxtLink :to="`/mannschaften/${mannschaft.slug}`"
                      class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                      active-class="text-white bg-primary-600">
                      {{ mannschaft.mannschaft }}
                    </NuxtLink>
                  </template>
                  <div class="h-3 w-px bg-primary-700" />
                  <NuxtLink to="/mannschaften/spielplaene"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    Spielpläne
                  </NuxtLink>
                  <NuxtLink to="/spielsysteme"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    Spielsysteme
                  </NuxtLink>
                </template>

                <!-- Training Submenu -->
                <template v-if="currentSubmenu === 'training'">
                  <NuxtLink to="/training"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    Trainingszeiten
                  </NuxtLink>
                  <NuxtLink to="/training/trainer"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    Trainer
                  </NuxtLink>
                  <NuxtLink to="/training/anfaenger"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    Anfänger
                  </NuxtLink>
                  <NuxtLink to="/tt-regeln"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    TT-Regeln
                  </NuxtLink>
                </template>

                <!-- Intern Submenu -->
                <template v-if="currentSubmenu === 'intern'">
                  <NuxtLink to="/mitgliederbereich"
                    class="px-2.5 py-1 text-xs font-semibold text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="bg-primary-600">
                    Übersicht
                  </NuxtLink>
                  <div class="h-3 w-px bg-primary-700" />
                  <NuxtLink to="/mitgliederbereich/mitglieder"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    Mitgliederliste
                  </NuxtLink>
                  <NuxtLink to="/mitgliederbereich/news"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    News
                  </NuxtLink>
                  <NuxtLink to="/mitgliederbereich/profil"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    Mein Profil
                  </NuxtLink>
                  <div class="h-3 w-px bg-primary-700" />
                  <NuxtLink to="/mitgliederbereich/api"
                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                    active-class="text-white bg-primary-600">
                    API-Dokumentation
                  </NuxtLink>
                  <template v-if="isAdmin">
                    <div class="h-3 w-px bg-primary-700" />
                    <div class="relative inline-block">
                      <button @click.stop="toggleCmsDropdown"
                        class="px-2.5 py-1 text-xs text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded transition-all flex items-center"
                        :class="route.path.startsWith('/cms') ? 'text-white bg-primary-600' : ''">
                        CMS
                        <ChevronDown :size="12" class="ml-1"
                          :class="['transition-transform', showCmsDropdown ? 'rotate-180' : '']" />
                      </button>

                      <!-- CMS Dropdown -->
                      <div v-if="showCmsDropdown"
                        class="absolute left-0 top-full mt-1 w-48 bg-gray-800 border border-gray-700 rounded-lg shadow-xl overflow-hidden z-50">
                        <NuxtLink to="/cms" @click="showCmsDropdown = false"
                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
                          Übersicht
                        </NuxtLink>
                        <div class="border-t border-gray-700 my-1"></div>
                        <NuxtLink to="/cms/ueber-uns" @click="showCmsDropdown = false"
                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
                          Über uns
                        </NuxtLink>
                        <NuxtLink to="/cms/geschichte" @click="showCmsDropdown = false"
                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
                          Geschichte
                        </NuxtLink>
                        <NuxtLink to="/cms/tt-regeln" @click="showCmsDropdown = false"
                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
                          TT-Regeln
                        </NuxtLink>
                        <NuxtLink to="/cms/satzung" @click="showCmsDropdown = false"
                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
                          Satzung
                        </NuxtLink>
                        <NuxtLink to="/cms/vereinsmeisterschaften" @click="showCmsDropdown = false"
                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
                          Vereinsmeisterschaften
                        </NuxtLink>
                        <div class="border-t border-gray-700 my-1"></div>
                        <NuxtLink to="/mitgliederbereich/news" @click="showCmsDropdown = false"
                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
                          News
                        </NuxtLink>
                        <NuxtLink to="/cms/termine" @click="showCmsDropdown = false"
                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
                          Termine
                        </NuxtLink>
                        <NuxtLink to="/cms/spielplaene" @click="showCmsDropdown = false"
                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
                          Spielpläne
                        </NuxtLink>
                        <NuxtLink to="/mitgliederbereich/mitglieder" @click="showCmsDropdown = false"
                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
                          Mitglieder
                        </NuxtLink>
                        <div class="border-t border-gray-700 my-1"></div>
                        <NuxtLink to="/cms/einstellungen" @click="showCmsDropdown = false"
                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
                          Einstellungen
                        </NuxtLink>
                        <NuxtLink to="/cms/mitgliedschaftsantraege" @click="showCmsDropdown = false"
                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
                          Mitgliedschaftsanträge
                        </NuxtLink>
                        <NuxtLink to="/cms/benutzer" @click="showCmsDropdown = false"
                          class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors">
                          Benutzerverwaltung
                        </NuxtLink>
                      </div>
                    </div>
                  </template>
                </template>
              </div>
            </div>

            <!-- Mobile Menu Button -->
            <button @click="isMobileMenuOpen = !isMobileMenuOpen"
              class="lg:hidden p-2 rounded-lg hover:bg-primary-700/50 transition-colors" aria-label="Toggle menu">
              <X v-if="isMobileMenuOpen" :size="24" class="text-white" />
              <Menu v-else :size="24" class="text-white" />
            </button>
          </div>

          <!-- Untermenü (Desktop) - im gleichen Block, immer gleiche Höhe -->
        </div>
      </div>
    </div>

    <!-- Mobile Menu -->
    <Transition enter-active-class="transition duration-200 ease-out"
      enter-from-class="opacity-0 transform -translate-y-2" enter-to-class="opacity-100 transform translate-y-0"
      leave-active-class="transition duration-150 ease-in" leave-from-class="opacity-100 transform translate-y-0"
      leave-to-class="opacity-0 transform -translate-y-2">
      <div v-if="isMobileMenuOpen"
        class="lg:hidden bg-gray-800 border-t border-primary-700/30 max-h-[80vh] overflow-y-auto">
        <div class="px-4 py-4 space-y-2">
          <NuxtLink to="/" @click="isMobileMenuOpen = false"
            class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
            Start
          </NuxtLink>

          <!-- Verein Mobile -->
          <div>
            <button @click="toggleMobileSubmenu('verein')"
              class="w-full flex items-center justify-between px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
              Verein
              <ChevronDown :size="16"
                :class="['transition-transform', mobileSubmenu === 'verein' ? 'rotate-180' : '']" />
            </button>
            <div v-if="mobileSubmenu === 'verein'" class="pl-4 space-y-1 mt-1 bg-primary-900/30 rounded-lg p-2">
              <NuxtLink to="/verein/ueber-uns" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Über uns
              </NuxtLink>
              <NuxtLink to="/vorstand" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Vorstand
              </NuxtLink>
              <NuxtLink to="/verein/geschichte" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Geschichte
              </NuxtLink>
              <NuxtLink to="/verein/satzung" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Satzung
              </NuxtLink>
              <NuxtLink to="/vereinsmeisterschaften" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Vereinsmeisterschaften
              </NuxtLink>
            </div>
          </div>

          <!-- Mannschaften Mobile -->
          <div>
            <button @click="toggleMobileSubmenu('mannschaften')"
              class="w-full flex items-center justify-between px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
              Mannschaften
              <ChevronDown :size="16"
                :class="['transition-transform', mobileSubmenu === 'mannschaften' ? 'rotate-180' : '']" />
            </button>
            <div v-if="mobileSubmenu === 'mannschaften'" class="pl-4 space-y-1 mt-1 bg-primary-900/30 rounded-lg p-2">
              <NuxtLink to="/mannschaften" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm font-semibold text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Übersicht
              </NuxtLink>
              <template v-for="mannschaft in mannschaften" :key="mannschaft.slug">
                <NuxtLink :to="`/mannschaften/${mannschaft.slug}`" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  {{ mannschaft.mannschaft }}
                </NuxtLink>
              </template>
              <div class="border-t border-primary-700/20 my-2" />
              <NuxtLink to="/mannschaften/spielplaene" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Spielpläne
              </NuxtLink>
              <NuxtLink to="/spielsysteme" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Spielsysteme
              </NuxtLink>
            </div>
          </div>

          <!-- Training Mobile -->
          <div>
            <button @click="toggleMobileSubmenu('training')"
              class="w-full flex items-center justify-between px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
              Training
              <ChevronDown :size="16"
                :class="['transition-transform', mobileSubmenu === 'training' ? 'rotate-180' : '']" />
            </button>
            <div v-if="mobileSubmenu === 'training'" class="pl-4 space-y-1 mt-1 bg-primary-900/30 rounded-lg p-2">
              <NuxtLink to="/training" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Trainingszeiten
              </NuxtLink>
              <NuxtLink to="/training/trainer" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Trainer
              </NuxtLink>
              <NuxtLink to="/training/anfaenger" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Anfänger
              </NuxtLink>
              <NuxtLink to="/tt-regeln" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                TT-Regeln
              </NuxtLink>
            </div>
          </div>

          <NuxtLink to="/mitgliedschaft" @click="isMobileMenuOpen = false"
            class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
            Mitgliedschaft
          </NuxtLink>

          <NuxtLink to="/termine" @click="isMobileMenuOpen = false"
            class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
            Termine
          </NuxtLink>

          <NuxtLink v-if="hasGalleryImages" to="/galerie" @click="isMobileMenuOpen = false"
            class="block px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
            Galerie
          </NuxtLink>

          <!-- Intern Mobile -->
          <div v-if="isLoggedIn">
            <button @click="toggleMobileSubmenu('intern')"
              class="w-full flex items-center justify-between px-4 py-3 text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg font-medium transition-colors">
              Intern
              <ChevronDown :size="16"
                :class="['transition-transform', mobileSubmenu === 'intern' ? 'rotate-180' : '']" />
            </button>
            <div v-if="mobileSubmenu === 'intern'" class="pl-4 space-y-1 mt-1 bg-primary-900/30 rounded-lg p-2">
              <NuxtLink to="/mitgliederbereich" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm font-semibold text-gray-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Übersicht
              </NuxtLink>
              <NuxtLink to="/mitgliederbereich/mitglieder" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Mitgliederliste
              </NuxtLink>
              <NuxtLink to="/mitgliederbereich/news" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                News
              </NuxtLink>
              <NuxtLink to="/mitgliederbereich/profil" @click="isMobileMenuOpen = false"
                class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                Mein Profil
              </NuxtLink>
              <template v-if="isAdmin">
                <div class="border-t border-primary-700/20 my-2" />
                <NuxtLink to="/cms" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm font-semibold text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  CMS Übersicht
                </NuxtLink>
                <NuxtLink to="/mitgliederbereich/news" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  News
                </NuxtLink>
                <NuxtLink to="/cms/termine" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  Termine
                </NuxtLink>
                <NuxtLink to="/cms/spielplaene" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  Spielpläne
                </NuxtLink>
                <NuxtLink to="/mitgliederbereich/mitglieder" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  Mitglieder
                </NuxtLink>
                <NuxtLink to="/cms/ueber-uns" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  Über uns
                </NuxtLink>
                <NuxtLink to="/cms/geschichte" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  Geschichte
                </NuxtLink>
                <NuxtLink to="/cms/tt-regeln" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  TT-Regeln
                </NuxtLink>
                <NuxtLink to="/cms/satzung" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  Satzung
                </NuxtLink>
                <NuxtLink to="/cms/vereinsmeisterschaften" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  Vereinsmeisterschaften
                </NuxtLink>
                <NuxtLink to="/cms/einstellungen" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  Einstellungen
                </NuxtLink>
                <NuxtLink to="/cms/mitgliedschaftsantraege" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  Mitgliedschaftsanträge
                </NuxtLink>
                <NuxtLink to="/cms/benutzer" @click="isMobileMenuOpen = false"
                  class="block px-4 py-2 text-sm text-yellow-300 hover:text-white hover:bg-primary-700/50 rounded-lg transition-colors">
                  Benutzerverwaltung
                </NuxtLink>
              </template>
            </div>
          </div>

          <NuxtLink to="/kontakt" @click="isMobileMenuOpen = false"
            class="block px-4 py-3 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-semibold transition-colors">
            Kontakt
          </NuxtLink>
        </div>
      </div>
    </Transition>
  </nav>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Menu, X, ChevronDown } from 'lucide-vue-next'

const route = useRoute()
const authStore = useAuthStore()
const isMobileMenuOpen = ref(false)
const mobileSubmenu = ref(null)
const mannschaften = ref([])
const hasGalleryImages = ref(false)
const showCmsDropdown = ref(false)

// Reactive auth state from store
const isLoggedIn = computed(() => authStore.isLoggedIn)
const isAdmin = computed(() => authStore.isAdmin)

// Automatisches Setzen des Submenus basierend auf der Route
const currentSubmenu = computed(() => {
  const path = route.path
  if (path.startsWith('/verein/') || path.startsWith('/vorstand') ||
    path.startsWith('/vereinsmeisterschaften')) {
    return 'verein'
  }
  if (path.startsWith('/mannschaften') || path.startsWith('/spielsysteme')) {
    return 'mannschaften'
  }
  if (path.startsWith('/training') || path.startsWith('/tt-regeln')) {
    return 'training'
  }
  if (path.startsWith('/mitgliederbereich') || path.startsWith('/cms')) {
    return 'intern'
  }
  return null
})

const toggleMobileSubmenu = (menu) => {
  mobileSubmenu.value = mobileSubmenu.value === menu ? null : menu
}

const loadMannschaften = async () => {
  try {
    const response = await fetch('/data/mannschaften.csv')
    if (!response.ok) return

    const csv = await response.text()
    const lines = csv.split('\n').filter(line => line.trim() !== '')

    if (lines.length < 2) return

    mannschaften.value = lines.slice(1).map(line => {
      // Besserer CSV-Parser: Respektiert Anführungszeichen
      const values = []
      let current = ''
      let inQuotes = false

      for (let i = 0; i < line.length; i++) {
        const char = line[i]

        if (char === '"') {
          inQuotes = !inQuotes
        } else if (char === ',' && !inQuotes) {
          values.push(current.trim())
          current = ''
        } else {
          current += char
        }
      }
      values.push(current.trim())

      if (!values[0]) return null

      return {
        mannschaft: values[0].trim(),
        slug: values[0].trim().toLowerCase().replace(/\s+/g, '-')
      }
    }).filter(mannschaft => mannschaft !== null)
  } catch (error) {
    console.error('Fehler beim Laden der Mannschaften:', error)
  }
}

const checkGalleryImages = async () => {
  try {
    const response = await $fetch('/api/galerie')
    hasGalleryImages.value = response && response.length > 0
  } catch (error) {
    console.error('Fehler beim Prüfen der Galerie-Bilder:', error)
    hasGalleryImages.value = false
  }
}

const toggleCmsDropdown = () => {
  showCmsDropdown.value = !showCmsDropdown.value
}

const handleDocumentClick = (e) => {
  if (!e.target.closest('.relative.inline-block')) {
    showCmsDropdown.value = false
  }
}

onMounted(() => {
  loadMannschaften()
  checkGalleryImages()
  authStore.checkAuth()

  // Close CMS dropdown when clicking outside
  document.addEventListener('click', handleDocumentClick)
})

onUnmounted(() => {
  document.removeEventListener('click', handleDocumentClick)
})

const toggleSubmenu = (menu) => {
  // Wenn wir schon im richtigen Bereich sind, nichts tun (Submenu bleibt offen)
  // Wenn nicht, zur Hauptseite navigieren
  const path = route.path

  if (menu === 'verein' && !path.startsWith('/verein/') && !path.startsWith('/vorstand') && !path.startsWith('/vereinsmeisterschaften')) {
    navigateTo('/verein/ueber-uns')
  } else if (menu === 'mannschaften' && !path.startsWith('/mannschaften') && !path.startsWith('/spielsysteme')) {
    navigateTo('/mannschaften')
  } else if (menu === 'training' && !path.startsWith('/training') && !path.startsWith('/tt-regeln')) {
    navigateTo('/training')
  } else if (menu === 'intern' && !path.startsWith('/mitgliederbereich') && !path.startsWith('/cms')) {
    navigateTo('/mitgliederbereich')
  }
}
</script>
