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 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>画像分析に使用するモデル名（例: qwen2-vl:8b-instruct）</HelpText>
        </div>
        <div>
          <FieldLabel>Vision Base URL</FieldLabel>
          <FieldInput value={tools.visionBaseUrl ?? ''} onChange={v => onChange('tools.visionBaseUrl', v)}
            placeholder="Provider の Base URL と同じ場合は空欄" />
          <HelpText>Vision モデル用の API エンドポイント。</HelpText>
        </div>
        <div>
          <FieldLabel>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>GLM-OCR で使用するモデル名。</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>音声認識サーバーの API エンドポイント（TranscribeAudio 用）</HelpText>
        </div>
        <div>
          <FieldLabel>Speech Timeout (秒)</FieldLabel>
          <FieldInput type="number" value={tools.speechTimeout ?? 300}
            onChange={v => onChange('tools.speechTimeout', Number(v))} />
          <HelpText>長い音声ファイルに対応するためのタイムアウト</HelpText>
        </div>
        <div>
          <FieldLabel>Speech Language</FieldLabel>
          <FieldInput value={tools.speechLanguage ?? 'ja'} onChange={v => onChange('tools.speechLanguage', v)}
            placeholder="ja" />
          <HelpText>文字起こしのデフォルト言語コード</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>Office ファイルサイズ上限 (MB)</HelpText>
        <div>
          <FieldLabel>ReadExcel 最大サイズ</FieldLabel>
          <FieldInput type="number" value={tools.officeExcelMaxSizeMb ?? 10}
            onChange={v => onChange('tools.officeExcelMaxSizeMb', Number(v))} />
          <HelpText>ReadExcel が受け付ける .xlsx / .xls ファイルの最大サイズ（デフォルト: 10 MB）</HelpText>
        </div>
        <div>
          <FieldLabel>ReadDocx 最大サイズ</FieldLabel>
          <FieldInput type="number" value={tools.officeDocxMaxSizeMb ?? 10}
            onChange={v => onChange('tools.officeDocxMaxSizeMb', Number(v))} />
          <HelpText>ReadDocx が受け付ける .docx ファイルの最大サイズ（デフォルト: 10 MB）</HelpText>
        </div>
        <div>
          <FieldLabel>ReadPdf 最大サイズ</FieldLabel>
          <FieldInput type="number" value={tools.officePdfMaxSizeMb ?? 10}
            onChange={v => onChange('tools.officePdfMaxSizeMb', Number(v))} />
          <HelpText>ReadPdf が受け付ける .pdf ファイルの最大サイズ（デフォルト: 10 MB）</HelpText>
        </div>
        <div>
          <FieldLabel>ReadPPTX 最大サイズ</FieldLabel>
          <FieldInput type="number" value={tools.officePptxMaxSizeMb ?? 50}
            onChange={v => onChange('tools.officePptxMaxSizeMb', Number(v))} />
          <HelpText>ReadPPTX が受け付ける .pptx ファイルの最大サイズ（デフォルト: 50 MB）</HelpText>
        </div>
        <div>
          <FieldLabel>ReadPPTX 展開後サイズ上限</FieldLabel>
          <FieldInput type="number" value={tools.officePptxMaxUncompressedMb ?? 200}
            onChange={v => onChange('tools.officePptxMaxUncompressedMb', Number(v))} />
          <HelpText>PPTX の ZIP 展開後の合計サイズ上限（ZIP bomb 検知用、デフォルト: 200 MB）</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>UI からのアップロード API のリクエスト body 上限 (MB)</HelpText>
        <div>
          <FieldLabel>タスク作成・コメント時の最大アップロードサイズ</FieldLabel>
          <FieldInput type="number" value={(config.storage?.taskUploadMaxSizeMb) ?? 50}
            onChange={v => onChange('storage.taskUploadMaxSizeMb', v ? Number(v) : undefined)} />
          <HelpText>
            <code>POST /api/local/tasks</code> および <code>POST /api/local/tasks/:id/comments</code> の
            リクエスト body 上限 (添付ファイルを base64 でエンコードした JSON 全体)。
            添付ファイルの実サイズは概ね <code>値 × 0.75</code> が目安 (例: 50 MB body ≒ 37 MB raw)。
            範囲は 1〜1000 MB にクランプ。デフォルト 50 MB。サーバ再起動なしで反映。
            この設定は <strong>Paths &amp; Storage</strong> でも編集可能 (同じ <code>storage.task_upload_max_size_mb</code> キー)。
          </HelpText>
        </div>
      </section>
    </div>
  );
}
