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

/**
 * Web & Search settings.
 *
 * Replaces the `web` tab of the legacy grab-bag `ToolsForm` and folds
 * the standalone `SearchFilterForm` in as a sub-section (Step 3
 * INVESTIGATE #3 follow-up). The config keys are unchanged:
 *
 *   tools.searxng_url
 *   tools.webfetch_timeout
 *   tools.websearch_timeout
 *   tools.webfetch_allowed_hosts
 *   search_filter.blocked_patterns
 *   search_filter.auto_block.*
 */
export function ToolsWebForm({ config, onChange }: SectionFormProps) {
  const { t } = useTranslation('settings');
  const tools = config.tools ?? {};
  const sf = config.searchFilter ?? {};
  const autoBlock = sf.autoBlock ?? {};

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

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

      <section className="space-y-5">
        <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
          Web Fetch / Search
        </h3>
        <div>
          <FieldLabel>SearXNG URL</FieldLabel>
          <FieldInput value={tools.searxngUrl ?? ''} onChange={v => onChange('tools.searxngUrl', v)} />
          <HelpText>{t('tools.web.searxngHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>{t('tools.web.webfetchTimeout')}</FieldLabel>
          <FieldInput type="number" value={tools.webfetchTimeout ?? 30}
            onChange={v => onChange('tools.webfetchTimeout', Number(v))} />
        </div>
        <div>
          <FieldLabel>{t('tools.web.websearchTimeout')}</FieldLabel>
          <FieldInput type="number" value={tools.websearchTimeout ?? 15}
            onChange={v => onChange('tools.websearchTimeout', Number(v))} />
        </div>
        <div>
          <FieldLabel>SSRF Allowed Hosts</FieldLabel>
          <StringArrayEditor
            value={tools.webfetchAllowedHosts ?? []}
            onChange={v => onChange('tools.webfetchAllowedHosts', v)}
            placeholder="hostname or IP address" />
          <HelpText>{t('tools.web.ssrfHelp')}</HelpText>
        </div>
      </section>

      <section className="space-y-4 pt-2 border-t border-hairline">
        <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
          Search Filter
        </h3>

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

        <div>
          <FieldLabel>{t('tools.web.autoBlockLabel')}</FieldLabel>
          <div className="space-y-2 mt-1">
            {([
              ['privateIp', t('tools.web.autoBlock.privateIp'), autoBlock.privateIp],
              ['internalDomain', t('tools.web.autoBlock.internalDomain'), autoBlock.internalDomain],
              ['email', t('tools.web.autoBlock.email'), autoBlock.email],
              ['phone', t('tools.web.autoBlock.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>{t('tools.web.autoBlockHelp')}</HelpText>
        </div>
      </section>
    </div>
  );
}
