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

export function BrowserSettingsForm({ config, onChange }: SectionFormProps) {
  const { t } = useTranslation('settings');
  const browser = config.browser ?? {};
  const tools = config.tools ?? {};

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

      <div>
        <FieldLabel>Page Timeout (ms)</FieldLabel>
        <FieldInput type="number" value={tools.browserPageTimeout ?? 60000}
          onChange={v => onChange('tools.browserPageTimeout', Number(v))} />
        <HelpText>{t('browser.pageTimeoutHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Action Timeout (ms)</FieldLabel>
        <FieldInput type="number" value={tools.browserActionTimeout ?? 30000}
          onChange={v => onChange('tools.browserActionTimeout', Number(v))} />
        <HelpText>{t('browser.actionTimeoutHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Browser Channel</FieldLabel>
        <select value={browser.channel ?? 'chromium'}
          onChange={e => onChange('browser.channel', e.target.value)}
          className="w-full h-9 px-2 text-[13px] border border-hairline rounded-md">
          <option value="chromium">chromium (bundled, default)</option>
          <option value="chrome">chrome (system Google Chrome)</option>
          <option value="msedge">msedge (system Microsoft Edge)</option>
        </select>
        <HelpText>
          {t('browser.channelHelp')}
        </HelpText>
      </div>

      <div>
        <FieldLabel>Executable Path (optional)</FieldLabel>
        <FieldInput value={browser.executablePath ?? ''}
          onChange={v => onChange('browser.executablePath', v || undefined)} />
        <HelpText>{t('browser.execPathHelp')}</HelpText>
      </div>

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

      <div>
        <FieldLabel>{t('browser.sessionMode')}</FieldLabel>
        <select value={browser.displayMode ?? 'headless'}
          onChange={e => onChange('browser.displayMode', e.target.value)}
          className="w-full h-9 px-2 text-[13px] border border-hairline rounded-md">
          <option value="headless">{t('browser.headless')}</option>
          <option value="novnc">{t('browser.novnc')}</option>
        </select>
        <HelpText>
          {t('browser.sessionModeHelp')}
        </HelpText>
      </div>

      <div>
        <FieldLabel>Max CAPTCHA Pages</FieldLabel>
        <FieldInput type="number" value={browser.maxCaptchaPages ?? 5}
          onChange={v => onChange('browser.maxCaptchaPages', Number(v))} />
        <HelpText>{t('browser.maxCaptchaHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>VNC Base Port</FieldLabel>
        <FieldInput type="number" value={browser.vncBasePort ?? 5900}
          onChange={v => onChange('browser.vncBasePort', Number(v))} />
        <HelpText>{t('browser.vncPortHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Session Data Directory</FieldLabel>
        <FieldInput value={browser.sessionDataDir ?? './data/browser-sessions'}
          onChange={v => onChange('browser.sessionDataDir', v)} />
        <HelpText>{t('browser.sessionDirHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Max Sessions</FieldLabel>
        <FieldInput type="number" value={browser.maxSessions ?? 3}
          onChange={v => onChange('browser.maxSessions', Number(v))} />
        <HelpText>{t('browser.maxSessionsHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('browser.idleTtl')}</FieldLabel>
        <FieldInput type="number" value={browser.taskSessionIdleTtl ?? ''}
          onChange={v => onChange('browser.taskSessionIdleTtl', v ? Number(v) : undefined)} />
        <HelpText>{t('browser.idleTtlHelp')}</HelpText>
      </div>
    </div>
  );
}
