route-commerce/src/components/admin/AdminSidebar.tsx

"use client";

import { useState, useEffect, useEffectEvent, useRef, useCallback, useMemo, KeyboardEvent, ComponentType } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import {
  LayoutDashboard,
  ShoppingCart,
  MapPin,
  Package,
  Truck,
  Ship,
  Mail,
  Store,
  Upload,
  BrainCircuit,
  Clock,
  Droplets,
  Route,
  ChartBar,
  Receipt,
  Settings,
  LogOut,
  Menu,
  X,
  ArrowLeft,
} from "lucide-react";
import { signOutAction } from "@/actions/auth-actions";
import BrandSelector from "@/components/admin/BrandSelector";
import SideNavGroup from "@/components/admin/SideNavGroup";

async function handleLogout() {
  await signOutAction();
}

// Sidebar tokens used (from src/styles/admin-design-system.css):
//   --admin-sidebar-bg          (#2A2520)
//   --admin-sidebar-text        (#B8B4A8)
//   --admin-sidebar-hover       (#3A352F)
//   --admin-sidebar-active      (#4A443C)
//   --admin-sidebar-accent      (#D4A24C — amber, used for active left-border + dot)
// The "amber accent" replaces the old `--admin-accent` (citrus orange) in the
// sidebar only — primary buttons elsewhere still use the deep botanical green.

type IconComponent = ComponentType<{ className?: string; size?: number | string }>;

type NavItemDef = {
  href: string;
  label: string;
  icon: IconComponent;
  /** If set, this item is hidden when `enabledAddons[key] === false`. */
  addonKey?: string;
  /** When true, only `userRole === "platform_admin"` sees this item. */
  requiresPlatformAdmin?: boolean;
};

type NavGroup = {
  label: string;
  items: NavItemDef[];
};

/**
 * Grouped nav IA per `docs/superpowers/specs/2026-06-17-admin-redesign.md` §4.
 * Order is intentional (top-to-bottom = frequency-of-use + mental flow).
 *
 * - Workspace     : Dashboard is always shown; Command Center is platform_admin-only.
 * - Operations    : Day-to-day order/stop/product flow.
 * - Communications: Harvest Reach only — the other sub-items live inside that page.
 * - Growth        : Wholesale portal, data imports, AI assistant.
 * - Tracking      : Time tracking is always on; Water Log / Route Trace are
 *                   gated on their respective add-ons via `enabledAddons`.
 * - Insights      : Reporting + tax.
 * - Settings      : Single entry; sub-pages are tabs inside /admin/settings.
 */
const NAV_GROUPS: NavGroup[] = [
  {
    label: "Workspace",
    items: [
      { href: "/admin", label: "Dashboard", icon: LayoutDashboard },
    ],
  },
  {
    label: "Operations",
    items: [
      { href: "/admin/orders", label: "Orders", icon: ShoppingCart },
      { href: "/admin/stops", label: "Stops & Routes", icon: MapPin },
      { href: "/admin/products", label: "Products", icon: Package },
      { href: "/admin/pickup", label: "Driver Pickup", icon: Truck },
      { href: "/admin/shipping", label: "Shipping", icon: Ship },
    ],
  },
  {
    label: "Communications",
    items: [
      { href: "/admin/communications", label: "Harvest Reach", icon: Mail },
    ],
  },
  {
    label: "Growth",
    items: [
      { href: "/admin/wholesale", label: "Wholesale", icon: Store },
      { href: "/admin/import", label: "Import Center", icon: Upload },
      { href: "/admin/settings/ai", label: "AI Intelligence", icon: BrainCircuit },
    ],
  },
  {
    label: "Tracking",
    items: [
      { href: "/admin/time-tracking", label: "Time Tracking", icon: Clock },
      { href: "/admin/water-log", label: "Water Log", icon: Droplets, addonKey: "water_log" },
      { href: "/admin/route-trace", label: "Route Trace", icon: Route, addonKey: "route_trace" },
    ],
  },
  {
    label: "Insights",
    items: [
      { href: "/admin/reports", label: "Reports", icon: ChartBar },
      { href: "/admin/taxes", label: "Tax Dashboard", icon: Receipt },
    ],
  },
  {
    label: "Settings",
    items: [
      { href: "/admin/settings", label: "Settings", icon: Settings },
    ],
  },
];

