"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 type { Role } from "@/lib/types";
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 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={linkClass(l.href)}>
              {l.label}
            </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>
  );
}