<script setup lang="ts">
import {
  DropdownMenu, DropdownMenuContent,
  DropdownMenuTrigger, DropdownMenuSeparator,
  DropdownMenuItem, DropdownMenuLabel
} from '@/components/ui/dropdown-menu'
import { cn } from '@/lib/utils'
import { Settings } from 'lucide-vue-next'
import { RouterLink, useRoute } from 'vue-router'

const { customComponent } = defineProps<{ customComponent?: any }>()

const route = useRoute()

function isActive(prefix: string) {
  const p = route.path.replace(/\/+$/, '')
  const tgt = prefix.replace(/\/+$/, '')
  return p === tgt || p.startsWith(tgt + '/')
}

function navLinkClass(prefix: string) {
  return cn(
    'text-sm font-medium transition-colors',
    isActive(prefix) ? 'text-primary' : 'text-muted-foreground hover:text-primary'
  )
}
</script>

<template>
  <div class="flex flex-col min-h-screen">
    <div class="flex items-center justify-end space-x-6 p-4">
      <nav :class="cn('flex items-center space-x-4 lg:space-x-6', $attrs.class ?? '')">
        <RouterLink
          to="/admin"
          :class="navLinkClass('/admin')"
          :aria-current="isActive('/admin') ? 'page' : undefined"
        >
          Admin
        </RouterLink>
        <RouterLink
          to="/devices"
          :class="navLinkClass('/devices')"
          :aria-current="isActive('/devices') ? 'page' : undefined"
        >
          Devices
        </RouterLink>
        <RouterLink
          to="/trackers"
          :class="navLinkClass('/trackers')"
          :aria-current="isActive('/trackers') ? 'page' : undefined"
        >
          Trackers
        </RouterLink>
      </nav>

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <button class="p-2 rounded hover:bg-muted">
            <Settings />
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent class="w-48">
          <DropdownMenuLabel>Admin</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <RouterLink to="/settings">
            <DropdownMenuItem>Settings</DropdownMenuItem>
          </RouterLink>
          <DropdownMenuSeparator />
          <RouterLink to="/login">
            <DropdownMenuItem>Logout</DropdownMenuItem>
          </RouterLink>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>

    <div class="flex flex-1 flex-col gap-4 p-4">
      <slot></slot>
    </div>
  </div>
</template>