"use client";

import { LogOut, Menu } from "lucide-react";
import { usePathname } from "next/navigation";
import { logout } from "@/actions/auth";
import type { OpenNote } from "@/lib/notes";
import { NewHireButton } from "./NewHireButton";
import { NotesBell } from "./NotesBell";

const TITLES: Record<string, string> = {
  "/": "Übersicht",
  "/employees": "Mitarbeiter:innen",
  "/orgchart": "Organigramm",
  "/positions": "Positionen",
  "/reports": "Berichte",
  "/audit": "Audit-Log",
};

function titleFor(pathname: string): string {
  if (TITLES[pathname]) return TITLES[pathname];
  const match = Object.keys(TITLES).find((key) => key !== "/" && pathname.startsWith(key));
  return match ? TITLES[match] : "Alpenwerk HR";
}

type TopbarProps = {
  userLabel: string;
  openNotes: OpenNote[];
  kollegen: { id: string; name: string; sichtbar: boolean }[];
  onOpenNav: () => void;
};

export function Topbar({ userLabel, openNotes, kollegen, onOpenNav }: TopbarProps) {
  const pathname = usePathname();

  return (
    // Sticky, with the notch inset added to its top padding: on an iPhone in
    // landscape the bar would otherwise sit under the rounded corner.
    //
    // Rosa und nicht Weiss: zusammen mit dem Kopf der Seitenleiste bildet
    // dieser Streifen das durchgehende Markenband ueber der Anwendung. Auf
    // Weiss stand das Logo daneben als ausgeschnittenes Rechteck, weil es
    // sein rosa Feld mitbringt; in einem rosa Band geht es darin auf.
    //
    // Geschrieben wird darauf in brand-700 und nicht in ink: Schwarz auf Rosa
    // traegt zwar (7.47:1), sieht aber aus wie Text, der aus Versehen auf der
    // Marke gelandet ist. Dunkelblau auf Rosa ist dieselbe Paarung, aus der
    // der Schriftzug selbst besteht, und kommt auf 6.60:1.
    //
    // Gedaempftes gibt es hier nicht mehr: ink-muted liegt auf Rosa bei
    // 2.33:1. Gestuft wird ueber Groesse und Gewicht.
    <header className="sticky top-0 z-20 flex h-14 shrink-0 items-center justify-between border-b border-accent-600/40 bg-accent-500 px-3 pt-[env(safe-area-inset-top)] sm:px-6">
      <div className="flex min-w-0 items-center gap-2">
        <button
          type="button"
          onClick={onOpenNav}
          aria-label="Navigation öffnen"
          className="-ml-1 rounded p-2 text-brand-700 hover:bg-accent-100 lg:hidden"
        >
          <Menu className="h-5 w-5" />
        </button>
        <h1 className="truncate text-base font-bold text-brand-700">{titleFor(pathname)}</h1>
      </div>
      <div className="flex shrink-0 items-center gap-1 sm:gap-4">
        <NotesBell notes={openNotes} kollegen={kollegen} />
        <NewHireButton />
        <div className="flex items-center gap-2 text-sm sm:border-l sm:border-brand-700/25 sm:pl-4">
          {/* The name is the first thing worth dropping on a narrow screen —
              the account is still reachable via the sign-out control. */}
          <span className="hidden font-semibold text-brand-700 md:inline">{userLabel}</span>
          <form action={logout}>
            <button type="submit" aria-label="Abmelden" className="rounded p-2 text-brand-700 hover:bg-accent-100">
              <LogOut className="h-4 w-4" />
            </button>
          </form>
        </div>
      </div>
    </header>
  );
}