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

/**
 * External Services settings — credentials and gates for third-party
 * API integrations (X / Twitter, Maps, Amazon / Keepa) plus the
 * user-supplied scripts security gate.
 *
 * Replaces the `x` / `maps` / `amazon` / `user-folder` tabs of the
 * legacy grab-bag `ToolsForm`. The config keys are unchanged:
 *
 *   tools.x_auth_token / x_ct0 / x_cli_command / x_timeout / x_proxy / x_chrome_profile
 *   tools.google_maps_api_key
 *   tools.amazon_affiliate_tag / keepa_api_key
 *   tools.user_scripts_enabled / user_scripts_allow_userids
 *
 * Note: trash_retention_days lives in Paths & Storage (storage.*) since
 * config v2 normalization (#360/#362). It is intentionally NOT shown
 * here — see PathsStorageForm.
 */
export function ToolsExternalForm({ config, onChange }: SectionFormProps) {
  const { t } = useTranslation('settings');
  const tools = config.tools ?? {};

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

      <section className="space-y-5">
        <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
          X / Twitter
        </h3>
        <div>
          <FieldLabel>X Auth Token</FieldLabel>
          <FieldInput type="password" value={tools.xAuthToken ?? ''} onChange={v => onChange('tools.xAuthToken', v)} />
          <HelpText>{t('tools.x.authTokenHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>X ct0</FieldLabel>
          <FieldInput type="password" value={tools.xCt0 ?? ''} onChange={v => onChange('tools.xCt0', v)} />
          <HelpText>{t('tools.x.ct0Help')}</HelpText>
        </div>
        <div>
          <FieldLabel>X CLI Command</FieldLabel>
          <FieldInput value={Array.isArray(tools.xCliCommand) ? tools.xCliCommand.join(' ') : (tools.xCliCommand ?? '')}
            onChange={v => onChange('tools.xCliCommand', v)} />
          <HelpText>{t('tools.x.cliHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>{t('tools.x.timeout')}</FieldLabel>
          <FieldInput type="number" value={tools.xTimeout ?? 90}
            onChange={v => onChange('tools.xTimeout', Number(v))} />
        </div>
        <div>
          <FieldLabel>X Proxy</FieldLabel>
          <FieldInput value={tools.xProxy ?? ''} onChange={v => onChange('tools.xProxy', v)}
            placeholder="http://proxy:port" />
        </div>
        <div>
          <FieldLabel>X Chrome Profile</FieldLabel>
          <FieldInput value={tools.xChromeProfile ?? ''} onChange={v => onChange('tools.xChromeProfile', v)}
            placeholder="/path/to/chrome/profile" />
          <HelpText>{t('tools.x.chromeProfileHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>X Media Download</FieldLabel>
          <select value={tools.xDownloadMedia ?? 'auto'}
            onChange={e => onChange('tools.xDownloadMedia', 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('tools.x.mediaAuto')}</option>
            <option value="never">{t('tools.x.mediaNever')}</option>
          </select>
          <HelpText>{t('tools.x.mediaHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>X Video Download</FieldLabel>
          <select value={tools.xDownloadVideo ?? 'thumbnail'}
            onChange={e => onChange('tools.xDownloadVideo', 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="thumbnail">{t('tools.x.videoThumbnail')}</option>
            <option value="full">{t('tools.x.videoFull')}</option>
            <option value="never">{t('tools.x.videoNever')}</option>
          </select>
          <HelpText>{t('tools.x.videoHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>X Media Max (MB)</FieldLabel>
          <FieldInput type="number" value={tools.xMediaMaxMb ?? ''}
            onChange={v => onChange('tools.xMediaMaxMb', v ? Number(v) : undefined)} />
          <HelpText>{t('tools.x.mediaMaxHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>{t('tools.x.mediaFetchTimeout')}</FieldLabel>
          <FieldInput type="number" value={tools.xMediaFetchTimeoutSeconds ?? ''}
            onChange={v => onChange('tools.xMediaFetchTimeoutSeconds', v ? Number(v) : undefined)} />
          <HelpText>{t('tools.x.mediaFetchTimeoutHelp')}</HelpText>
        </div>
      </section>

      <section className="space-y-5 pt-2 border-t border-hairline">
        <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
          Maps
        </h3>
        <div>
          <FieldLabel>Google Maps API Key</FieldLabel>
          <FieldInput type="password" value={tools.googleMapsApiKey ?? ''} onChange={v => onChange('tools.googleMapsApiKey', v)} />
          <HelpText>{t('tools.maps.keyHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>{t('tools.maps.timeout')}</FieldLabel>
          <FieldInput type="number" value={tools.mapsTimeout ?? ''}
            onChange={v => onChange('tools.mapsTimeout', v ? Number(v) : undefined)} />
          <HelpText>{t('tools.maps.timeoutHelp')}</HelpText>
        </div>
      </section>

      <section className="space-y-5 pt-2 border-t border-hairline">
        <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
          Amazon / Keepa
        </h3>
        <div>
          <FieldLabel>Amazon Affiliate Tag</FieldLabel>
          <FieldInput value={tools.amazonAffiliateTag ?? ''} onChange={v => onChange('tools.amazonAffiliateTag', v)}
            placeholder="your-tag-22" />
          <HelpText>{t('tools.amazon.affiliateHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>Keepa API Key</FieldLabel>
          <FieldInput type="password" value={tools.keepaApiKey ?? ''} onChange={v => onChange('tools.keepaApiKey', v)} />
          <HelpText>{t('tools.amazon.keepaHelp')}</HelpText>
        </div>
      </section>

      <section className="space-y-5 pt-2 border-t border-hairline">
        <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
          User-supplied Scripts
        </h3>
        <div>
          <FieldLabel>{t('tools.userScripts.enableLabel')}</FieldLabel>
          <label className="inline-flex items-center gap-2 text-[13px] text-slate-700">
            <input
              type="checkbox"
              checked={tools.userScriptsEnabled === true}
              onChange={e => onChange('tools.userScriptsEnabled', e.target.checked)}
            />
            <span>{t('tools.userScripts.enabledToggle')}</span>
          </label>
          <HelpText>{t('tools.userScripts.enableHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>{t('tools.userScripts.allowlistLabel')}</FieldLabel>
          <StringArrayEditor
            value={tools.userScriptsAllowUserids ?? []}
            onChange={v => onChange('tools.userScriptsAllowUserids', v)}
            placeholder={t('tools.userScripts.allowlistPlaceholder')}
          />
          <HelpText>{t('tools.userScripts.allowlistHelp')}</HelpText>
        </div>
      </section>
    </div>
  );
}
