/**
 * 完整的批处理模式组件
 * 精细化设计，支持模板选择、文档选择、执行和结果展示
 */

import React, { useState, useEffect } from 'react';
import { Button, Table, Progress, message, Card, Steps, Checkbox, Radio, Tooltip } from 'antd';
import { Play, Download, RotateCw, FileText, CheckCircle2, Zap } from 'lucide-react';
import type { KnowledgeBase, Document } from '../../api/knowledgeBaseApi';

interface BatchModeCompleteProps {
  kbId: string;
  kbInfo: KnowledgeBase;
  documents: Document[];
  template: string;
}

interface BatchTemplate {
  id: string;
  name: string;
  description: string;
  fields: { key: string; label: string }[];
}

interface BatchResult {
  documentId: string;
  documentName: string;
  status: 'pending' | 'processing' | 'completed' | 'error';
  progress: number;
  result?: Record<string, string>;
  error?: string;
}

// 模板配置（ID必须与后端 PRESET_TEMPLATES 匹配）
const TEMPLATES: BatchTemplate[] = [
  {
    id: 'clinical_research',  // ✅ 必须与后端模板ID匹配
    name: '临床研究信息提取',
    description: '提取研究目的、设计、对象、样本量、干预、对照、结果、证据等级',
    fields: [
      { key: 'research_purpose', label: '研究目的' },
      { key: 'research_design', label: '研究设计' },
      { key: 'research_subjects', label: '研究对象' },
      { key: 'sample_size', label: '样本量' },
      { key: 'intervention_group', label: '干预组' },
      { key: 'control_group', label: '对照组' },
      { key: 'results_data', label: '结果及数据' },
      { key: 'oxford_level', label: '牛津评级' },
    ],
  },
];

