'use client';

import {
  AdminFilterBar,
  type AdminFilterSelect,
  type FilterChip,
} from '@/components/ui/domain/admin/AdminFilterBar';
import { Button } from '@/components/ui/primitives/Button';
import { cn } from '@/lib/cn';

export interface UsersMgmtSegment {
  key: string;
  label: string;
  params: Record<string, string>;
}

interface UsersMgmtFilterBarProps {
  t: (key: string) => string;
  segments: UsersMgmtSegment[];
  recentIds: string[];
  applySegmentParams: (params: Record<string, string>) => void;
  trackRecent: (id: string) => void;
  stateMultiChips: FilterChip[];
  activityChips: FilterChip[];
  completenessChips: FilterChip[];
  filterSelects: AdminFilterSelect[];
  suggestions: { id: string; label: string }[];
  searchPlaceholder: string;
  rangeLabel: string | null;
}

export function UsersMgmtFilterBar({
  t,
  segments,
  recentIds,
  applySegmentParams,
  trackRecent,
  stateMultiChips,
  activityChips,
  completenessChips,
  filterSelects,
  suggestions,
  searchPlaceholder,
  rangeLabel,
}: UsersMgmtFilterBarProps) {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-wrap items-center gap-2" role="group" aria-label={t('seg_label')}>
        <span className="text-text-secondary text-xs font-medium">{t('seg_label')}</span>
        {segments.map((seg) => (
          <Button
            key={seg.key}
            variant="ghost"
            size="sm"
            onClick={() => applySegmentParams(seg.params)}
          >
            {seg.label}
          </Button>
        ))}
      </div>
      {recentIds.length > 0 && (
        <div className="flex flex-wrap items-center gap-2">
          <span className="text-text-secondary text-xs font-medium">{t('recent_label')}</span>
          {recentIds.map((id) => (
            <a
              key={id}
              href={`/admin/users/${id}`}
              title={t('recent_chip_tooltip')}
              className={cn(
                'text-brand-primary-700 hover:text-brand-primary-800 text-xs',
                'rounded-md px-2 py-1 hover:bg-neutral-100',
              )}
              onClick={() => trackRecent(id)}
            >
              {id.slice(0, 8)}…
            </a>
          ))}
        </div>
      )}
      <AdminFilterBar
        searchKey="search"
        searchPlaceholder={searchPlaceholder}
        multiChips={stateMultiChips}
        chips={[...activityChips, ...completenessChips]}
        selects={filterSelects}
        suggestions={suggestions}
        dateRange={{ fromKey: 'joinedFrom', toKey: 'joinedTo' }}
      />
      {rangeLabel ? (
        <p className="text-text-secondary text-xs" aria-live="polite">
          {rangeLabel}
        </p>
      ) : null}
    </div>
  );
}