Header Switcher

"use client";

import { useEffect, useId, useRef, useState } from "react";
import { Bell, Check, ChevronsUpDown, HelpCircle } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderSwitcherOption {
  id: string;
  label: string;
  hint?: string;
}

export interface HeaderSwitcherProps {
  orgs?: HeaderSwitcherOption[];
  projects?: HeaderSwitcherOption[];
  environments?: HeaderSwitcherOption[];
  defaultOrg?: string;
  defaultProject?: string;
  defaultEnvironment?: string;
  onChange?: (value: { org: string; project: string; environment: string }) => void;
  user?: { initials: string; name: string };
  notifications?: number;
  className?: string;
}

function Switcher({
  label,
  options,
  value,
  onChange,
  badge,
}: {
  label: string;
  options: HeaderSwitcherOption[];
  value: string;
  onChange: (id: string) => void;
  badge?: boolean;
}) {
  const [open, setOpen] = useState(false);
  const id = useId();
  const root = useRef<HTMLDivElement>(null);
  const current = options.find((o) => o.id === value) ?? options[0];

  useEffect(() => {
    if (!open) return;
    const onDown = (e: MouseEvent) => root.current && !root.current.contains(e.target as Node) && setOpen(false);
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    document.addEventListener("mousedown", onDown);
    window.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDown);
      window.removeEventListener("keydown", onKey);
    };
  }, [open]);

  return (
    <div ref={root} className="relative">
      <button
        type="button"
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-controls={id}
        aria-label={`${label}: ${current?.label}`}
        onClick={() => setOpen((o) => !o)}
        className="da-focus da-transition flex h-8 items-center gap-1.5 rounded-da-md px-2 text-[13px] font-medium hover:bg-da-muted"
      >
        {badge ? (
          <span
            className={cn(
              "rounded-da-sm px-1.5 py-0.5 font-da-mono text-[11px]",
              current?.id === "production" ? "bg-da-danger/10 text-da-danger" : "bg-da-accent text-da-accent-fg",
            )}
          >
            {current?.label}
          </span>
        ) : (
          current?.label
        )}
        <ChevronsUpDown aria-hidden className="size-3.5 text-da-muted-fg" />
      </button>
      {open && (
        <ul
          id={id}
          role="listbox"
          aria-label={label}
          className="da-stroke absolute top-full left-0 z-30 mt-1 w-56 rounded-da-lg bg-da-surface p-1 text-da-surface-fg shadow-da-lg transition-[opacity,translate] duration-(--da-duration) starting:-translate-y-1 starting:opacity-0"
        >
          {options.map((o) => (
            <li key={o.id} role="option" aria-selected={o.id === value}>
              <button
                type="button"
                onClick={() => {
                  onChange(o.id);
                  setOpen(false);
                }}
                className="da-focus flex w-full items-center gap-2 rounded-da-sm px-2 py-1.5 text-left text-[13px] hover:bg-da-muted"
              >
                <span className="min-w-0 flex-1">
                  <span className="block truncate">{o.label}</span>
                  {o.hint && <span className="block text-[11px] text-da-muted-fg">{o.hint}</span>}
                </span>
                {o.id === value && <Check aria-hidden className="size-3.5 text-da-accent-fg" />}
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

const Slash = () => (
  <svg aria-hidden viewBox="0 0 24 24" className="size-4 shrink-0 text-da-border-strong" fill="none">
    <path d="M16 3 8 21" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
  </svg>
);

/** Vercel-style global top bar: org / project / environment switchers separated by slashes, help, notifications and avatar. */
export function HeaderSwitcher({
  orgs = [
    { id: "acme", label: "Acme Inc.", hint: "Business plan" },
    { id: "side", label: "Maya’s sandbox", hint: "Free plan" },
  ],
  projects = [
    { id: "payments", label: "payments", hint: "12 services" },
    { id: "platform", label: "platform", hint: "8 services" },
    { id: "growth", label: "growth", hint: "5 services" },
  ],
  environments = [
    { id: "production", label: "production" },
    { id: "staging", label: "staging" },
    { id: "preview", label: "preview" },
  ],
  defaultOrg = "acme",
  defaultProject = "payments",
  defaultEnvironment = "production",
  onChange,
  user = { initials: "MC", name: "Maya Chen" },
  notifications = 3,
  className,
}: HeaderSwitcherProps) {
  const [value, setValue] = useState({ org: defaultOrg, project: defaultProject, environment: defaultEnvironment });
  const update = (patch: Partial<typeof value>) => {
    const next = { ...value, ...patch };
    setValue(next);
    onChange?.(next);
  };

  return (
    <header className={cn("flex h-12 items-center gap-1 border-b border-da-border bg-da-bg px-3 text-da-fg", className)}>
      <svg aria-hidden viewBox="0 0 24 24" className="mr-1 size-5 shrink-0 text-da-fg" fill="none">
        <path d="M3 12h4l2.5-6 5 12 2.5-6H21" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <Slash />
      <nav aria-label="Context" className="flex min-w-0 items-center gap-1">
        <div className="hidden sm:block">
          <Switcher label="Organization" options={orgs} value={value.org} onChange={(org) => update({ org })} />
        </div>
        <span className="hidden sm:block">
          <Slash />
        </span>
        <Switcher label="Project" options={projects} value={value.project} onChange={(project) => update({ project })} />
        <Slash />
        <Switcher label="Environment" options={environments} value={value.environment} onChange={(environment) => update({ environment })} badge />
      </nav>
      <div className="ml-auto flex items-center gap-1">
        <a href="#help" aria-label="Help" className="da-focus grid size-8 place-items-center rounded-da-md text-da-muted-fg hover:bg-da-muted hover:text-da-fg">
          <HelpCircle aria-hidden className="size-4" />
        </a>
        <a href="#notifications" className="da-focus relative grid size-8 place-items-center rounded-da-md text-da-muted-fg hover:bg-da-muted hover:text-da-fg">
          <Bell aria-hidden className="size-4" />
          <span className="sr-only">Notifications ({notifications} unread)</span>
          {notifications > 0 && <span aria-hidden className="absolute top-1.5 right-1.5 size-2 rounded-full bg-da-primary ring-2 ring-da-bg" />}
        </a>
        <span
          aria-label={user.name}
          role="img"
          className="ml-1 grid size-7 place-items-center rounded-full bg-da-accent text-[11px] font-medium text-da-accent-fg"
        >
          {user.initials}
        </span>
      </div>
    </header>
  );
}

export default HeaderSwitcher;