// RenameRule.tsx - 修复占位符替换顺序

import {
  DownOutlined,
  ExclamationCircleOutlined,
  QuestionCircleOutlined,
  UpOutlined,
} from '@ant-design/icons';
import {
  Alert,
  Button,
  Card,
  Input,
  InputNumber,
  Select,
  Space,
  Tooltip,
  Typography,
} from 'antd';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import './index.less';

const { Text } = Typography;
const { Option } = Select;

export interface FileItem {
  id: number;
  originalName: string;
}

export interface RenameRule {
  pattern: string;
  startNumber: number;
  numberDirection: 'up' | 'down';
  matchPattern: string;
  useMatch: boolean;
  numberPadding: number;
}

export interface RenameResult extends FileItem {
  newName: string;
  isChanged: boolean;
  isMatched: boolean;
}

interface RenameRuleProps {
  files: FileItem[];
  onPreview?: (results: RenameResult[]) => void;
  onRename?: (results: RenameResult[]) => void;
  loading?: boolean;
  className?: string;
}

// 占位符配置
// const PLACEHOLDERS = [
//   { key: "$n", desc: "数字序号(不补零)", example: "1, 2, 3..." },
//   { key: "$nn", desc: "数字序号(2位补零)", example: "01, 02, 03..." },
//   { key: "$nnn", desc: "数字序号(3位补零)", example: "001, 002, 003..." },
//   { key: "$nnnn", desc: "数字序号(4位补零)", example: "0001, 0002, 0003..." },
//   { key: "$name", desc: "原文件名", example: "photo1" },
//   { key: "$ext", desc: "扩展名(不含点)", example: "jpg" },
//   { key: "$EXT", desc: "扩展名(大写)", example: "JPG" },
// ];