type SidebarProps = {
  userRole?: string | null;
  brandIds?: string[];
  activeBrandId?: string | null;
  brands?: { id: string; name: string; slug: string; logo_url: string | null }[];
  /**
   * Map of add-on key → enabled. When a key is `false` (or omitted, with the
   * add-on not in the map), any nav item with that `addonKey` is hidden.
   * When the prop itself is omitted, all add-on-gated items are shown
   * (back-compat with the current admin layout, which doesn't pass it).
   */
  enabledAddons?: Record<string, boolean>;
};

export default function AdminSidebar({
  userRole,
  brandIds,
  activeBrandId,
  brands,
  enabledAddons,
}: SidebarProps) {
  const pathname = usePathname();
  const router = useRouter();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [isClosing, setIsClosing] = useState(false);
  const sidebarRef = useRef<HTMLDivElement>(null);
  const mobileMenuRef = useRef<HTMLDivElement>(null);
  const closeButtonRef = useRef<HTMLButtonElement>(null);

  const roleLabel =
    userRole === "platform_admin"
      ? "Platform Admin"
      : userRole === "brand_admin"
        ? "Brand Admin"
        : userRole === "store_employee"
          ? "Store Employee"
          : null;

  /**
   * Build the filtered list of visible nav items for the current viewer.
   * Honors role-gating (Command Center) and add-on gating (Water Log, Route Trace).
   * If `enabledAddons` is undefined, add-on-gated items are shown (no gating).
   */
  const visibleItems = useMemo<NavItemDef[]>(
    () =>
      NAV_GROUPS.flatMap((group) =>
        group.items.filter((item) => {
          if (item.requiresPlatformAdmin && userRole !== "platform_admin") {
            return false;
          }
          if (item.addonKey && enabledAddons && enabledAddons[item.addonKey] === false) {
            return false;
          }
          return true;
        }),
      ),
    [userRole, enabledAddons],
  );

  /**
   * Groups rendered, with empty ones removed. The Communications group is
   * always rendered today (Harvest Reach is always visible) — but if a
   * future iteration hides Harvest Reach for some role, the entire group
   * header goes away rather than rendering an empty section.
   */
  const visibleItemSet = new Set(visibleItems);
  const visibleGroups: NavGroup[] = [];
  for (const group of NAV_GROUPS) {
    const items = group.items.filter((item) => visibleItemSet.has(item));
    if (items.length > 0) {
      visibleGroups.push({ ...group, items });
    }
  }

  const isActive = useCallback(
    (href: string) => {
      if (href === "/admin") return pathname === "/admin";
      return pathname.startsWith(href);
    },
    [pathname],
  );

  // Close mobile menu with animation
  const closeMobileMenu = useCallback(() => {
    setIsClosing(true);
    setTimeout(() => {
      setMobileOpen(false);
      setIsClosing(false);
    }, 200);
  }, []);

  // Handle escape key
  // useEffectEvent so we always see the latest closeMobileMenu without
  // re-subscribing the keydown handler on every parent render.
  const onEscapeEffect = useEffectEvent(() => {
    closeMobileMenu();
  });
  useEffect(() => {
    const handleEscape = (e: globalThis.KeyboardEvent) => {
      if (e.key === "Escape" && mobileOpen) {
        onEscapeEffect();
      }
    };
    document.addEventListener("keydown", handleEscape);
    return () => document.removeEventListener("keydown", handleEscape);
  }, [mobileOpen]);

  // Focus trap and body scroll lock
  useEffect(() => {
    if (mobileOpen) {
      document.body.style.overflow = "hidden";
      // Focus close button after animation
      setTimeout(() => {
        closeButtonRef.current?.focus();
      }, 100);
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [mobileOpen]);

  // Keyboard navigation for nav items (arrow up/down loops, enter/space activates)
  const handleNavKeyDown = useCallback(
    (e: KeyboardEvent<HTMLAnchorElement>, href: string, index: number) => {
      const total = visibleItems.length;
      if (total === 0) return;

      if (e.key === "ArrowDown") {
        e.preventDefault();
        const nextIndex = (index + 1) % total;
        const nextLink = document.querySelector(
          `[data-nav-index="${nextIndex}"]`,
        ) as HTMLAnchorElement | null;
        nextLink?.focus();
      } else if (e.key === "ArrowUp") {
        e.preventDefault();
        const prevIndex = index === 0 ? total - 1 : index - 1;
        const prevLink = document.querySelector(
          `[data-nav-index="${prevIndex}"]`,
        ) as HTMLAnchorElement | null;
        prevLink?.focus();
      } else if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        router.push(href);
        if (mobileOpen) closeMobileMenu();
      }
    },
    [router, mobileOpen, closeMobileMenu, visibleItems],
  );

  // Shared nav-link renderer. Used by both the desktop sidebar and the mobile
  // slide-in panel — they're the same list, just in a different container.
  const renderNavLink = (item: NavItemDef, index: number) => {
    const active = isActive(item.href);
    const Icon = item.icon;
    return (
      <li key={item.href}>
        <Link
          href={item.href}
          data-nav-index={index}
          onClick={() => closeMobileMenu()}
          onKeyDown={(e) => handleNavKeyDown(e, item.href, index)}
          className={[
            "group flex items-center gap-2.5 pl-3 pr-2.5 py-2 rounded-r-md text-xs font-medium",
            "border-l-[3px] transition-all duration-200",
            "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--admin-sidebar-bg)]",
          ].join(" ")}
          style={
            active
              ? {
                  backgroundColor: "var(--admin-sidebar-active)",
                  color: "#F4F1E8",
                  borderLeftColor: "var(--admin-sidebar-accent)",
                }
              : {
                  color: "var(--admin-sidebar-text)",
                  borderLeftColor: "transparent",
                }
          }
          onMouseEnter={(e) => {
            if (!active) {
              e.currentTarget.style.backgroundColor =
                "var(--admin-sidebar-hover)";
            }
          }}
          onMouseLeave={(e) => {
            if (!active) {
              e.currentTarget.style.backgroundColor = "transparent";
            }
          }}
          aria-current={active ? "page" : undefined}
          tabIndex={0}
        >
          <span
            className="flex-shrink-0 transition-colors duration-200"
            style={{
              color: active
                ? "var(--admin-sidebar-accent)"
                : "rgba(208, 203, 180, 0.6)",
            }}
            aria-hidden="true"
          >
            <Icon className="w-4 h-4" />
          </span>
          <span className="flex-1 truncate">{item.label}</span>
          {active && (
            <span
              className="w-1.5 h-1.5 rounded-full flex-shrink-0"
              style={{ backgroundColor: "var(--admin-sidebar-accent)" }}
              aria-hidden="true"
            />
          )}
        </Link>
      </li>
    );
  };

  return (
    <>
      {/* Mobile hamburger button - accessible */}
      <button
        onClick={() => setMobileOpen(true)}
        className="fixed top-4 left-4 z-50 lg:hidden rounded-xl bg-white shadow-lg border border-[var(--admin-border)] p-3 transition-transform hover:scale-105 active:scale-95"
        aria-label="Open navigation menu"
        aria-expanded={mobileOpen}
        aria-controls="admin-sidebar"
        type="button"
      >
        <Menu className="w-5 h-5" aria-hidden="true" />
      </button>

      {/* Mobile overlay backdrop with blur */}
      {mobileOpen && (
        <div
          className="fixed inset-0 bg-black/40 backdrop-blur-sm z-40 lg:hidden transition-opacity duration-200"
          style={{ opacity: isClosing ? 0 : 1 }}
          onClick={closeMobileMenu}
          aria-hidden="true"
        />
      )}

      {/* Sidebar panel - dark canvas, grouped nav, amber accent for active */}
      <aside
        ref={sidebarRef}
        id="admin-sidebar"
        className={[
          "fixed top-0 left-0 h-full w-60 z-50",
          "border-r flex flex-col",
          "transition-transform duration-300 ease-out lg:translate-x-0",
          mobileOpen ? "translate-x-0" : "-translate-x-full",
          isClosing ? "opacity-90" : "opacity-100",
        ].join(" ")}
        style={{
          backgroundColor: "var(--admin-sidebar-bg)",
          borderColor: "rgba(208, 203, 180, 0.2)",
        }}
        role="navigation"
        aria-label="Admin navigation"
      >
        {/* Logo row with close button on mobile */}
        <div
          className="flex items-center h-16 px-5 border-b flex-shrink-0"
          style={{ borderColor: "rgba(208, 203, 180, 0.2)" }}
        >
          <div className="flex items-center justify-between w-full">
            <Link
              href="/admin"
              onClick={() => closeMobileMenu()}
              className="flex items-center gap-3 text-white hover:opacity-90 transition-opacity"
              aria-label="Admin Dashboard home"
            >
              <div
                className="flex h-9 w-9 items-center justify-center rounded-xl shadow-sm transition-transform hover:scale-105"
                style={{ backgroundColor: "var(--admin-sidebar-accent)" }}
              >
                <ArrowLeft className="h-5 w-5 text-white" aria-hidden="true" />
              </div>
              <span className="text-sm font-semibold tracking-tight">Admin</span>
            </Link>

            {/* Mobile close button */}
            <button
              ref={closeButtonRef}
              onClick={closeMobileMenu}
              className="lg:hidden p-2 rounded-lg text-white/60 hover:text-white hover:bg-white/10 transition-colors"
              aria-label="Close navigation menu"
              type="button"
            >
              <X className="w-5 h-5" aria-hidden="true" />
            </button>
          </div>
        </div>

        {/* Back to site link */}
        <div
          className="px-5 py-3 border-b flex-shrink-0"
          style={{ borderColor: "rgba(208, 203, 180, 0.2)" }}
        >
          <Link
            href="/"
            className="text-xs transition-colors flex items-center gap-1.5 hover:text-white"
            style={{ color: "var(--admin-sidebar-text)" }}
          >
            <ArrowLeft className="w-3.5 h-3.5" aria-hidden="true" />
            Back to Site
          </Link>
        </div>

        {/* Nav groups with keyboard navigation */}
        <nav
          ref={mobileMenuRef}
          className="flex-1 overflow-y-auto overflow-x-hidden pt-3 pb-2 scrollbar-thin"
        >
          {visibleGroups.map((group) => (
            <SideNavGroup key={group.label} label={group.label}>
              {group.items.map((item) => {
                const idx = visibleItems.findIndex((v) => v.href === item.href);
                return renderNavLink(item, idx);
              })}
            </SideNavGroup>
          ))}
        </nav>

        {/* Bottom: command-palette tip + brand picker + role + sign out */}
        <div
          className="px-4 py-4 border-t flex-shrink-0 space-y-3"
          style={{ borderColor: "rgba(208, 203, 180, 0.2)" }}
        >
          {/* Cmd+K hint — the command palette itself is mounted separately
              in the admin layout; this is just a discoverability nudge. */}
          <div
            className="flex items-center justify-between text-[10px] uppercase tracking-widest"
            style={{ color: "rgba(195, 195, 193, 0.5)" }}
            aria-hidden="true"
          >
            <span>Tip</span>
            <kbd
              className="font-mono px-1.5 py-0.5 rounded border"
              style={{
                color: "rgba(195, 195, 193, 0.7)",
                backgroundColor: "rgba(208, 203, 180, 0.1)",
                borderColor: "rgba(208, 203, 180, 0.2)",
              }}
            >
              ⌘K
            </kbd>
          </div>

          {/* Brand selector — only show when admin has access to brands */}
          {brands && brands.length > 0 && (
            <BrandSelector
              brands={brands}
              activeBrandId={activeBrandId ?? null}
              showAllBrandsOption={userRole === "platform_admin"}
              isMultiBrandAdmin={(brandIds?.length ?? 0) > 1}
            />
          )}

          {roleLabel && (
            <div
              className="px-3 py-2.5 rounded-xl border"
              style={{
                backgroundColor: "rgba(208, 203, 180, 0.1)",
                borderColor: "rgba(208, 203, 180, 0.2)",
              }}
            >
              <p
                className="text-[10px] font-medium uppercase tracking-widest mb-0.5"
                style={{ color: "rgba(195, 195, 193, 0.6)" }}
              >
                {roleLabel}
              </p>
              <p className="text-xs" style={{ color: "rgba(195, 195, 193, 0.8)" }}>
                Signed in
              </p>
            </div>
          )}
          <button
            onClick={handleLogout}
            className="w-full px-3 py-2.5 rounded-xl text-sm font-medium transition-all flex items-center gap-2 hover:bg-white/10"
            style={{ color: "rgba(195, 195, 193, 0.7)" }}
            aria-label="Sign out of admin"
            type="button"
          >
            <LogOut className="w-4 h-4" aria-hidden="true" />
            Sign out
          </button>
        </div>
      </aside>
    </>
  );
}