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

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

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

      <div>
        <FieldLabel>Page Timeout (ms)</FieldLabel>
        <FieldInput type="number" value={tools.browserPageTimeout ?? 60000}
          onChange={v => onChange('tools.browserPageTimeout', Number(v))} />
        <HelpText>ページ読み込みのタイムアウト（ミリ秒）。デフォルト: 60000</HelpText>
      </div>

      <div>
        <FieldLabel>Action Timeout (ms)</FieldLabel>
        <FieldInput type="number" value={tools.browserActionTimeout ?? 30000}
          onChange={v => onChange('tools.browserActionTimeout', Number(v))} />
        <HelpText>ブラウザ操作のタイムアウト（ミリ秒）。デフォルト: 30000</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>
          Google ログイン等で「セキュアでないブラウザ」と弾かれる場合は <code>chrome</code> に切替。
          ホストに <code>google-chrome</code> がインストールされている必要あり。
        </HelpText>
      </div>

      <div>
        <FieldLabel>Executable Path (optional)</FieldLabel>
        <FieldInput value={browser.executablePath ?? ''}
          onChange={v => onChange('browser.executablePath', v || undefined)} />
        <HelpText>非標準パスにあるブラウザを使う場合のみ指定。未設定なら channel に従う。</HelpText>
      </div>

      <h3 className="text-sm font-medium text-slate-600 mt-4 pt-3 border-t border-slate-200">Sessions (CDP)</h3>

      <div>
        <FieldLabel>VNC Base Port</FieldLabel>
        <FieldInput type="number" value={browser.vncBasePort ?? 5900}
          onChange={v => onChange('browser.vncBasePort', Number(v))} />
        <HelpText>VNC サーバーのベースポート。デフォルト: 5900</HelpText>
      </div>

      <div>
        <FieldLabel>Session Data Directory</FieldLabel>
        <FieldInput value={browser.sessionDataDir ?? './data/browser-sessions'}
          onChange={v => onChange('browser.sessionDataDir', v)} />
        <HelpText>Cookie を永続化するディレクトリ。</HelpText>
      </div>

      <div>
        <FieldLabel>Max Sessions</FieldLabel>
        <FieldInput type="number" value={browser.maxSessions ?? 3}
          onChange={v => onChange('browser.maxSessions', Number(v))} />
        <HelpText>同時に起動できるセッションの最大数。デフォルト: 3</HelpText>
      </div>
    </div>
  );
}
