import {  useMemo,useRef, useState, useEffect } from 'react';
import { Button, Flex, Radio, Steps, Modal, Input, Checkbox, Select, Form, Progress, App } from 'antd';
import { useTranslation } from 'react-i18next';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import './Private.css';
import Table, { type TableRef } from '@/components/Table'
import type { AnyObject } from 'antd/es/_util/type';
import type { UploadFileResponse,KnowledgeBaseDocumentData } from '@/views/KnowledgeBase/types';
import type { ColumnsType } from 'antd/es/table';
import type { UploadFile } from 'antd';
import UploadFiles from '@/components/Upload/UploadFiles';
import type { UploadRequestOption } from 'rc-upload/lib/interface';
import { uploadFile, uploadQaFile, getDocumentList, parseDocument, updateDocument, deleteDocument, createDocumentAndUpload } from '@/api/knowledgeBase';
import exitIcon from '@/assets/images/knowledgeBase/exit.png';

import SliderInput from '@/components/SliderInput';
import DelimiterSelector from '../components/DelimiterSelector';

const { TextArea } = Input;

  const style: React.CSSProperties = {
    display: 'flex',
    gap: 16,
  };
  const radioWrapperBaseStyle: React.CSSProperties = {
    display: 'flex',
    alignItems: 'flex-start',
    columnGap: 14, // Wider gap between dot and text
    width: '100%',
    border: '1px solid #E5E5E5',
    borderRadius: 12,
    padding: 16,
  };
  const getActiveRadioStyle = (active: boolean): React.CSSProperties => ({
    ...radioWrapperBaseStyle,
    border: active ? '1px solid #171719' : radioWrapperBaseStyle.border,
    backgroundColor: active ? '#FAFAFA' : 'transparent',
  });


type SourceType = 'local' | 'link' | 'text' | 'csv';
type ProcessingMethod = 'directBlock' | 'qaExtract';
type ParameterSettings = 'defaultSettings' | 'customSettings';
const stepKeys = ['selectFile', 'parameterSettings', 'dataPreview', 'confirmUpload'] as const;
type StepKey = typeof stepKeys[number];

const stepIndexMap: Record<StepKey, number> = {
  selectFile: 0,
  parameterSettings: 1,
  dataPreview: 2,
  confirmUpload: 3,
};

