import { useTranslation } from 'react-i18next';
import { HelpText } from './HelpText';
import { FieldLabel } from './formUtils';
import { StringArrayEditor } from './StringArrayEditor';
import type { SectionFormProps } from './types';

export function SearchFilterForm({ config, onChange }: SectionFormProps) {
  const { t } = useTranslation('settings');
  const sf = config.searchFilter ?? {};
  const autoBlock = sf.autoBlock ?? {};

  const toggleAutoBlock = (key: string, value: boolean) => {
    onChange(`searchFilter.autoBlock.${key}`, value);
  };

  return (
    <div className="space-y-5">
      <h2 className="text-base font-semibold text-slate-800">Search Filter</h2>

      <div>
        <FieldLabel>{t('searchFilter.blockedLabel')}</FieldLabel>
        <StringArrayEditor
          value={sf.blockedPatterns ?? []}
          onChange={v => onChange('searchFilter.blockedPatterns', v)}
          placeholder="regex pattern"
        />
        <HelpText>{t('searchFilter.blockedHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('searchFilter.autoBlockLabel')}</FieldLabel>
        <div className="space-y-2 mt-1">
          {([
            ['privateIp', t('searchFilter.autoBlockPrivateIp'), autoBlock.privateIp],
            ['internalDomain', t('searchFilter.autoBlockInternalDomain'), autoBlock.internalDomain],
            ['email', t('searchFilter.autoBlockEmail'), autoBlock.email],
            ['phone', t('searchFilter.autoBlockPhone'), autoBlock.phone],
          ] as const).map(([key, label, checked]) => (
            <label key={key} className="flex items-center gap-2 text-sm text-slate-700">
              <input
                type="checkbox"
                checked={checked ?? false}
                onChange={e => toggleAutoBlock(key, e.target.checked)}
                className="rounded border-slate-300"
              />
              {label}
            </label>
          ))}
        </div>
        <HelpText>{t('searchFilter.autoBlockHelp')}</HelpText>
      </div>
    </div>
  );
}
