/**
 * 全局进度弹窗组件
 * =================
 *
 * running 状态：progress 有值时显示确定百分比进度条，否则显示不确定条纹动画
 * success / error 状态显示结果图标
 */

import { useCallback, useEffect, useState } from 'react';
import { useProgressStore } from '../../store/progressStore';
import './ProgressModal.css';

export default function ProgressModal() {
  const { visible, title, status, phase, progress, errorMessage, pointsConsumed, hide } = useProgressStore();

  const isError = phase === 'error';
  const isSuccess = phase === 'success';
  const isRunning = phase === 'running';

  // 成功按钮延迟出现，避免完成瞬间底部突变
  const [showButton, setShowButton] = useState(false);
  useEffect(() => {
    if (!isSuccess) {
      return;
    }
    const timer = setTimeout(() => setShowButton(true), 100);
    return () => {
      clearTimeout(timer);
      setShowButton(false);
    };
  }, [isSuccess]);

  const handleClose = useCallback(() => {
    if (phase === 'success' || phase === 'error') {
      hide();
    }
  }, [phase, hide]);

  const handleOverlayClick = useCallback(() => {
    if (phase === 'running') {return;}
    handleClose();
  }, [phase, handleClose]);

  if (!visible) {
    return null;
  }

  return (
    <div
      className={`progress-modal-overlay ${isRunning ? 'running' : ''}`}
      onClick={handleOverlayClick}
    >
      <div className="progress-modal-container" onClick={(e) => e.stopPropagation()}>
        {/* 头部标题 */}
        <div className="progress-modal-header">
          {(title.includes('形象') || title.includes('克隆')) ? (
            <div className="progress-modal-icon-wrapper">
              <svg className="progress-modal-icon-animated" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                <circle cx="12" cy="7" r="4" />
              </svg>
            </div>
          ) : (title.includes('图片') || title.includes('封面')) ? (
            <div className="progress-modal-icon-wrapper">
              <svg className="progress-modal-icon-animated" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                <circle cx="8.5" cy="8.5" r="1.5" />
                <polyline points="21 15 16 10 5 21" />
              </svg>
            </div>
          ) : (title.includes('视频') || title.includes('合成')) ? (
            <div className="progress-modal-icon-wrapper">
              <svg className="progress-modal-icon-animated" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
                <line x1="8" y1="21" x2="16" y2="21" />
                <line x1="12" y1="17" x2="12" y2="21" />
              </svg>
            </div>
          ) : (title.includes('字幕') || title.includes('压制')) ? (
            <div className="progress-modal-icon-wrapper">
              <svg className="progress-modal-icon-animated" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="3" y="4" width="18" height="12" rx="2" ry="2" />
                <line x1="7" y1="9" x2="17" y2="9" />
                <line x1="7" y1="13" x2="12" y2="13" />
                <path d="M8 21h8M12 17v4" />
              </svg>
            </div>
          ) : (title.includes('脚本') || title.includes('文案')) ? (
            <div className="progress-modal-icon-wrapper">
              <svg className="progress-modal-icon-animated" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                <polyline points="14 2 14 8 20 8" />
                <line x1="16" y1="13" x2="8" y2="13" />
                <line x1="16" y1="17" x2="8" y2="17" />
                <polyline points="10 9 9 9 8 9" />
              </svg>
            </div>
          ) : null}
          <h3 className="progress-modal-title">{title}</h3>
        </div>

        {/* 主体内容 */}
        <div className="progress-modal-body">
          {isError ? (
            <div className="progress-modal-error-content">
              <div className="progress-modal-error-icon">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <circle cx="12" cy="12" r="10" />
                  <line x1="15" y1="9" x2="9" y2="15" />
                  <line x1="9" y1="9" x2="15" y2="15" />
                </svg>
              </div>
              <p className="progress-modal-error-message">{errorMessage || '发生错误'}</p>
            </div>
          ) : isSuccess ? (
            <div className="progress-modal-success-content">
              <div className="progress-modal-success-icon">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2">
                  <path d="M20 6L9 17l-5-5" />
                </svg>
              </div>
              <p className="progress-modal-success-message">
                {status || '生成完成'}
                {typeof pointsConsumed === 'number' && (
                  <>
                    ，本次消耗 <span style={{ color: '#ef4444', fontWeight: 600 }}>{pointsConsumed}</span> 积分
                  </>
                )}
              </p>
            </div>
          ) : (
            <>
              {/* 确定/不确定进度条 */}
              <div className="progress-modal-bar-container">
                {progress !== undefined && progress >= 0 ? (
                  <div
                    className="progress-modal-bar-fill"
                    style={{ width: `${progress}%`, transition: 'width 0.3s ease' }}
                  />
                ) : (
                  <div className="progress-modal-bar-indeterminate" />
                )}
              </div>
              <div className="progress-modal-info">
                <span className="progress-modal-status">
                  {status || (progress !== undefined ? `${Math.round(progress)}%` : '')}
                </span>
              </div>
            </>
          )}
        </div>

        {/* 底部操作区 */}
        <div className="progress-modal-footer">
          {isSuccess && showButton ? (
            <button className="progress-modal-btn" onClick={handleClose}>
              确定
            </button>
          ) : isError ? (
            <button className="progress-modal-btn progress-modal-btn-error" onClick={handleClose}>
              关闭
            </button>
          ) : (
            <span className="progress-modal-hint">
              处理中，请勿退出应用
              <span className="progress-modal-loading-dots" />
            </span>
          )}
        </div>
      </div>
    </div>
  );
}
