// @design-system: domain/facets/CategoryFacet
'use client';

import { cn } from '@/lib/cn';
import { pickLocalized } from '@/lib/i18n';
import { FacetSection } from './FacetSection';

export interface CategoryOption {
  id: string;
  slug: string;
  nameHe: string;
  nameEn: string;
  dealCount?: number;
}

export interface CategoryFacetProps {
  label: string;
  categories: CategoryOption[];
  selectedIds: string[];
  onToggle: (id: string) => void;
  locale: 'he' | 'en';
  /** When true, renders dealCount badge next to each category name. */
  showCounts?: boolean;
  countPlacement?: 'edge' | 'inline';
  /** Label for the implicit "All categories" option. Renders as first button when provided together with onSelectAll. */
  allLabel?: string;
  /** Called when user selects "All". Caller must also reset selectedIds to [] so aria-pressed reflects correctly. Both allLabel and onSelectAll must be provided to render the button. */
  onSelectAll?: () => void;
}

export function CategoryFacet({
  label,
  categories,
  selectedIds,
  onToggle,
  locale,
  showCounts = false,
  countPlacement = 'edge',
  allLabel,
  onSelectAll,
}: CategoryFacetProps) {
  return (
    <FacetSection label={label}>
      <div role="group" aria-label={label} className="flex flex-col gap-1">
        {allLabel && onSelectAll && (
          <button
            type="button"
            aria-pressed={selectedIds.length === 0}
            onClick={onSelectAll}
            className={cn(
              'flex w-full items-center rounded-md px-2 py-1.5 text-sm transition-colors',
              'focus-visible:ring-brand-primary-500 focus-visible:ring-2 focus-visible:outline-none',
              selectedIds.length === 0
                ? 'border-brand-primary-300 bg-brand-primary-50 text-brand-primary-700 border font-medium'
                : 'text-text-primary hover:bg-surface-hover border border-transparent',
            )}
          >
            {allLabel}
          </button>
        )}
        {categories.map((cat) => {
          const name = pickLocalized(cat, locale);
          const pressed = selectedIds.includes(cat.id);
          return (
            <button
              key={cat.id}
              type="button"
              aria-pressed={pressed}
              onClick={() => onToggle(cat.id)}
              className={cn(
                'flex w-full items-center rounded-md px-2 py-1.5 text-sm transition-colors',
                countPlacement === 'inline' ? 'gap-2' : 'justify-between',
                'focus-visible:ring-brand-primary-500 focus-visible:ring-2 focus-visible:outline-none',
                pressed
                  ? 'border-brand-primary-300 bg-brand-primary-50 text-brand-primary-700 border font-medium'
                  : 'text-text-primary hover:bg-surface-hover border border-transparent',
              )}
            >
              <span>{name}</span>
              {showCounts && cat.dealCount !== undefined && (
                <span className="text-text-secondary text-xs tabular-nums">{cat.dealCount}</span>
              )}
            </button>
          );
        })}
      </div>
    </FacetSection>
  );
}