"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";

const MENU_LINKS = [
  { href: "/intern", label: "Wochenplan" },
  { href: "/intern/gerichte", label: "Gerichte" },
  { href: "/intern/kennzeichnung", label: "Allergene & Zusatzstoffe" },
];

const ADMIN_LINKS = [
  { href: "/admin", label: "Benutzer" },
  { href: "/admin/design", label: "Design" },
];

export default function AppHeader({
  role,
  displayName,
}: {
  role: Role;
  displayName: string;
}) {
  const pathname = usePathname();

  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">Kantine</span>

        <nav
          className="flex flex-wrap items-center gap-x-1 gap-y-1"
          aria-label="Speiseplan"
        >
          <span className="mr-1 text-xs uppercase tracking-wider text-white/50">
            Speiseplan
          </span>
          {MENU_LINKS.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="Verwaltung"
          >
            <span className="mr-1 text-xs uppercase tracking-wider text-white/50">
              Verwaltung
            </span>
            {ADMIN_LINKS.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"
        >
          Speisekarte ansehen
        </Link>

        <div className="ml-auto flex items-center gap-3">
          <Link
            href="/konto"
            title="Mein Konto"
            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">
              Abmelden
            </button>
          </form>
        </div>
      </div>
    </header>
  );
}