videofolxtv/client/src/components/thumbnail-generator.tsx

import { useRef, useState, useEffect } from "react";
import { X, Download, Upload, Check, RotateCcw, Sparkles, Zap } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Slider } from "@/components/ui/slider";
import Hls from "hls.js";

interface ThumbnailGeneratorProps {
  videoUrl: string;
  videoTitle: string;
  isOpen: boolean;
  onClose: () => void;
  onThumbnailSelect: (thumbnailDataUrl: string) => void;
}

export default function ThumbnailGenerator({ 
  videoUrl, 
  videoTitle, 
  isOpen, 
  onClose, 
  onThumbnailSelect 
}: ThumbnailGeneratorProps) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const hlsRef = useRef<Hls | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  
  const [duration, setDuration] = useState(0);
  const [currentTime, setCurrentTime] = useState(0);
  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
  const [selectedThumbnail, setSelectedThumbnail] = useState<string | null>(null);
  const [customThumbnail, setCustomThumbnail] = useState<string | null>(null);
  const [isGenerating, setIsGenerating] = useState(false);
  const [aiSuggestions, setAiSuggestions] = useState<string[]>([]);
  const [isGeneratingAI, setIsGeneratingAI] = useState(false);

  // Initialize video when modal opens
  useEffect(() => {
    if (isOpen && videoRef.current && videoUrl) {
      initializeVideo();
    }
    
    return () => {
      if (hlsRef.current) {
        hlsRef.current.destroy();
        hlsRef.current = null;
      }
    };
  }, [isOpen, videoUrl]);

  const initializeVideo = () => {
    const videoElement = videoRef.current;
    if (!videoElement) return;

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

    if (videoUrl.includes('.m3u8')) {
      if (Hls.isSupported()) {
        const hls = new Hls({
          debug: false,
          enableWorker: false,
          lowLatencyMode: false,
          // Optimized for thumbnail generation - prioritize speed
          startLevel: 0, // Start with lowest quality for faster loading
          maxBufferLength: 10, // Smaller buffer for thumbnail generation
          fragLoadingTimeOut: 10000,
          manifestLoadingTimeOut: 5000
        });
        
        hls.loadSource(videoUrl);
        hls.attachMedia(videoElement);
        
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          console.log('Video loaded for thumbnail generation');
          setIsVideoLoaded(true);
        });
        
        hlsRef.current = hls;
      } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
        videoElement.src = videoUrl;
        setIsVideoLoaded(true);
      }
    } else {
      videoElement.src = videoUrl;
      setIsVideoLoaded(true);
    }

    // Video event listeners
    videoElement.addEventListener('loadedmetadata', () => {
      setDuration(videoElement.duration);
      setCurrentTime(0);
    });

    videoElement.addEventListener('timeupdate', () => {
      setCurrentTime(videoElement.currentTime);
    });
  };

  const generateThumbnail = async () => {
    const videoElement = videoRef.current;
    const canvas = canvasRef.current;
    
    if (!videoElement || !canvas) return;

    setIsGenerating(true);
    
    try {
      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      // Set canvas dimensions to match video
      canvas.width = videoElement.videoWidth || 1280;
      canvas.height = videoElement.videoHeight || 720;
      
      // Draw current video frame to canvas
      ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
      
      // Convert to data URL
      const thumbnailDataUrl = canvas.toDataURL('image/jpeg', 0.9);
      setSelectedThumbnail(thumbnailDataUrl);
      setCustomThumbnail(null);
      
    } catch (error) {
      console.error('Error generating thumbnail:', error);
    } finally {
      setIsGenerating(false);
    }
  };

  const handleTimeSliderChange = (value: number[]) => {
    const newTime = value[0];
    setCurrentTime(newTime);
    
    if (videoRef.current) {
      videoRef.current.currentTime = newTime;
    }
  };

  const handleCustomImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      const result = e.target?.result as string;
      setCustomThumbnail(result);
      setSelectedThumbnail(null);
    };
    reader.readAsDataURL(file);
  };

  const handleSaveThumbnail = () => {
    const thumbnail = selectedThumbnail || customThumbnail;
    if (thumbnail) {
      onThumbnailSelect(thumbnail);
      onClose();
    }
  };

  const generateAIThumbnails = async () => {
    const videoElement = videoRef.current;
    const canvas = canvasRef.current;
    
    if (!videoElement || !canvas || duration === 0) return;

    setIsGeneratingAI(true);
    
    try {
      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      // Set canvas dimensions
      canvas.width = videoElement.videoWidth || 1280;
      canvas.height = videoElement.videoHeight || 720;
      
      const suggestions: string[] = [];
      
      // Generate thumbnails at strategic points (10%, 35%, 65% of video)
      const timePoints = [
        duration * 0.1,   // 10% - early content
        duration * 0.35,  // 35% - middle content  
        duration * 0.65   // 65% - later content
      ];
      
      for (const timePoint of timePoints) {
        // Seek to specific time
        videoElement.currentTime = timePoint;
        
        // Wait for video to seek to the correct time
        await new Promise((resolve) => {
          const onSeeked = () => {
            videoElement.removeEventListener('seeked', onSeeked);
            resolve(void 0);
          };
          videoElement.addEventListener('seeked', onSeeked);
        });
        
        // Small delay to ensure frame is rendered
        await new Promise(resolve => setTimeout(resolve, 100));
        
        // Draw frame to canvas
        ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
        
        // Convert to data URL
        const thumbnailDataUrl = canvas.toDataURL('image/jpeg', 0.9);
        suggestions.push(thumbnailDataUrl);
      }
      
      setAiSuggestions(suggestions);
      
    } catch (error) {
      console.error('Error generating AI thumbnails:', error);
    } finally {
      setIsGeneratingAI(false);
    }
  };

  const selectAISuggestion = (suggestionUrl: string) => {
    setSelectedThumbnail(suggestionUrl);
    setCustomThumbnail(null);
  };

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white dark:bg-gray-900 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
        <div className="p-6">
          {/* Header */}
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
              Generate Thumbnail Image
            </h2>
            <Button
              onClick={onClose}
              variant="ghost"
              size="sm"
              className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
              data-testid="button-close-thumbnail-generator"
            >
              <X className="w-5 h-5" />
            </Button>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Video Player Section */}
            <div className="space-y-4">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                Video Preview
              </h3>
              
              <div className="relative bg-black rounded-lg overflow-hidden">
                <video
                  ref={videoRef}
                  className="w-full h-auto"
                  muted
                  preload="metadata"
                  data-testid="thumbnail-video-player"
                >
                  Your browser does not support the video tag.
                </video>
                
                {!isVideoLoaded && (
                  <div className="absolute inset-0 flex items-center justify-center bg-gray-800">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white"></div>
                  </div>
                )}
              </div>

              {/* Time Slider */}
              {isVideoLoaded && duration > 0 && (
                <div className="space-y-2">
                  <div className="flex justify-between text-sm text-gray-600 dark:text-gray-400">
                    <span>{formatTime(currentTime)}</span>
                    <span>{formatTime(duration)}</span>
                  </div>
                  <Slider
                    value={[currentTime]}
                    onValueChange={handleTimeSliderChange}
                    max={duration}
                    step={0.1}
                    className="w-full"
                    data-testid="time-slider"
                  />
                </div>
              )}

              {/* Generate Buttons */}
              <div className="space-y-2">
                <Button
                  onClick={generateThumbnail}
                  disabled={!isVideoLoaded || isGenerating}
                  className="w-full"
                  data-testid="button-generate-thumbnail"
                >
                  {isGenerating ? (
                    <div className="flex items-center gap-2">
                      <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                      Generating...
                    </div>
                  ) : (
                    <div className="flex items-center gap-2">
                      <Download className="w-4 h-4" />
                      Generate from Current Frame
                    </div>
                  )}
                </Button>
                
                <Button
                  onClick={generateAIThumbnails}
                  disabled={!isVideoLoaded || isGeneratingAI}
                  variant="outline"
                  className="w-full border-purple-300 text-purple-700 hover:bg-purple-50 dark:border-purple-600 dark:text-purple-300 dark:hover:bg-purple-900/20"
                  data-testid="button-generate-ai-thumbnails"
                >
                  {isGeneratingAI ? (
                    <div className="flex items-center gap-2">
                      <div className="w-4 h-4 border-2 border-purple-600 border-t-transparent rounded-full animate-spin" />
                      AI generating suggestions...
                    </div>
                  ) : (
                    <div className="flex items-center gap-2">
                      <Sparkles className="w-4 h-4" />
                      AI Thumbnail Suggestions
                    </div>
                  )}
                </Button>
              </div>
            </div>

            {/* Thumbnail Preview Section */}
            <div className="space-y-4">
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                Thumbnail Preview
              </h3>

              {/* Thumbnail Preview */}
              <div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 min-h-[200px] flex items-center justify-center">
                {selectedThumbnail || customThumbnail ? (
                  <div className="space-y-2">
                    <img 
                      src={selectedThumbnail || customThumbnail || ""} 
                      alt="Thumbnail preview" 
                      className="max-w-full max-h-48 rounded"
                      data-testid="thumbnail-preview"
                    />
                    <p className="text-xs text-center text-gray-600 dark:text-gray-400">
                      {selectedThumbnail ? 'Generirano iz videoposnetka' : 'Naložena slika'}
                    </p>
                  </div>
                ) : (
                  <div className="text-center text-gray-500 dark:text-gray-400">
                    <div className="w-16 h-16 mx-auto mb-2 bg-gray-300 dark:bg-gray-600 rounded-lg flex items-center justify-center">
                      📷
                    </div>
                    <p>Generirajte thumbnail iz videoposnetka ali naložite svojo sliko</p>
                  </div>
                )}
              </div>

              {/* AI Suggestions */}
              {aiSuggestions.length > 0 && (
                <div className="space-y-3">
                  <h4 className="font-medium text-gray-900 dark:text-white flex items-center gap-2">
                    <Sparkles className="w-4 h-4 text-purple-600" />
                    AI predlogi
                  </h4>
                  <div className="grid grid-cols-3 gap-2">
                    {aiSuggestions.map((suggestion, index) => (
                      <button
                        key={index}
                        onClick={() => selectAISuggestion(suggestion)}
                        className={`relative rounded-lg overflow-hidden border-2 transition-all hover:scale-105 ${
                          selectedThumbnail === suggestion 
                            ? 'border-purple-500 ring-2 ring-purple-300' 
                            : 'border-gray-300 dark:border-gray-600 hover:border-purple-400'
                        }`}
                        data-testid={`ai-suggestion-${index}`}
                      >
                        <img 
                          src={suggestion} 
                          alt={`AI predlog ${index + 1}`}
                          className="w-full h-16 object-cover"
                        />
                        {selectedThumbnail === suggestion && (
                          <div className="absolute inset-0 bg-purple-500/20 flex items-center justify-center">
                            <Check className="w-4 h-4 text-white drop-shadow-lg" />
                          </div>
                        )}
                      </button>
                    ))}
                  </div>
                </div>
              )}

              {/* Custom Upload */}
              <div className="space-y-2">
                <h4 className="font-medium text-gray-900 dark:text-white">
                  Ali naložite svojo sliko
                </h4>
                <input
                  ref={fileInputRef}
                  type="file"
                  accept="image/*"
                  onChange={handleCustomImageUpload}
                  className="hidden"
                  data-testid="custom-thumbnail-upload"
                />
                <Button
                  onClick={() => fileInputRef.current?.click()}
                  variant="outline"
                  className="w-full"
                  data-testid="button-upload-custom"
                >
                  <Upload className="w-4 h-4 mr-2" />
                  Naloži svojo sliko
                </Button>
              </div>

              {/* Action Buttons */}
              <div className="flex gap-2 pt-4">
                <Button
                  onClick={() => {
                    setSelectedThumbnail(null);
                    setCustomThumbnail(null);
                  }}
                  variant="outline"
                  className="flex-1"
                  disabled={!selectedThumbnail && !customThumbnail}
                  data-testid="button-reset-thumbnail"
                >
                  <RotateCcw className="w-4 h-4 mr-2" />
                  Ponastavi
                </Button>
                <Button
                  onClick={handleSaveThumbnail}
                  disabled={!selectedThumbnail && !customThumbnail}
                  className="flex-1 bg-green-600 hover:bg-green-700"
                  data-testid="button-save-thumbnail"
                >
                  <Check className="w-4 h-4 mr-2" />
                  Izberi thumbnail
                </Button>
              </div>
            </div>
          </div>

          {/* Hidden canvas for thumbnail generation */}
          <canvas ref={canvasRef} className="hidden" />
        </div>
      </div>
    </div>
  );
}