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

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  BarChart3,
  CalendarDays,
  Crown,
  Droplet,
  FileClock,
  Hexagon,
  History,
  LayoutDashboard,
  Layers,
  ListTodo,
  type LucideIcon,
  MapPin,
  Package,
  Search,
  ShoppingBag,
  Upload,
  Users,
  Warehouse,
  Webhook,
  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;
}

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: "Arbeit",
    items: [
      { label: "Aufgaben", href: "/tasks", icon: ListTodo },
      { label: "Kalender", href: "/calendar", icon: CalendarDays },
    ],
  },
  {
    label: "Ernte & Lager",
    items: [
      { label: "Honigchargen", href: "/honey-batches", icon: Droplet },
      { label: "Abfüllungen", href: "/bottling/new", icon: Package },
      { 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", href: "/settings/users", icon: Users },
    { label: "Audit-Log", href: "/settings/audit-log", icon: History },
    { label: "Webhooks", href: "/settings/webhooks", icon: Webhook },
    { label: "Automatisierungen", href: "/settings/automation-rules", icon: Zap },
    { label: "Import", href: "/settings/import", icon: Upload },
  ],
};

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 && "group-hover:scale-110",
        )}
      />
      <span className="truncate">{item.label}</span>
    </Link>
  );
}

export function Sidebar({ user }: { user: AuthUser }) {
  const pathname = usePathname();
  const groups = user.role === "ADMIN" ? [...NAV_GROUPS, ADMIN_GROUP] : 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>
  );
}