<script lang="ts">
  import '../../app.css';
  import '../../admin.css';
  import type { LayoutData } from './$types';

  let { data, children }: { data: LayoutData; children: any } = $props();

  const isLogin = $derived(data.pathname === '/admin/login');
  const admin = $derived(data.admin);

  const NAV = [
    { href: '/admin', icon: 'space_dashboard', label: 'Dashboard' },
    { href: '/admin/copy', icon: 'edit_note', label: 'Testi & SEO/GEO' },
    { href: '/admin/images', icon: 'image', label: 'Immagini' },
    { href: '/admin/contatti', icon: 'contact_page', label: 'Contatti' },
    { href: '/admin/testimonials', icon: 'reviews', label: 'Testimonianze' },
    { href: '/admin/submissions', icon: 'inbox', label: 'Richieste' },
    { href: '/admin/notifications', icon: 'notifications', label: 'Notifiche' },
    { href: '/admin/warranty', icon: 'verified_user', label: 'CiMa Warranty' },
    { href: '/admin/users', icon: 'manage_accounts', label: 'Amministratori' }
  ];

  function active(href: string): boolean {
    if (href === '/admin') return data.pathname === '/admin';
    return data.pathname.startsWith(href);
  }
</script>

<div class="admin">
  {#if isLogin || !admin}
    {@render children()}
  {:else}
    <div class="admin-shell">
      <aside class="admin-side">
        <div class="admin-brand">
          <img src="/img/logo.png" alt="Giampy Dog Service" />
          <div>
            <strong>Giampy Dog Service</strong>
            <small>Admin Console</small>
          </div>
        </div>
        <nav class="admin-nav">
          {#each NAV as item}
            <a href={item.href} class:active={active(item.href)}>
              <span class="material-symbols-outlined" aria-hidden="true">{item.icon}</span>
              <span>{item.label}</span>
              {#if item.href === '/admin/submissions' && data.submissionsCount > 0}
                <span class="count" style="margin-left:auto;background:rgba(255,255,255,0.08);color:#fff;padding:2px 8px;border-radius:9999px;font-size:10px;font-weight:700;">{data.submissionsCount}</span>
              {/if}
              {#if item.href === '/admin/notifications' && data.unreadNotifications > 0}
                <span class="count" style="margin-left:auto;background:#d64545;color:#fff;padding:2px 8px;border-radius:9999px;font-size:10px;font-weight:700;">{data.unreadNotifications}</span>
              {/if}
            </a>
          {/each}
        </nav>
        <div class="admin-foot">
          <div class="admin-user">
            <strong>{admin.username}</strong>
            <span>Admin signed in</span>
          </div>
          <form method="POST" action="/admin/logout">
            <button type="submit" class="admin-logout">
              <span class="material-symbols-outlined" aria-hidden="true">logout</span>
              Esci
            </button>
          </form>
          <a href="/" target="_blank" style="color:rgba(255,255,255,0.5);font-size:11px;padding:10px 12px;display:inline-flex;gap:8px;text-decoration:none;">
            <span class="material-symbols-outlined" aria-hidden="true" style="font-size:14px;">open_in_new</span>
            Apri landing page
          </a>
        </div>
      </aside>
      <main class="admin-main">
        {@render children()}
      </main>
    </div>
  {/if}
</div>
