import { useTranslation } from 'react-i18next';
import { ts } from '../../../i18n/server';
import type { FeatureFilters, FeatureMeta } from '../../../types';
import { formatNumber } from '../../../lib/format';
import { PillGroup } from '../../ui/PillGroup';
import { PillToggle } from '../../ui/PillToggle';
import { FeatureActions } from '../../ui/FeatureIcons';
import { FeatureLabel } from '../../ui/FeatureLabel';

interface EnumFeatureFilterCardProps {
  feature: FeatureMeta;
  filters: FeatureFilters;
  pinnedFeature: string | null;
  filterImpact?: number;
  onFilterChange: (name: string, value: [number, number] | string[]) => void;
  onTogglePin: (name: string) => void;
  onShowInfo: (feature: FeatureMeta) => void;
  onRemoveFilter: (name: string) => void;
}

export function EnumFeatureFilterCard({
  feature,
  filters,
  pinnedFeature,
  filterImpact,
  onFilterChange,
  onTogglePin,
  onShowInfo,
  onRemoveFilter,
}: EnumFeatureFilterCardProps) {
  const { t } = useTranslation();
  const selectedValues = (filters[feature.name] as string[]) || [];
  const allValues = feature.values || [];

  return (
    <div
      data-filter-name={feature.name}
      className={`space-y-0.5 px-2 py-1.5 rounded ${pinnedFeature === feature.name ? 'ring-2 ring-teal-400 bg-teal-50/50 dark:bg-teal-900/20' : ''}`}
    >
      <div className="flex items-start justify-between gap-1">
        <FeatureLabel feature={feature} size="sm" className="min-w-0 shrink" wrap />
        <FeatureActions
          feature={feature}
          isPinned={pinnedFeature === feature.name}
          onTogglePin={onTogglePin}
          onShowInfo={onShowInfo}
          onRemove={onRemoveFilter}
        />
      </div>
      <PillGroup>
        {allValues.map((val) => (
          <PillToggle
            key={val}
            label={ts(val)}
            active={selectedValues.includes(val)}
            onClick={() => {
              const next = selectedValues.includes(val)
                ? selectedValues.filter((v) => v !== val)
                : [...selectedValues, val];
              onFilterChange(feature.name, next);
            }}
            size="xs"
          />
        ))}
      </PillGroup>
      {filterImpact != null && filterImpact > 0 && (
        <p className="text-[10px] text-warm-400 dark:text-warm-500 mt-0.5">
          {t('filters.filtersOut', { value: formatNumber(filterImpact) })}
        </p>
      )}
    </div>
  );
}
