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

interface LoadingBarProps {
  isVisible: boolean;
  isComplete?: boolean;
  height?: number;
  className?: string;
}

// 加载进度条状态管理
let showLoadingBar: (show: boolean, completeFirst?: boolean) => void = () => {};
let loadingBarVisible = false;

export function LoadingBar({ 
  isVisible,
  isComplete = false,
  height = 2,
  className = ''
}: LoadingBarProps) {
  // 当组件挂载时，进行进度的随机增长动画
  const [progress, setProgress] = useState(0);
  
  // 处理完成状态
  useEffect(() => {
    if (isComplete) {
      // 立即将进度设为100%
      setProgress(100);
    }
  }, [isComplete]);
  
  useEffect(() => {
    let interval: NodeJS.Timeout;
    
    if (isVisible && progress < 90) {
      // 随机增长进度，模拟加载 - 加速更新频率
      interval = setInterval(() => {
        setProgress(prev => {
          // 进度越大，增长越慢
          const increment = Math.random() * (20 - prev / 8);
          return Math.min(prev + increment, 90);
        });
      }, 300); // 更高频率的更新
    } else if (!isVisible) {
      // 隐藏时重置进度
      setProgress(0);
    }
    
    return () => {
      if (interval) clearInterval(interval);
    };
  }, [isVisible, progress]);
  
  // 当isVisible变化时，立即触发显示或隐藏效果
  useEffect(() => {
    if (isVisible) {
      setProgress(20); // 立刻显示更多进度
    } else if (progress > 0) {
      // 如果已经有进度了，先快速完成进度，然后再隐藏
      setProgress(100);
      const timeout = setTimeout(() => {
        setProgress(0);
      }, 300); // 更快的隐藏
      return () => clearTimeout(timeout);
    }
  }, [isVisible]);
  
  if (!isVisible && progress === 0) return null;
  
  return (
    <div className="fixed top-0 left-0 right-0 z-[9999]">
      <div
        className={`${className} animate-pulse`}
        style={{ 
          height: `${height}px`, 
          width: `${progress}%`,
          opacity: progress > 0 ? 1 : 0,
          transition: 'width 0.3s ease-out, opacity 0.2s ease-in-out',
          background: 'linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 50%, var(--color-primary) 100%)',
          boxShadow: '0 0 10px rgba(0, 104, 74, 0.7)'
        }}
      />
    </div>
  );
}

// 创建一个全局加载进度条容器
function LoadingBarContainer() {
  const [visible, setVisible] = useState(loadingBarVisible);
  const [completeBeforeHide, setCompleteBeforeHide] = useState(false);
  
  // 保存引用以便外部调用
  useEffect(() => {
    showLoadingBar = (show: boolean, completeFirst: boolean = false) => {
      if (!show && completeFirst) {
        // 当隐藏时，先触发完成动画，再隐藏
        setCompleteBeforeHide(true);
        // 延迟隐藏，以让完成动画显示出来
        setTimeout(() => {
          loadingBarVisible = false;
          setVisible(false);
          setCompleteBeforeHide(false);
        }, 500);
      } else {
        loadingBarVisible = show;
        setVisible(show);
        if (!show) {
          setCompleteBeforeHide(false);
        }
      }
    };
  }, []);
  
  // 使用Portal确保加载进度条总是渲染在body末尾
  return typeof window !== 'undefined' 
    ? createPortal(
        <LoadingBar isVisible={visible} isComplete={completeBeforeHide} />,
        document.body
      )
    : null;
}

// 导出全局控制函数
export const loadingBarService = {
  show: () => showLoadingBar(true),
  hide: () => showLoadingBar(false, true),
  toggle: () => showLoadingBar(!loadingBarVisible),
  isVisible: () => loadingBarVisible
};

export default LoadingBarContainer;