videofolxtv/client/src/pages/LivePage.tsx

import { useState, useEffect, useRef } from 'react';
import { ChevronLeft, Maximize, Volume2, VolumeX, Radio } from 'lucide-react';
import { Link } from 'wouter';
import { Button } from '@/components/ui/button';
import AdSenseAd from '@/components/adsense-ad';

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

export default function LivePage() {
  const videoRef = useRef<HTMLVideoElement>(null);
  const hlsRef = useRef<any>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isPlaying, setIsPlaying] = useState(false);
  const [volume, setVolume] = useState(1);
  const [isMuted, setIsMuted] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // HLS stream URL
  const streamUrl = 'https://cdne.folxplay.tv/fxt/streams/ch-4/master.m3u8';

  useEffect(() => {
    // Set page meta tags
    document.title = 'LIVE Stream | video.folx.tv';
    
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', 'Živý prenos na video.folx.tv - sledujte exkluzívny obsah v reálnom čase.');
    }

    const updateMetaTag = (property: string, content: string) => {
      let meta = document.querySelector(`meta[property="${property}"]`);
      if (!meta) {
        meta = document.createElement('meta');
        meta.setAttribute('property', property);
        document.head.appendChild(meta);
      }
      meta.setAttribute('content', content);
    };

    updateMetaTag('og:title', 'LIVE Stream - video.folx.tv');
    updateMetaTag('og:description', 'Živý prenos na video.folx.tv - sledujte exkluzívny obsah v reálnom čase.');
    updateMetaTag('og:type', 'video.other');
  }, []);

  useEffect(() => {
    const initializePlayer = async () => {
      console.log('🔴 LivePage: Starting to initialize player...');
      
      if (!videoRef.current) {
        console.error('🚨 Video ref not available!');
        return;
      }

      console.log('🔴 Video element found, continuing...');

      try {
        // Load HLS.js if not already loaded
        console.log('🔴 Checking if HLS.js is loaded...');
        if (!window.Hls) {
          console.log('🔴 Loading HLS.js script...');
          const script = document.createElement('script');
          script.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.8';
          script.async = true;
          document.head.appendChild(script);
          
          await new Promise((resolve, reject) => {
            script.onload = () => {
              console.log('✅ HLS.js script loaded successfully');
              resolve(null);
            };
            script.onerror = (e) => {
              console.error('❌ Failed to load HLS.js script:', e);
              reject(e);
            };
          });
        } else {
          console.log('✅ HLS.js already available');
        }

        const video = videoRef.current;
        console.log('🔴 Stream URL:', streamUrl);
        
        if (window.Hls && window.Hls.isSupported()) {
          console.log('🔴 HLS.js is supported, initializing...');
          const hls = new window.Hls({
            debug: true,
            enableWorker: false,
            lowLatencyMode: true,
            backBufferLength: 90,
            maxBufferLength: 30,
            maxMaxBufferLength: 600,
            maxBufferSize: 60 * 1000 * 1000,
            maxBufferHole: 0.5
          });
          
          console.log('🔴 Loading source:', streamUrl);
          hls.loadSource(streamUrl);
          hls.attachMedia(video);
          
          hls.on(window.Hls.Events.MEDIA_ATTACHED, () => {
            console.log('✅ HLS media attached successfully');
          });
          
          hls.on(window.Hls.Events.MANIFEST_PARSED, (event: any, data: any) => {
            console.log('✅ HLS manifest parsed successfully:', data);
            console.log('Available levels:', data.levels);
            setIsLoading(false);
            
            // Try auto-play
            video.play().then(() => {
              console.log('✅ Auto-play started successfully');
            }).catch((e) => {
              console.log('⚠️ Auto-play blocked, user interaction required:', e);
              setError('Kliknite play za zagon streama');
            });
          });
          
          hls.on(window.Hls.Events.LEVEL_LOADED, (event: any, data: any) => {
            console.log('📊 Level loaded:', data);
          });
          
          hls.on(window.Hls.Events.FRAG_LOADED, (event: any, data: any) => {
            console.log('📦 Fragment loaded:', data.frag.url);
          });
          
          hls.on(window.Hls.Events.ERROR, (event: any, data: any) => {
            console.error('🚨 HLS Error occurred:', {
              type: data.type,
              details: data.details,
              fatal: data.fatal,
              error: data.error,
              event,
              data
            });
            
            if (data.fatal) {
              switch (data.type) {
                case window.Hls.ErrorTypes.NETWORK_ERROR:
                  console.log('🔄 Network error, attempting recovery...');
                  setError('Napaka pri povezavi s streamom - poskušam znova...');
                  hls.startLoad();
                  break;
                case window.Hls.ErrorTypes.MEDIA_ERROR:
                  console.log('🔄 Media error, attempting recovery...');
                  setError('Napaka pri predvajanju - poskušam znova...');
                  hls.recoverMediaError();
                  break;
                default:
                  console.error('💥 Fatal error, cannot recover:', data);
                  setError(`Napaka pri streamingu: ${data.details}`);
                  break;
              }
            }
          });
          
          hlsRef.current = hls;
          
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
          // Native HLS support (Safari)
          console.log('🍎 Using native HLS support (Safari)');
          video.src = streamUrl;
          
          video.addEventListener('loadedmetadata', () => {
            console.log('✅ Native HLS metadata loaded');
            setIsLoading(false);
          });
          
          video.addEventListener('error', (e) => {
            console.error('❌ Native video error:', e);
            setError('Napaka pri nalaganju streama');
          });
          
        } else {
          console.error('❌ HLS not supported in this browser');
          setError('HLS ni podprt v tem brskalniku');
          setIsLoading(false);
        }

        // Add comprehensive video event listeners
        video.addEventListener('play', () => {
          console.log('▶️ Video started playing');
          setIsPlaying(true);
        });

        video.addEventListener('pause', () => {
          console.log('⏸️ Video paused');
          setIsPlaying(false);
        });

        video.addEventListener('volumechange', () => {
          setVolume(video.volume);
          setIsMuted(video.muted);
        });

        video.addEventListener('loadstart', () => {
          console.log('🔄 Video load started');
        });

        video.addEventListener('loadeddata', () => {
          console.log('📊 Video data loaded');
        });

        video.addEventListener('canplay', () => {
          console.log('✅ Video can start playing');
        });

        video.addEventListener('error', (e) => {
          console.error('❌ Video element error:', e);
          setError('Napaka video elementa');
        });

      } catch (error) {
        console.error('💥 Failed to initialize live stream player:', error);
        setError('Napaka pri inicializaciji playerja');
        setIsLoading(false);
      }
    };

    // Add a small delay to ensure DOM is ready
    const timer = setTimeout(() => {
      initializePlayer();
    }, 200);

    return () => {
      clearTimeout(timer);
      if (hlsRef.current) {
        console.log('🧹 Destroying HLS instance');
        hlsRef.current.destroy();
      }
    };
  }, []);

  const togglePlayPause = () => {
    if (videoRef.current) {
      if (isPlaying) {
        videoRef.current.pause();
      } else {
        videoRef.current.play().catch((e) => {
          console.log('Play failed:', e);
          setError('Napaka pri predvajanju');
        });
      }
    }
  };

  const toggleMute = () => {
    if (videoRef.current) {
      videoRef.current.muted = !isMuted;
    }
  };

  const toggleFullscreen = () => {
    if (videoRef.current) {
      if (videoRef.current.requestFullscreen) {
        videoRef.current.requestFullscreen();
      }
    }
  };

  if (isLoading) {
    return (
      <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 bg-red-600 rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
            <Radio className="w-8 h-8 text-white" />
          </div>
          <h3 className="text-white text-xl font-bold mb-2">video.folx.tv</h3>
          <p className="text-bunny-light">Connecting to live stream...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-bunny-dark">
      {/* Header */}
      <div className="bg-bunny-darker border-b border-white/10">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
              <Button variant="ghost" size="sm" className="text-white hover:bg-white/10">
                <ChevronLeft className="w-4 h-4 mr-2" />
                Back
              </Button>
            </Link>
            
            <div className="flex items-center space-x-3">
              <div className="flex items-center space-x-2">
                <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
                <span className="text-red-500 font-bold text-sm uppercase tracking-wide">LIVE</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="container mx-auto px-4 py-6">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          {/* Main Video Player */}
          <div className="lg:col-span-3">
            <div className="bg-black rounded-lg overflow-hidden shadow-2xl">
              <div className="relative aspect-video">
                {error && (
                  <div className="absolute inset-0 flex items-center justify-center bg-black/80 text-red-400 z-20">
                    <div className="text-center">
                      <Radio className="w-12 h-12 mx-auto mb-4 opacity-50" />
                      <p className="text-lg font-semibold mb-2">Stream Error</p>
                      <p className="text-sm opacity-75">{error}</p>
                      <Button 
                        onClick={() => {
                          setError(null);
                          setIsLoading(true);
                          window.location.reload();
                        }}
                        className="mt-4 bg-red-600 hover:bg-red-700"
                        data-testid="button-retry"
                      >
                        Poskusite znova
                      </Button>
                    </div>
                  </div>
                )}
                
                <video
                  ref={videoRef}
                  className="w-full h-full bg-black"
                  playsInline
                  controls
                  muted={false}
                />
                
                {/* Live Overlay */}
                <div className="absolute top-4 left-4 z-10">
                  <div className="flex items-center space-x-2 bg-red-600/90 text-white px-3 py-1 rounded-full text-sm font-semibold">
                    <div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
                    <span>LIVE</span>
                  </div>
                </div>

                {/* Custom Controls Overlay */}
                <div className="absolute bottom-4 left-4 right-4 flex items-center justify-between z-10 bg-black/50 rounded-lg p-3">
                  <div className="flex items-center space-x-3">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={togglePlayPause}
                      className="text-white hover:bg-white/20"
                      data-testid="button-play-pause"
                    >
                      {isPlaying ? '⏸️' : '▶️'}
                    </Button>
                    
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={toggleMute}
                      className="text-white hover:bg-white/20"
                      data-testid="button-mute"
                    >
                      {isMuted ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
                    </Button>

                    <span className="text-white text-sm">
                      Live Stream - CH4
                    </span>
                  </div>

                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={toggleFullscreen}
                    className="text-white hover:bg-white/20"
                    data-testid="button-fullscreen"
                  >
                    <Maximize className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            </div>

            {/* Stream Info */}
            <div className="mt-6 space-y-4">
              <div className="flex items-center space-x-3">
                <div className="w-4 h-4 bg-red-500 rounded-full animate-pulse"></div>
                <h1 className="text-2xl font-bold text-white">
                  FOLX TV Live Stream
                </h1>
              </div>
              
              <p className="text-bunny-light text-lg leading-relaxed">
                Sledujte živý prenos FOLX TV s exkluzívnym obsahom a najnovšími videoami. 
                Stream prebieha 24/7 s najlepšími hitmi a videoklipmi.
              </p>
              
              <div className="flex items-center gap-4 text-sm text-bunny-muted">
                <span className="flex items-center space-x-2">
                  <Radio className="w-4 h-4" />
                  <span>Live Stream</span>
                </span>
                <span>Channel 4</span>
                <span>HD Quality</span>
              </div>
            </div>
          </div>

          {/* Sidebar */}
          <div className="lg:col-span-1 space-y-6">
            {/* Ad Space */}
            <div className="bg-bunny-darker rounded-lg p-4">
              <AdSenseAd 
                adSlot="9876543210"
                adFormat="vertical" 
              />
            </div>

            {/* Live Chat or Additional Content */}
            <div className="bg-bunny-darker rounded-lg p-6 space-y-4">
              <h3 className="text-white font-bold text-lg flex items-center space-x-2">
                <Radio className="w-5 h-5 text-red-500" />
                <span>Live Info</span>
              </h3>
              
              <div className="space-y-3 text-sm text-bunny-light">
                <div className="flex justify-between">
                  <span>Status:</span>
                  <span className="text-red-500 font-semibold">● LIVE</span>
                </div>
                <div className="flex justify-between">
                  <span>Quality:</span>
                  <span>Auto (HD)</span>
                </div>
                <div className="flex justify-between">
                  <span>Channel:</span>
                  <span>CH-4</span>
                </div>
                <div className="flex justify-between">
                  <span>Format:</span>
                  <span>HLS</span>
                </div>
              </div>
            </div>

            {/* Navigation Links */}
            <div className="bg-bunny-darker rounded-lg p-6 space-y-4">
              <h3 className="text-white font-bold text-lg">Explore</h3>
              <div className="space-y-2">
                <Link href="/" className="block text-bunny-light hover:text-white transition-colors">
                  ← Back to Home
                </Link>
                <Link href="/folx-stadl" className="block text-bunny-light hover:text-white transition-colors">
                  FOLX STADL Episodes
                </Link>
                <Link href="/geschichte-lied" className="block text-bunny-light hover:text-white transition-colors">
                  Geschichte des Liedes
                </Link>
                <Link href="/gipfelstammtisch" className="block text-bunny-light hover:text-white transition-colors">
                  Gipfelstammtisch
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}