"use client";

import { LogOut } from "lucide-react";
import { usePathname } from "next/navigation";
import { logout } from "@/actions/auth";
import { NewHireButton } from "./NewHireButton";

const TITLES: Record<string, string> = {
  "/": "Übersicht",
  "/employees": "Mitarbeiter:innen",
  "/orgchart": "Organigramm",
  "/positions": "Positionen & Bereiche",
  "/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;
  role?: string;
  canEdit: boolean;
};

export function Topbar({ userLabel, role, canEdit }: TopbarProps) {
  const pathname = usePathname();

  return (
    <header className="flex h-14 items-center justify-between border-b border-border bg-white px-6">
      <h1 className="text-base font-bold text-ink">{titleFor(pathname)}</h1>
      <div className="flex items-center gap-4">
        {canEdit && <NewHireButton />}
        <div className="flex items-center gap-2 border-l border-border pl-4 text-sm">
          <span className="font-semibold text-ink">{userLabel}</span>
          {role && <span className="text-xs text-ink-muted">({role === "hr_admin" ? "HR-Admin" : "Manager"})</span>}
          <form action={logout}>
            <button type="submit" aria-label="Abmelden" className="ml-2 rounded p-1.5 text-ink-muted hover:bg-surface">
              <LogOut className="h-4 w-4" />
            </button>
          </form>
        </div>
      </div>
    </header>
  );
}