---
/* ---------------------------------------------------------------------------
 * AdminLayout — the two-pane Backstage shell.
 *
 * Top strip: wordmark + " / Backstage" on the left, "Back to the portal"
 *            link on the right.
 * Left:      grouped resource sidebar with active-state and count badges.
 * Right:     slot for the current resource view (list or panel).
 *
 * Standalone from AppLayout deliberately — the member-facing portal and
 * the admin surface have different chrome.
 * ------------------------------------------------------------------------- */

import BaseLayout from '../../layouts/BaseLayout.astro';
import '../admin.css';
import type { ResourceGroup, Resource } from '../resource-types';

interface Props {
  title: string;
  /** Which resource is currently active — used for sidebar highlighting. */
  activeResourceKey?: string;
  /** The registry to render in the sidebar. */
  groups: ResourceGroup[];
}

const { title, activeResourceKey, groups } = Astro.props;

// Pre-compute list-counts and notify-counts for every registered resource,
// so the sidebar can render badges without doing async work in markup.
type SidebarEntry = {
  resource: Resource;
  count: number;
  notify: number;
};

async function loadEntries(group: ResourceGroup): Promise<SidebarEntry[]> {
  return Promise.all(
    group.resources.map(async (resource): Promise<SidebarEntry> => {
      const items = await resource.list.queryFn();
      const arr = Array.isArray(items) ? items : [];
      return {
        resource,
        count: arr.length,
        notify: resource.notifyCount ? resource.notifyCount.count(arr) : 0,
      };
    }),
  );
}

const groupedEntries = await Promise.all(
  groups.map(async (g) => ({ group: g, entries: await loadEntries(g) })),
);

const hasAnyResources = groupedEntries.some((g) => g.entries.length > 0);
---

<BaseLayout title={title}>
  <div class="backstage">

    <!-- ── Top strip ──────────────────────────────────────────────── -->
    <header class="bs-topbar" role="banner">
      <a href="/" class="bs-brand" aria-label="Back to the main menu">
        <img src="/logo.svg" alt="Fenja AI" class="bs-brand-mark" />
        <span class="bs-brand-sep" aria-hidden="true">·</span>
        <span class="bs-brand-project">Project <em class="bs-brand-bifrost">Bifrost</em></span>
        <span class="bs-brand-slash" aria-hidden="true">/</span>
        <span class="bs-brand-backstage">Backstage</span>
      </a>

      <a href="/pulse" class="bs-back-link label-sm">← Back to the portal</a>
    </header>

    <!-- ── Two-pane body ──────────────────────────────────────────── -->
    <div class="bs-body">

      <!-- Sidebar -->
      <nav class="bs-sidebar" aria-label="Resource navigation">
        {hasAnyResources ? (
          <ul class="bs-groups">
            {groupedEntries.map(({ group, entries }) => (
              entries.length > 0 && (
                <li class="bs-group">
                  <p class="bs-group-label">{group.label}</p>
                  <ul class="bs-resources">
                    {entries.map(({ resource, count, notify }) => {
                      const isActive = activeResourceKey === resource.key;
                      return (
                        <li>
                          <a
                            href={`/admin/${resource.key}`}
                            class:list={['bs-resource', { active: isActive }]}
                            aria-current={isActive ? 'page' : undefined}
                          >
                            <span class="bs-resource-label">{resource.label}</span>
                            {count > 0 && (
                              <span class:list={['bs-count', { notify: notify > 0 }]}>
                                {notify > 0 ? notify : count}
                              </span>
                            )}
                          </a>
                        </li>
                      );
                    })}
                  </ul>
                </li>
              )
            ))}
          </ul>
        ) : (
          <p class="bs-sidebar-empty">No resources registered yet.</p>
        )}
      </nav>

      <!-- Main pane -->
      <main class="bs-main" role="main">
        <slot />
      </main>

    </div>
  </div>
</BaseLayout>
