App Header

"use client";

import { useId, useState, type ReactNode } from "react";
import { Bell, ChevronDown, Mic, Search } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AppHeaderProps {
  title?: string;
  subtitle?: string;
  tabs?: { label: string; value: string }[];
  defaultTab?: string;
  onTabChange?: (value: string) => void;
  notifications?: number;
  user?: { name: string };
  primaryAction?: { label: string; onClick?: () => void };
  searchPlaceholder?: string;
  extra?: ReactNode;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

export function AppHeader({
  title = "Meetings",
  subtitle = "12 this week · 8h 40m recorded · 31h saved",
  tabs = [
    { label: "Upcoming", value: "upcoming" },
    { label: "Recorded", value: "recorded" },
    { label: "Shared with me", value: "shared" },
  ],
  defaultTab = "upcoming",
  onTabChange,
  notifications = 2,
  user = { name: "Amara Diallo" },
  primaryAction = { label: "Record now" },
  searchPlaceholder = "Search meetings, people, decisions…",
  extra,
  className,
}: AppHeaderProps) {
  const [tab, setTab] = useState(defaultTab);
  const searchId = useId();
  const initials = user.name
    .split(" ")
    .map((w) => w[0])
    .join("");

  return (
    <header className={cn("flex flex-col gap-5 p-3 text-da-fg sm:p-4", className)}>
      <div className={cn("flex h-14 items-center gap-3 rounded-da-pill pr-2 pl-5 shadow-da-md", GLASS)}>
        <form role="search" action="#" className="flex min-w-0 flex-1 items-center gap-2.5">
          <Search aria-hidden className="size-4 shrink-0 text-da-muted-fg" />
          <label htmlFor={searchId} className="sr-only">
            Search
          </label>
          <input
            id={searchId}
            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="hidden rounded-da-sm bg-da-fg/[0.06] px-1.5 py-0.5 font-da-mono text-[11px] text-da-muted-fg sm:block">⌘K</kbd>
        </form>
        {extra}
        <a
          href="#notifications"
          aria-label={`Notifications, ${notifications} unread`}
          className="da-focus da-transition relative grid size-10 shrink-0 place-items-center rounded-full hover:bg-da-fg/[0.06]"
        >
          <Bell aria-hidden className="size-4" />
          {notifications > 0 && (
            <span aria-hidden className="absolute top-1.5 right-1.5 grid size-4 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent text-[9px] font-bold text-da-primary-fg">
              {notifications}
            </span>
          )}
        </a>
        <button type="button" className="da-focus da-transition flex shrink-0 items-center gap-1.5 rounded-da-pill p-1 pr-2 hover:bg-da-fg/[0.06]" aria-label={`Account menu for ${user.name}`}>
          <span aria-hidden className="grid size-8 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent text-xs font-semibold text-white">
            {initials}
          </span>
          <ChevronDown aria-hidden className="size-3.5 text-da-muted-fg" />
        </button>
      </div>

      <div className="flex flex-col gap-4 px-2 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <h1 className="font-da-display text-3xl font-semibold tracking-da-display sm:text-4xl">{title}</h1>
          <p className="mt-1 text-sm text-da-muted-fg">{subtitle}</p>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <div role="group" aria-label="Meeting views" className={cn("flex rounded-da-pill p-1 shadow-da-sm", GLASS)}>
            {tabs.map((t) => (
              <button
                key={t.value}
                type="button"
                aria-pressed={tab === t.value}
                onClick={() => {
                  setTab(t.value);
                  onTabChange?.(t.value);
                }}
                className={cn(
                  "da-focus da-transition rounded-da-pill px-3.5 py-1.5 text-sm font-semibold whitespace-nowrap",
                  tab === t.value ? "bg-da-fg text-da-bg shadow-da-sm" : "text-da-muted-fg hover:text-da-fg",
                )}
              >
                {t.label}
              </button>
            ))}
          </div>
          <button
            type="button"
            onClick={primaryAction.onClick}
            className="da-focus inline-flex h-10 items-center gap-2 rounded-da-pill bg-gradient-to-r from-da-primary to-da-accent px-4 text-sm font-semibold text-da-primary-fg shadow-da-md transition-[translate] duration-(--da-duration) ease-da-emphasized hover:-translate-y-0.5 motion-reduce:transition-none"
          >
            <Mic aria-hidden className="size-4" />
            {primaryAction.label}
          </button>
        </div>
      </div>
    </header>
  );
}

export default AppHeader;