'use client'

import { useState, useRef, useEffect } from 'react'

interface VideoPlayerModalProps {
  videoSrc: string
  onClose: () => void
}

export default function VideoPlayerModal({ videoSrc, onClose }: VideoPlayerModalProps) {
  const [isLoading, setIsLoading] = useState(true)
  const [isBuffering, setIsBuffering] = useState(false)
  const [loadProgress, setLoadProgress] = useState(0)
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentTime, setCurrentTime] = useState(0)
  const [duration, setDuration] = useState(0)
  const [volume, setVolume] = useState(1)
  const [isMuted, setIsMuted] = useState(false)
  const [showControls, setShowControls] = useState(true)
  const [videoAspectRatio, setVideoAspectRatio] = useState<number | null>(null)
  const [isHoveringProgress, setIsHoveringProgress] = useState(false)
  const [isDraggingProgress, setIsDraggingProgress] = useState(false)
  const [hoverTime, setHoverTime] = useState(0)
  const [hoverPosition, setHoverPosition] = useState(0)
  const videoRef = useRef<HTMLVideoElement>(null)
  const controlsTimeoutRef = useRef<NodeJS.Timeout | null>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const progressBarRef = useRef<HTMLDivElement>(null)

  // 格式化时间显示
  const formatTime = (seconds: number): string => {
    if (!isFinite(seconds) || isNaN(seconds)) return '0:00'
    const mins = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${mins}:${secs.toString().padStart(2, '0')}`
  }

  // 隐藏控制栏的定时器
  const resetControlsTimeout = () => {
    if (controlsTimeoutRef.current) {
      clearTimeout(controlsTimeoutRef.current)
    }
    setShowControls(true)
    if (isPlaying) {
      controlsTimeoutRef.current = setTimeout(() => {
        setShowControls(false)
      }, 3000)
    }
  }

  useEffect(() => {
    // 组件挂载时，视频开始加载
    setIsLoading(true)
    setCurrentTime(0)
    setDuration(0)
    setLoadProgress(0)
    
    // 立即开始加载视频（浏览器会利用预加载的缓存）
    if (videoRef.current && videoSrc) {
      videoRef.current.load()
    }
  }, [videoSrc])

  // 清理定时器和事件监听器
  useEffect(() => {
    return () => {
      // 清理控制栏定时器
      if (controlsTimeoutRef.current) {
        clearTimeout(controlsTimeoutRef.current)
        controlsTimeoutRef.current = null
      }
      
      // 清理视频引用，防止内存泄漏
      if (videoRef.current) {
        videoRef.current.pause()
        videoRef.current.src = ''
        videoRef.current.load()
      }
    }
  }, [])

  const handleLoadStart = () => {
    console.log('[VideoPlayer] 开始加载视频')
    setIsLoading(true)
    setLoadProgress(0)
  }

  const handleLoadedMetadata = () => {
    console.log('[VideoPlayer] 视频元数据加载完成')
    if (videoRef.current) {
      const video = videoRef.current
      setDuration(video.duration)
      // 计算视频宽高比
      if (video.videoWidth && video.videoHeight) {
        setVideoAspectRatio(video.videoWidth / video.videoHeight)
      }
    }
    setIsLoading(false)
  }

  const handleProgress = (e: React.SyntheticEvent<HTMLVideoElement>) => {
    const video = e.currentTarget
    if (video.buffered.length > 0 && video.duration > 0) {
      const bufferedEnd = video.buffered.end(video.buffered.length - 1)
      const progress = (bufferedEnd / video.duration) * 100
      setLoadProgress(progress)
    }
  }

  const handleTimeUpdate = () => {
    if (videoRef.current) {
      setCurrentTime(videoRef.current.currentTime)
    }
  }

  const handleCanPlay = () => {
    console.log('[VideoPlayer] 视频可以播放')
    setIsLoading(false)
    if (videoRef.current) {
      videoRef.current.play().catch(() => {})
    }
  }

  const handleCanPlayThrough = () => {
    console.log('[VideoPlayer] 视频可以流畅播放')
    setIsLoading(false)
    setIsBuffering(false)
  }

  const handleWaiting = () => {
    console.log('[VideoPlayer] 视频缓冲中...')
    setIsBuffering(true)
  }

  const handlePlaying = () => {
    console.log('[VideoPlayer] 视频开始播放')
    setIsPlaying(true)
    setIsBuffering(false)
  }

  const handlePause = () => {
    setIsPlaying(false)
    setShowControls(true)
  }

  const handleEnded = () => {
    setIsPlaying(false)
    setCurrentTime(0)
    if (videoRef.current) {
      videoRef.current.currentTime = 0
    }
  }

  const handleError = (e: React.SyntheticEvent<HTMLVideoElement>) => {
    console.error('[VideoPlayer] 视频加载错误:', e)
    setIsLoading(false)
  }

  // 播放/暂停切换
  const togglePlay = () => {
    if (videoRef.current) {
      if (isPlaying) {
        videoRef.current.pause()
      } else {
        videoRef.current.play().catch(() => {})
      }
    }
  }

  // 进度条点击或拖拽
  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
    if (videoRef.current && duration > 0 && progressBarRef.current) {
      const rect = progressBarRef.current.getBoundingClientRect()
      const clickX = e.clientX - rect.left
      const percentage = Math.max(0, Math.min(1, clickX / rect.width))
      const newTime = percentage * duration
      videoRef.current.currentTime = newTime
      setCurrentTime(newTime)
    }
  }

  // 进度条鼠标按下（开始拖拽）
  const handleProgressMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
    e.preventDefault()
    setIsDraggingProgress(true)
    if (videoRef.current && duration > 0 && progressBarRef.current) {
      const rect = progressBarRef.current.getBoundingClientRect()
      const clickX = e.clientX - rect.left
      const percentage = Math.max(0, Math.min(1, clickX / rect.width))
      const newTime = percentage * duration
      videoRef.current.currentTime = newTime
      setCurrentTime(newTime)
    }
  }

  // 进度条鼠标移动（拖拽中）
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (isDraggingProgress && videoRef.current && duration > 0 && progressBarRef.current) {
        const rect = progressBarRef.current.getBoundingClientRect()
        const clickX = e.clientX - rect.left
        const percentage = Math.max(0, Math.min(1, clickX / rect.width))
        const newTime = percentage * duration
        videoRef.current.currentTime = newTime
        setCurrentTime(newTime)
      }
    }

    const handleMouseUp = () => {
      setIsDraggingProgress(false)
    }

    if (isDraggingProgress) {
      document.addEventListener('mousemove', handleMouseMove)
      document.addEventListener('mouseup', handleMouseUp)
      return () => {
        document.removeEventListener('mousemove', handleMouseMove)
        document.removeEventListener('mouseup', handleMouseUp)
      }
    }
  }, [isDraggingProgress, duration])

  // 音量控制
  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newVolume = parseFloat(e.target.value)
    setVolume(newVolume)
    if (videoRef.current) {
      videoRef.current.volume = newVolume
      setIsMuted(newVolume === 0)
    }
  }

  // 静音切换
  const toggleMute = () => {
    if (videoRef.current) {
      if (isMuted) {
        videoRef.current.volume = volume || 0.5
        setIsMuted(false)
      } else {
        videoRef.current.volume = 0
        setIsMuted(true)
      }
    }
  }

  // 全屏切换
  const toggleFullscreen = () => {
    if (containerRef.current) {
      if (!document.fullscreenElement) {
        containerRef.current.requestFullscreen().catch(() => {})
      } else {
        document.exitFullscreen().catch(() => {})
      }
    }
  }

  // 节流鼠标移动事件，避免频繁调用导致性能问题
  const mouseMoveThrottleRef = useRef<NodeJS.Timeout | null>(null)
  
  // 鼠标移动显示控制栏（节流处理）
  const handleMouseMove = () => {
    // 如果已经有待处理的调用，跳过
    if (mouseMoveThrottleRef.current) {
      return
    }
    
    // 立即执行一次
    resetControlsTimeout()
    
    // 设置节流，200ms内不再处理
    mouseMoveThrottleRef.current = setTimeout(() => {
      mouseMoveThrottleRef.current = null
    }, 200)
  }

  // 鼠标离开隐藏控制栏（仅在播放时）
  const handleMouseLeave = () => {
    // 清理节流定时器
    if (mouseMoveThrottleRef.current) {
      clearTimeout(mouseMoveThrottleRef.current)
      mouseMoveThrottleRef.current = null
    }
    
    if (isPlaying && controlsTimeoutRef.current) {
      clearTimeout(controlsTimeoutRef.current)
      controlsTimeoutRef.current = setTimeout(() => {
        setShowControls(false)
      }, 1000)
    }
  }
  
  // 清理节流定时器
  useEffect(() => {
    return () => {
      if (mouseMoveThrottleRef.current) {
        clearTimeout(mouseMoveThrottleRef.current)
      }
    }
  }, [])

  const progressPercentage = duration > 0 ? (currentTime / duration) * 100 : 0

  return (
    <div
      className="fixed inset-0 z-[100] bg-black/90 flex items-center justify-center p-4"
      onClick={onClose}
    >
      <div
        ref={containerRef}
        className="relative w-full max-w-7xl video-player-modal"
        style={{ 
          maxHeight: 'calc(100vh - 2rem)',
          maxWidth: 'calc(100vw - 2rem)'
        }}
        onClick={(e) => e.stopPropagation()}
        onMouseMove={handleMouseMove}
        onMouseLeave={handleMouseLeave}
      >
        {/* 视频容器 - 根据视频实际宽高比动态调整 */}
        <div
          className="relative w-full bg-black rounded-lg shadow-2xl overflow-hidden"
          style={{
            // 如果有视频宽高比，使用它；否则使用16:9作为默认值
            aspectRatio: videoAspectRatio ? `${videoAspectRatio}` : '16/9',
            maxHeight: 'calc(100vh - 8rem)', // 为控制栏留出空间
            maxWidth: 'calc(100vw - 2rem)'
          }}
        >
          <video
            ref={videoRef}
            src={videoSrc}
            autoPlay
            preload="auto"
            playsInline
            className="w-full h-full object-contain"
            onLoadStart={handleLoadStart}
            onLoadedMetadata={handleLoadedMetadata}
            onProgress={handleProgress}
            onTimeUpdate={handleTimeUpdate}
            onCanPlay={handleCanPlay}
            onCanPlayThrough={handleCanPlayThrough}
            onWaiting={handleWaiting}
            onPlaying={handlePlaying}
            onPause={handlePause}
            onEnded={handleEnded}
            onError={handleError}
            onClick={togglePlay}
          />

          {/* 加载状态指示器 */}
          {(isLoading || isBuffering) && (
            <div className="absolute inset-0 flex items-center justify-center z-[100] pointer-events-none bg-black/50">
              <div className="text-center bg-black/70 rounded-lg px-6 py-4 backdrop-blur-sm">
                <div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent mb-4"></div>
                <p className="text-white text-sm font-medium">
                  {isLoading ? '正在加载视频...' : '视频缓冲中...'}
                </p>
                {loadProgress > 0 && (
                  <div className="mt-3 w-64 bg-gray-700 rounded-full h-2 overflow-hidden">
                    <div
                      className="bg-blue-500 h-full transition-all duration-300"
                      style={{ width: `${loadProgress}%` }}
                    />
                  </div>
                )}
              </div>
            </div>
          )}

          {/* 自定义控制栏 */}
          <div
            className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/70 to-transparent transition-opacity duration-300 ${
              showControls ? 'opacity-100' : 'opacity-0'
            }`}
            style={{ zIndex: 50 }}
            onClick={(e) => e.stopPropagation()}
          >
            {/* 进度条容器 - 相对定位以便显示时间提示 */}
            <div className="relative px-2">
              {/* 进度条 - 增强交互体验 */}
              <div
                ref={progressBarRef}
                className={`w-full cursor-pointer transition-all duration-200 relative ${
                  isHoveringProgress || isDraggingProgress ? 'h-3 py-1' : 'h-2'
                }`}
                onClick={handleProgressClick}
                onMouseDown={handleProgressMouseDown}
                onMouseEnter={() => setIsHoveringProgress(true)}
                onMouseLeave={() => {
                  if (!isDraggingProgress) {
                    setIsHoveringProgress(false)
                    setHoverTime(0)
                    setHoverPosition(0)
                  }
                }}
                onMouseMove={(e) => {
                  if (progressBarRef.current && duration > 0) {
                    const rect = progressBarRef.current.getBoundingClientRect()
                    const mouseX = e.clientX - rect.left
                    const percentage = Math.max(0, Math.min(1, mouseX / rect.width))
                    setHoverPosition(percentage * 100)
                    setHoverTime(percentage * duration)
                  }
                }}
              >
                {/* 进度条背景 */}
                <div className={`w-full bg-gray-700/60 rounded-full transition-all duration-200 ${
                  isHoveringProgress || isDraggingProgress ? 'h-2' : 'h-1'
                }`}>
                  {/* 已播放进度 */}
                  <div
                    className={`bg-blue-500 rounded-full transition-all duration-100 relative ${
                      isHoveringProgress || isDraggingProgress ? 'h-2' : 'h-1'
                    }`}
                    style={{ width: `${progressPercentage}%` }}
                  >
                    {/* 可拖拽的滑块指示器 */}
                    <div
                      className={`absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 bg-blue-500 rounded-full transition-all duration-200 border-2 border-white ${
                        isHoveringProgress || isDraggingProgress
                          ? 'w-4 h-4 opacity-100 shadow-lg shadow-blue-500/50'
                          : 'w-0 h-0 opacity-0'
                      }`}
                    />
                  </div>
                </div>
                
                {/* 悬停时的预览时间提示 - 显示鼠标位置对应的时间 */}
                {isHoveringProgress && !isDraggingProgress && progressBarRef.current && duration > 0 && hoverTime > 0 && (
                  <div
                    className="absolute bottom-full mb-2 px-2 py-1 bg-black/90 text-white text-xs rounded pointer-events-none whitespace-nowrap z-10"
                    style={{
                      left: `${hoverPosition}%`,
                      transform: 'translateX(-50%)'
                    }}
                  >
                    {formatTime(hoverTime)}
                  </div>
                )}
              </div>
            </div>

            {/* 控制按钮栏 */}
            <div className="flex items-center gap-4 px-4 py-3">
              {/* 播放/暂停按钮 */}
              <button
                onClick={togglePlay}
                className="text-white hover:text-blue-400 transition-colors flex-shrink-0"
                aria-label={isPlaying ? '暂停' : '播放'}
              >
                {isPlaying ? (
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
                  </svg>
                ) : (
                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z" />
                  </svg>
                )}
              </button>

              {/* 时间显示 */}
              <div className="text-white text-sm font-mono flex-shrink-0">
                {formatTime(currentTime)} / {formatTime(duration)}
              </div>

              {/* 音量控制 */}
              <div className="flex items-center gap-2 flex-shrink-0">
                <button
                  onClick={toggleMute}
                  className="text-white hover:text-blue-400 transition-colors"
                  aria-label={isMuted ? '取消静音' : '静音'}
                >
                  {isMuted || volume === 0 ? (
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
                    </svg>
                  ) : volume < 0.5 ? (
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M18.83 16h-1.5l-1.5-1.5v-5l1.5-1.5h1.5v8zM5 9v6h4l5 5V4L9 9H5z" />
                    </svg>
                  ) : (
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
                    </svg>
                  )}
                </button>
                <input
                  type="range"
                  min="0"
                  max="1"
                  step="0.01"
                  value={isMuted ? 0 : volume}
                  onChange={handleVolumeChange}
                  className="w-20 h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500"
                  style={{
                    background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${(isMuted ? 0 : volume) * 100}%, #374151 ${(isMuted ? 0 : volume) * 100}%, #374151 100%)`
                  }}
                />
              </div>

              {/* 右侧按钮组 */}
              <div className="flex items-center gap-2 ml-auto">
                {/* 全屏按钮 */}
                <button
                  onClick={toggleFullscreen}
                  className="text-white hover:text-blue-400 transition-colors"
                  aria-label="全屏"
                >
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v-2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
                  </svg>
                </button>

                {/* 关闭按钮 */}
                <button
                  onClick={onClose}
                  className="text-white hover:text-red-400 transition-colors"
                  aria-label="关闭"
                >
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 隐藏原生视频控件 */}
      <style jsx global>{`
        .video-player-modal video {
          /* 隐藏原生控件 */
        }
        .video-player-modal video::-webkit-media-controls {
          display: none !important;
        }
        .video-player-modal video::-webkit-media-controls-enclosure {
          display: none !important;
        }
      `}</style>
    </div>
  )
}