import { useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';

interface GeneratingComponentProps {
  task: any;
}

const GeneratingComponent: React.FC<GeneratingComponentProps> = ({ task }) => {
  const navigate = useNavigate();
  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 = () => {
    navigate(-1);
  };

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

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

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

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

export default GeneratingComponent;