export const BatchModeComplete: React.FC<BatchModeCompleteProps> = ({
  kbId,
  documents,
  template: initialTemplate,
}) => {
  const [step, setStep] = useState(0); // 0: 配置, 1: 执行中, 2: 结果
  const [selectedTemplate, setSelectedTemplate] = useState<BatchTemplate | null>(TEMPLATES[0]);
  const [selectedDocs, setSelectedDocs] = useState<string[]>([]);
  const [results, setResults] = useState<BatchResult[]>([]);
  const [isExecuting, setIsExecuting] = useState(false);

  // 过滤出已完成解析的文档，并去重（确保唯一性）
  const completedDocs = React.useMemo(() => {
    const seen = new Set<string>();
    return documents.filter(doc => {
      if (doc.status === 'completed' && !seen.has(doc.id)) {
        seen.add(doc.id);
        return true;
      }
      return false;
    });
  }, [documents]);

  useEffect(() => {
    // 初始化模板（如果有传入则使用，否则默认第一个）
    if (initialTemplate) {
      const template = TEMPLATES.find(t => t.id === initialTemplate);
      if (template) setSelectedTemplate(template);
    }
  }, [initialTemplate]);

  // 切换文档选择状态（toggle模式，参考旧版实现）
  const handleToggleDocument = (docId: string) => {
    if (selectedDocs.includes(docId)) {
      // 已选中 -> 取消选择
      setSelectedDocs(prev => prev.filter(id => id !== docId));
    } else {
      // 未选中 -> 添加选择
      if (selectedDocs.length >= 50) {
        message.warning('最多选择50篇文档');
        return;
      }
      setSelectedDocs(prev => [...prev, docId]);
    }
  };

  // 全选/取消全选
  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      const allIds = completedDocs.slice(0, 50).map(d => d.id);
      setSelectedDocs(allIds);
    } else {
      setSelectedDocs([]);
    }
  };

  // 执行批处理
  const handleExecute = async () => {
    if (selectedDocs.length < 3) {
      message.warning('请至少选择3篇文档');
      return;
    }

    if (!selectedTemplate) {
      message.error('请选择批处理模板');
      return;
    }

    setStep(1);
    setIsExecuting(true);

    // 初始化结果 - 使用唯一索引确保key唯一
    const initialResults: BatchResult[] = selectedDocs.map((docId, index) => {
      const doc = completedDocs.find(d => d.id === docId);
      return {
        documentId: `${docId}-${index}`, // 确保唯一性
        documentName: doc?.filename || '未知文档',
        status: 'pending',
        progress: 0,
      };
    });
    setResults(initialResults);

    try {
      // 调用批处理API（使用v2新版API）
      // 完整路径: /api/v2/pkb/batch-tasks/batch/execute
      // 请求体格式必须匹配后端 ExecuteBatchBody 接口
      const response = await fetch('/api/v2/pkb/batch-tasks/batch/execute', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          kb_id: kbId,                          // 后端期望 kb_id
          document_ids: selectedDocs,           // 后端期望 document_ids
          template_type: 'preset',              // 使用预设模板
          template_id: selectedTemplate.id,     // 后端期望 template_id
          model_type: 'qwen-long',              // 使用qwen-long模型
          task_name: `${selectedTemplate.name}_${new Date().toLocaleString('zh-CN')}`,
        }),
      });

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.message || '批处理执行失败');
      }

      const responseData = await response.json();
      console.log('[BatchMode] API响应:', responseData);
      
      // 后端返回格式: { success: true, data: { task_id: xxx } }
      const taskId = responseData.data?.task_id || responseData.taskId || responseData.task_id;

      if (!taskId) {
        console.error('[BatchMode] 未获取到taskId:', responseData);
        message.error('批处理任务创建失败：未获取到任务ID');
        setIsExecuting(false);
        setStep(0);
        return;
      }

      console.log('[BatchMode] 任务已创建，开始轮询:', taskId);

      // 轮询任务状态
      const pollInterval = setInterval(async () => {
        try {
          const statusRes = await fetch(`/api/v2/pkb/batch-tasks/batch/tasks/${taskId}`);
          if (!statusRes.ok) {
            console.error('[BatchMode] 获取任务状态失败:', statusRes.status);
            return;
          }
          const statusJson = await statusRes.json();
          const taskData = statusJson.data || statusJson;
          
          console.log('[BatchMode] 任务状态:', taskData);

          // 计算进度 - 基于后端返回的completed_count
          const completedCount = taskData.completed_count || 0;
          const failedCount = taskData.failed_count || 0;
          const processedCount = completedCount + failedCount;

          // 更新每个文档的状态（根据处理进度模拟）
          setResults(prev => prev.map((r, idx) => {
            if (idx < completedCount) {
              // 已完成
              return { ...r, status: 'completed' as const, progress: 100 };
            } else if (idx < processedCount) {
              // 失败
              return { ...r, status: 'error' as const, progress: 100 };
            } else if (idx === processedCount && taskData.status === 'processing') {
              // 正在处理
              return { ...r, status: 'processing' as const, progress: 50 };
            }
            return r;
          }));

          // 检查是否全部完成
          if (taskData.status === 'completed' || taskData.status === 'failed') {
            clearInterval(pollInterval);
            setIsExecuting(false);
            
            // 获取最终结果
            try {
              const resultsRes = await fetch(`/api/v2/pkb/batch-tasks/batch/tasks/${taskId}/results`);
              console.log('[BatchMode] 获取结果响应状态:', resultsRes.status);
              
              if (resultsRes.ok) {
                const resultsJson = await resultsRes.json();
                console.log('[BatchMode] 结果数据:', JSON.stringify(resultsJson, null, 2));
                
                const resultsData = resultsJson.data?.results || [];
                console.log('[BatchMode] 解析到的结果数量:', resultsData.length);
                
                if (resultsData.length > 0) {
                  // 构建新的结果数组 - 后端返回的提取数据在 data 字段中
                  const newResults: BatchResult[] = resultsData.map((docResult: any, idx: number) => {
                    console.log(`[BatchMode] 文档 ${idx}:`, {
                      id: docResult.document_id,
                      name: docResult.document_name,
                      status: docResult.status,
                      hasData: !!docResult.data,
                      dataKeys: docResult.data ? Object.keys(docResult.data) : [],
                    });
                    
                    // 🔑 后端返回的状态是 "success" 或 "failed"，需要映射为前端的 "completed" 或 "error"
                    const isSuccess = docResult.status === 'success' || docResult.status === 'completed';
                    
                    return {
                      documentId: docResult.document_id || `doc-${idx}`,
                      documentName: docResult.document_name || `文档${idx + 1}`,
                      status: isSuccess ? 'completed' as const : 'error' as const,
                      progress: 100,
                      result: docResult.data,  // 后端返回的提取数据
                      error: docResult.error_message,
                    };
                  });
                  
                  console.log('[BatchMode] 更新结果:', newResults);
                  setResults(newResults);
                } else {
                  console.warn('[BatchMode] 没有结果数据');
                }
              } else {
                console.error('[BatchMode] 获取结果失败，状态码:', resultsRes.status);
              }
            } catch (e) {
              console.error('[BatchMode] 获取结果异常:', e);
            }
            
            // 延迟设置step，确保状态更新完成
            setTimeout(() => {
              setStep(2);
            }, 100);
            
            if (taskData.status === 'completed') {
              message.success(`批处理完成！成功 ${completedCount} 篇，失败 ${failedCount} 篇`);
            } else {
              message.error('批处理失败: ' + (taskData.error || '未知错误'));
            }
          }
        } catch (error) {
          console.error('[BatchMode] 轮询任务状态失败:', error);
        }
      }, 2000);

      // 设置超时保护（5分钟）
      setTimeout(() => {
        clearInterval(pollInterval);
        if (isExecuting) {
          setIsExecuting(false);
          setStep(2);
          message.warning('任务执行超时，请稍后查看结果');
        }
      }, 5 * 60 * 1000);

    } catch (error: unknown) {
      const errorMessage = error instanceof Error ? error.message : '执行失败';
      message.error(errorMessage);
      setIsExecuting(false);
      setStep(0); // 返回配置步骤
    }
  };

  // 导出Excel (CSV格式)
  const handleExport = () => {
    if (!selectedTemplate) return;

    const completedResults = results.filter(r => r.status === 'completed' && r.result);
    
    if (completedResults.length === 0) {
      message.warning('没有可导出的结果');
      return;
    }

    // 构建CSV数据 - 使用模板定义的字段
    const headers = ['文档名称', ...selectedTemplate.fields.map(f => f.label)];
    const rows = completedResults.map(r => [
      r.documentName,
      ...selectedTemplate.fields.map(f => {
        const value = r.result?.[f.key];
        if (!value) return '-';
        // 处理换行符和引号
        return String(value).replace(/"/g, '""').replace(/\n/g, ' ');
      }),
    ]);

    const csvContent = [
      headers.join(','),
      ...rows.map(row => row.map(cell => `"${cell}"`).join(',')),
    ].join('\n');

    // 下载
    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    const timestamp = new Date().toISOString().split('T')[0];
    link.download = `批处理结果_${selectedTemplate.name}_${timestamp}.csv`;
    link.click();
    
    message.success(`已导出 ${completedResults.length} 条结果`);
  };

  // 重置
  const handleReset = () => {
    setStep(0);
    setSelectedDocs([]);
    setResults([]);
  };

  return (
    <div className="h-full flex flex-col overflow-hidden bg-white">
      {/* 步骤指示器 */}
      <div className="flex-shrink-0 px-8 py-5 border-b border-gray-100 bg-gray-50/50">
        <Steps
          current={step}
          size="small"
          items={[
            { title: '配置任务', subTitle: '选择模板和文档' },
            { title: '执行中', subTitle: '正在处理文档' },
            { title: '查看结果', subTitle: '导出数据' },
          ]}
        />
      </div>

      {/* 步骤1: 配置 */}
      {step === 0 && (
        <div className="flex-1 overflow-y-auto p-6">
          <div className="max-w-4xl mx-auto space-y-6">
            {/* 模板选择 */}
            <Card 
              title={
                <div className="flex items-center">
                  <Zap className="w-4 h-4 mr-2 text-orange-500" />
                  <span>选择批处理模板</span>
                </div>
              } 
              size="small"
              className="shadow-sm"
            >
              <Radio.Group 
                value={selectedTemplate?.id}
                onChange={(e) => {
                  const template = TEMPLATES.find(t => t.id === e.target.value);
                  setSelectedTemplate(template || null);
                }}
                className="w-full"
              >
                <div className="space-y-3">
                  {TEMPLATES.map(t => (
                    <div 
                      key={t.id}
                      className={`p-4 border rounded-lg cursor-pointer transition-all ${
                        selectedTemplate?.id === t.id 
                          ? 'border-blue-400 bg-blue-50/50' 
                          : 'border-gray-200 hover:border-blue-200 hover:bg-gray-50'
                      }`}
                      onClick={() => setSelectedTemplate(t)}
                    >
                      <Radio value={t.id} className="w-full">
                        <div className="ml-2">
                          <div className="font-medium text-slate-800">{t.name}</div>
                          <div className="text-xs text-slate-500 mt-1">{t.description}</div>
                          <div className="flex flex-wrap gap-1.5 mt-2">
                            {t.fields.slice(0, 5).map(f => (
                              <span key={f.key} className="text-xs bg-gray-100 text-slate-600 px-2 py-0.5 rounded">
                                {f.label}
                              </span>
                            ))}
                            {t.fields.length > 5 && (
                              <span className="text-xs text-slate-400">+{t.fields.length - 5}项</span>
                            )}
                          </div>
                        </div>
                      </Radio>
                    </div>
                  ))}
                </div>
              </Radio.Group>
            </Card>

            {/* 文档选择 */}
            <Card 
              title={
                <div className="flex items-center justify-between w-full">
                  <div className="flex items-center">
                    <FileText className="w-4 h-4 mr-2 text-blue-500" />
                    <span>选择文档</span>
                    <span className="ml-2 text-xs text-slate-400 font-normal">
                      ({completedDocs.length} 篇可用)
                    </span>
                  </div>
                  <Checkbox
                    checked={selectedDocs.length === completedDocs.length && completedDocs.length > 0}
                    indeterminate={selectedDocs.length > 0 && selectedDocs.length < completedDocs.length}
                    onChange={(e) => handleSelectAll(e.target.checked)}
                  >
                    全选
                  </Checkbox>
                </div>
              }
              size="small"
              className="shadow-sm"
            >
              <div className="space-y-1 max-h-[280px] overflow-y-auto">
                {completedDocs.length === 0 ? (
                  <div className="text-center py-8 text-slate-400">
                    <FileText className="w-8 h-8 mx-auto mb-2 opacity-50" />
                    <p>暂无已完成解析的文档</p>
                  </div>
                ) : (
                  completedDocs.map(doc => (
                    <div 
                      key={doc.id} 
                      className={`flex items-center p-3 rounded-lg cursor-pointer transition-all ${
                        selectedDocs.includes(doc.id)
                          ? 'bg-blue-50 border border-blue-200'
                          : 'hover:bg-gray-50 border border-transparent'
                      }`}
                      onClick={() => handleToggleDocument(doc.id)}
                    >
                      <Checkbox
                        checked={selectedDocs.includes(doc.id)}
                        onChange={() => handleToggleDocument(doc.id)}
                        onClick={(e) => e.stopPropagation()}
                      />
                      <div className="w-8 h-8 bg-red-50 text-red-500 rounded flex items-center justify-center ml-3 mr-3 flex-shrink-0">
                        <FileText className="w-4 h-4" />
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="text-sm font-medium text-slate-700 truncate">{doc.filename}</div>
                        <div className="text-xs text-slate-400">
                          {doc.tokensCount ? `${(doc.tokensCount / 1000).toFixed(0)}k tokens` : ''}
                        </div>
                      </div>
                      {selectedDocs.includes(doc.id) && (
                        <CheckCircle2 className="w-4 h-4 text-blue-500 flex-shrink-0" />
                      )}
                    </div>
                  ))
                )}
              </div>

              <div className="mt-4 pt-4 border-t border-gray-100">
                <div className={`flex items-center p-3 rounded-lg ${
                  selectedDocs.length >= 3 
                    ? 'bg-green-50 border border-green-200' 
                    : 'bg-yellow-50 border border-yellow-200'
                }`}>
                  <CheckCircle2 className={`w-4 h-4 mr-2 ${
                    selectedDocs.length >= 3 ? 'text-green-500' : 'text-yellow-500'
                  }`} />
                  <span className="text-sm">
                    已选择 <strong className="text-blue-600">{selectedDocs.length}</strong> 篇文档
                    {selectedDocs.length < 3 && <span className="text-orange-600 ml-2">（至少需要3篇）</span>}
                  </span>
                </div>
              </div>
            </Card>

            {/* 开始按钮 - 显示实际选择的文档数量 */}
            <Button
              type="primary"
              size="large"
              icon={<Play className="w-4 h-4" />}
              onClick={handleExecute}
              disabled={selectedDocs.length < 3 || selectedDocs.length > 50 || !selectedTemplate}
              className="w-full h-12 text-base font-medium shadow-lg"
            >
              🚀 开始批处理 ({selectedDocs.length} 篇文档)
            </Button>
          </div>
        </div>
      )}

      {/* 步骤2: 执行中 */}
      {step === 1 && (
        <div className="flex-1 overflow-y-auto p-6">
          <div className="max-w-3xl mx-auto">
            <Card 
              title={
                <div className="flex items-center">
                  <Zap className="w-4 h-4 mr-2 text-orange-500 animate-pulse" />
                  <span>批处理执行中...</span>
                </div>
              }
              size="small"
              className="shadow-sm"
            >
              <div className="space-y-4">
                {results.map((result) => (
                  <div key={result.documentId} className="border-b border-gray-100 pb-4 last:border-b-0 last:pb-0">
                    <div className="flex justify-between items-center mb-2">
                      <div className="flex items-center min-w-0 flex-1">
                        <FileText className="w-4 h-4 text-red-400 mr-2 flex-shrink-0" />
                        <span className="font-medium text-sm text-slate-700 truncate">
                          {result.documentName}
                        </span>
                      </div>
                      <span className="text-xs ml-2 flex-shrink-0">
                        {result.status === 'completed' && <span className="text-green-600">✅ 完成</span>}
                        {result.status === 'processing' && <span className="text-blue-600">⏳ 处理中</span>}
                        {result.status === 'error' && <span className="text-red-600">❌ 失败</span>}
                        {result.status === 'pending' && <span className="text-slate-400">⏸️ 等待</span>}
                      </span>
                    </div>
                    <Progress
                      percent={result.progress}
                      status={result.status === 'error' ? 'exception' : result.status === 'completed' ? 'success' : 'active'}
                      size="small"
                      strokeColor={result.status === 'completed' ? '#22c55e' : '#3b82f6'}
                    />
                  </div>
                ))}
              </div>
            </Card>
          </div>
        </div>
      )}

      {/* 步骤3: 结果 */}
      {step === 2 && selectedTemplate && (
        <div className="flex-1 overflow-hidden flex flex-col p-6">
          <div className="flex-shrink-0 mb-4 flex justify-between items-center">
            <div className="flex items-center text-sm text-slate-600">
              <CheckCircle2 className="w-4 h-4 text-green-500 mr-2" />
              已完成 {results.filter(r => r.status === 'completed').length} / {results.length} 篇文档处理
            </div>
            <div className="flex space-x-3">
              <Button icon={<RotateCw className="w-4 h-4" />} onClick={handleReset}>
                重新开始
              </Button>
              <Button
                type="primary"
                icon={<Download className="w-4 h-4" />}
                onClick={handleExport}
              >
                导出Excel
              </Button>
            </div>
          </div>

          <div className="flex-1 overflow-auto bg-white border border-gray-200 rounded-lg shadow-sm">
            {results.filter(r => r.status === 'completed' && r.result).length === 0 ? (
              <div className="flex items-center justify-center h-full text-slate-400">
                <div className="text-center">
                  <FileText className="w-12 h-12 mx-auto mb-3 opacity-50" />
                  <p>暂无提取结果</p>
                  <p className="text-xs mt-1">请等待处理完成或检查是否有失败的文档</p>
                </div>
              </div>
            ) : (
              <Table
                dataSource={results.filter(r => r.status === 'completed' && r.result)}
                rowKey="documentId"
                pagination={false}
                scroll={{ x: 1800, y: 'calc(100vh - 400px)' }}
                size="small"
                className="batch-results-table"
                columns={[
                  {
                    title: '文档名称',
                    dataIndex: 'documentName',
                    key: 'documentName',
                    fixed: 'left',
                    width: 220,
                    render: (text: string) => (
                      <Tooltip title={text} placement="topLeft">
                        <div className="flex items-center">
                          <FileText className="w-4 h-4 text-red-400 mr-2 flex-shrink-0" />
                          <span 
                            className="font-medium text-slate-800"
                            style={{
                              display: '-webkit-box',
                              WebkitLineClamp: 2,
                              WebkitBoxOrient: 'vertical',
                              overflow: 'hidden',
                              lineHeight: '1.4',
                            }}
                          >
                            {text}
                          </span>
                        </div>
                      </Tooltip>
                    ),
                  },
                  ...selectedTemplate.fields.map(field => ({
                    title: field.label,
                    key: field.key,
                    width: field.key === 'results_data' ? 280 : 180, // 结果数据列更宽
                    render: (_: unknown, record: BatchResult) => {
                      const value = record.result?.[field.key];
                      if (!value) return <span className="text-slate-300">-</span>;
                      
                      const textValue = String(value);
                      
                      return (
                        <Tooltip 
                          title={<div style={{ maxWidth: 400, maxHeight: 300, overflow: 'auto' }}>{textValue}</div>} 
                          placement="topLeft"
                          overlayStyle={{ maxWidth: 450 }}
                        >
                          <div 
                            className="text-slate-700 text-sm leading-relaxed cursor-help"
                            style={{
                              display: '-webkit-box',
                              WebkitLineClamp: 3,  // 最多显示3行
                              WebkitBoxOrient: 'vertical',
                              overflow: 'hidden',
                              lineHeight: '1.5',
                            }}
                          >
                            {textValue}
                          </div>
                        </Tooltip>
                      );
                    },
                  })),
                ]}
              />
            )}
          </div>
        </div>
      )}
    </div>
  );
};