App Header

"use client";

import { useEffect, useMemo, useState, type ReactNode } from "react";
import { Dialog } from "radix-ui";
import { Bell, ChevronRight, CornerDownLeft, ListFilter, Search, SlidersHorizontal } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AppHeaderCommand {
  id: string;
  label: string;
  group: string;
  hint?: string;
  onSelect?: () => void;
}

export interface AppHeaderProps {
  breadcrumbs?: { label: string; href?: string }[];
  views?: { label: string; href: string }[];
  activeView?: string;
  commands?: AppHeaderCommand[];
  notifications?: number;
  actions?: ReactNode;
  /** DA scope for the portalled command palette. */
  da?: string;
  className?: string;
}

const DEFAULT_COMMANDS: AppHeaderCommand[] = [
  { id: "new", label: "Declare incident", group: "Actions", hint: "C" },
  { id: "page", label: "Page on-call engineer", group: "Actions", hint: "P" },
  { id: "status", label: "Update status page", group: "Actions" },
  { id: "inc-2481", label: "INC-2481 · Elevated 5xx on checkout-api", group: "Incidents" },
  { id: "inc-2480", label: "INC-2480 · Webhook delivery delays", group: "Incidents" },
  { id: "go-oncall", label: "Go to On-call", group: "Navigation", hint: "G O" },
  { id: "go-settings", label: "Go to Settings", group: "Navigation", hint: "G S" },
];