interface CreateDatasetLocationState {
  source?: SourceType;
  knowledgeBaseId?: string;
  parentId?: string;
  startStep?: StepKey;
  fileId?: string | string[];
  fileIds?: string | string[];
}
interface ContentFormData {
  title: string;
  content: string;
}
const fileType = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'csv', 'md', 'htm', 'html', 'json', 'ppt', 'pptx', 'txt', 'png', 'jpg', 'mp3', 'mp4', 'mov', 'wav']
const csvFileType = ['csv']
const CreateDataset = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { modal, message: messageApi } = App.useApp()
  const { knowledgeBaseId: routeKnowledgeBaseId } = useParams<{ knowledgeBaseId: string }>();
  const location = useLocation();
  const locationState = (location.state ?? {}) as CreateDatasetLocationState;
  const source = (locationState.source ?? 'local') as SourceType;
  const knowledgeBaseId = locationState.knowledgeBaseId || routeKnowledgeBaseId;
  const parentId = locationState.parentId;
  const initialStepKey = locationState.startStep ?? 'selectFile';
  const initialFileIds = (() => {
    const fileIds = locationState.fileIds || locationState.fileId;
    if (!fileIds) return [];
    return Array.isArray(fileIds) ? fileIds : [fileIds];
  })();
  const [current, setCurrent] = useState<number>(stepIndexMap[initialStepKey]);
  const tableRef = useRef<TableRef>(null);

  const [form] = Form.useForm<ContentFormData>();
  const [data, setData] = useState<KnowledgeBaseDocumentData[]>([]);
  const [rechunkFileIds, setRechunkFileIds] = useState<string[]>(initialFileIds);
  const [textFormValid, setTextFormValid] = useState<boolean>(false);

  const [pollingLoading, setPollingLoading] = useState<boolean>(false);
  const pollingTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const [delimiter, setDelimiter] = useState<string | undefined>(undefined);
  const [blockSize, setBlockSize] = useState<number>(130);
  const [qaPrompt, setQaPrompt] = useState<string | undefined>()
  console.log('qaPrompt', qaPrompt)
  const [processingMethod, setProcessingMethod] = useState<ProcessingMethod>('directBlock');
  const [parameterSettings, setParameterSettings] = useState<ParameterSettings>('defaultSettings');
  const [pdfEnhancementEnabled, setPdfEnhancementEnabled] = useState<boolean>(true);
  const [pdfEnhancementMethod, setPdfEnhancementMethod] = useState<string>('mineru');
  const steps = useMemo(
    () => [
      { title: t('knowledgeBase.selectFile') },
      { title: t('knowledgeBase.parameterSettings') },
      // { title: t('knowledgeBase.dataPreview') }, // Temporarily hide step 3
      { title: t('knowledgeBase.confirmUpload') },
    ],
    [t],
  );
  // 存储每个文件的 AbortController，用于取消上传
  const abortControllersRef = useRef<Map<string, AbortController>>(new Map());
  const uploadRef = useRef<{ fileList: UploadFile[]; clearFiles: () => void }>(null);
  console.log('Upload files', uploadRef.current?.fileList.length)
  const handleNext = async () => {
    // Temporarily hide step 3: adjust step index (0->1->2 corresponds to select file->parameter settings->confirm upload)
    let nextStep = current + 1;
    if (current === 0 && source === 'csv') {
      return
    }
    
    if((nextStep === 1 && source === 'local') || (nextStep === 2 && source === 'csv')) {
      // Check if files have been uploaded
      if (rechunkFileIds.length === 0) {
        // If no files, prompt user to upload first
        Modal.warning({
          title: t('common.warning') || 'Warning',
          content: t('knowledgeBase.pleaseUploadFileFirst') || 'Please upload files first',
        });
        return; // Don't proceed to next step
      }
    }else if(nextStep === 1 && source === 'text'){
        try {
            const values = await form.validateFields();
            // setLoading(true);

            // TODO: Need to call corresponding API to save content here
            const params = {
              // ...values,
              kb_id: knowledgeBaseId,
              parent_id: parentId,
            };
            const response = await createDocumentAndUpload(values, params)
            if(response) {
                setRechunkFileIds([response.id])
            }
            
          } catch (err) {
              messageApi.error(t('knowledgeBase.createContentError'));
          } finally {
            // setLoading(false);
          }
    }
    
    // 从参数设置进入确认上传时的处理
    if(current === 1 && nextStep === 2) {
      // debugger
        // handlePreview(data[0],0) 
        if(parameterSettings === 'customSettings' || processingMethod === 'qaExtract' || pdfEnhancementEnabled){
            rechunkFileIds.map((id) => {
                const params = {
                  progress: 0,
                  parser_config: {
                      layout_recognize: pdfEnhancementMethod || 'DeepDOC',
                      delimiter: delimiter,
                      chunk_token_num: blockSize,
                      auto_questions: processingMethod === 'directBlock' ? 0 : 1,
                      qa_prompt: qaPrompt
                  }
                }
                updateDocument(id, params)
            })
        }

        // Execute once immediately to load document list for preview (don't auto-return)
        pollDocumentStatus(false);
    }
    
    // Limit max step to 2 (confirm upload)
    setCurrent(Math.min(nextStep, 2));
  };
  const handlePrev = () => setCurrent((c) => Math.max(c - 1, 0));
  
  // Start upload: trigger document parsing and start polling
  const handleStartUpload = () => {
    if (rechunkFileIds.length === 0) {
      Modal.warning({
        title: t('common.warning') || 'Warning',
        content: t('knowledgeBase.pleaseUploadFileFirst') || 'Please upload files first',
      });
      return;
    }

    // 显示确认弹框
    modal.confirm({
      title: t('knowledgeBase.startUploadConfirmTitle') || 'Start processing documents',
      content: t('knowledgeBase.startUploadConfirmContent') || 'Document processing will proceed in the background. You can choose to return to the list page immediately or stay on this page to view processing progress.',
      okText: t('knowledgeBase.returnToList') || 'Return to list',
      cancelText: t('knowledgeBase.stayOnPage') || 'Stay on this page',
      onOk: () => {
        // User chose to return to list - don't show loading, navigate directly
        startProcessing(true);
      },
      onCancel: () => {
        // User chose to stay on current page - show loading and start polling
        console.log('User chose to stay, starting to show loading');
        setPollingLoading(true);
        
        // Delay a bit to let user see loading effect, then start processing
        setTimeout(() => {
          startProcessing(false);
        }, 100);
      },
    });
  };

  // Function to actually start processing
  const startProcessing = (autoReturnToList: boolean) => {
    // Trigger document parsing
    rechunkFileIds.map((id) => {
      parseDocument(id, {});
    });

    if (autoReturnToList) {
      // User chose to return immediately, navigate directly (no loading shown)
      console.log('User chose to return to list page immediately');
      handleBack();
    } else {
      // User chose to stay, start polling to view progress (loading already set in onCancel)
      console.log('User chose to stay and view progress');
      
      // Execute polling once immediately (enable auto-return)
      pollDocumentStatus(true);

      // Then execute every 3 seconds (enable auto-return)
      pollingTimerRef.current = setInterval(() => {
        pollDocumentStatus(true);
      }, 3000);
    }
  };
  const handleDelete = (record: AnyObject) => {
       modal.confirm({
            title: t('common.deleteWarning'),
            content: t('common.deleteWarningContent', { content: record.name }),
          onOk: async () => {
              await deleteDocument(record.id);
              
              // 删除成功，从 rechunkFileIds 中移除该 id
              setRechunkFileIds((prev) => prev.filter((id) => id !== record.id));
              
              // 刷新列表
              messageApi.success(t('common.deleteSuccess'));
              tableRef.current?.loadData();
            
          },
          onCancel: () => {
            console.log('Delete cancelled');
          },
      });
  }
  // Table column configuration
  const columns: ColumnsType = [
    {
      title: t('knowledgeBase.name'),
      dataIndex: 'file_name',
      key: 'file_name'
    },
    
    {
      title: t('knowledgeBase.status'),
      dataIndex: 'progress',
      key: 'progress',
      render: (value: number, record: any) => {
        // When value >= 1 it's complete, when 0～1 show progress bar
        if (value >= 1) {
          return (
            <span className="rb:text-xs rb:border rb:border-[#DFE4ED] rb:bg-[#FBFDFF] rb:rounded rb:items-center rb:text-[#212332] rb:py-1 rb:px-2">
              <span className="rb:inline-block rb:w-[5px] rb:h-[5px] rb:mr-2 rb:rounded-full" style={{ backgroundColor: '#369F21' }}></span>
              <span>{t('knowledgeBase.completed')}</span>
            </span>
          );
        } else if (value >= 0 && value < 1) {
          // Processing, show progress bar
          return (
            <div className="rb:flex rb:items-center rb:gap-2">
              <Progress 
                percent={Math.round(value * 100)} 
                size="small" 
                status="active"
                strokeColor={{
                  '0%': '#108ee9',
                  '100%': '#87d068',
                }}
                style={{ width: '120px' }}
              />
            </div>
          );
        } else {
          // value = 0 or other cases, show pending
          return (
            <span className="rb:text-xs rb:border rb:border-[#DFE4ED] rb:bg-[#FBFDFF] rb:rounded rb:items-center rb:text-[#212332] rb:py-1 rb:px-2">
              <span className="rb:inline-block rb:w-[5px] rb:h-[5px] rb:mr-2 rb:rounded-full" style={{ backgroundColor: '#FF8A4C' }}></span>
              <span>{t('knowledgeBase.pending')}</span>
            </span>
          );
        }
      }
    },
    {
      title: t('common.operation'),
      key: 'action',
      render: (_, record) => (
        <Button type='text' danger onClick={() => handleDelete(record)}>{t('common.delete')}</Button>
      ),
    },
  ];
  // Helper function to check media file duration
  const checkMediaDuration = (file: File): Promise<number> => {
    return new Promise((resolve, reject) => {
      const url = URL.createObjectURL(file);
      const media = document.createElement(file.type.startsWith('video/') ? 'video' : 'audio');
      
      media.onloadedmetadata = () => {
        URL.revokeObjectURL(url);
        resolve(media.duration);
      };
      
      media.onerror = () => {
        URL.revokeObjectURL(url);
        reject(new Error(`${t('knowledgeBase.unableReadFile')}`));
      };
      
      media.src = url;
    });
  };

  // Upload file
  const handleUpload = async (options: UploadRequestOption) => {
    const { file, onSuccess, onError, onProgress, filename = 'file' } = options;
    
    // Create AbortController for cancelling upload
    const abortController = new AbortController();
    const fileUid = (file as any).uid;
    abortControllersRef.current.set(fileUid, abortController);

    // Get file extension
    const fileExtension = (file as File).name.split('.').pop()?.toLowerCase();
    const mediaExtensions = ['mp3', 'mp4', 'mov', 'wav'];
    
    // If media file, check size and duration
    if (fileExtension && mediaExtensions.includes(fileExtension)) {
      const fileSizeInMB = (file as File).size / (1024 * 1024);
      
      // 检查文件大小（50MB限制）
      if (fileSizeInMB > 100) {
        messageApi.error(`${t('knowledgeBase.sizeLimitError')}: ${fileSizeInMB.toFixed(2)}MB`);
        onError?.(new Error(`${t('knowledgeBase.fileSizeExceeds')}`));
        abortControllersRef.current.delete(fileUid);
        return;
      }
      
      try {
        // Check media duration (150 second limit)
        const duration = await checkMediaDuration(file as File);
        if (duration > 150) {
          messageApi.error(`${t('knowledgeBase.fileDurationLimitError')}: ${Math.round(duration)}s`);
          onError?.(new Error(`${t('knowledgeBase.fileDurationExceeds')}`));
          abortControllersRef.current.delete(fileUid);
          return;
        }
      } catch (error) {
        messageApi.error(`${t('knowledgeBase.unableReadFile')}`);
        onError?.(error as Error);
        abortControllersRef.current.delete(fileUid);
        return;
      }
    }

    const formData = new FormData();
    formData.append(filename, file as File);
    if (knowledgeBaseId) {
      formData.append('kb_id', knowledgeBaseId);
    }
    if (parentId) {
      formData.append('parent_id', parentId);
    }

    if (source === 'csv') {
      uploadQaFile(formData, {
        kb_id: knowledgeBaseId,
        parent_id: parentId,
        signal: abortController.signal,
      })
        .then((res: UploadFileResponse) => {
          // Upload successful, remove AbortController
          abortControllersRef.current.delete(fileUid);
          
          onSuccess?.(res, new XMLHttpRequest());
          messageApi.success(t('knowledgeBase.uploadSuccess'))
          handleBack()
        })
        .catch((error) => {
          // Remove AbortController
          abortControllersRef.current.delete(fileUid);
          
          // If user actively cancelled, don't show error message
          if (error.name === 'AbortError' || error.code === 'ERR_CANCELED') {
            console.log('Upload cancelled:', (file as File).name);
            return;
          }
          onError?.(error as Error);
        });
    } else {
      uploadFile(formData, {
        kb_id: knowledgeBaseId,
        parent_id: parentId,
        signal: abortController.signal,
        onUploadProgress: (event) => {
          if (!event.total) return;
          const percent = Math.round((event.loaded / event.total) * 100);
          onProgress?.({ percent }, file);
        },
      })
        .then((res: UploadFileResponse) => {
          // Upload successful, remove AbortController
          abortControllersRef.current.delete(fileUid);
          
          onSuccess?.(res, new XMLHttpRequest());
          if (res?.id) {
            setRechunkFileIds((prev) => {
              if (prev.includes(res.id)) return prev;
              const next = [...prev, res.id];
              return next;
            });
          }
        })
        .catch((error) => {
          // Remove AbortController
          abortControllersRef.current.delete(fileUid);
          
          // If user actively cancelled, don't show error message
          if (error.name === 'AbortError' || error.code === 'ERR_CANCELED') {
            console.log('Upload cancelled:', (file as File).name);
            return;
          }
          onError?.(error as Error);
        });
    }
  };


  // 轮询检查文档处理状态
  // autoReturn: whether to automatically return to list page when all documents are completed
  const pollDocumentStatus = (autoReturn: boolean = false) => {
    console.log('Start polling document status, current pollingLoading:', pollingLoading);
    
    if (!knowledgeBaseId || !parentId || rechunkFileIds.length === 0) {
      console.log('Polling conditions not met, exiting');
      return;
    }

    // 获取文档列表检查是否全部完成，并刷新表格数据
    getDocumentList(knowledgeBaseId, {
      document_ids: rechunkFileIds.join(','),
    })
    .then((res: any) => {
      const documents = res.items || [];
      setData(documents);
      
      // 只在 confirmUpload 步骤刷新表格数据
      if (current === 2) {
        tableRef.current?.loadData();
      }
      
      console.log('documents', documents);
      // Check if all documents have progress of 1
      const allCompleted = documents.every((doc: KnowledgeBaseDocumentData) => doc.progress === 1);
      
      console.log('Polling status:', allCompleted);
      
      // 检查是否所有文档都完成了
      // debugger
      if (allCompleted) {
        // 清除定时器和 loading 状态
        if (pollingTimerRef.current) {
          clearInterval(pollingTimerRef.current);
          pollingTimerRef.current = null;
        }
        
        // 延迟清除 loading，让用户看到完成状态
        setTimeout(() => {
          setPollingLoading(false);
        }, 1000);
        
        // Only auto-return when autoReturn is true
        if (autoReturn) {
          // Delay 2 seconds before navigating to let user see completion status
          console.log('All documents processed, returning to list page in 2 seconds');
          setTimeout(() => {
            handleBack();
          }, 2000);
        } else {
          console.log('All documents processed, user can operate manually');
        }
      } else {
        // If documents are still processing, keep loading state
        console.log('Documents still processing, maintaining loading state');
      }
    })
    .catch((error) => {
      console.error('Failed to poll document status:', error);
      setPollingLoading(false);
    });
  };
  const handleBack = () => {
    if (knowledgeBaseId) {
      navigate(`/knowledge-base/${knowledgeBaseId}/private`, {
        state: {
          refresh: true,
          timestamp: Date.now(), // 添加时间戳确保每次都是新的 state
          // 保持返回到原来的文档文件夹位置
          navigateToDocumentFolder: parentId !== knowledgeBaseId ? parentId : undefined,
        },
      });
    } else {
      console.warn('Missing route parameters, unable to return');
    }
  };
  const handleChange = (value: number | null) =>{
      if (value !== null) {
        setBlockSize(value);
      }
  }
  // 删除已上传的文件
  const handleDeleteFile = async (fileId: string) => {
    try {
      await deleteDocument(fileId);
      // Delete successful, remove the id from rechunkFileIds
      setRechunkFileIds((prev) => prev.filter((id) => id !== fileId));
      console.log(`${t('common.deleteSuccess')}`);
    } catch (error) {
      messageApi.error(`${t('common.deleteFailed')}`);
    }
  };
  // When navigating from other pages with fileIds, load corresponding document data
  // useEffect(() => {
  //   if (initialFileIds.length > 0 && initialStepKey !== 'selectFile' && knowledgeBaseId && parentId) {
  //     // Load document list data
  //     getDocumentList(knowledgeBaseId,{
  //       document_ids: initialFileIds.join(','),
  //     })
  //     .then((res: any) => {
  //       const documents = res.items || [];
  //       setData(documents);
  //     })
  //     .catch((error) => {
  //       console.error('Failed to load document list:', error);
  //     });
  //   }
  // }, []);

  // Cleanup function: clear timer and loading state when component unmounts
  useEffect(() => {
    return () => {
      if (pollingTimerRef.current) {
        clearInterval(pollingTimerRef.current);
        pollingTimerRef.current = null;
      }
      setPollingLoading(false);
    };
  }, []);

  // Watch for route changes, ensure state is cleaned up when page switches
  useEffect(() => {
    return () => {
      // Clean up state when page unmounts
      if (pollingTimerRef.current) {
        clearInterval(pollingTimerRef.current);
        pollingTimerRef.current = null;
      }
      setPollingLoading(false);
    };
  }, [location.pathname]);

  return (<>
    <div className='rb:p-3 rb:pt-2 rb:h-full rb:flex rb:flex-col'>
      {/* <Typography.Title level={4} className='rb:!m-0 rb:!mb-4'>
        {t('knowledgeBase.createA') + ' ' + t('knowledgeBase.dataset')}
      </Typography.Title> */}
      <div className='rb:flex rb:items-center rb:gap-2 rb:mb-4 rb:cursor-pointer' onClick={handleBack}>
          <img src={exitIcon} alt='exit' className='rb:w-4 rb:h-4' />
          <span className='rb:text-gray-500 rb:text-sm'>{t('common.exit')}</span>
      </div>
      {source !== 'csv' && <div className='rb:px-24 rb:py-5  rb:bg-white rb:rounded-xl'>
          <Steps current={current} items={steps} className="custom-steps" />
      </div> } 
      <div className='rb:bg-white rb:rounded-xl rb:flex-1 rb:mt-3'>

        {current === 0 && (
          <div className='rb:flex rb:w-full rb:p-6'>
              {source && (source === 'local' || source === 'csv') && (
                  <UploadFiles 
                    ref={uploadRef}
                    isCanDrag={true} 
                    fileSize={100} 
                    multiple={source !== 'csv'} 
                    maxCount={source === 'csv' ? 1 : 99}
                    fileType={source === 'csv' ? csvFileType : fileType} 
                    customRequest={handleUpload}
                    onChange={(fileList) => {
                      console.log('File list changed:', fileList);
                    }}
                    onRemove={async (file) => {
                        // 如果文件正在上传，取消上传
                        const fileUid = file.uid;
                        const abortController = abortControllersRef.current.get(fileUid);
                        if (abortController) {
                          abortController.abort();
                          abortControllersRef.current.delete(fileUid);
                          console.log('Upload cancelled:', (file as any).name);
                          // 取消上传后直接返回 true，允许移除文件
                          return true;
                        }
                        
                        // Only delete server file when file upload was successful (has response.id)
                        if (file.response?.id) {
                          try {
                            await deleteDocument(file.response.id);
                            setRechunkFileIds(prev => prev.filter(id => id !== file.response.id));
                            console.log('Server file deleted:', file.response.id);
                            return true;
                          } catch (error) {
                            console.error('Failed to delete file:', error);
                            messageApi.error(t('common.deleteFailed') || 'Failed to delete file');
                            return false; // Don't remove file when deletion fails
                          }
                        }
                        
                        // Also allow removal in other cases (such as failed uploads)
                        return true;
                      }} />
              )}
              {source && source === 'link' && (
                  <div className='rb:flex rb:w-full rb:flex-col rb:mt-10 rb:px-40'>

                    <div className='rb:text-sm rb:font-medium rb:text-gray-800 rb:mb-3'>
                        {t('knowledgeBase.webLink')}
                    </div>
                    <TextArea  rows={6} placeholder={t('knowledgeBase.webLinkPlaceholder')} />
                    <div className='rb:text-sm rb:text-gray-500 rb:mt-3'>
                        {t('knowledgeBase.webLinkDesc',{count: 5})}
                    </div>
                    <div className='rb:text-sm rb:font-medium rb:text-gray-800 rb:mt-10 rb:mb-3'>
                        {t('knowledgeBase.selectorTutorial')}
                    </div>
                    <Input className='rb:w-full' placeholder={t('knowledgeBase.webLinkPlaceholder')}/>
                </div>
            )}
            {source && source === 'text' && (
                <div className='rb:flex rb:w-full rb:flex-col rb:mt-10 rb:px-20'>
                    <Form 
                      form={form} 
                      layout="vertical"
                      onValuesChange={() => {
                        // 检查表单字段是否都已填写
                        const values = form.getFieldsValue();
                        const isValid = !!(values.title?.trim() && values.content?.trim());
                        setTextFormValid(isValid);
                      }}
                    >
                        <Form.Item
                          name="title"
                          label={t('knowledgeBase.title')}
                          rules={[{ required: true, message: t('knowledgeBase.pleaseEnterTitle') }]}
                        >
                          <Input placeholder={t('knowledgeBase.pleaseEnterTitle')} />
                        </Form.Item>

                        <Form.Item
                          name="content"
                          label={t('knowledgeBase.customContent')}
                          rules={[{ required: true, message: t('knowledgeBase.pleaseEnterContent') }]}
                        >
                          <Input.TextArea
                            placeholder={t('knowledgeBase.pleaseEnterContent')}
                            rows={8}
                            showCount
                            maxLength={5000}
                          />
                        </Form.Item>
                      </Form>
                    {/* <div className='rb:text-sm rb:font-medium rb:text-gray-800 rb:mb-3'>
                        {t('knowledgeBase.customText')}
                    </div>
                    <Input className='rb:w-full' placeholder={t('knowledgeBase.webLinkPlaceholder')}/>
                    <div className='rb:text-sm rb:font-medium rb:text-gray-800 rb:mt-10 rb:mb-3'>
                        {t('knowledgeBase.customContent')}
                    </div>
                    <TextArea  rows={6} placeholder={t('knowledgeBase.webLinkPlaceholder')} /> */}
                </div>
            )}
        </div>
        )}

        {current === 1 && (
          <div className='rb:flex rb:flex-col rb:mt-10 rb:px-40'>
              {rechunkFileIds.length > 0 && (
                <div className='rb:bg-[#F0F3F8] rb:border rb:border-[#DFE4ED] rb:rounded-[8px] rb:px-3 rb:py-2 rb:mb-4 rb:text-xs rb:text-gray-600 rb:flex rb:items-center rb:flex-wrap rb:gap-2'>
                    <span className='rb:text-gray-700 rb:font-medium'>{t('knowledgeBase.rechunking')}:</span>
                    {rechunkFileIds.map((id) => (
                      <span key={id} className='rb:px-2 rb:py-0.5 rb:bg-white rb:border rb:border-[#DFE4ED] rb:rounded'>{id}</span>
                    ))}
                </div>
              )}
              <div className='rb:text-base rb:font-medium rb:text-gray-800 rb:mt-4'>
                  {t('knowledgeBase.fileParsingSettings')}
              </div>
              <div className='rb:mt-4'>
                <div 
                  className={`rb:flex rb:items-center rb:justify-between rb:w-full rb:border rb:rounded-xl rb:p-4 rb:cursor-pointer ${
                  pdfEnhancementEnabled ? 'rb:border-[#171719] rb:bg-[#FAFAFA]' : 'rb-border'
                  }`}
                  // onClick={() => setPdfEnhancementEnabled(!pdfEnhancementEnabled)}
                >
                  <Checkbox 
                    checked={pdfEnhancementEnabled}
                    onChange={(e) => setPdfEnhancementEnabled(e.target.checked)}
                    className='rb:mr-3'
                  >
                    <span className='rb:text-base rb:font-medium rb:text-gray-800 rb:pl-[22px]'>
                      {t('knowledgeBase.pdfEnhancementAnalysis')}
                    </span>
                  </Checkbox>
                  {pdfEnhancementEnabled && (
                    <div className='rb:ml-10'>
                      <Select
                        value={pdfEnhancementMethod}
                        onChange={(value) => setPdfEnhancementMethod(value)}
                        className='rb:w-[300px]'
                        options={[
                          { value: 'deepdoc', label: 'DeepDoc' },
                          { value: 'mineru', label: 'MinerU' },
                          { value: 'textln', label: 'TextLN' }
                        ]}
                      />
                    </div>
                  )}
                </div>
                
              </div>
              <div className='rb:text-base rb:font-medium rb:text-gray-800 rb:mt-6'>
                  {t('knowledgeBase.dataProcessingSettings')}
              </div>
              <div className='rb:font-medium rb:text-gray-500 rb:mt-4 rb:mb-3'>
                  {t('knowledgeBase.processingMethod')}
              </div>
              <Radio.Group
                  value={processingMethod}
                  onChange={(e) => setProcessingMethod(e.target.value)}
                  style={style}
              >
                  <Radio value='directBlock' style={getActiveRadioStyle(processingMethod === 'directBlock')}>
                      <Flex gap='small' vertical>
                          <span className='rb:text-base rb:font-medium rb:text-gray-800'>
                              {t('knowledgeBase.directBlock')}
                          </span>
                      </Flex>
                  </Radio>
                  <Radio value='qaExtract' style={getActiveRadioStyle(processingMethod === 'qaExtract')}>
                      <Flex gap='small' vertical>
                          <span className='rb:text-base rb:font-medium rb:text-gray-800'>
                          {t('knowledgeBase.qaExtract')}
                          </span>
                      </Flex>
                  </Radio>
              </Radio.Group>
              <div className='rb:font-medium rb:text-gray-500 rb:mt-4 rb:mb-3'>
                  {t('knowledgeBase.parameterSettings')}
              </div>
              <Radio.Group
                  value={parameterSettings}
                  onChange={(e) => setParameterSettings(e.target.value)}
                  style={style}
              >
                  <Radio value='defaultSettings' style={getActiveRadioStyle(parameterSettings === 'defaultSettings')}>
                      <Flex gap='small' vertical>
                          <span className='rb:text-base rb:font-medium rb:text-gray-800'>
                              {t('knowledgeBase.default')}
                          </span>
                          <span className='rb:text-3 rb:text-gray-500'>{t('knowledgeBase.defaultSettings')}</span>
                      </Flex>
                  </Radio>
                  <Radio value='customSettings' style={getActiveRadioStyle(parameterSettings === 'customSettings')}>
                      <Flex gap='small' vertical>
                          <span className='rb:text-base rb:font-medium rb:text-gray-800'>
                              {t('knowledgeBase.customize')}
                          </span>
                          <span className='rb:text-3 rb:text-gray-500'>{t('knowledgeBase.customSettings')}</span>
                      </Flex>
                  </Radio>
              </Radio.Group>
              {parameterSettings === 'customSettings' && (<>
                <div className='rb:grid rb:grid-cols-2 rb:mt-5 rb-border rb:rounded-xl rb:px-6 rb:py-4 rb:gap-10'> 
                  <div>
                    <div className='rb:w-full rb:text-[#5B6167] rb:leading-5 rb:mb-2'>
                      {t('knowledgeBase.delimiter')}
                    </div>
                    <DelimiterSelector value={delimiter} onChange={setDelimiter} />
                  </div>
                  <SliderInput label={t('knowledgeBase.suggestedBlockSize')} max={1024} min={1} step={1} value={blockSize} onChange={handleChange} />
                </div>
                <div>
                  <div className='rb:w-full rb:text-[#5B6167] rb:leading-5 rb:mb-2 rb:mt-4'>
                    {t('knowledgeBase.qaPrompt')}
                  </div>
                  <Input.TextArea value={qaPrompt} rows={6} onChange={(e) => setQaPrompt(e.target.value)} />
                </div>
              </>)}
          </div>
        )}

        {/* 暂时隐藏第三步：数据预览 */}
        {/* {current === stepIndexMap.dataPreview && (
          <div className='rb:grid rb:grid-cols-2 rb:rounded-xl rb:border rb:border-[#DFE4ED] rb:h-[calc(100%-160px)] rb:bg-[#FBFDFF] rb:mt-4'>
              <div className='rb:border-r rb:h-full rb:overflow-hidden rb:border-[#DFE4ED]'>
                  <div className='rb:h-11 rb:w-full rb:text-sm rb:font-medium rb:text-gray-800 rb:px-4 rb:py-3 rb:border-b rb:border-[#DFE4ED]'>
                      {t('knowledgeBase.fileList')}
                  </div>
                  <div className='rb:flex rb:flex-col rb:h-[calc(100%-44px)] rb:overflow-y-auto'>
                      {data.map((item, index) => (
                          <div key={index} className={`rb:h-11 rb:w-full rb:text-sm rb:text-gray-800 rb:px-4 rb:py-3  rb:hover:text-[#155EEF] rb:cursor-pointer ${curSelectedFileId === index ? styles.textBg + ' ' + styles.active : ''}`}
                              onClick={() => handlePreview(item, index)}>
                              {item.file_name}
                          </div>
                          ))
                      }
                      
                  </div>
              </div>
              <div className='rb:h-full rb:overflow-hidden'>
                  <div className='rb:flex rb:items-center rb:justify-between rb:h-11 rb:w-full rb:text-sm rb:font-medium rb:text-gray-800 rb:px-4 rb:py-3 rb:border-b rb:border-[#DFE4ED]'>
                      {t('knowledgeBase.dataPreview')}
                      <span className='rb:text-sm rb:text-gray-500'>{t('knowledgeBase.maxPreviewChunks', {count: total, max: chunkData.length})}</span>
                  </div>
                  <Spin spinning={previewLoading}>
                      <div className='rb:flex rb:flex-col rb:h-[calc(100%-44px)] rb:overflow-y-auto'>
                          {chunkData.length > 0 ? (
                              chunkData.map((item, index) => (
                                  <div key={index} className='rb:text-sm rb:text-gray-800 rb:px-4 rb:py-3'
                                      dangerouslySetInnerHTML={{ __html: item.page_content }}
                                  />
                              ))
                          ) : (
                              <NoData title={t('knowledgeBase.noChunksToPreview')} 
                                  subTitle={t('knowledgeBase.clickToPreview')}
                                  image={noDataIcon}
                              />
                          )}
                      </div>
                  </Spin>
              </div>
          </div>
        )} */}

        {current === 2 && (
          // <Spin spinning={pollingLoading} tip={t('knowledgeBase.processingDocuments') || '正在处理文档...'}>
            <div className='rb:text-sm rb:text-gray-500 rb:mt-4 rb:h-[calc(100%-160px)] rb:overflow-y-auto rb:px-6 rb:py-6'>
              {rechunkFileIds.length > 0 ? (
                <Table
                  ref={tableRef}
                  apiUrl={`/documents/${knowledgeBaseId}/documents`}
                  apiParams={{       
                      document_ids: rechunkFileIds.join(','),
                  }}
                  columns={columns}
                  rowKey="id"
                />
              ) : (
                <Table
                  ref={tableRef}
                  columns={columns}
                  rowKey="id"
                  initialData={[]}
                />
              )}
            </div>
          // </Spin>
        )}
        <div className={`rb:flex rb:p-6 rb:gap-3 rb:mt-6 ${current === 1 || (source == 'link' && current === 0) || (source == 'text' && current === 0) ? 'rb:pl-28 rb:mt-10' : ''}`}>
          {current !== 0 && (
              <Button onClick={handlePrev} disabled={current === 0 || pollingLoading}>
              {t('common.previous') || 'Prev'}
              </Button>
          )}
          {source !== 'csv' && <Button 
            type='primary' 
            onClick={current === 2 ? handleStartUpload : handleNext}
            disabled={
              pollingLoading || 
              (current === 0 && source === 'local' && rechunkFileIds.length === 0) ||
              (current === 0 && source === 'text' && !textFormValid)
            }
          >
            {current === 2 ? t('knowledgeBase.startUploading') || 'Start Upload' : t('common.next') || 'Next'}
          </Button>}
        </div>
      </div>
    </div>
  </>);
};

export default CreateDataset;