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

import { useState, useRef, useEffect } 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);
  };

  // Organize videos into categories
  const getCategories = (): 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: "Meistgesehen",
        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: "Beliebt jetzt",
        videos: videos.slice(0, 12)
      }
    ];
  };

  if (isLoading && videos.length === 0) {
    return (
      <div className="space-y-8">
        {Array.from({ length: 3 }).map((_, categoryIndex) => (
          <div key={categoryIndex} className="space-y-4">
            <div className="h-6 bg-bunny-gray rounded w-48 animate-pulse"></div>
            <div className="flex space-x-4 overflow-hidden">
              {Array.from({ length: 6 }).map((_, index) => (
                <div key={index} className="flex-shrink-0 w-56 md:w-80 animate-pulse">
                  <div className="bg-bunny-gray aspect-[9/16] md:aspect-[16/9] rounded-xl mb-3"></div>
                  <div className="space-y-2">
                    <div className="h-4 bg-bunny-gray rounded w-3/4"></div>
                    <div className="h-3 bg-bunny-gray rounded w-1/2"></div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    );
  }

  if (videos.length === 0) {
    return (
      <div className="text-center py-12">
        <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>
    );
  }

  const categories = getCategories();

  return (
    <>
      <div>
        {categories.map((category, categoryIndex) => (
          <div key={categoryIndex} className={`${categoryIndex === 0 ? 'mt-8 mb-12' : 'mb-12'}`}>
            <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 scroll = (direction: 'left' | 'right') => {
    if (scrollRef.current) {
      // Scroll exactly 4 cards (220px + 16px gap = 236px per card)
      const cardWidth = 220 + 16; // card width + gap
      const scrollAmount = cardWidth * 4; // 4 cards at once
      
      const currentScroll = scrollRef.current.scrollLeft;
      const targetScroll = direction === 'left' 
        ? currentScroll - scrollAmount 
        : currentScroll + scrollAmount;
        
      scrollRef.current.scrollTo({
        left: targetScroll,
        behavior: 'smooth'
      });
    }
  };

  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(() => {
    return () => {
      if (scrollIntervalRef.current) {
        clearInterval(scrollIntervalRef.current);
      }
    };
  }, []);

  return (
    <div 
      className="relative group mb-6"
      onMouseLeave={() => setClickedVideoId(null)}
    >
      <h2 className="text-lg font-medium text-bunny-light mb-1 mx-2 leading-tight uppercase relative z-10 first:mt-8">
        {category.title}
      </h2>
      <div className="relative overflow-visible pt-[25px] pb-[25px]">

        {/* Scrollable video row - true edge to edge */}
        <div
          ref={scrollRef}
          className="flex gap-4 overflow-x-auto scrollbar-hide pb-2 pl-4 pr-4"
          style={{ 
            maxWidth: '960px', 
            margin: '0 auto', 
            scrollbarWidth: 'none', 
            msOverflowStyle: 'none'
          }}
        >
          {category.videos.map((video, index) => (
            <div 
              key={video.id} 
              className="flex-shrink-0 w-[220px] md:w-[220px] lg:w-[220px] xl:w-[220px] relative group hover:z-50"
              onMouseEnter={() => setClickedVideoId(video.id)}
            >
              {/* Top 10 Number overlay for first category */}
              {category.title.includes("Meistgesehen") && 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 group-hover:shadow-2xl rounded-lg overflow-hidden"
              />
            </div>
          ))}
        </div>
        
        {/* Navigation arrows - black circles */}
        <div className="absolute left-2 top-1/2 -translate-y-1/2 z-[60] hidden md:block">
          <Button
            onClick={() => scroll('left')}
            className="gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 px-3 bg-black/60 hover:bg-black/80 text-white border-none w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm ml-[160px] mr-[160px]"
            size="sm"
          >
            <ChevronLeft className="w-4 h-4" />
          </Button>
        </div>
        <div className="absolute right-2 top-1/2 -translate-y-1/2 z-[60] hidden md:block">
          <Button
            onClick={() => scroll('right')}
            className="bg-black/60 hover:bg-black/80 text-white border-none w-10 h-10 rounded-full transition-all duration-300 flex items-center justify-center shadow-lg backdrop-blur-sm"
            size="sm"
          >
            <ChevronRight className="w-4 h-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}