// 使用示例 - App.tsx

import { Modal, message, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import RenameRule, {
  type FileItem,
  type RenameResult,
} from '@/components/RenameRule';
import { updateSamples } from '@/services/ai/sample';

const TagManager: React.FC<{
  visible: boolean;
  files: FileItem[];
  onCancel?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  onOk?: () => void;
}> = ({ visible, files: beforeFiles, onCancel, onOk }) => {
  const [files, setFiles] = useState<FileItem[]>(beforeFiles);
  useEffect(() => {
    setFiles(beforeFiles);
  }, [beforeFiles]);

  const [previewResults, setPreviewResults] = useState<RenameResult[]>([]);
  const [loading, setLoading] = useState(false);

  // 预览回调o+
  const handlePreview = (results: RenameResult[]) => {
    setPreviewResults(results);
  };

  const handleOk = async () => {
    try {
      setLoading(true);
      const results = previewResults.map((result) => ({
        id: result.id,
        sampleName: `${result.newName}`,
      }));
      await updateSamples(results);
      onOk?.();
      message.success('重命名成功');
    } finally {
      setLoading(false);
    }
  };

  // // 重命名回调
  // const handleRename = async (results: RenameResult[]) => {
  //   setLoading(true);
  //   try {
  //     console.log("执行预览:", results);
  //     // 模拟API调用
  //     await new Promise((resolve) => setTimeout(resolve, 1000));
  //     message.success(`成功重命名 ${results.length} 个文件`);
  //   } catch (error) {
  //     message.error("重命名失败");
  //   } finally {
  //     setLoading(false);
  //   }
  // };

  return (
    <Modal
      width={800}
      onCancel={onCancel}
      onOk={handleOk}
      open={visible}
      title="重命名文件"
    >
      <div style={{ padding: '24px' }}>
        <Space direction="vertical" style={{ width: '100%' }} size="large">
          {/* 独立的重命名规则组件 */}
          <RenameRule
            files={files}
            onPreview={handlePreview}
            // onRename={handleRename}
            loading={loading}
          />
        </Space>
      </div>
    </Modal>
  );
};

export default TagManager;
