Header Toolbar

"use client";

import { useState } from "react";
import { LayoutGrid, List, ListFilter, Plus, Search, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderToolbarFilter {
  id: string;
  label: string;
  value: string;
}

export interface HeaderToolbarProps {
  title?: string;
  count?: number;
  filters?: HeaderToolbarFilter[];
  onFiltersChange?: (filters: HeaderToolbarFilter[]) => void;
  query?: string;
  onQueryChange?: (q: string) => void;
  view?: "list" | "board";
  onViewChange?: (view: "list" | "board") => void;
  primaryLabel?: string;
  onPrimary?: () => void;
  className?: string;
}

/** List-page toolbar: title + count and New button, then search, removable filter chips, “Add filter” and a list/board toggle. */
export function HeaderToolbar({
  title = "Incidents",
  count = 128,
  filters: initialFilters = [
    { id: "status", label: "Status", value: "Open" },
    { id: "team", label: "Team", value: "Payments" },
  ],
  onFiltersChange,
  query: controlledQuery,
  onQueryChange,
  view: controlledView,
  onViewChange,
  primaryLabel = "New incident",
  onPrimary,
  className,
}: HeaderToolbarProps) {
  const [filters, setFilters] = useState(initialFilters);
  const [innerQuery, setInnerQuery] = useState("");
  const [innerView, setInnerView] = useState<"list" | "board">("list");
  const query = controlledQuery ?? innerQuery;
  const view = controlledView ?? innerView;

  const removeFilter = (id: string) => {
    const next = filters.filter((f) => f.id !== id);
    setFilters(next);
    onFiltersChange?.(next);
  };

  return (
    <header className={cn("border-b border-da-border bg-da-bg px-4 py-3 text-da-fg sm:px-6", className)}>
      <div className="flex items-center gap-3">
        <h1 className="text-[15px] font-semibold">{title}</h1>
        <span className="rounded-da-pill bg-da-muted px-2 font-da-mono text-[11px] text-da-muted-fg">{count}</span>
        <button
          type="button"
          onClick={onPrimary}
          className="da-focus da-transition ml-auto inline-flex h-8 items-center gap-1.5 rounded-da-md bg-da-primary px-3 text-[13px] font-medium text-da-primary-fg hover:bg-da-primary/90"
        >
          <Plus aria-hidden className="size-4" />
          {primaryLabel}
        </button>
      </div>
      <div className="mt-3 flex flex-wrap items-center gap-2">
        <div className="relative w-full sm:w-56">
          <Search aria-hidden className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-da-muted-fg" />
          <input
            type="search"
            aria-label={`Search ${title.toLowerCase()}`}
            value={query}
            onChange={(e) => {
              setInnerQuery(e.target.value);
              onQueryChange?.(e.target.value);
            }}
            placeholder="Search…"
            className="da-focus h-8 w-full rounded-da-md border border-da-border bg-da-input pr-2 pl-8 text-[13px] placeholder:text-da-muted-fg"
          />
        </div>
        <ul className="flex flex-wrap items-center gap-2" aria-label="Active filters">
          {filters.map((f) => (
            <li key={f.id} className="da-stroke inline-flex h-7 items-center overflow-hidden rounded-da-md bg-da-surface text-[12px] text-da-surface-fg">
              <span className="px-2 text-da-muted-fg">{f.label}</span>
              <span className="border-l border-da-border px-2 font-medium">{f.value}</span>
              <button
                type="button"
                onClick={() => removeFilter(f.id)}
                aria-label={`Remove filter ${f.label}: ${f.value}`}
                className="da-focus grid h-full w-6 place-items-center border-l border-da-border text-da-muted-fg hover:bg-da-muted hover:text-da-fg"
              >
                <X aria-hidden className="size-3" />
              </button>
            </li>
          ))}
        </ul>
        <button
          type="button"
          className="da-focus da-transition inline-flex h-7 items-center gap-1.5 rounded-da-md px-2 text-[12px] text-da-muted-fg hover:bg-da-muted hover:text-da-fg"
        >
          <ListFilter aria-hidden className="size-3.5" />
          Add filter
        </button>
        <div className="ml-auto inline-flex rounded-da-md bg-da-muted p-0.5" role="group" aria-label="View">
          {(
            [
              { v: "list", Icon: List, l: "List view" },
              { v: "board", Icon: LayoutGrid, l: "Board view" },
            ] as const
          ).map(({ v, Icon, l }) => (
            <button
              key={v}
              type="button"
              aria-label={l}
              aria-pressed={view === v}
              onClick={() => {
                setInnerView(v);
                onViewChange?.(v);
              }}
              className={cn(
                "da-focus da-transition grid size-7 place-items-center rounded-[5px]",
                view === v ? "bg-da-surface text-da-fg shadow-da-sm" : "text-da-muted-fg hover:text-da-fg",
              )}
            >
              <Icon aria-hidden className="size-3.5" />
            </button>
          ))}
        </div>
      </div>
    </header>
  );
}

export default HeaderToolbar;