import { useState, useRef, useEffect, useMemo, useCallback } from "react";
import { useLocation } from "wouter";
import { type Video } from "@shared/schema";
import VideoCard from "./video-card";
import BunnyVideoModal from "./bunny-video-modal";
import MobileInlineAd from "./MobileInlineAd";
import InlineAd from "./InlineAd";
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) => {
    // Generate short ID for cleaner URLs (first 8 chars without dashes)
    const shortId = video.id.replace(/-/g, '').substring(0, 8);
    // Navigate to individual video page with short ID
    setLocation(`/video/${shortId}`);
  };

  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: (() => {
          // Shuffle FOLX STADL videos randomly
          const shuffled = [...folxStadlVideos].sort(() => Math.random() - 0.5);
          return shuffled.slice(0, 10);
        })()
      }] : []),
      {
        title: "VIDEO",
        videos: (() => {
          // Filter videos that specifically contain "Geschichte des Liedes VIDEO" in title or description
          const videoVideos = videos.filter(video => 
            video.title.toLowerCase().includes("geschichte des liedes video") || 
            video.description?.toLowerCase().includes("geschichte des liedes video")
          );
          
          // If no specific "Geschichte des Liedes VIDEO" videos found, use ONLY pure video content (not shows)
          if (videoVideos.length === 0) {
            const pureVideos = videos.filter(video => 
              !video.title.includes("FOLX STADL") && 
              !video.title.includes("FOLXSTADL") &&
              !video.title.includes("Gipfelstammtisch") &&
              !video.title.toLowerCase().includes("oddaja") &&
              !video.title.toLowerCase().includes("sendung") &&
              !video.title.toLowerCase().includes("episode")
            );
            const shuffled = [...pureVideos].sort(() => Math.random() - 0.5);
            return shuffled.slice(0, 10);
          }
          
          // Shuffle the Geschichte des Liedes VIDEO videos randomly
          const shuffled = [...videoVideos].sort(() => Math.random() - 0.5);
          
          // Return 10 random videos from the VIDEO collection
          return shuffled.slice(0, 10);
        })()
      },
      {
        title: "GIPFELSTAMMTISCH",
        videos: (() => {
          // Filter videos that specifically contain "Gipfelstammtisch" in title
          const gipfelVideos = videos.filter(video => 
            video.title.includes("Gipfelstammtisch")
          );
          
          // Shuffle the Gipfelstammtisch videos randomly
          const shuffled = [...gipfelVideos].sort(() => Math.random() - 0.5);
          
          // Return 10 random videos from the GIPFELSTAMMTISCH collection
          return shuffled.slice(0, 10);
        })()
      },
      {
        title: "DIE Geschichte des Liedes",
        videos: (() => {
          // Filter videos that specifically contain "Geschichte des Liedes" in title or description
          const gdlVideos = videos.filter(video => 
            video.title.toLowerCase().includes("geschichte des liedes") || 
            video.description?.toLowerCase().includes("geschichte des liedes")
          );
          
          // If no specific "Geschichte des Liedes" videos found, fallback to general filter
          if (gdlVideos.length === 0) {
            const fallbackVideos = videos.filter(video => 
              !video.title.includes("FOLX STADL") && 
              !video.title.includes("FOLXSTADL") &&
              !video.title.includes("Gipfelstammtisch")
            );
            const shuffled = [...fallbackVideos].sort(() => Math.random() - 0.5);
            return shuffled.slice(0, 10);
          }
          
          // Shuffle the Geschichte des Liedes videos randomly
          const shuffled = [...gdlVideos].sort(() => Math.random() - 0.5);
          
          // Return 10 random videos from the collection
          return shuffled.slice(0, 10);
        })()
      }
    ];
  }, [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 bg-[#da234d] 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">video.folx.tv</h3>
          <p className="text-bunny-light">Videos werden geladen...</p>
        </div>
      </div>
    );
  }

  if (videos.length === 0) {
    return (
      <div className="text-center py-12">
        <div className="w-12 h-12 bg-[#da234d] 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">
          Keine Videos gefunden
        </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-4">
        {categories.map((category, categoryIndex) => (
          <div key={categoryIndex}>
            <div className={`${categoryIndex === 0 ? 'mt-2 mb-4' : 'mb-4'}`}>
              <CategoryRow
                category={category}
                onVideoClick={handleVideoClick}
                hideScrollButtons={false}
              />
            </div>
            {/* Add inline ad after every second category (categoryIndex 1, 3, 5...) */}
            {categoryIndex > 0 && (categoryIndex + 1) % 2 === 0 && (
              <InlineAd />
            )}
          </div>
        ))}
        
        {/* Add final ad after all categories */}
        <InlineAd />
      </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 [currentIndex, setCurrentIndex] = useState(0);
  const [touchStart, setTouchStart] = useState(0);
  const [touchEnd, setTouchEnd] = useState(0);
  const [scrollTimer, setScrollTimer] = useState<NodeJS.Timeout | null>(null);

  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) {
      // Calculate card width with gap for precise scrolling
      const containerWidth = scrollRef.current.clientWidth;
      const isMobile = window.innerWidth < 768;
      const cardWidth = isMobile ? containerWidth - 24 : 330; // 24px for mobile margins (3rem - 1.5rem each side)
      const gap = 12; // 3 * 0.25rem = 12px gap
      const scrollAmount = cardWidth + gap;
      
      const currentScroll = scrollRef.current.scrollLeft;
      const targetScroll = direction === 'left' 
        ? Math.max(0, 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]);

  // Cleanup timer on unmount
  useEffect(() => {
    return () => {
      if (scrollTimer) {
        clearTimeout(scrollTimer);
      }
    };
  }, [scrollTimer]);

  const handleScroll = () => {
    checkScrollButtons();
    
    // Clear existing timer
    if (scrollTimer) {
      clearTimeout(scrollTimer);
    }
    
    // Calculate current index for mobile dots with delay
    if (scrollRef.current) {
      const containerWidth = scrollRef.current.clientWidth;
      const scrollLeft = scrollRef.current.scrollLeft;
      const isMobile = window.innerWidth < 768;
      
      if (isMobile) {
        // Debounce the dot update to prevent flickering during scroll
        const timer = setTimeout(() => {
          // Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
          const cardWidth = window.innerWidth - 24;
          const scrollProgress = scrollLeft / cardWidth;
          const newIndex = Math.round(scrollProgress);
          const clampedIndex = Math.min(Math.max(newIndex, 0), 9); // Ensure 0-9 range
          
          // Only update if index actually changed
          if (clampedIndex !== currentIndex) {
            setCurrentIndex(clampedIndex);
          }
        }, 100); // 100ms delay for stable positioning
        
        setScrollTimer(timer);
      }
    }
  };

  // Touch handlers for mobile swipe
  const handleTouchStart = (e: React.TouchEvent) => {
    setTouchEnd(0);
    setTouchStart(e.targetTouches[0].clientX);
  };

  const handleTouchMove = (e: React.TouchEvent) => {
    setTouchEnd(e.targetTouches[0].clientX);
  };

  const handleTouchEnd = () => {
    if (!touchStart || !touchEnd) return;
    
    const distance = touchStart - touchEnd;
    const isLeftSwipe = distance > 50; // Swipe left (next)
    const isRightSwipe = distance < -50; // Swipe right (previous)
    
    if (isLeftSwipe && currentIndex < 9) { // Max index 9 for 10 cards
      // Navigate to next card - snap to left edge of screen
      const nextIndex = currentIndex + 1;
      if (scrollRef.current) {
        // Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
        const cardWidth = window.innerWidth - 24;
        // Scroll so only one full card is visible
        scrollRef.current.scrollTo({
          left: nextIndex * cardWidth,
          behavior: 'smooth'
        });
        setCurrentIndex(nextIndex);
      }
    }
    
    if (isRightSwipe && currentIndex > 0) {
      // Navigate to previous card - snap to left edge of screen
      const prevIndex = currentIndex - 1;
      if (scrollRef.current) {
        // Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
        const cardWidth = window.innerWidth - 24;
        // Scroll so only one full card is visible
        scrollRef.current.scrollTo({
          left: prevIndex * cardWidth,
          behavior: 'smooth'
        });
        setCurrentIndex(prevIndex);
      }
    }
  };

  return (
    <div 
      className="relative"
      onMouseLeave={() => setClickedVideoId(null)}
    >
      <h2 className="text-lg font-medium text-bunny-light mb-1 md: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-rose-600 hover:bg-rose-700 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-rose-600 hover:bg-rose-700 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-0 md:gap-3 overflow-x-auto scrollbar-hide py-2 md:py-4 px-3 md:px-2"
          style={{ 
            scrollbarWidth: 'none', 
            msOverflowStyle: 'none', 
            scrollSnapType: window.innerWidth < 768 ? 'x mandatory' : 'none'
          }}
          onScroll={handleScroll}
          onTouchStart={handleTouchStart}
          onTouchMove={handleTouchMove}
          onTouchEnd={handleTouchEnd}
        >
          {category.videos.map((video, index) => (
            <div 
              key={video.id} 
              className="flex-shrink-0 w-[calc(100vw-1.5rem)] sm:w-[330px] relative hover:z-50"
              style={{ 
                scrollSnapAlign: window.innerWidth < 768 ? 'start' : 'none'
              }}
              onMouseEnter={() => setClickedVideoId(video.id)}
            >
              {/* Top 10 Number overlay for "Meist Angesehen" category - visible on all devices */}
              {category.title.includes("Meist Angesehen") && index < 10 && clickedVideoId !== video.id && (
                <div className="absolute top-0 left-2 z-20 text-white font-black text-5xl sm:text-6xl 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)',
                       fontFeatureSettings: 'normal',
                       fontVariantNumeric: 'normal'
                     }}>
                  {(index + 1).toString()}
                </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>
        
        {/* Mobile navigation dots - only visible on mobile, under all video rows */}
        <div className="md:hidden flex justify-center mt-1 mb-2 gap-1 py-1">
          {Array.from({ length: Math.min(10, category.videos.length) }, (_, index) => (
            <button
              key={`dot-${category.title}-${index}`}
              onClick={() => {
                if (scrollRef.current) {
                  // Card width should match CSS: calc(100vw - 1.5rem) = window width - 24px
                  const cardWidth = window.innerWidth - 24;
                  scrollRef.current.scrollTo({
                    left: index * cardWidth,
                    behavior: 'smooth'
                  });
                  setCurrentIndex(index);
                }
              }}
              className={`rounded-full transition-colors duration-300 ease-in-out ${
                index === currentIndex
                  ? 'bg-[#da234d]'
                  : 'bg-white/25 hover:bg-white/40'
              }`}
              style={{
                width: '8px',
                height: '8px',
                minWidth: '8px',
                minHeight: '8px'
              }}
              aria-label={`Go to card ${index + 1}`}
            />
          ))}
        </div>
      </div>
    </div>
  );
}