const RenameRuleComponent: React.FC<RenameRuleProps> = ({
  files,
  onPreview,
  className,
}) => {
  const [rule, setRule] = useState<RenameRule>({
    pattern: '',
    startNumber: 1,
    numberDirection: 'up',
    matchPattern: '',
    useMatch: false,
    numberPadding: 2,
  });

  const [matchError, setMatchError] = useState<string>('');

  // 初始化时自动设置模式
  useEffect(() => {
    console.log(files);
    if (files.length > 0 && !rule.pattern) {
      setRule((prev) => ({ ...prev, pattern: '$name$nn' }));
    }
  }, [files, rule.pattern]);

  // 安全的正则表达式匹配
  const isFileMatched = useCallback(
    (file: FileItem, pattern: string): boolean => {
      if (!pattern.trim()) return true;

      try {
        const regex = new RegExp(pattern, 'i');
        const fullFileName = file.originalName;

        return (
          regex.test(file.originalName) ||
          // regex.test(file.extension) ||
          // regex.test(file.extension?.replace(".", "")) ||
          regex.test(fullFileName)
        );
      } catch (error) {
        console.warn('正则表达式错误:', error);
        setMatchError(
          `正则表达式错误: ${
            error instanceof Error ? error.message : '未知错误'
          }`,
        );
        return false;
      }
    },
    [],
  );

  // 修复的占位符替换函数
  const replacePlaceholders = useCallback(
    (pattern: string, file: FileItem, fileIndex: number) => {
      let result = pattern;

      // 计算序号
      let number: number;
      if (rule.numberDirection === 'up') {
        number = rule.startNumber + fileIndex;
      } else {
        number = rule.startNumber - fileIndex;
      }

      // 先用临时标记替换非数字占位符
      const tempMarkers = {
        name: '___TEMP_NAME___',
        ext: '___TEMP_EXT___',
        EXT: '___TEMP_EXT_UPPER___',
      };

      // 第一步：替换非数字占位符为临时标记
      result = result.replace(/\$name/g, tempMarkers.name);
      result = result.replace(/\$EXT/g, tempMarkers.EXT);
      result = result.replace(/\$ext/g, tempMarkers.ext);

      // 第二步：替换数字占位符（按长度从长到短，避免冲突）
      result = result.replace(/\$nnnn/g, number.toString().padStart(4, '0'));
      result = result.replace(/\$nnn/g, number.toString().padStart(3, '0'));
      result = result.replace(/\$nn/g, number.toString().padStart(2, '0'));
      result = result.replace(/\$n/g, number.toString());

      // 第三步：将临时标记替换为实际值
      result = result.replace(
        new RegExp(tempMarkers.name, 'g'),
        file.originalName,
      );
      // result = result.replace(
      //   new RegExp(tempMarkers.ext, "g"),
      //   // file.extension.replace(".", "")
      // );
      // result = result.replace(
      //   new RegExp(tempMarkers.EXT, "g"),
      //   file.extension.replace(".", "").toUpperCase()
      // );

      return result;
    },
    [rule.startNumber, rule.numberDirection],
  );

  // 使用 useMemo 缓存计算结果
  const previewResults = useMemo(() => {
    setMatchError('');

    const matchedFiles: FileItem[] = [];
    const allResults: RenameResult[] = [];

    files.forEach((file) => {
      const isMatched = rule.useMatch
        ? isFileMatched(file, rule.matchPattern)
        : true;

      if (isMatched) {
        matchedFiles.push(file);
      }
    });

    files.forEach((file) => {
      const isMatched = rule.useMatch
        ? isFileMatched(file, rule.matchPattern)
        : true;

      if (!isMatched || !rule.pattern) {
        allResults.push({
          ...file,
          newName: file.originalName,
          isChanged: false,
          isMatched,
        });
        return;
      }

      const matchedIndex = matchedFiles.findIndex((f) => f.id === file.id);
      const newName = replacePlaceholders(rule.pattern, file, matchedIndex);
      const isChanged = newName !== file.originalName;

      allResults.push({
        ...file,
        newName,
        isChanged,
        isMatched,
      });
    });

    return allResults;
  }, [files, rule, isFileMatched, replacePlaceholders]);

  // 调用预览回调
  useEffect(() => {
    if (onPreview) {
      onPreview(previewResults);
    }
  }, [previewResults]);

  // // 重置规则
  // const handleReset = useCallback(() => {
  //   setRule({
  //     pattern: "$name$nn",
  //     startNumber: 1,
  //     numberDirection: "up",
  //     matchPattern: "",
  //     useMatch: false,
  //     numberPadding: 2,
  //   });
  //   setMatchError("");
  // }, []);

  // 规则更新处理函数
  const updateRule = useCallback((updates: Partial<RenameRule>) => {
    setRule((prev) => ({ ...prev, ...updates }));
    if (updates.matchPattern !== undefined) {
      setMatchError('');
    }
  }, []);

  // // 插入占位符
  // const insertPlaceholder = useCallback(
  //   (placeholder: string) => {
  //     const input = document.querySelector(
  //       ".pattern-input"
  //     ) as HTMLInputElement;
  //     if (input) {
  //       const start = input.selectionStart || 0;
  //       const end = input.selectionEnd || 0;
  //       const currentValue = rule.pattern;
  //       const newValue =
  //         currentValue.slice(0, start) + placeholder + currentValue.slice(end);
  //       updateRule({ pattern: newValue });

  //       setTimeout(() => {
  //         input.focus();
  //         input.setSelectionRange(
  //           start + placeholder.length,
  //           start + placeholder.length
  //         );
  //       }, 0);
  //     }
  //   },
  //   [rule.pattern, updateRule]
  // );

  // // 递增起始编号
  // const incrementStartNumber = useCallback(() => {
  //   updateRule({ startNumber: rule.startNumber + 1 });
  // }, [rule.startNumber, updateRule]);

  // // 递减起始编号
  // const decrementStartNumber = useCallback(() => {
  //   updateRule({ startNumber: Math.max(0, rule.startNumber - 1) });
  // }, [rule.startNumber, updateRule]);

  // 快速设置常用模式
  const setQuickPattern = useCallback(
    (pattern: string) => {
      updateRule({ pattern });
    },
    [updateRule],
  );
  return (
    <Card className={`rename-rule-card ${className || ''}`}>
      <div className="rename-rule-card-preview">
        <div className="left">
          <Text strong style={{ marginBottom: 8, display: 'block' }}>
            预览:
          </Text>
          {previewResults.map((item) => (
            <p key={item.id}>{`${item.newName}`}</p>
          ))}
        </div>
        <Space direction="vertical" style={{ width: '100%' }} size="large">
          {/* 错误提示 */}
          {matchError && (
            <Alert
              message="匹配模式错误"
              description={matchError}
              type="error"
              icon={<ExclamationCircleOutlined />}
              closable
              onClose={() => setMatchError('')}
            />
          )}

          <Space wrap>
            <Text strong>快速模式:</Text>
            <Button
              size="small"
              onClick={() => setQuickPattern('$name$nn')}
              type={rule.pattern === '$name$nn' ? 'primary' : 'default'}
            >
              原名+序号
            </Button>
            <Button
              size="small"
              onClick={() => setQuickPattern('$nn_$name')}
              type={rule.pattern === '$nn_$name' ? 'primary' : 'default'}
            >
              序号+原名
            </Button>
            <Button
              size="small"
              onClick={() => setQuickPattern('新文件$nnn')}
              type={rule.pattern === '新文件$nnn' ? 'primary' : 'default'}
            >
              新文件+序号
            </Button>
            <Button
              size="small"
              onClick={() => setQuickPattern('$name_副本$nn')}
              type={rule.pattern === '$name_副本$nn' ? 'primary' : 'default'}
            >
              原名+副本
            </Button>
          </Space>

          {/* 命名模式 */}

          <Space>
            <Input
              className="pattern-input"
              placeholder="例如: $name$nn 或 新文件$nnn"
              value={rule.pattern}
              allowClear
              onChange={(e) => updateRule({ pattern: e.target.value })}
              suffix={
                <Tooltip title="使用占位符创建命名规则">
                  <QuestionCircleOutlined style={{ color: '#bfbfbf' }} />
                </Tooltip>
              }
            />
          </Space>
          <Input
            placeholder="例如: photo (匹配包含photo的文件) 或 \.jpg$ (匹配jpg文件)"
            value={rule.matchPattern}
            allowClear
            onChange={(e) => updateRule({ matchPattern: e.target.value })}
          />
          <Space>
            <Text strong>起始编号:</Text>
            <InputNumber
              min={0}
              max={9999}
              value={rule.startNumber}
              onChange={(value) => updateRule({ startNumber: value || 1 })}
              style={{ width: '60%', textAlign: 'center' }}
              controls={true}
            />
            <Select
              value={rule.numberDirection}
              onChange={(value) => updateRule({ numberDirection: value })}
              style={{ width: '100%' }}
            >
              <Option value="up">
                <Space>
                  <UpOutlined />
                  递增
                </Space>
              </Option>
              <Option value="down">
                <Space>
                  <DownOutlined />
                  递减
                </Space>
              </Option>
            </Select>
          </Space>
        </Space>
      </div>
    </Card>
  );
};

export default React.memo(RenameRuleComponent);