batchCooking/apps/web/src/layouts/AdminLayout.tsx

import { Activity, LayoutDashboard, ListChecks, PackageSearch } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { NavLink, Outlet, useNavigate } from "react-router-dom";
import { useAdminAuth } from "../features/admin/AdminAuthContext";
import "./AdminLayout.scss";

/**
 * One entry in the admin sidebar's nav. `key` maps to `admin.nav.<key>` in
 * the locale file — adding a section is one array entry plus one locale key.
 * Paths are absolute under `/admin` (the admin route group lives inside
 * `apps/web`'s `App.tsx`, mounted at `/admin`).
 */
const NAV_ITEMS = [
  { to: "/admin", key: "dashboard", Icon: LayoutDashboard, end: true },
  { to: "/admin/monitoring", key: "monitoring", Icon: Activity, end: false },
  { to: "/admin/corrections", key: "corrections", Icon: ListChecks, end: false },
  { to: "/admin/catalogue", key: "catalog", Icon: PackageSearch, end: false },
] as const;

/**
 * Shell for every authenticated admin page: a fixed sidebar (brand, section
 * nav, the signed-in admin's name + logout) plus a main area rendering the
 * matched child route via `<Outlet />`. Mounted once as the parent of the
 * whole `RequireAdmin`-guarded route group (see `App.tsx`), so `admin` is
 * guaranteed non-null here.
 */
export function AdminLayout() {
  const { t } = useTranslation();
  const { admin, logout } = useAdminAuth();
  const navigate = useNavigate();
  const [isLoggingOut, setIsLoggingOut] = useState(false);

  async function handleLogout() {
    setIsLoggingOut(true);
    try {
      await logout();
      void navigate("/admin/login");
    } catch {
      // Even if the network call failed, the local session state was
      // cleared optimistically enough for the guard to bounce to /login;
      // nothing useful to show the operator here.
      void navigate("/admin/login");
    }
  }

  return (
    <div className="admin-layout">
      <aside className="admin-sidebar">
        <div className="admin-sidebar__brand">
          batchCooking <span>Admin</span>
        </div>

        <nav className="admin-sidebar__nav">
          {NAV_ITEMS.map(({ to, key, Icon, end }) => (
            <NavLink
              key={to}
              to={to}
              end={end}
              className={({ isActive }) => (isActive ? "active" : undefined)}
            >
              <Icon size={18} aria-hidden="true" />
              <span>{t(`admin.nav.${key}`)}</span>
            </NavLink>
          ))}
        </nav>

        <div className="admin-sidebar__footer">
          <span className="admin-sidebar__who" title={admin?.email}>
            {admin?.name}
          </span>
          <button type="button" onClick={handleLogout} disabled={isLoggingOut}>
            {t("admin.layout.logout")}
          </button>
          <p className="admin-sidebar__version" aria-hidden="true">
            v{__APP_VERSION__}
          </p>
        </div>
      </aside>

      <main className="admin-content">
        <Outlet />
      </main>
    </div>
  );
}