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

"use client";

import { ReactNode, useEffect } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Hexagon, MoreHorizontal } from "lucide-react";
import { useAuth } from "@/lib/auth/auth-context";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { BottomNav } from "./bottom-nav";
import { QuickAddMenu } from "./quick-add-menu";

const NAV_LINK_CLASS =
  "shrink-0 rounded-md px-2.5 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary";

const PRIMARY_LINKS = [
  { label: "Dashboard", href: "/dashboard" },
  { label: "Bienenstände", href: "/apiaries" },
  { label: "Völker", href: "/colonies" },
  { label: "Königinnen", href: "/queens" },
  { label: "Aufgaben", href: "/tasks" },
  { label: "Honigchargen", href: "/honey-batches" },
  { label: "Lager", href: "/storage" },
  { label: "Suche", href: "/search" },
];

const MORE_LINKS = [
  { label: "Produkte", href: "/products" },
  { label: "Abfüllungen", href: "/bottling/new" },
];

const ADMIN_LINKS = [
  { label: "Benutzer", href: "/settings/users" },
  { label: "Audit-Log", href: "/settings/audit-log" },
];

function NavLink({ href, label, pathname }: { href: string; label: string; pathname: string }) {
  return (
    <Link
      href={href}
      aria-current={pathname.startsWith(href) ? "page" : undefined}
      className={NAV_LINK_CLASS}
    >
      {label}
    </Link>
  );
}

export default function AppLayout({ children }: { children: ReactNode }) {
  const router = useRouter();
  const pathname = usePathname();
  const { user, isLoading, logout } = useAuth();

  useEffect(() => {
    if (!isLoading && !user) {
      router.replace("/login");
    }
  }, [isLoading, user, router]);

  if (isLoading || !user) {
    return null;
  }

  return (
    <div className="flex min-h-screen flex-col">
      <header className="flex items-center justify-between gap-3 border-b bg-card px-4 py-2.5">
        <nav className="flex min-w-0 items-center gap-3 max-sm:gap-2">
          <Link href="/dashboard" className="flex shrink-0 items-center gap-1.5 font-heading font-semibold">
            <Hexagon className="size-5 fill-primary/15 text-primary" strokeWidth={2.25} />
            ApiCore
          </Link>
          <div className="hidden min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap sm:flex">
            {PRIMARY_LINKS.map((item) => (
              <NavLink key={item.href} {...item} pathname={pathname} />
            ))}
            <DropdownMenu>
              <DropdownMenuTrigger
                render={<Button variant="ghost" size="sm" className="gap-1 text-muted-foreground" />}
              >
                <MoreHorizontal className="size-4" />
                Mehr
              </DropdownMenuTrigger>
              <DropdownMenuContent align="start">
                {MORE_LINKS.map((item) => (
                  <DropdownMenuItem key={item.href} render={<Link href={item.href} />}>
                    {item.label}
                  </DropdownMenuItem>
                ))}
                {user.role === "ADMIN"
                  ? ADMIN_LINKS.map((item) => (
                      <DropdownMenuItem key={item.href} render={<Link href={item.href} />}>
                        {item.label}
                      </DropdownMenuItem>
                    ))
                  : null}
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </nav>
        <div className="flex shrink-0 items-center gap-3 text-sm">
          <span className="hidden max-w-40 truncate text-muted-foreground md:inline">
            {user.email}
          </span>
          <Button
            variant="outline"
            size="sm"
            onClick={() => {
              void logout().then(() => router.push("/login"));
            }}
          >
            Abmelden
          </Button>
        </div>
      </header>
      <div className="flex-1 pb-16 sm:pb-0">{children}</div>
      <BottomNav />
      <QuickAddMenu />
    </div>
  );
}