<template>
  <div class="min-h-screen bg-slate-100">
    <!-- Header -->
    <header class="bg-white border-b border-slate-200 sticky top-0 z-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
          <!-- Logo -->
          <div class="flex items-center gap-3">
            <div class="w-9 h-9 rounded-lg bg-primary flex items-center justify-center">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                  d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7" />
              </svg>
            </div>
            <span class="text-lg font-bold text-slate-800">fahrschuldesk</span>
          </div>

          <!-- Navigation -->
          <nav class="hidden md:flex items-center gap-1">
            <router-link 
              to="/dashboard" 
              class="px-3 py-2 rounded-lg text-sm font-medium transition-colors"
              :class="$route.path === '/dashboard' ? 'bg-primary text-white' : 'text-slate-600 hover:bg-slate-100'"
            >
              Dashboard
            </router-link>
            
            <template v-if="auth.isPlatformAdmin">
              <router-link 
                to="/admin/tenants"
                class="px-3 py-2 rounded-lg text-sm font-medium transition-colors"
                :class="$route.path.startsWith('/admin/tenants') ? 'bg-primary text-white' : 'text-slate-600 hover:bg-slate-100'"
              >
                Fahrschulen
              </router-link>
              <router-link 
                to="/admin/invoices"
                class="px-3 py-2 rounded-lg text-sm font-medium transition-colors"
                :class="$route.path.startsWith('/admin/invoices') ? 'bg-primary text-white' : 'text-slate-600 hover:bg-slate-100'"
              >
                Rechnungen
              </router-link>
              <router-link 
                to="/admin/audit-logs"
                class="px-3 py-2 rounded-lg text-sm font-medium transition-colors"
                :class="$route.path.startsWith('/admin/audit') ? 'bg-primary text-white' : 'text-slate-600 hover:bg-slate-100'"
              >
                Audit-Log
              </router-link>
            </template>

            <template v-else>
              <router-link 
                v-if="hasModule('office')"
                to="/users"
                class="px-3 py-2 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-100 transition-colors"
              >
                Benutzer
              </router-link>
              <router-link 
                v-if="hasModule('calendar')"
                to="/calendar"
                class="px-3 py-2 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-100 transition-colors"
              >
                Kalender
              </router-link>
              <router-link 
                v-if="hasModule('messenger')"
                to="/messenger"
                class="px-3 py-2 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-100 transition-colors"
              >
                Messenger
              </router-link>
              <router-link 
                v-if="hasModule('learning_blank') || hasModule('learning_premium')"
                to="/learning"
                class="px-3 py-2 rounded-lg text-sm font-medium text-slate-600 hover:bg-slate-100 transition-colors"
              >
                Lernsoftware
              </router-link>
            </template>
          </nav>

          <!-- User Menu -->
          <div class="flex items-center gap-3">
            <div class="text-right hidden sm:block">
              <p class="text-sm font-medium text-slate-800">{{ auth.user?.name || auth.user?.first_name }}</p>
              <p class="text-xs text-slate-500">{{ tenantLabel }}</p>
            </div>
            <button 
              @click="handleLogout"
              class="p-2 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors"
              title="Abmelden"
            >
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const auth = useAuthStore()

const tenantLabel = computed(() => {
  if (auth.isPlatformAdmin) return 'Plattform-Admin'
  return auth.tenant?.name || ''
})

function hasModule(moduleKey) {
  if (auth.isPlatformAdmin) return true
  // TODO: check tenant modules
  return true
}

async function handleLogout() {
  auth.logout()
  router.push('/login')
}
</script>