/**
 * Phase 3: 批处理模式 - 任务定义组件
 */

import { Radio, Input } from 'antd';
import type { BatchTemplate } from '../../api/batchApi';
import './TaskDefinition.css';

const { TextArea } = Input;

interface TaskDefinitionProps {
  templates: BatchTemplate[];
  selectedTemplate: BatchTemplate | null;
  customPrompt: string;
  onSelectTemplate: (template: BatchTemplate | null) => void;
  onCustomPromptChange: (prompt: string) => void;
}

export function TaskDefinition({
  templates = [], // 默认空数组
  selectedTemplate,
  customPrompt,
  onSelectTemplate,
  onCustomPromptChange,
}: TaskDefinitionProps) {
  const isCustom = !selectedTemplate;

  return (
    <div className="task-definition">
      <div className="task-section-title">第1步：定义任务</div>

      <div className="task-template-selector">
        <div className="template-label">任务模板：</div>
        
        <Radio.Group
          value={selectedTemplate?.id || 'custom'}
          onChange={(e) => {
            const value = e.target.value;
            if (value === 'custom') {
              onSelectTemplate(null);
            } else {
              const template = templates.find(t => t.id === value);
              onSelectTemplate(template || null);
            }
          }}
        >
          {templates.map(template => (
            <Radio key={template.id} value={template.id}>
              <span className="template-name">{template.name}</span>
              <span className="template-desc">{template.description}</span>
            </Radio>
          ))}
          
          <Radio value="custom">
            <span className="template-name">自定义任务</span>
            <span className="template-desc">自定义提示词，结果以文本块显示</span>
          </Radio>
        </Radio.Group>
      </div>

      {/* 预设模板的字段预览 */}
      {selectedTemplate && (
        <div className="template-fields-preview">
          <div className="preview-title">提取字段（{selectedTemplate.output_fields.length}个）：</div>
          <div className="fields-list">
            {selectedTemplate.output_fields.map((field, index) => (
              <div key={field.key} className="field-item">
                <span className="field-number">{index + 1}.</span>
                <span className="field-label">{field.label}</span>
                {field.description && (
                  <span className="field-desc">- {field.description}</span>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 自定义提示词输入 */}
      {isCustom && (
        <div className="custom-prompt-input">
          <div className="input-label">自定义提示词：</div>
          <TextArea
            value={customPrompt}
            onChange={(e) => onCustomPromptChange(e.target.value)}
            placeholder="请输入您想要从文献中提取的信息...&#10;&#10;例如：&#10;请总结这篇文献的研究方法、主要发现和局限性，用3-5段话描述。"
            rows={8}
            className="prompt-textarea"
          />
          <div className="prompt-hint">
            💡 提示：AI的回答将以自然语言文本显示，不会解析为结构化字段
          </div>
        </div>
      )}
    </div>
  );
}

