Header Global

"use client";

import { DropdownMenu } from "radix-ui";
import { Bell, ChevronDown, HelpCircle, LogOut, Search, Settings, User } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderGlobalProps {
  brand?: string;
  brandHref?: string;
  entity?: string;
  entities?: string[];
  onEntityChange?: (entity: string) => void;
  notifications?: number;
  user?: { name: string; email: string; initials: string };
  da?: string;
  className?: string;
}

function LedgerlyMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 28 28" className={cn("size-7 shrink-0", className)}>
      <rect width="28" height="28" rx="7" fill="var(--da-primary)" />
      <path d="M8 8v12h12" stroke="var(--da-primary-fg)" strokeWidth="2.6" fill="none" strokeLinecap="round" />
      <path d="M13 15h7M13 11h7" stroke="var(--da-primary-fg)" strokeWidth="2.2" strokeLinecap="round" opacity=".7" />
    </svg>
  );
}

/** Global top bar: logo, entity switcher (Radix dropdown), centered search with ⌘K hint, help + notifications (count) icon buttons and a user avatar menu (profile, settings, sign out). */
export function HeaderGlobal({
  brand = "Ledgerly",
  brandHref = "/",
  entity = "Ledgerly Inc. (US)",
  entities = ["Ledgerly Inc. (US)", "Ledgerly GmbH (DE)", "Ledgerly Ltd (UK)"],
  onEntityChange,
  notifications = 3,
  user = { name: "Priya Raman", email: "priya@northwind.com", initials: "PR" },
  da = "neo-corporate",
  className,
}: HeaderGlobalProps) {
  const menu =
    "da-stroke z-50 min-w-52 rounded-da-md bg-da-surface p-1 text-da-surface-fg shadow-da-lg transition-opacity duration-(--da-duration) starting:opacity-0";
  const item =
    "flex cursor-default items-center gap-2 rounded-da-sm px-2 py-1.5 text-sm outline-none data-highlighted:bg-da-muted [&_svg]:size-4 [&_svg]:text-da-muted-fg";
  const iconBtn = "da-focus relative grid size-9 place-items-center rounded-da-md text-da-muted-fg hover:bg-da-muted hover:text-da-fg";
  return (
    <header className={cn("sticky top-0 z-30 flex h-14 items-center gap-3 border-b border-da-border bg-da-surface px-4 text-da-surface-fg", className)}>
      <a href={brandHref} aria-label={`${brand} home`} className="da-focus rounded-da-sm">
        <LedgerlyMark />
      </a>
      <DropdownMenu.Root modal={false}>
        <DropdownMenu.Trigger className="da-focus inline-flex h-9 max-w-44 items-center gap-1.5 rounded-da-md px-2 text-sm font-semibold hover:bg-da-muted sm:max-w-none">
          <span className="truncate">{entity}</span>
          <ChevronDown aria-hidden className="size-4 shrink-0 text-da-muted-fg" />
        </DropdownMenu.Trigger>
        <DropdownMenu.Portal>
          <DropdownMenu.Content data-da={da} sideOffset={6} align="start" className={menu}>
            <DropdownMenu.Label className="px-2 py-1.5 text-[11px] font-semibold tracking-da-label text-da-muted-fg uppercase">
              Switch entity
            </DropdownMenu.Label>
            <DropdownMenu.RadioGroup value={entity} onValueChange={onEntityChange}>
              {entities.map((e) => (
                <DropdownMenu.RadioItem key={e} value={e} className={cn(item, "data-[state=checked]:font-semibold data-[state=checked]:text-da-primary")}>
                  {e}
                </DropdownMenu.RadioItem>
              ))}
            </DropdownMenu.RadioGroup>
          </DropdownMenu.Content>
        </DropdownMenu.Portal>
      </DropdownMenu.Root>
      <label className="da-stroke mx-auto hidden h-9 w-full max-w-md items-center gap-2 rounded-da-md bg-da-surface-2 px-3 text-sm focus-within:border-da-primary md:flex">
        <Search aria-hidden className="size-4 text-da-muted-fg" />
        <span className="sr-only">Search</span>
        <input placeholder="Search invoices, customers, payments…" className="min-w-0 flex-1 bg-transparent outline-none placeholder:text-da-muted-fg" />
        <kbd className="rounded-da-sm border border-da-border bg-da-surface px-1.5 font-da-mono text-[11px] text-da-muted-fg">⌘K</kbd>
      </label>
      <div className="ml-auto flex items-center gap-1 md:ml-0">
        <button type="button" aria-label="Search" className={cn(iconBtn, "md:hidden")}>
          <Search aria-hidden className="size-[18px]" />
        </button>
        <button type="button" aria-label="Help" className={cn(iconBtn, "max-sm:hidden")}>
          <HelpCircle aria-hidden className="size-[18px]" />
        </button>
        <button type="button" aria-label={`Notifications (${notifications} unread)`} className={iconBtn}>
          <Bell aria-hidden className="size-[18px]" />
          {notifications > 0 && <span aria-hidden className="absolute top-1.5 right-1.5 size-2 rounded-full bg-da-danger ring-2 ring-da-surface" />}
        </button>
        <DropdownMenu.Root modal={false}>
          <DropdownMenu.Trigger
            aria-label="Account menu"
            className="da-focus ml-1 grid size-8 place-items-center rounded-full bg-da-primary text-xs font-semibold text-da-primary-fg"
          >
            {user.initials}
          </DropdownMenu.Trigger>
          <DropdownMenu.Portal>
            <DropdownMenu.Content data-da={da} sideOffset={6} align="end" className={menu}>
              <div className="px-2 py-2 text-sm">
                <p className="font-semibold">{user.name}</p>
                <p className="text-xs text-da-muted-fg">{user.email}</p>
              </div>
              <DropdownMenu.Separator className="my-1 h-px bg-da-border" />
              <DropdownMenu.Item className={item}>
                <User aria-hidden /> Profile
              </DropdownMenu.Item>
              <DropdownMenu.Item className={item}>
                <Settings aria-hidden /> Workspace settings
              </DropdownMenu.Item>
              <DropdownMenu.Separator className="my-1 h-px bg-da-border" />
              <DropdownMenu.Item className={item}>
                <LogOut aria-hidden /> Sign out
              </DropdownMenu.Item>
            </DropdownMenu.Content>
          </DropdownMenu.Portal>
        </DropdownMenu.Root>
      </div>
    </header>
  );
}

export default HeaderGlobal;