import { useQuery } from '@tanstack/react-query';
import { Link } from 'wouter';
import { ArrowLeft } from 'lucide-react';
import VideoCard from '@/components/video-card';
import VideoModal from '@/components/video-modal';
import { useState } from 'react';
import type { Video } from '@shared/schema';

export default function FolxStadlPage() {
  const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const { data: videos = [], isLoading } = useQuery<Video[]>({
    queryKey: ['/api/videos']
  });

  // Filter only FOLX STADL videos
  const folxStadlVideos = videos.filter(video => 
    video.title.includes("FOLX STADL S4") || 
    video.title.includes("FOLXSTADL_S04") ||
    video.title.includes("FOLX STADL S4 -")
  );

  const handleVideoClick = (video: Video) => {
    setSelectedVideo(video);
    setIsModalOpen(true);
  };

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

  if (isLoading) {
    return (
      <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
        <div className="text-white text-xl">Loading...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-bunny-dark text-white">
      {/* Header */}
      <div className="border-b border-white/10 bg-black/20 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4 py-4">
          <div className="flex items-center gap-4">
            <Link href="/">
              <button className="flex items-center gap-2 text-bunny-light hover:text-white transition-colors">
                <ArrowLeft className="w-5 h-5" />
                <span>Back</span>
              </button>
            </Link>
            <h1 className="text-3xl font-bold text-white uppercase tracking-wide">FOLX STADL</h1>
          </div>
        </div>
      </div>

      {/* Video Grid */}
      <div className="max-w-7xl mx-auto px-4 py-8">
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
          {folxStadlVideos.map((video) => (
            <div key={video.id} className="group">
              <VideoCard
                video={video}
                onClick={handleVideoClick}
                className="w-full hover:scale-105 transition-all duration-300 group-hover:shadow-2xl rounded-lg overflow-hidden"
              />
            </div>
          ))}
        </div>

        {folxStadlVideos.length === 0 && (
          <div className="text-center py-16">
            <p className="text-bunny-muted text-lg">No FOLX STADL videos found</p>
          </div>
        )}
      </div>

      {/* Video Modal */}
      {selectedVideo && (
        <VideoModal
          video={selectedVideo}
          isOpen={isModalOpen}
          onClose={handleCloseModal}
        />
      )}
    </div>
  );
}