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

import { useState, useRef } 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 animate-pulse">
                  <div className="bg-bunny-gray aspect-[9/16] 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 className="space-y-12">
        {categories.map((category, categoryIndex) => (
          <CategoryRow
            key={categoryIndex}
            category={category}
            onVideoClick={handleVideoClick}
          />
        ))}
      </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 scroll = (direction: 'left' | 'right') => {
    if (scrollRef.current) {
      const scrollAmount = 240; // Width of card + gap
      const currentScroll = scrollRef.current.scrollLeft;
      const targetScroll = direction === 'left' 
        ? currentScroll - scrollAmount 
        : currentScroll + scrollAmount;
        
      scrollRef.current.scrollTo({
        left: targetScroll,
        behavior: 'smooth'
      });
    }
  };

  return (
    <div className="relative group">
      <h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
        {category.title}
      </h2>
      
      <div className="relative">
        {/* Left scroll button */}
        <Button
          onClick={() => scroll('left')}
          className="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
          size="sm"
        >
          <ChevronLeft className="w-6 h-6" />
        </Button>

        {/* Right scroll button */}
        <Button
          onClick={() => scroll('right')}
          className="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/60 hover:bg-black/80 text-white border-none p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
          size="sm"
        >
          <ChevronRight className="w-6 h-6" />
        </Button>

        {/* Scrollable video row */}
        <div
          ref={scrollRef}
          className="flex space-x-4 overflow-x-auto scrollbar-hide pb-4 px-4"
          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
        >
          {category.videos.map((video, index) => (
            <div key={video.id} className="flex-shrink-0 w-56 relative group">
              {/* Top 10 Number overlay for first category */}
              {category.title.includes("Top 10") && index < 10 && (
                <div className="absolute top-2 left-2 z-20 text-white font-black text-7xl drop-shadow-2xl"
                     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={onVideoClick}
                className="w-full hover:scale-110 hover:z-10 transition-all duration-500 group-hover:shadow-2xl rounded-lg overflow-hidden"
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}