import { Image, View,Text } from '@tarojs/components';
import { navigateBack } from '@tarojs/taro';
import { useEffect, useState } from 'react';

interface GeneratingComponentProps {
  task: any;
}

const GeneratingComponent: React.FC<GeneratingComponentProps> = ({ task }) => {
  const [progress, setProgress] = useState(0);

  // 根据任务创建时间和类型计算真实进度
  useEffect(() => {
    let interval: NodeJS.Timeout | null = null;

    const calculateProgress = () => {
      if (!task?.createdAt) return 0;

      const createdAt = new Date(task.createdAt).getTime();
      const now = Date.now();
      const elapsedMinutes = (now - createdAt) / (1000 * 60);

      // 根据任务类型确定预计时间
      const isVideo = task.taskType === 'video' || task.outputType === 'video' || task.type === 'video';
      const estimatedTime = isVideo ? 2.5 : 1; // 视频3分钟，图片1分钟

      // 计算进度百分比，最大95%
      const calculatedProgress = Math.min((elapsedMinutes / estimatedTime) * 100, 95);
      return Math.max(calculatedProgress, 0);
    };

    // 立即计算一次
    setProgress(calculateProgress());

    // 每秒更新一次进度
    interval = setInterval(() => {
      setProgress(calculateProgress());
    }, 1000);

    return () => {
      if (interval) {
        clearInterval(interval);
      }
    };
  }, [task]);

  const handleLaterView = () => {
    navigateBack();
  };

  return (
    <View className="result-page generating">
      <View className="generating-content">
        {/* 进度方框 */}
        <View className="progress-container">
          <View className="progress-circle">
            <View
              className="progress-fill"
              style={{
                background: `conic-gradient(#ff9500 ${progress * 3.6}deg, transparent 0deg)`,
              }}
            />
            <View className="progress-inner">
              {/* 预览图片或占位符 */}
              {task?.inputImageUrl ? (
                <Image className="preview-image" src={task.inputImageUrl} mode="aspectFill" />
              ) : (
                <View className="preview-placeholder">
                  <View className="placeholder-icon">🎨</View>
                </View>
              )}
              {/* 图片遮罩层 */}
              <View className="progress-overlay" />
              {/* 光扫描动画 */}
              <View className="scan-light" />
              <View className="scan-progress" >{Math.round(progress)}%</View>
            </View>
          </View>
        </View>

        {/* 状态文本 */}
        <View className="status-section">
          <View className="status-title">
            <Image className="status-icon-image" src="/assets/icons/funnel.png" />
            <Text className="status-title-text">生成中...</Text>
          </View>
          <View className="status-subtitle">内容生成中，请耐心等待</View>
        </View>

        {/* 操作按钮 */}
        <View className="generating-actions">
          <View className="later-btn" onClick={handleLaterView}>
            稍后查看
          </View>
        </View>

        {/* 提示信息 */}
        <View className="tips-section">
          <View className="tips-label">· T I P S ·</View>
          <View className="tips-text">退出本页面不影响生成进度</View>
        </View>
      </View>
    </View>
  );
};

export default GeneratingComponent;