videofolxtv/client/src/components/netflix-grid.tsx

import { useState, useRef, useEffect, useMemo } from "react";
import { useLocation } from "wouter";
import { type Video } from "@shared/schema";
import VideoCard from "./video-card";
import BunnyVideoModal from "./bunny-video-modal";
import { Button } from "@/components/ui/button";
import { ChevronLeft, ChevronRight } from "lucide-react";

interface VideoCategory {
  title: string;
  videos: Video[];
}

interface NetflixGridProps {
  videos: Video[];
  isLoading: boolean;
}

export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
  const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [, setLocation] = useLocation();

  const handleVideoClick = (video: Video) => {
    // Navigate to individual video page instead of modal
    setLocation(`/video/${video.id}`);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    setSelectedVideo(null);
  };

  const handleVideoChange = (video: Video) => {
    setSelectedVideo(video);
  };

  // Memoize categories to avoid recalculation on every render
  const categories = useMemo((): VideoCategory[] => {
    if (!videos.length) return [];

    // Sort by views for top content
    const sortedByViews = [...videos].sort((a, b) => (b.views || 0) - (a.views || 0));
    
    // Sort by date for recently added
    const sortedByDate = [...videos].sort((a, b) => 
      new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
    );

    // FOLX STADL videos
    const folxStadlVideos = videos.filter(video => 
      video.title.includes("FOLX STADL") || video.title.includes("FOLXSTADL")
    );

    return [
      {
        title: "Meist Angesehen",
        videos: sortedByViews.slice(0, 10)
      },
      ...(folxStadlVideos.length > 0 ? [{
        title: "FOLX STADL",
        videos: folxStadlVideos.slice(0, 12)
      }] : []),
      {
        title: "GDL VIDEO",
        videos: (() => {
          // Filter videos that are only Geschichte des Liedes (exclude FOLX STADL and Gipfelstammtisch)
          const artistVideos = videos.filter(video => 
            !video.title.includes("FOLX STADL") && 
            !video.title.includes("FOLXSTADL") &&
            !video.title.includes("Gipfelstammtisch")
          );
          
          // Group by performer/artist (extract performer name before " - ")
          const performerGroups: { [key: string]: typeof videos } = {};
          artistVideos.forEach(video => {
            const performer = video.title.split(" - ")[0] || "Unknown";
            if (!performerGroups[performer]) {
              performerGroups[performer] = [];
            }
            performerGroups[performer].push(video);
          });
          
          // Sort each group by upload date (newest first)
          Object.keys(performerGroups).forEach(performer => {
            performerGroups[performer].sort((a, b) => 
              new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
            );
          });
          
          // Distribute videos: first one from each performer, then continue
          const result = [];
          const performers = Object.keys(performerGroups);
          let maxRounds = Math.max(...performers.map(p => performerGroups[p].length));
          
          for (let round = 0; round < maxRounds && result.length < 15; round++) {
            for (let performer of performers) {
              if (performerGroups[performer][round] && result.length < 15) {
                result.push(performerGroups[performer][round]);
              }
            }
          }
          
          return result;
        })()
      },
      {
        title: "Trending Now",
        videos: videos.slice(0, 12)
      }
    ];
  }, [videos]);

  if (isLoading && videos.length === 0) {
    return (
      <div className="flex items-center justify-center py-20">
        <div className="text-center">
          <div className="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
            <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
          </div>
          <h3 className="text-white text-xl font-bold mb-2">go4.video</h3>
          <p className="text-bunny-light">Loading videos...</p>
        </div>
      </div>
    );
  }

  if (videos.length === 0) {
    return (
      <div className="text-center py-12">
        <div className="w-12 h-12 gradient-primary rounded-lg flex items-center justify-center shadow-lg mb-4 mx-auto opacity-50">
          <div className="w-0 h-0 border-l-[9px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
        </div>
        <div className="text-bunny-muted text-lg mb-4">
          No videos found
        </div>
        <p className="text-sm text-bunny-muted">
          Try adjusting your search or filter criteria
        </p>
      </div>
    );
  }

  // Categories are now memoized above

  return (
    <>
      <div className="space-y-8">
        {categories.map((category, categoryIndex) => (
          <div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-2 mb-6' : 'mb-6'}`}>
            <CategoryRow
              category={category}
              onVideoClick={handleVideoClick}
              hideScrollButtons={false}
            />
          </div>
        ))}
      </div>

      <BunnyVideoModal
        video={selectedVideo}
        isOpen={isModalOpen}
        onClose={handleCloseModal}
        videos={videos}
        onVideoChange={handleVideoChange}
      />
    </>
  );
}

interface CategoryRowProps {
  category: VideoCategory;
  onVideoClick: (video: Video) => void;
  hideScrollButtons?: boolean;
}

