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

export function SafetyForm({ config, onChange }: SectionFormProps) {
  const { t } = useTranslation('settings');
  const safety = config.safety ?? {};
  const historySummarization = safety.historySummarization ?? {};

  return (
    <div className="space-y-5">
      <h2 className="text-base font-semibold text-slate-800">{t('safety.title')}</h2>

      <div>
        <FieldLabel>Max Iterations</FieldLabel>
        <FieldInput type="number" value={safety.maxIterations ?? 200}
          onChange={v => onChange('safety.maxIterations', Number(v))} />
        <HelpText>{t('safety.maxIterHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Max Revisits</FieldLabel>
        <FieldInput type="number" value={safety.maxRevisits ?? 3}
          onChange={v => onChange('safety.maxRevisits', Number(v))} />
        <HelpText>{t('safety.maxRevisitsHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Max Tool Loop Repeats</FieldLabel>
        <FieldInput type="number" value={safety.maxToolLoopRepeats ?? 5}
          onChange={v => onChange('safety.maxToolLoopRepeats', Number(v))} />
        <HelpText>{t('safety.maxToolLoopHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Prompt Guard Ratio</FieldLabel>
        <FieldInput type="number" value={safety.promptGuardRatio ?? 0.8}
          onChange={v => onChange('safety.promptGuardRatio', v ? Number(v) : undefined)} />
        <HelpText>{t('safety.promptGuardHelp')}</HelpText>
      </div>

      <h3 className="text-sm font-medium text-slate-600 mt-4 pt-3 border-t border-slate-200">{t('safety.bashSandboxTitle')}</h3>

      <div>
        <FieldLabel>Bash Sandbox Mode</FieldLabel>
        <select
          value={safety.bashSandbox ?? 'auto'}
          onChange={e => onChange('safety.bashSandbox', e.target.value)}
          className="w-full h-8 px-2 text-[13px] border border-hairline rounded-md bg-canvas focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none transition-shadow"
        >
          <option value="auto">{t('safety.bashSandboxAuto')}</option>
          <option value="always">{t('safety.bashSandboxAlways')}</option>
          <option value="off">{t('safety.bashSandboxOff')}</option>
        </select>
        <HelpText>{t('safety.bashSandboxHelp')}</HelpText>
      </div>

      <div>
        <label className="flex items-center gap-2 text-sm text-slate-700">
          <input
            type="checkbox"
            checked={safety.bashUnrestricted === true}
            onChange={e => onChange('safety.bashUnrestricted', e.target.checked)}
            className="rounded"
          />
          {t('safety.bashUnrestricted')}
        </label>
        <HelpText>{t('safety.bashUnrestrictedHelp')}</HelpText>
      </div>

      <div>
        <label className="flex items-center gap-2 text-sm text-slate-700">
          <input
            type="checkbox"
            checked={safety.bashAllowNetwork === true}
            onChange={e => onChange('safety.bashAllowNetwork', e.target.checked)}
            className="rounded"
          />
          {t('safety.bashAllowNetwork')}
        </label>
        <HelpText>
          <span className="text-red-700 dark:text-red-300 font-medium">{t('safety.bashAllowNetworkWarnLabel')}</span>
          {t('safety.bashAllowNetworkHelp')}
        </HelpText>
      </div>

      <h3 className="text-sm font-medium text-slate-600 mt-4 pt-3 border-t border-slate-200">{t('safety.historyTitle')}</h3>

      <div>
        <label className="flex items-center gap-2 text-sm text-slate-700">
          <input
            type="checkbox"
            checked={historySummarization.enabled !== false}
            onChange={e => onChange('safety.historySummarization.enabled', e.target.checked)}
            className="rounded"
          />
          {t('safety.historyEnable')}
        </label>
        <HelpText>{t('safety.historyEnableHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Tail Turns</FieldLabel>
        <FieldInput type="number" value={historySummarization.tailTurns ?? 2}
          onChange={v => onChange('safety.historySummarization.tailTurns', Number(v))} />
        <HelpText>{t('safety.tailTurnsHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Preserve Recent Budget</FieldLabel>
        <FieldInput type="number" value={historySummarization.preserveRecentBudget ?? 8000}
          onChange={v => onChange('safety.historySummarization.preserveRecentBudget', Number(v))} />
        <HelpText>{t('safety.preserveRecentHelp')}</HelpText>
      </div>
    </div>
  );
}
