videofolxtv/client/src/pages/home.tsx

import { useState, useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
import { type Video } from "@shared/schema";
import SearchHeader from "@/components/search-header";
import VideoGrid from "@/components/video-grid";


interface VideosResponse {
  videos: Video[];
  total: number;
  hasMore: boolean;
}

export default function Home() {
  const [searchQuery, setSearchQuery] = useState("");
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
  const [offset, setOffset] = useState(0);
  const [allVideos, setAllVideos] = useState<Video[]>([]);



  // Fetch videos
  const { data: videosResponse, isLoading, refetch } = useQuery<VideosResponse>({
    queryKey: ["/api/videos", { 
      limit: 20, 
      offset, 
      search: searchQuery || undefined
    }],
    queryFn: async ({ queryKey }) => {
      const [, params] = queryKey as [string, any];
      const searchParams = new URLSearchParams();
      
      Object.entries(params).forEach(([key, value]) => {
        if (value !== undefined) {
          searchParams.append(key, String(value));
        }
      });

      const response = await fetch(`/api/videos?${searchParams}`);
      if (!response.ok) {
        throw new Error('Failed to fetch videos');
      }
      return response.json();
    }
  });

  // Update videos when new data comes in
  useEffect(() => {
    if (videosResponse) {
      if (offset === 0) {
        setAllVideos(videosResponse.videos);
      } else {
        setAllVideos(prev => [...prev, ...videosResponse.videos]);
      }
    }
  }, [videosResponse, offset]);

  // Reset videos when search changes
  const handleSearch = (query: string) => {
    setSearchQuery(query);
    setOffset(0);
    setAllVideos([]);
  };

  const handleLoadMore = () => {
    setOffset(prev => prev + 20);
  };

  // Force refetch when search changes
  useEffect(() => {
    refetch();
  }, [searchQuery, offset, refetch]);

  return (
    <div className="min-h-screen bunny-dark floating-triangles">
      <SearchHeader
        onSearch={handleSearch}
        onViewChange={setViewMode}
        currentView={viewMode}
      />

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative">
        {/* Large geometric triangles */}
        <div className="absolute top-10 right-10 w-0 h-0 border-l-[100px] border-l-transparent border-r-[100px] border-r-transparent border-b-[150px] border-b-blue-400/8 rotate-12 z-0"></div>
        <div className="absolute top-1/3 left-5 w-0 h-0 border-l-[70px] border-l-transparent border-r-[70px] border-r-transparent border-b-[110px] border-b-purple-400/8 -rotate-12 z-0"></div>
        <div className="absolute bottom-1/4 right-1/4 w-0 h-0 border-l-[60px] border-l-transparent border-r-[60px] border-r-transparent border-b-[90px] border-b-cyan-400/8 rotate-45 z-0"></div>
        
        {/* Additional floating triangles */}
        <div className="triangle-decoration-1" style={{top: '20%', right: '5%'}}></div>
        <div className="triangle-decoration-2" style={{top: '60%', left: '3%'}}></div>
        <div className="triangle-decoration-3" style={{top: '40%', right: '20%'}}></div>
        <VideoGrid
          videos={allVideos}
          isLoading={isLoading}
          hasMore={videosResponse?.hasMore || false}
          onLoadMore={handleLoadMore}
          viewMode={viewMode}
        />
      </main>


      


      {/* Footer with large triangle design */}
      <footer className="bunny-gray border-t border-white/20 mt-16 relative overflow-hidden">
        {/* Large geometric triangles */}
        <div className="absolute top-0 right-0 w-0 h-0 border-l-[200px] border-l-transparent border-b-[120px] border-b-blue-500/10"></div>
        <div className="absolute bottom-0 left-0 w-0 h-0 border-r-[150px] border-r-transparent border-t-[100px] border-t-purple-500/10"></div>
        <div className="absolute top-1/2 right-1/3 w-0 h-0 border-l-[80px] border-l-transparent border-r-[80px] border-r-transparent border-b-[100px] border-b-cyan-400/8 transform -translate-y-1/2 rotate-45"></div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div className="col-span-1 md:col-span-2">
              <div className="flex items-center space-x-2 mb-4">
                <div className="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
                  <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[5px] border-y-transparent ml-1"></div>
                </div>
                <h3 className="text-xl font-bold text-bunny-light">go4.video</h3>
              </div>
              <p className="text-bunny-muted mb-4">
                Fast, reliable, and globally distributed video streaming platform.
              </p>
              <div className="flex space-x-4">
                <a href="#" className="text-bunny-muted hover:text-bunny-blue transition-colors">
                  Twitter
                </a>
                <a href="#" className="text-bunny-muted hover:text-bunny-blue transition-colors">
                  GitHub
                </a>
                <a href="#" className="text-bunny-muted hover:text-bunny-blue transition-colors">
                  LinkedIn
                </a>
              </div>
            </div>
            
            <div>
              <h4 className="font-semibold mb-4 text-bunny-light">Platform</h4>
              <ul className="space-y-2 text-bunny-muted">
                <li><a href="#" className="hover:text-bunny-light transition-colors">Upload</a></li>
                <li><a href="#" className="hover:text-bunny-light transition-colors">Analytics</a></li>
                <li><a href="#" className="hover:text-bunny-light transition-colors">API Docs</a></li>
                <li><a href="#" className="hover:text-bunny-light transition-colors">Support</a></li>
              </ul>
            </div>
            
            <div>
              <h4 className="font-semibold mb-4 text-bunny-light">Company</h4>
              <ul className="space-y-2 text-bunny-muted">
                <li><a href="#" className="hover:text-bunny-light transition-colors">About</a></li>
                <li><a href="#" className="hover:text-bunny-light transition-colors">Privacy</a></li>
                <li><a href="#" className="hover:text-bunny-light transition-colors">Terms</a></li>
                <li><a href="#" className="hover:text-bunny-light transition-colors">Contact</a></li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-700 mt-8 pt-8 text-center text-bunny-muted">
            <p>&copy; 2024 go4.video. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}