<script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3';
import { computed, onMounted, nextTick } from 'vue';

const page = usePage();
const user = computed(() => (page.props as any).auth?.user || null);

onMounted(() => {
  nextTick(() => { if ((window as any).lucide) (window as any).lucide.createIcons(); });
});
</script>

<template>
  <div class="admin-layout">
    <aside class="sidebar">
      <div class="brand">
        <i data-lucide="shield"></i>
        <span>Admin</span>
      </div>
      <nav class="nav">
        <Link href="/admin" class="nav-item" :class="{ active: $page.url === '/admin' }">
          <i data-lucide="layout-dashboard"></i>
          <span>Dashboard</span>
        </Link>
        <div class="nav-label">Wallets</div>
        <Link href="/admin/wallets/settings" class="nav-item" :class="{ active: $page.url.startsWith('/admin/wallets/settings') }">
          <i data-lucide="settings"></i>
          <span>Einstellungen</span>
        </Link>
        <Link href="/admin/payments/settings" class="nav-item" :class="{ active: $page.url.startsWith('/admin/payments/settings') }">
          <i data-lucide="credit-card"></i>
          <span>Zahlungen</span>
        </Link>
        <div class="nav-label">Weitere</div>
        <Link href="/admin/promos" class="nav-item" :class="{ active: $page.url.startsWith('/admin/promos') }">
          <i data-lucide="gift"></i>
          <span>Promos</span>
        </Link>
        <Link href="/admin/support" class="nav-item" :class="{ active: $page.url.startsWith('/admin/support') }">
          <i data-lucide="message-square"></i>
          <span>Support</span>
        </Link>
      </nav>
      <div class="sidebar-foot">
        <div class="user">
          <i data-lucide="user"></i>
          <span>{{ user?.username || user?.name || 'Admin' }}</span>
        </div>
        <Link href="/" class="back-link"><i data-lucide="arrow-left"></i> Zurück</Link>
      </div>
    </aside>

    <main class="main">
      <header class="topbar">
        <div class="title"><slot name="title">Admin</slot></div>
        <div class="actions"><slot name="actions" /></div>
      </header>
      <div class="container">
        <slot />
      </div>
    </main>
  </div>
</template>

<style scoped>
.admin-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; background: #0b0b0c; color: #e5e7eb; }
.sidebar { background: #0f0f10; border-right: 1px solid #1f1f22; display: flex; flex-direction: column; }
.brand { height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-weight: 800; letter-spacing: .5px; border-bottom: 1px solid #1f1f22; }
.brand i { width: 18px; height: 18px; }
.nav { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #cbd5e1; text-decoration: none; }
.nav-item i { width: 18px; height: 18px; }
.nav-item:hover { background: #151518; color: #fff; }
.nav-item.active { background: #1b1b20; color: #fff; border: 1px solid #23232a; }
.nav-label { font-size: 11px; color: #9ca3af; font-weight: 700; padding: 8px 12px 0; text-transform: uppercase; letter-spacing: 1px; }
.sidebar-foot { margin-top: auto; padding: 12px; border-top: 1px solid #1f1f22; display: grid; gap: 8px; }
.user { display: flex; align-items: center; gap: 8px; color: #9ca3af; }
.back-link { color: #cbd5e1; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.back-link:hover { color: #fff; }
.main { display: flex; flex-direction: column; }
.topbar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #1f1f22; background: #0f0f10; }
.title { font-weight: 800; }
.container { padding: 16px; }
@media (max-width: 960px) {
  .admin-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}
</style>
