Speisekarte/components/AppHeader.tsx

"use client";

// Gemeinsamer Kopfbereich für alle internen Seiten. Statt zweier
// getrennter Bereiche (Kantine/Verwaltung) gibt es eine Navigation:
// Admins sehen zusätzlich die Verwaltungs-Links, der aktive Punkt
// wird hervorgehoben.

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import type { Role } from "@/lib/types";
import { formatMessage } from "@/lib/i18n/shared";
import { useDict } from "@/components/i18n/LocaleProvider";
import LanguageSwitcher from "@/components/i18n/LanguageSwitcher";

export default function AppHeader({
  role,
  displayName,
}: {
  role: Role;
  displayName: string;
}) {
  const pathname = usePathname();
  const dict = useDict();
  const [suggestionCount, setSuggestionCount] = useState(0);

  useEffect(() => {
    fetch("/api/dish-suggestions")
      .then((res) => (res.ok ? res.json() : []))
      .then((data) => setSuggestionCount(Array.isArray(data) ? data.length : 0))
      .catch(() => {});
  }, [pathname]);

  const menuLinks = [
    { href: "/intern", label: dict.header.weekPlan },
    { href: "/intern/essenszeiten", label: dict.header.sections },
    { href: "/intern/gerichte", label: dict.header.dishes },
    { href: "/intern/kennzeichnung", label: dict.header.labels },
    { href: "/intern/vorschlaege", label: dict.header.suggestions },
  ];
  const adminLinks = [
    { href: "/admin", label: dict.header.users },
    { href: "/admin/design", label: dict.header.design },
  ];

  const linkClass = (href: string) =>
    `rounded px-2 py-0.5 transition-colors hover:bg-white/10 ${
      pathname === href ? "bg-white/20 font-semibold" : "text-white/90"
    }`;

  return (
    <header className="bg-[var(--c-primary-dark)] text-white">
      <div className="max-w-[1600px] mx-auto w-full px-4 py-3 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
        <span className="font-bold text-base">{dict.header.canteen}</span>

        <nav
          className="flex flex-wrap items-center gap-x-1 gap-y-1"
          aria-label={dict.header.menuGroup}
        >
          <span className="mr-1 text-xs uppercase tracking-wider text-white/50">
            {dict.header.menuGroup}
          </span>
          {menuLinks.map((l) => (
            <Link key={l.href} href={l.href} className={`relative ${linkClass(l.href)}`}>
              {l.label}
              {l.href === "/intern/vorschlaege" && suggestionCount > 0 && (
                <span
                  className="absolute -top-1.5 -right-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--c-del)] px-1 text-[10px] font-bold leading-none text-white"
                  aria-label={formatMessage(dict.header.openSuggestions, {
                    count: suggestionCount,
                  })}
                >
                  {suggestionCount}
                </span>
              )}
            </Link>
          ))}
        </nav>

        {role === "admin" && (
          <nav
            className="flex flex-wrap items-center gap-x-1 gap-y-1"
            aria-label={dict.header.adminGroup}
          >
            <span className="mr-1 text-xs uppercase tracking-wider text-white/50">
              {dict.header.adminGroup}
            </span>
            {adminLinks.map((l) => (
              <Link key={l.href} href={l.href} className={linkClass(l.href)}>
                {l.label}
              </Link>
            ))}
          </nav>
        )}

        <Link
          href="/"
          className="rounded px-2 py-0.5 text-white/70 hover:bg-white/10"
        >
          {dict.header.viewMenu}
        </Link>

        <div className="ml-auto flex items-center gap-3">
          <LanguageSwitcher />
          <Link
            href="/konto"
            title={dict.header.myAccount}
            className={`rounded px-2 py-0.5 hover:bg-white/10 ${
              pathname === "/konto"
                ? "bg-white/20 font-semibold"
                : "text-white/80"
            }`}
          >
            {displayName}
          </Link>
          <form action="/logout" method="post">
            <button type="submit" className="btn btn-del">
              {dict.common.logout}
            </button>
          </form>
        </div>
      </div>
    </header>
  );
}