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

import { useState, useRef, useEffect } from "react";
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 handleVideoClick = (video: Video) => {
    setSelectedVideo(video);
    setIsModalOpen(true);
  };

  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()
    );

    return [
      {
        title: "Top 10 Videos Today",
        videos: sortedByViews.slice(0, 10)
      },
      {
        title: "Popular Videos",
        videos: sortedByViews.slice(10, 20)
      },
      {
        title: "Recently Added",
        videos: sortedByDate.slice(0, 15)
      },
      {
        title: "Trending Now",
        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} style={{ marginBottom: categoryIndex === 2 ? '0px' : '24px' }}>
            <CategoryRow
              category={category}
              onVideoClick={handleVideoClick}
            />
          </div>
        ))}
      </div>

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

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

function CategoryRow({ category, onVideoClick }: 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) {
      // 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'
      });
    }
  };

  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"
      onMouseLeave={() => setClickedVideoId(null)}
    >
      <h2 className="text-2xl font-bold text-bunny-light mb-0 px-4">
        {category.title}
      </h2>
      
      <div className="relative overflow-hidden">
        {/* Left scroll button - only on desktop */}
        <Button
          onClick={() => scroll('left')}
          onMouseEnter={() => startAutoScroll('left')}
          onMouseLeave={stopAutoScroll}
          className="absolute left-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-12 h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex"
          size="sm"
        >
          <ChevronLeft className="w-5 h-5" />
        </Button>

        {/* Right scroll button - only on desktop */}
        <Button
          onClick={() => scroll('right')}
          onMouseEnter={() => startAutoScroll('right')}
          onMouseLeave={stopAutoScroll}
          className="absolute right-2 top-1/2 -translate-y-1/2 z-30 bg-black/80 hover:bg-black/95 text-white border-none w-12 h-12 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center shadow-xl hidden md:flex"
          size="sm"
        >
          <ChevronRight className="w-5 h-5" />
        </Button>

        {/* Scrollable video row - true edge to edge */}
        <div
          ref={scrollRef}
          className="flex gap-1 overflow-x-auto scrollbar-hide pb-0"
          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
        >
          {category.videos.map((video, index) => (
            <div 
              key={video.id} 
              className="flex-shrink-0 w-[calc(55vw-2px)] sm:w-[calc(40vw-2px)] md:w-[calc(30vw-2px)] lg:w-[calc(24vw-2px)] relative group hover:z-50"
              onMouseEnter={() => setClickedVideoId(video.id)}
            >
              {/* Top 10 Number overlay for first category */}
              {category.title.includes("Top 10") && index < 10 && clickedVideoId !== video.id && (
                <div className="absolute top-2 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>
      </div>
    </div>
  );
}