export function AppHeader({
  breadcrumbs = [{ label: "Payments", href: "#team" }, { label: "Incidents" }],
  views = [
    { label: "Active", href: "#active" },
    { label: "Resolved", href: "#resolved" },
    { label: "All", href: "#all" },
  ],
  activeView = "#active",
  commands = DEFAULT_COMMANDS,
  notifications = 3,
  actions,
  da = "minimal",
  className,
}: AppHeaderProps) {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        setOpen((o) => !o);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const results = useMemo(() => {
    const q = query.trim().toLowerCase();
    return q ? commands.filter((c) => c.label.toLowerCase().includes(q)) : commands;
  }, [commands, query]);

  const select = (cmd: AppHeaderCommand | undefined) => {
    if (!cmd) return;
    cmd.onSelect?.();
    setOpen(false);
  };

  const onOpenChange = (o: boolean) => {
    setOpen(o);
    if (o) {
      setQuery("");
      setIndex(0);
    }
  };

  return (
    <header className={cn("border-b border-da-border bg-da-bg text-da-fg", className)}>
      <div className="flex h-12 items-center gap-3 px-4">
        <nav aria-label="Breadcrumb" className="min-w-0">
          <ol className="flex items-center gap-1 text-[13px]">
            {breadcrumbs.map((c, i) => {
              const last = i === breadcrumbs.length - 1;
              return (
                <li key={`${c.label}-${i}`} className="flex min-w-0 items-center gap-1">
                  {c.href && !last ? (
                    <a href={c.href} className="da-focus da-transition truncate rounded-da-sm px-1 text-da-muted-fg hover:text-da-fg">
                      {c.label}
                    </a>
                  ) : (
                    <span aria-current={last ? "page" : undefined} className="truncate px-1 font-medium">
                      {c.label}
                    </span>
                  )}
                  {!last && <ChevronRight aria-hidden className="size-3.5 shrink-0 text-da-muted-fg" />}
                </li>
              );
            })}
          </ol>
        </nav>

        <div className="ml-auto flex items-center gap-1.5">
          <Dialog.Root open={open} onOpenChange={onOpenChange}>
            <Dialog.Trigger className="da-focus da-transition da-stroke hidden h-7 w-56 items-center gap-2 rounded-da-md whitespace-nowrap bg-da-surface px-2 text-[13px] text-da-muted-fg hover:[--da-border:var(--da-border-strong)] sm:flex">
              <Search aria-hidden className="size-3.5" />
              <span className="truncate">Search or jump to…</span>
              <kbd className="ml-auto font-da-mono text-[10px]">⌘K</kbd>
            </Dialog.Trigger>
            <Dialog.Trigger aria-label="Search" className="da-focus grid size-7 place-items-center rounded-da-sm text-da-muted-fg hover:bg-da-fg/5 sm:hidden">
              <Search aria-hidden className="size-4" />
            </Dialog.Trigger>
            <Dialog.Portal>
              <Dialog.Overlay data-da={da} className="fixed inset-0 z-50 bg-da-overlay transition-opacity duration-(--da-duration) starting:opacity-0" />
              <Dialog.Content
                data-da={da}
                className="da-stroke fixed top-[18vh] left-1/2 z-50 w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-lg transition-[opacity,scale] duration-(--da-duration) ease-da starting:scale-[0.98] starting:opacity-0 motion-reduce:transition-none"
              >
                <Dialog.Title className="sr-only">Command palette</Dialog.Title>
                <Dialog.Description className="sr-only">Type to filter commands, use arrow keys to move and Enter to run.</Dialog.Description>
                <div className="flex items-center gap-2 border-b border-da-border px-4">
                  <Search aria-hidden className="size-4 text-da-muted-fg" />
                  <input
                    autoFocus
                    role="combobox"
                    aria-expanded
                    aria-controls="app-header-commands"
                    aria-activedescendant={results[index] ? `cmd-${results[index].id}` : undefined}
                    value={query}
                    onChange={(e) => {
                      setQuery(e.target.value);
                      setIndex(0);
                    }}
                    onKeyDown={(e) => {
                      if (e.key === "ArrowDown") {
                        e.preventDefault();
                        setIndex((i) => Math.min(i + 1, results.length - 1));
                      } else if (e.key === "ArrowUp") {
                        e.preventDefault();
                        setIndex((i) => Math.max(i - 1, 0));
                      } else if (e.key === "Enter") {
                        e.preventDefault();
                        select(results[index]);
                      }
                    }}
                    placeholder="Type a command or search…"
                    className="h-12 flex-1 bg-transparent text-sm outline-none placeholder:text-da-muted-fg"
                  />
                </div>
                <ul id="app-header-commands" role="listbox" aria-label="Commands" className="max-h-80 overflow-y-auto p-1.5">
                  {results.length === 0 && <li className="px-3 py-8 text-center text-sm text-da-muted-fg">No results for “{query}”</li>}
                  {results.map((c, i) => {
                    const showGroup = i === 0 || results[i - 1]?.group !== c.group;
                    return (
                      <li key={c.id} role="presentation">
                        {showGroup && <p className="px-2.5 pt-2 pb-1 text-[11px] font-medium text-da-muted-fg">{c.group}</p>}
                        <div
                          id={`cmd-${c.id}`}
                          role="option"
                          aria-selected={i === index}
                          onMouseMove={() => setIndex(i)}
                          onClick={() => select(c)}
                          className={cn("flex h-9 cursor-pointer items-center gap-2 rounded-da-sm px-2.5 text-[13px]", i === index && "bg-da-fg/[0.06]")}
                        >
                          <span className="flex-1 truncate">{c.label}</span>
                          {c.hint && <kbd className="font-da-mono text-[10px] text-da-muted-fg">{c.hint}</kbd>}
                          {i === index && <CornerDownLeft aria-hidden className="size-3.5 text-da-muted-fg" />}
                        </div>
                      </li>
                    );
                  })}
                </ul>
              </Dialog.Content>
            </Dialog.Portal>
          </Dialog.Root>

          {actions}
          <a href="#notifications" aria-label={`Notifications, ${notifications} unread`} className="da-focus da-transition relative grid size-7 place-items-center rounded-da-sm text-da-muted-fg hover:bg-da-fg/5 hover:text-da-fg">
            <Bell aria-hidden className="size-4" />
            {notifications > 0 && <span aria-hidden className="absolute top-1 right-1 size-1.5 rounded-full bg-da-primary ring-2 ring-da-bg" />}
          </a>
        </div>
      </div>

      <div className="flex h-11 items-center gap-2 border-t border-da-border px-4">
        <nav aria-label="Views">
          <ul className="flex items-center gap-1">
            {views.map((v) => {
              const active = v.href === activeView;
              return (
                <li key={v.href}>
                  <a
                    href={v.href}
                    aria-current={active ? "page" : undefined}
                    className={cn(
                      "da-focus da-transition flex h-7 items-center rounded-da-sm px-2.5 text-[13px]",
                      active ? "da-stroke bg-da-surface font-medium text-da-fg shadow-da-sm" : "text-da-muted-fg hover:text-da-fg",
                    )}
                  >
                    {v.label}
                  </a>
                </li>
              );
            })}
          </ul>
        </nav>
        <div className="ml-auto flex items-center gap-1">
          <button type="button" className="da-focus da-transition flex h-7 items-center gap-1.5 rounded-da-sm px-2 text-[13px] text-da-muted-fg hover:bg-da-fg/5 hover:text-da-fg">
            <ListFilter aria-hidden className="size-3.5" />
            Filter
          </button>
          <button type="button" className="da-focus da-transition flex h-7 items-center gap-1.5 rounded-da-sm px-2 text-[13px] text-da-muted-fg hover:bg-da-fg/5 hover:text-da-fg">
            <SlidersHorizontal aria-hidden className="size-3.5" />
            Display
          </button>
        </div>
      </div>
    </header>
  );
}

export default AppHeader;