import Link from "next/link";
import type { ReactNode } from "react";
import { LogoutButton } from "../../components/logout-button";
import { adminGroups, adminModules } from "./workflows";

const groupMeta: Record<string, { icon: string; hint: string }> = {
  Operations: { icon: "O", hint: "Participant service" },
  Manage: { icon: "M", hint: "System records" },
  Engagement: { icon: "E", hint: "Raffle tools" },
  Exhibitors: { icon: "X", hint: "Expo accounts" },
  Reports: { icon: "R", hint: "Statistics" },
  Schedules: { icon: "S", hint: "Program setup" },
  Sponsors: { icon: "P", hint: "Partners" },
  "Web Pages": { icon: "W", hint: "CMS content" },
  "User Menu": { icon: "U", hint: "Account logs" }
};

export function AdminShell({ activeSlug, children }: Readonly<{ activeSlug?: string; children: ReactNode }>) {
  return (
    <div className="admin-shell">
      <aside className="admin-sidebar" aria-label="Admin navigation">
        <Link className="admin-brand" href="/admin">
          <span className="admin-logo">P</span>
          <span>
            <strong>PMAP Admin</strong>
            <small>Conference control center</small>
          </span>
        </Link>

        <div className="admin-search" role="search">
          <span>Search</span>
          <input aria-label="Search admin modules" placeholder="Find module..." />
        </div>

        <nav className="admin-nav">
          {adminGroups.map((group) => {
            const meta = groupMeta[group] ?? { icon: group.slice(0, 1), hint: "Modules" };
            const items = adminModules.filter((module) => module.group === group);

            return (
              <section className="admin-nav-group" key={group}>
                <div className="admin-nav-heading">
                  <span className="admin-nav-icon">{meta.icon}</span>
                  <span>
                    <strong>{group}</strong>
                    <small>{meta.hint}</small>
                  </span>
                  <em>{items.length}</em>
                </div>
                <div className="admin-nav-links">
                  {items.map((item) => (
                    <Link className={activeSlug === item.slug ? "active" : ""} href={`/admin/${item.slug}`} key={item.slug}>
                      {item.title}
                    </Link>
                  ))}
                </div>
              </section>
            );
          })}
        </nav>
      </aside>

      <div className="admin-main">
        <header className="admin-topbar">
          <div>
            <span className="admin-kicker">63rd Annual Conference</span>
            <strong>Powering the Next HR Shift</strong>
          </div>
          <div className="admin-top-actions">
            <Link href="/">Website</Link>
            <Link href="/scanner">Scanner</Link>
            <Link className="admin-user" href="/admin/profile">AC</Link>
            <LogoutButton className="admin-logout" redirectTo="/admin/login" />
          </div>
        </header>
        {children}
      </div>
    </div>
  );
}