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

// keep in sync with src/mcp/config.ts McpRuntimeConfig
interface McpRuntimeConfig {
  callTimeoutSeconds: number;
  maxBinarySizeMb: number;
  maxOutputFilesPerJob: number;
  maxOutputSizeMbPerJob: number;
  toolCacheTtlSeconds: number;
  oauthPendingTtlMinutes: number;
  allowPrivateAddresses: boolean;
}

export function McpForm({ config, onChange }: SectionFormProps) {
  const { t } = useTranslation('settings');
  const mcp: Partial<McpRuntimeConfig> = config.mcp ?? {};

  return (
    <div className="space-y-5">
      <h2 className="text-base font-semibold text-slate-800">MCP</h2>
      <p className="text-xs text-slate-500">
        {t('mcp.intro')}
      </p>

      <h3 className="text-sm font-medium text-slate-600 pt-2 border-t border-slate-200">{t('mcp.securityTitle')}</h3>

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

      <h3 className="text-sm font-medium text-slate-600 pt-2 border-t border-slate-200">{t('mcp.timeoutTitle')}</h3>

      <div>
        <FieldLabel>{t('mcp.callTimeout')}</FieldLabel>
        <FieldInput type="number" value={mcp.callTimeoutSeconds ?? 60}
          onChange={v => onChange('mcp.callTimeoutSeconds', Number(v))} />
        <HelpText>{t('mcp.callTimeoutHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('mcp.cacheTtl')}</FieldLabel>
        <FieldInput type="number" value={mcp.toolCacheTtlSeconds ?? 600}
          onChange={v => onChange('mcp.toolCacheTtlSeconds', Number(v))} />
        <HelpText>{t('mcp.cacheTtlHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('mcp.oauthTtl')}</FieldLabel>
        <FieldInput type="number" value={mcp.oauthPendingTtlMinutes ?? 10}
          onChange={v => onChange('mcp.oauthPendingTtlMinutes', Number(v))} />
        <HelpText>{t('mcp.oauthTtlHelp')}</HelpText>
      </div>

      <h3 className="text-sm font-medium text-slate-600 pt-2 border-t border-slate-200">{t('mcp.capacityTitle')}</h3>

      <div>
        <FieldLabel>{t('mcp.maxBinary')}</FieldLabel>
        <FieldInput type="number" value={mcp.maxBinarySizeMb ?? 20}
          onChange={v => onChange('mcp.maxBinarySizeMb', Number(v))} />
        <HelpText>{t('mcp.maxBinaryHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('mcp.maxFiles')}</FieldLabel>
        <FieldInput type="number" value={mcp.maxOutputFilesPerJob ?? 10}
          onChange={v => onChange('mcp.maxOutputFilesPerJob', Number(v))} />
        <HelpText>{t('mcp.maxFilesHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('mcp.maxTotal')}</FieldLabel>
        <FieldInput type="number" value={mcp.maxOutputSizeMbPerJob ?? 200}
          onChange={v => onChange('mcp.maxOutputSizeMbPerJob', Number(v))} />
        <HelpText>{t('mcp.maxTotalHelp')}</HelpText>
      </div>
    </div>
  );
}
