<script setup lang="ts">
import { useRouter } from 'vue-router'
import ImpersonationBanner from '@/components/tideway/admin/ImpersonationBanner.vue'

const router = useRouter()

const navItems = [
  { name: 'Dashboard', path: '/admin', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
  { name: 'Users', path: '/admin/users', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z' },
  { name: 'Organizations', path: '/admin/organizations', icon: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4' },
]

function isActive(path: string): boolean {
  if (path === '/admin') {
    return router.currentRoute.value.path === '/admin'
  }
  return router.currentRoute.value.path.startsWith(path)
}
</script>

<template>
  <div class="min-h-screen bg-background">
    <ImpersonationBanner />

    <div class="flex">
      <!-- Sidebar -->
      <aside class="w-64 border-r bg-card min-h-screen">
        <div class="p-4 border-b">
          <h1 class="text-xl font-bold">Admin</h1>
          <p class="text-sm text-muted-foreground">Platform Management</p>
        </div>

        <nav class="p-4 space-y-1">
          <RouterLink
            v-for="item in navItems"
            :key="item.path"
            :to="item.path"
            :class="[
              'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
              isActive(item.path)
                ? 'bg-primary text-primary-foreground'
                : 'text-muted-foreground hover:bg-muted hover:text-foreground'
            ]"
          >
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
            </svg>
            \{{ item.name }}
          </RouterLink>
        </nav>

        <div class="absolute bottom-0 w-64 p-4 border-t">
          <RouterLink
            to="/dashboard"
            class="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
          >
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
            </svg>
            Back to App
          </RouterLink>
        </div>
      </aside>

      <!-- Main content -->
      <main class="flex-1 p-8">
        <RouterView />
      </main>
    </div>
  </div>
</template>