function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: CategoryRowProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [isScrolling, setIsScrolling] = useState(false);
  const scrollIntervalRef = useRef<NodeJS.Timeout>();
  const [clickedVideoId, setClickedVideoId] = useState<string | null>(null);
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(true);

  const checkScrollButtons = () => {
    if (scrollRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
      setCanScrollLeft(scrollLeft > 0);
      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1);
    }
  };

  const scroll = (direction: 'left' | 'right') => {
    if (scrollRef.current) {
      // Viewport-based scroll amount for full-width cards
      const containerWidth = scrollRef.current.clientWidth;
      const scrollAmount = containerWidth * 0.8; // Scroll 80% of visible area
      
      const currentScroll = scrollRef.current.scrollLeft;
      const targetScroll = direction === 'left' 
        ? currentScroll - scrollAmount 
        : currentScroll + scrollAmount;
        
      scrollRef.current.scrollTo({
        left: targetScroll,
        behavior: 'smooth'
      });
      
      // Check scroll buttons after animation completes
      setTimeout(checkScrollButtons, 300);
    }
  };

  const startAutoScroll = (direction: 'left' | 'right') => {
    // Stop any existing scrolling first
    if (scrollIntervalRef.current) {
      clearInterval(scrollIntervalRef.current);
    }
    
    setIsScrolling(true);
    scrollIntervalRef.current = setInterval(() => {
      if (scrollRef.current) {
        const scrollStep = direction === 'left' ? -3 : 3;
        scrollRef.current.scrollLeft += scrollStep;
      }
    }, 16); // 60fps smooth scrolling
  };

  const stopAutoScroll = () => {
    setIsScrolling(false);
    if (scrollIntervalRef.current) {
      clearInterval(scrollIntervalRef.current);
    }
  };

  useEffect(() => {
    checkScrollButtons();
    
    return () => {
      if (scrollIntervalRef.current) {
        clearInterval(scrollIntervalRef.current);
      }
    };
  }, [category.videos]);

  const handleScroll = () => {
    checkScrollButtons();
  };

  return (
    <div 
      className="relative"
      onMouseLeave={() => setClickedVideoId(null)}
    >
      <h2 className="text-lg font-medium text-bunny-light mb-1 mx-2 leading-tight uppercase">
        {category.title}
      </h2>
      <div className="relative overflow-hidden">
        {/* Left scroll button - small circular on videos */}
        {!hideScrollButtons && canScrollLeft && (
          <Button
            onClick={() => scroll('left')}
            onMouseEnter={() => startAutoScroll('left')}
            onMouseLeave={stopAutoScroll}
            className="absolute left-2 top-1/2 -translate-y-1/2 z-[60] bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none w-8 h-8 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl opacity-75"
            size="sm"
          >
            <ChevronLeft className="w-4 h-4" />
          </Button>
        )}

        {/* Right scroll button - small circular on videos */}
        {!hideScrollButtons && canScrollRight && (
          <Button
            onClick={() => scroll('right')}
            onMouseEnter={() => startAutoScroll('right')}
            onMouseLeave={stopAutoScroll}
            className="absolute right-2 top-1/2 -translate-y-1/2 z-[60] bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none w-8 h-8 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl opacity-75"
            size="sm"
          >
            <ChevronRight className="w-4 h-4" />
          </Button>
        )}

        {/* Scrollable video row - in container */}
        <div
          ref={scrollRef}
          className="flex gap-3 overflow-x-auto scrollbar-hide py-4 px-2"
          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
          onScroll={handleScroll}
        >
          {category.videos.map((video, index) => (
            <div 
              key={video.id} 
              className="flex-shrink-0 w-[calc(100vw-3rem)] sm:w-[330px] relative hover:z-50"
              onMouseEnter={() => setClickedVideoId(video.id)}
            >
              {/* Top 10 Number overlay for first category */}
              {category.title.includes("Meist Angesehen") && index < 10 && clickedVideoId !== video.id && (
                <div className="absolute top-0 left-2 z-20 text-white font-black text-4xl sm:text-5xl md:text-7xl drop-shadow-2xl transition-opacity duration-300"
                     style={{ 
                       textShadow: '4px 4px 8px rgba(0,0,0,0.8), -2px -2px 4px rgba(0,0,0,0.6)',
                       WebkitTextStroke: '2px rgba(0,0,0,0.8)' 
                     }}>
                  {index + 1}
                </div>
              )}
              <VideoCard
                video={video}
                onClick={(video) => {
                  setClickedVideoId(video.id);
                  onVideoClick(video);
                }}
                className="w-full hover:scale-102 md:hover:scale-105 hover:z-50 transition-all duration-300 md:duration-500 hover:shadow-2xl rounded-lg overflow-hidden"
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}