ApiCore/ApiCore-Frontend/src/app/(app)/sidebar.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  BarChart3,
  CalendarDays,
  Crown,
  Database,
  Droplet,
  Factory,
  Boxes,
  FileClock,
  FlaskConical,
  Hexagon,
  History,
  LayoutDashboard,
  Layers,
  ListTodo,
  type LucideIcon,
  MapPin,
  Package,
  Scissors,
  Search,
  Snowflake,
  ShoppingBag,
  Users,
  Warehouse,
  Wrench,
  Zap,
} from "lucide-react";
import { cn } from "@/lib/utils";
import type { AuthUser } from "@/lib/auth/auth-context";

interface NavItem {
  label: string;
  href: string;
  icon: LucideIcon;
  // Any one of these grants visibility - used for hub pages that fold
  // together several previously-separate settings pages, each gated by its
  // own permission.
  permission?: string | string[];
}

interface NavGroup {
  label: string | null;
  items: NavItem[];
}

const NAV_GROUPS: NavGroup[] = [
  {
    label: null,
    items: [
      { label: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
      { label: "Suche", href: "/search", icon: Search },
    ],
  },
  {
    label: "Betrieb",
    items: [
      { label: "Bienenstände", href: "/apiaries", icon: MapPin },
      { label: "Völker", href: "/colonies", icon: Layers },
      { label: "Königinnen", href: "/queens", icon: Crown },
      {
        label: "Überwinterung",
        href: "/winter",
        icon: Snowflake,
        permission: "winter-checks:read",
      },
    ],
  },
  {
    label: "Arbeit",
    items: [
      { label: "Aufgaben", href: "/tasks", icon: ListTodo },
      { label: "Kalender", href: "/calendar", icon: CalendarDays },
    ],
  },
  {
    label: "Ernte & Lager",
    items: [
      { label: "Ernten", href: "/harvests", icon: Scissors },
      { label: "Schleuderungen", href: "/extractions", icon: FlaskConical },
      { label: "Honigchargen", href: "/honey-batches", icon: Droplet },
      { label: "Abfüllungen", href: "/bottling", icon: Package },
      {
        label: "Rohstoffe",
        href: "/raw-materials",
        icon: Boxes,
        permission: "raw-material:read",
      },
      {
        label: "Herstellungschargen",
        href: "/production-batches",
        icon: Factory,
        permission: "production-batch:read",
      },
      { label: "Produkte", href: "/products", icon: ShoppingBag },
      { label: "Lager", href: "/storage", icon: Warehouse },
      { label: "Inventar", href: "/equipment", icon: Wrench },
    ],
  },
  {
    label: "Auswertung",
    items: [{ label: "Statistik", href: "/statistics", icon: BarChart3 }],
  },
];

const ADMIN_GROUP: NavGroup = {
  label: "Verwaltung",
  items: [
    {
      label: "Benutzer & Rollen",
      href: "/settings/users-roles",
      icon: Users,
      permission: ["users:read", "roles:read"],
    },
    {
      label: "Automatisierung",
      href: "/settings/automation",
      icon: Zap,
      permission: [
        "webhooks:read",
        "automation:read",
        "task-templates:read",
        "label-templates:read",
        "site-settings:read",
        "calendar:configure",
        "api-keys:manage",
      ],
    },
    {
      label: "Backup",
      href: "/settings/backup",
      icon: Database,
      permission: ["backup:export", "backup:import", "import:execute"],
    },
    {
      label: "Audit-Log",
      href: "/settings/audit-log",
      icon: History,
      permission: "audit:read",
    },
  ],
};

function SidebarLink({ item, pathname }: { item: NavItem; pathname: string }) {
  const Icon = item.icon;
  const isActive = pathname.startsWith(item.href);
  return (
    <Link
      href={item.href}
      aria-current={isActive ? "page" : undefined}
      className={cn(
        "group relative flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-150",
        isActive
          ? "bg-primary text-primary-foreground shadow-[var(--shadow-soft)]"
          : "text-muted-foreground hover:bg-accent/70 hover:text-foreground",
      )}
    >
      <Icon
        className={cn(
          "size-4.5 shrink-0 transition-transform duration-150",
          !isActive && "motion-full:group-hover:scale-110",
        )}
      />
      <span className="truncate">{item.label}</span>
    </Link>
  );
}

function hasNavPermission(
  user: AuthUser,
  permission: NavItem["permission"],
): boolean {
  if (!permission) {
    return true;
  }
  const required = Array.isArray(permission) ? permission : [permission];
  return required.some((key) => user.permissions.includes(key));
}

export function Sidebar({ user }: { user: AuthUser }) {
  const pathname = usePathname();
  const visibleAdminItems = ADMIN_GROUP.items.filter((item) =>
    hasNavPermission(user, item.permission),
  );
  const groups =
    visibleAdminItems.length > 0
      ? [...NAV_GROUPS, { ...ADMIN_GROUP, items: visibleAdminItems }]
      : NAV_GROUPS;

  return (
    <aside className="relative z-10 hidden w-64 shrink-0 flex-col gap-1 overflow-y-auto bg-sidebar px-3 py-5 shadow-[var(--shadow-soft)] sm:flex">
      <Link
        href="/dashboard"
        className="mb-5 flex items-center gap-2.5 px-2 font-heading text-lg font-semibold"
      >
        <span
          className="flex size-8 items-center justify-center rounded-xl shadow-[var(--shadow-soft)]"
          style={{ background: "var(--gradient-honey)" }}
        >
          <Hexagon
            className="size-4.5 fill-white/25 text-white"
            strokeWidth={2.25}
          />
        </span>
        ApiCore
      </Link>
      <nav className="flex flex-1 flex-col gap-5">
        {groups.map((group, index) => (
          <div
            key={group.label ?? `group-${index}`}
            className="flex flex-col gap-0.5"
          >
            {group.label ? (
              <p className="px-3 pb-1 text-xs font-semibold tracking-wide text-muted-foreground/80 uppercase">
                {group.label}
              </p>
            ) : null}
            {group.items.map((item) => (
              <SidebarLink key={item.href} item={item} pathname={pathname} />
            ))}
          </div>
        ))}
      </nav>
      <div className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs text-muted-foreground">
        <FileClock className="size-3.5 shrink-0" />
        <span className="truncate">v1.x</span>
      </div>
    </aside>
  );
}