import { HelpText } from './HelpText';
import { FieldLabel } from './formUtils';
import { StringArrayEditor } from './StringArrayEditor';
import type { SectionFormProps } from './types';

export function SearchFilterForm({ config, onChange }: SectionFormProps) {
  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>Blocked Patterns (ブロックパターン)</FieldLabel>
        <StringArrayEditor
          value={sf.blockedPatterns ?? []}
          onChange={v => onChange('searchFilter.blockedPatterns', v)}
          placeholder="regex pattern"
        />
        <HelpText>WebSearch クエリからフィルタするパターン（正規表現）。</HelpText>
      </div>

      <div>
        <FieldLabel>Auto Block (自動ブロック)</FieldLabel>
        <div className="space-y-2 mt-1">
          {([
            ['privateIp', 'プライベートIP', autoBlock.privateIp],
            ['internalDomain', '内部ドメイン', autoBlock.internalDomain],
            ['email', 'メールアドレス', autoBlock.email],
            ['phone', '電話番号', 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>検索クエリに含まれる機密情報を自動でブロック。</HelpText>
      </div>
    </div>
  );
}
