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

/**
 * Media & Documents settings.
 *
 * Replaces the `vision` / `speech` / `office` / `uploads` tabs of the
 * legacy grab-bag `ToolsForm`. The config keys are unchanged:
 *
 *   tools.vision_model / vision_base_url / vision_timeout / vision_max_tokens
 *   tools.ocr_model
 *   tools.speech_server_url / speech_timeout / speech_language
 *   tools.office_{excel,docx,pdf,pptx}_max_size_mb
 *   tools.office_pptx_max_uncompressed_mb
 *   tools.task_upload_max_size_mb
 */
export function ToolsMediaForm({ 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">Media & Documents</h2>

      <section className="space-y-5">
        <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
          Vision / OCR
        </h3>
        <div>
          <FieldLabel>Vision Model</FieldLabel>
          <FieldInput value={tools.visionModel ?? ''} onChange={v => onChange('tools.visionModel', v)} />
          <HelpText>{t('tools.vision.modelHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>Vision Base URL</FieldLabel>
          <FieldInput value={tools.visionBaseUrl ?? ''} onChange={v => onChange('tools.visionBaseUrl', v)}
            placeholder={t('tools.vision.baseUrlPlaceholder')} />
          <HelpText>{t('tools.vision.baseUrlHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>{t('tools.vision.timeout')}</FieldLabel>
          <FieldInput type="number" value={tools.visionTimeout ?? 60}
            onChange={v => onChange('tools.visionTimeout', Number(v))} />
        </div>
        <div>
          <FieldLabel>Vision Max Tokens</FieldLabel>
          <FieldInput type="number" value={tools.visionMaxTokens ?? 1024}
            onChange={v => onChange('tools.visionMaxTokens', Number(v))} />
        </div>
        <div>
          <FieldLabel>OCR Model</FieldLabel>
          <FieldInput value={tools.ocrModel ?? ''} onChange={v => onChange('tools.ocrModel', v)}
            placeholder="glm-ocr" />
          <HelpText>{t('tools.vision.ocrModelHelp')}</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">
          Speech
        </h3>
        <div>
          <FieldLabel>Speech Server URL</FieldLabel>
          <FieldInput value={tools.speechServerUrl ?? ''} onChange={v => onChange('tools.speechServerUrl', v)}
            placeholder="http://localhost:8000/v1" />
          <HelpText>{t('tools.speech.serverHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>{t('tools.speech.timeout')}</FieldLabel>
          <FieldInput type="number" value={tools.speechTimeout ?? 300}
            onChange={v => onChange('tools.speechTimeout', Number(v))} />
          <HelpText>{t('tools.speech.timeoutHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>Speech Language</FieldLabel>
          <FieldInput value={tools.speechLanguage ?? 'ja'} onChange={v => onChange('tools.speechLanguage', v)}
            placeholder="ja" />
          <HelpText>{t('tools.speech.languageHelp')}</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">
          Office (file size limits)
        </h3>
        <HelpText>{t('tools.office.sectionHelp')}</HelpText>
        <div>
          <FieldLabel>{t('tools.office.excelLabel')}</FieldLabel>
          <FieldInput type="number" value={tools.officeExcelMaxSizeMb ?? 10}
            onChange={v => onChange('tools.officeExcelMaxSizeMb', Number(v))} />
          <HelpText>{t('tools.office.excelHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>{t('tools.office.docxLabel')}</FieldLabel>
          <FieldInput type="number" value={tools.officeDocxMaxSizeMb ?? 10}
            onChange={v => onChange('tools.officeDocxMaxSizeMb', Number(v))} />
          <HelpText>{t('tools.office.docxHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>{t('tools.office.pdfLabel')}</FieldLabel>
          <FieldInput type="number" value={tools.officePdfMaxSizeMb ?? 10}
            onChange={v => onChange('tools.officePdfMaxSizeMb', Number(v))} />
          <HelpText>{t('tools.office.pdfHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>{t('tools.office.pptxLabel')}</FieldLabel>
          <FieldInput type="number" value={tools.officePptxMaxSizeMb ?? 50}
            onChange={v => onChange('tools.officePptxMaxSizeMb', Number(v))} />
          <HelpText>{t('tools.office.pptxHelp')}</HelpText>
        </div>
        <div>
          <FieldLabel>{t('tools.office.pptxUncompressedLabel')}</FieldLabel>
          <FieldInput type="number" value={tools.officePptxMaxUncompressedMb ?? 200}
            onChange={v => onChange('tools.officePptxMaxUncompressedMb', Number(v))} />
          <HelpText>{t('tools.office.pptxUncompressedHelp')}</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">
          Uploads
        </h3>
        <HelpText>{t('tools.uploads.sectionHelp')}</HelpText>
        <div>
          <FieldLabel>{t('tools.uploads.maxLabel')}</FieldLabel>
          <FieldInput type="number" value={(config.storage?.taskUploadMaxSizeMb) ?? 50}
            onChange={v => onChange('storage.taskUploadMaxSizeMb', v ? Number(v) : undefined)} />
          <HelpText>{t('tools.uploads.maxHelpStorage')}</HelpText>
        </div>
      </section>
    </div>
  );
}
