FilterBar

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { Button } from "@/components/ledger/button";
import { FunnelIcon, XMarkIcon } from "@/components/ledger/icons";

export type FilterChip = {
  key: string;
  label: string;
  /** The resolved value — "1–30 Sep 2026", never "Last 30 days". */
  value: string;
};

export interface FilterBarProps {
  children?: React.ReactNode;
  chips: FilterChip[];
  className?: string;
  onClearAll: () => void;
  onRemove: (key: string) => void;
  resultCount: number;
}

/**
 * URL-param-backed, so a filtered view is shareable and survives a refresh.
 * Chips show resolved values. Clear-all is always present. Filter state
 * changes are instant — no animation.
 */
export function FilterBar({ chips, onRemove, onClearAll, resultCount, children, className }: FilterBarProps) {
  return (
    <div className={cn("flex flex-wrap items-center gap-2", className)}>
      <FunnelIcon aria-hidden="true" className="size-4 shrink-0 text-text-tertiary" />
      {children}
      {chips.map((chip) => (
        <span
          className="inline-flex h-8 items-center gap-1.5 rounded-sm bg-surface-sunken pl-3 pr-1 text-label"
          key={chip.key}
        >
          <span className="text-text-secondary">{chip.label}:</span>
          <span className="font-medium">{chip.value}</span>
          <button
            aria-label={`Remove filter ${chip.label} ${chip.value}`}
            className="press grid size-6 place-items-center rounded-xs text-text-tertiary hover:bg-surface-hover"
            onClick={() => onRemove(chip.key)}
            type="button"
          >
            <XMarkIcon aria-hidden="true" className="size-3" />
          </button>
        </span>
      ))}
      {chips.length > 0 ? (
        <Button onClick={onClearAll} size="sm" variant="ghost">
          Clear all
        </Button>
      ) : null}
      <span aria-live="polite" className="numeric ml-auto text-caption text-text-secondary">
        {resultCount.toLocaleString()} results
      </span>
    </div>
  );
}

/** URL-backed filter state. A shared link opens the same view. */
export function useUrlFilters(): {
  filters: Record<string, string>;
  set: (key: string, value: string | null) => void;
  clear: () => void;
} {
  const [filters, setFilters] = React.useState<Record<string, string>>({});

  React.useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const next: Record<string, string> = {};
    params.forEach((v, k) => {
      next[k] = v;
    });
    setFilters(next);
  }, []);

  const sync = React.useCallback((next: Record<string, string>) => {
    setFilters(next);
    const params = new URLSearchParams(next);
    const query = params.toString();
    window.history.replaceState(
      null,
      "",
      query ? `${window.location.pathname}?${query}` : window.location.pathname,
    );
  }, []);

  return {
    clear: () => sync({}),
    filters,
    set: (key, value) => {
      const next = { ...filters };
      if (value === null) delete next[key];
      else next[key] = value;
      sync(next);
    },
  };
}