import { useEffect, useRef, useState } from "react";

interface HLSPlayerProps {
  src: string;
  title: string;
  onBack: () => void;
}

interface QualityLevel {
  height: number;
  width: number;
  bitrate: number;
  level: number;
}

interface AudioTrack {
  id: number;
  name: string;
  lang: string;
}

declare global {
  interface Window {
    Hls: any;
  }
}

export default function HLSPlayer({ src, title, onBack }: HLSPlayerProps) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const hlsRef = useRef<any>(null);
  const [status, setStatus] = useState("جاري التحضير...");
  const [isPlaying, setIsPlaying] = useState(false);
  const [qualityLevels, setQualityLevels] = useState<QualityLevel[]>([]);
  const [audioTracks, setAudioTracks] = useState<AudioTrack[]>([]);
  const [currentQuality, setCurrentQuality] = useState(-1); // -1 = auto
  const [currentAudio, setCurrentAudio] = useState(0);
  const [showControls, setShowControls] = useState(true);
  const [showQualityMenu, setShowQualityMenu] = useState(false);
  const [showAudioMenu, setShowAudioMenu] = useState(false);
  const controlsTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    const loadHLS = async () => {
      try {
        // Load hls.js from CDN
        if (!window.Hls) {
          const script = document.createElement('script');
          script.src = 'https://cdn.jsdelivr.net/npm/hls.js@latest';
          script.onload = () => initializePlayer();
          document.head.appendChild(script);
        } else {
          initializePlayer();
        }
      } catch (error) {
        console.error('Error loading HLS.js:', error);
        setStatus('خطأ في تحميل المشغل');
      }
    };

    const initializePlayer = () => {
      const video = videoRef.current;
      if (!video) return;

      // Clean up previous instance
      if (hlsRef.current) {
        hlsRef.current.destroy();
        hlsRef.current = null;
      }

      video.pause();
      video.removeAttribute('src');
      video.load();

      // Check if browser supports HLS natively (Safari, iOS)
      if (video.canPlayType('application/vnd.apple.mpegURL')) {
        video.src = src;
        video.addEventListener('loadedmetadata', () => {
          video.play().catch(() => {
            setStatus('اضغط زر التشغيل للبدء');
          });
        }, { once: true });
        setStatus('تشغيل مباشر عبر المتصفح (دعم HLS أصلي)');
      } else if (window.Hls && window.Hls.isSupported()) {
        // Use hls.js for other browsers
        const hls = new window.Hls({
          maxBufferLength: 30,
          maxBufferSize: 60 * 1000 * 1000,
          enableWorker: true,
          lowLatencyMode: true,
        });
        
        hlsRef.current = hls;

        hls.on(window.Hls.Events.ERROR, (_e: any, data: any) => {
          console.warn('HLS error:', data);
          setStatus('خطأ في التشغيل: ' + (data?.details || data?.type || 'غير معروف'));
        });

        hls.loadSource(src);
        hls.attachMedia(video);
        
        hls.on(window.Hls.Events.MANIFEST_PARSED, () => {
          // Get quality levels
          const levels = hls.levels.map((level: any, index: number) => ({
            height: level.height,
            width: level.width,
            bitrate: level.bitrate,
            level: index
          }));
          setQualityLevels(levels);
          
          // Get audio tracks  
          const tracks = hls.audioTracks.map((track: any, index: number) => ({
            id: index,
            name: track.name || `Audio ${index + 1}`,
            lang: track.lang || 'unknown'
          }));
          setAudioTracks(tracks);
          
          video.play().catch((err) => {
            console.warn('Auto-play failed:', err);
            setStatus('اضغط زر التشغيل للبدء');
          });
          setStatus('تم تحميل القائمة وجاهز للتشغيل');
        });
      } else {
        setStatus('هذا المتصفح لا يدعم HLS');
      }
    };

    loadHLS();

    // Cleanup
    return () => {
      if (hlsRef.current) {
        hlsRef.current.destroy();
        hlsRef.current = null;
      }
    };
  }, [src]);

  // Auto-hide controls
  useEffect(() => {
    const resetControlsTimeout = () => {
      if (controlsTimeoutRef.current) {
        clearTimeout(controlsTimeoutRef.current);
      }
      setShowControls(true);
      controlsTimeoutRef.current = setTimeout(() => {
        if (isPlaying) {
          setShowControls(false);
        }
      }, 3000);
    };

    const handleMouseMove = () => resetControlsTimeout();
    const handleTouchStart = () => resetControlsTimeout();

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('touchstart', handleTouchStart);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('touchstart', handleTouchStart);
      if (controlsTimeoutRef.current) {
        clearTimeout(controlsTimeoutRef.current);
      }
    };
  }, [isPlaying]);

  const handlePlayPause = () => {
    const video = videoRef.current;
    if (!video) return;

    if (video.paused) {
      video.play();
      setIsPlaying(true);
    } else {
      video.pause();
      setIsPlaying(false);
    }
  };

  const handleVideoPlay = () => setIsPlaying(true);
  const handleVideoPause = () => setIsPlaying(false);

  const selectQuality = (qualityLevel: number) => {
    const hls = hlsRef.current;
    if (!hls) return;

    if (qualityLevel === -1) {
      // Auto quality
      hls.currentLevel = -1;
    } else {
      hls.currentLevel = qualityLevel;
    }
    setCurrentQuality(qualityLevel);
    setShowQualityMenu(false);
  };

  const selectAudioTrack = (trackId: number) => {
    const hls = hlsRef.current;
    if (!hls) return;

    hls.audioTrack = trackId;
    setCurrentAudio(trackId);
    setShowAudioMenu(false);
  };

  const getQualityLabel = (level: QualityLevel) => {
    if (level.height >= 2160) return '4K';
    if (level.height >= 1080) return 'FHD';
    if (level.height >= 720) return 'HD';
    if (level.height >= 480) return 'SD';
    return `${level.height}p`;
  };

  return (
    <div className="min-h-screen bg-black text-white" data-testid="hls-player">
      <style>
        {`
          .video-container {
            position: relative;
            width: 100%;
            max-height: 80vh;
            background: #000;
          }
          
          .video-player {
            width: 100%;
            height: auto;
            max-height: 80vh;
            background: #000;
            outline: none;
          }
          
          .controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: opacity 0.3s ease;
          }
          
          .controls-left, .controls-right {
            display: flex;
            align-items: center;
            gap: 15px;
          }
          
          .control-group {
            position: relative;
          }
          
          .control-button {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 15px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
          }
          
          .control-button:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
          }
          
          .dropdown-menu {
            position: absolute;
            bottom: 50px;
            right: 0;
            background: rgba(0, 0, 0, 0.9);
            border-radius: 8px;
            padding: 8px 0;
            min-width: 180px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            z-index: 1000;
          }
          
          .dropdown-item {
            padding: 12px 16px;
            cursor: pointer;
            transition: background 0.2s ease;
            white-space: nowrap;
          }
          
          .dropdown-item:hover {
            background: rgba(255, 255, 255, 0.1);
          }
          
          .dropdown-item.active {
            background: rgba(255, 87, 34, 0.3);
            color: #ff5722;
          }
          
          .status-bar {
            padding: 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            margin: 15px;
            font-size: 14px;
            opacity: 0.9;
            text-align: center;
          }
          
          .header {
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          }
          
          .back-button {
            padding: 10px 15px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            cursor: pointer;
            transition: background 0.3s ease;
          }
          
          .back-button:hover {
            background: rgba(255, 255, 255, 0.2);
          }
          
          .title {
            font-size: 18px;
            font-weight: 600;
          }
        `}
      </style>

      {/* Header */}
      <div className="header">
        <button 
          className="back-button" 
          onClick={onBack}
          data-testid="button-back"
        >
          ← العودة
        </button>
        <div className="title">{title}</div>
      </div>

      {/* Video Container */}
      <div className="video-container">
        <video
          ref={videoRef}
          className="video-player"
          playsInline
          preload="auto"
          onPlay={handleVideoPlay}
          onPause={handleVideoPause}
          data-testid="video-player"
        />
        
        {/* Custom Controls Overlay */}
        {showControls && (
          <div className="controls">
            <div className="controls-left">
              <button 
                className="control-button" 
                onClick={handlePlayPause}
                data-testid="button-play-pause"
              >
                {isPlaying ? '⏸' : '▶'}
              </button>
            </div>
            
            <div className="controls-right">
              {/* Quality Selector */}
              {qualityLevels.length > 0 && (
                <div className="control-group">
                  <button 
                    className="control-button quality-button"
                    onClick={() => setShowQualityMenu(!showQualityMenu)}
                    data-testid="button-quality"
                  >
                    <i className="fas fa-cog"></i>
                    <span>{currentQuality === -1 ? 'تلقائي' : getQualityLabel(qualityLevels[currentQuality])}</span>
                  </button>
                  
                  {showQualityMenu && (
                    <div className="dropdown-menu">
                      <div 
                        className={`dropdown-item ${currentQuality === -1 ? 'active' : ''}`}
                        onClick={() => selectQuality(-1)}
                      >
                        تلقائي
                      </div>
                      {qualityLevels.map((level, index) => (
                        <div
                          key={index}
                          className={`dropdown-item ${currentQuality === index ? 'active' : ''}`}
                          onClick={() => selectQuality(index)}
                        >
                          {getQualityLabel(level)} ({Math.round(level.bitrate / 1000)}k)
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}
              
              {/* Audio Track Selector */}
              {audioTracks.length > 1 && (
                <div className="control-group">
                  <button 
                    className="control-button"
                    onClick={() => setShowAudioMenu(!showAudioMenu)}
                    data-testid="button-audio"
                  >
                    <i className="fas fa-music"></i>
                    <span>صوت</span>
                  </button>
                  
                  {showAudioMenu && (
                    <div className="dropdown-menu">
                      {audioTracks.map((track, index) => (
                        <div
                          key={index}
                          className={`dropdown-item ${currentAudio === index ? 'active' : ''}`}
                          onClick={() => selectAudioTrack(index)}
                        >
                          {track.name} ({track.lang})
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        )}
      </div>

      {/* Status */}
      <div className="status-bar" data-testid="status-bar">
        {status}
      </div>
    </div>
  );
}