App Header

import type { ReactNode } from "react";
import { Bell, ChevronRight, Plus, Search } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AppHeaderCrumb {
  label: string;
  href?: string;
}

export interface AppHeaderTab {
  label: string;
  href: string;
  count?: number;
}

export interface AppHeaderProps {
  breadcrumbs?: AppHeaderCrumb[];
  title?: string;
  description?: string;
  tabs?: AppHeaderTab[];
  activeTab?: string;
  /** Primary action on the right of the title. */
  action?: { label: string; href: string };
  notifications?: number;
  user?: { name: string };
  searchPlaceholder?: string;
  /** Extra content on the right of the top bar (before notifications). */
  extra?: ReactNode;
  className?: string;
}

export function AppHeader({
  breadcrumbs = [{ label: "Acme Inc.", href: "#" }, { label: "acme-web", href: "#" }, { label: "Releases" }],
  title = "Releases",
  description = "142 releases · last published 2 days ago",
  tabs = [
    { label: "All", href: "#all", count: 142 },
    { label: "Drafts", href: "#drafts", count: 3 },
    { label: "Scheduled", href: "#scheduled", count: 1 },
    { label: "Archived", href: "#archived" },
  ],
  activeTab = "#all",
  action = { label: "New release", href: "#new" },
  notifications = 4,
  user = { name: "Maya Okafor" },
  searchPlaceholder = "Search releases, PRs, people…",
  extra,
  className,
}: AppHeaderProps) {
  const initials = user.name
    .split(" ")
    .map((p) => p[0])
    .join("")
    .slice(0, 2);

  return (
    <header className={cn("da-stroke-b bg-da-bg text-da-fg", className)}>
      <div className="da-stroke-b flex h-16 items-center gap-4 bg-da-surface-2 px-4 sm:px-6">
        <nav aria-label="Breadcrumb" className="min-w-0 flex-1">
          <ol className="flex items-center gap-1.5 text-sm font-bold">
            {breadcrumbs.map((c, i) => {
              const last = i === breadcrumbs.length - 1;
              return (
                <li key={`${c.label}-${i}`} className={cn("flex min-w-0 items-center gap-1.5", !last && "hidden sm:flex")}>
                  {c.href && !last ? (
                    <a href={c.href} className="da-focus truncate underline-offset-4 hover:underline">
                      {c.label}
                    </a>
                  ) : (
                    <span aria-current={last ? "page" : undefined} className="truncate">
                      {c.label}
                    </span>
                  )}
                  {!last && <ChevronRight aria-hidden className="size-4 shrink-0" strokeWidth={3} />}
                </li>
              );
            })}
          </ol>
        </nav>

        <form role="search" className="hidden md:block" action="#">
          <label className="da-stroke flex h-10 w-72 items-center gap-2 bg-da-input px-3 focus-within:outline-[length:var(--da-ring-width)] focus-within:outline-offset-2 focus-within:outline-da-ring focus-within:outline-solid">
            <Search aria-hidden className="size-4 shrink-0" strokeWidth={2.5} />
            <span className="sr-only">Search</span>
            <input type="search" name="q" placeholder={searchPlaceholder} className="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-da-muted-fg" />
            <kbd className="da-stroke bg-da-muted px-1 font-da-mono text-[10px] font-bold">⌘K</kbd>
          </label>
        </form>

        {extra}

        <a
          href="#notifications"
          className="da-focus da-stroke relative grid size-10 shrink-0 place-items-center bg-da-surface text-da-surface-fg shadow-da-sm"
          aria-label={`Notifications (${notifications} unread)`}
        >
          <Bell aria-hidden className="size-5" strokeWidth={2.25} />
          {notifications > 0 && (
            <span aria-hidden className="da-stroke absolute -top-2 -right-2 grid min-w-5 place-items-center bg-da-danger px-1 font-da-mono text-[10px] font-bold text-da-danger-fg">
              {notifications}
            </span>
          )}
        </a>
        <span aria-label={user.name} role="img" className="da-stroke grid size-10 shrink-0 place-items-center rounded-full bg-da-accent font-da-mono text-xs font-bold text-da-accent-fg">
          {initials}
        </span>
      </div>

      <div className="flex flex-col gap-4 px-4 pt-6 sm:flex-row sm:items-end sm:justify-between sm:px-6">
        <div>
          <h1 className="font-da-display text-3xl tracking-da-display uppercase sm:text-4xl">{title}</h1>
          {description && <p className="mt-1 font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase">{description}</p>}
        </div>
        <a
          href={action.href}
          className="da-focus da-transition da-stroke inline-flex h-11 items-center gap-2 self-start bg-da-primary px-4 font-bold text-da-primary-fg shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none sm:self-auto"
        >
          <Plus aria-hidden className="size-5" strokeWidth={3} />
          {action.label}
        </a>
      </div>

      <nav aria-label="Sections" className="mt-6 overflow-x-auto px-4 sm:px-6">
        <ul className="flex gap-1">
          {tabs.map((t) => {
            const active = t.href === activeTab;
            return (
              <li key={t.href}>
                <a
                  href={t.href}
                  aria-current={active ? "page" : undefined}
                  className={cn(
                    "da-focus -mb-[var(--da-border-width)] flex items-center gap-2 border-[length:var(--da-border-width)] border-b-0 px-4 py-2.5 text-sm font-bold whitespace-nowrap",
                    active ? "border-da-border bg-da-surface text-da-surface-fg" : "border-transparent text-da-muted-fg hover:text-da-fg",
                  )}
                >
                  {t.label}
                  {t.count !== undefined && <span className="font-da-mono text-[11px]">{t.count}</span>}
                </a>
              </li>
            );
          })}
        </ul>
      </nav>
    </header>
  );
}

export default AppHeader;