<template>
  <footer class="fixed bottom-0 left-0 right-0 z-40 bg-gray-900 border-t border-gray-800 shadow-2xl">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
      <div class="flex flex-col sm:flex-row justify-between items-center space-y-2 sm:space-y-0">
        <p class="text-sm text-gray-400">
          © {{ currentYear }} Harheimer TC
        </p>
        <div class="flex items-center space-x-6 text-sm relative">
          <NuxtLink to="/impressum" class="text-gray-400 hover:text-primary-400 transition-colors">
            Impressum
          </NuxtLink>
          <NuxtLink to="/kontakt" class="text-gray-400 hover:text-primary-400 transition-colors">
            Kontakt
          </NuxtLink>
          
          <!-- Mitglieder Dropdown -->
          <div class="relative">
            <button
              @click="toggleMemberMenu"
              class="flex items-center space-x-1 text-gray-400 hover:text-primary-400 transition-colors"
            >
              <User :size="16" />
              <span>Mitglieder</span>
              <ChevronUp :size="14" :class="['transition-transform', isMemberMenuOpen ? 'rotate-0' : 'rotate-180']" />
            </button>
            
            <!-- Dropdown Menu (appears above) -->
            <Transition
              enter-active-class="transition duration-200 ease-out"
              enter-from-class="transform translate-y-2 opacity-0"
              enter-to-class="transform translate-y-0 opacity-100"
              leave-active-class="transition duration-150 ease-in"
              leave-from-class="transform translate-y-0 opacity-100"
              leave-to-class="transform translate-y-2 opacity-0"
            >
              <div
                v-if="isMemberMenuOpen"
                class="absolute bottom-full right-0 mb-2 w-48 bg-gray-800 border border-gray-700 rounded-lg shadow-xl overflow-hidden"
              >
                <template v-if="isLoggedIn">
                  <NuxtLink
                    to="/mitgliederbereich"
                    @click="isMemberMenuOpen = false"
                    class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
                  >
                    Mitgliederbereich
                  </NuxtLink>
                  <NuxtLink
                    v-if="isAdmin"
                    to="/cms"
                    @click="isMemberMenuOpen = false"
                    class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
                  >
                    CMS
                  </NuxtLink>
                  <button
                    @click="handleLogout"
                    class="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
                  >
                    Abmelden
                  </button>
                </template>
                <template v-else>
                  <NuxtLink
                    to="/login"
                    @click="isMemberMenuOpen = false"
                    class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
                  >
                    Anmelden
                  </NuxtLink>
                  <NuxtLink
                    to="/registrieren"
                    @click="isMemberMenuOpen = false"
                    class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
                  >
                    Registrieren
                  </NuxtLink>
                  <NuxtLink
                    to="/passwort-vergessen"
                    @click="isMemberMenuOpen = false"
                    class="block px-4 py-2 text-sm text-gray-300 hover:bg-primary-600 hover:text-white transition-colors"
                  >
                    Passwort vergessen
                  </NuxtLink>
                </template>
              </div>
            </Transition>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { User, ChevronUp } from 'lucide-vue-next'

const router = useRouter()
const currentYear = new Date().getFullYear()
const isMemberMenuOpen = ref(false)
const isLoggedIn = ref(false)
const userRole = ref(null)

const isAdmin = computed(() => {
  return userRole.value === 'admin' || userRole.value === 'vorstand'
})

const toggleMemberMenu = () => {
  isMemberMenuOpen.value = !isMemberMenuOpen.value
}

const handleLogout = async () => {
  try {
    await $fetch('/api/auth/logout', { method: 'POST' })
    isLoggedIn.value = false
    userRole.value = null
    isMemberMenuOpen.value = false
    router.push('/')
  } catch (error) {
    console.error('Logout fehlgeschlagen:', error)
  }
}

// Check auth status on mount
onMounted(async () => {
  try {
    const response = await $fetch('/api/auth/status')
    isLoggedIn.value = response.isLoggedIn
    userRole.value = response.role
  } catch (error) {
    isLoggedIn.value = false
  }
})

// Close menu when clicking outside
const handleClickOutside = (event) => {
  if (!event.target.closest('.relative')) {
    isMemberMenuOpen.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>
