videofolxtv/client/src/components/search-header.tsx

import { useState, useCallback } from "react";
import { Search, Play, Menu, Grid3X3, List, X } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import go4LogoPath from "@assets/go4_1756394900352.png";

interface SearchHeaderProps {
  onSearch: (query: string) => void;
  onViewChange: (view: "grid" | "list") => void;
  currentView: "grid" | "list";
}

export default function SearchHeader({
  onSearch,
  onViewChange,
  currentView
}: SearchHeaderProps) {
  const [searchQuery, setSearchQuery] = useState("");
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // Debounce function to delay search API calls
  const debounce = useCallback((func: Function, delay: number) => {
    let timeoutId: NodeJS.Timeout;
    return (...args: any[]) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func(...args), delay);
    };
  }, []);

  // Optimized debounced search - waits 300ms and filters short queries
  const debouncedSearch = useCallback(
    debounce((query: string) => {
      // Only search if query is meaningful (2+ characters or empty for reset)
      if (query.length === 0 || query.length >= 2) {
        onSearch(query);
      }
    }, 150),
    [onSearch, debounce]
  );

  const handleSearchChange = (value: string) => {
    setSearchQuery(value);
    debouncedSearch(value);
  };

  return (
    <div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">

      
      {/* Static triangle decorations - fixed positioning */}
      <div className="absolute top-2 right-[25%] w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-blue-400/8 transform rotate-12 z-0 pointer-events-none"></div>
      <div className="absolute top-3 left-[40%] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-purple-400/6 transform -rotate-6 z-0 pointer-events-none"></div>
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="flex items-center justify-between h-20">
          <div className="flex items-center space-x-4">
            <a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
              <div className="w-9 h-9 gradient-primary rounded-lg flex items-center justify-center shadow-lg">
                <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
              </div>
              <h1 className="text-2xl font-bold text-white tracking-wide">go4.video</h1>
            </a>
          </div>
          
          <div className="hidden md:flex items-center space-x-6">
            <nav className="flex space-x-6">
              <a href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
                Home
              </a>
            </nav>
            
            <div className="relative">
              <Input
                type="search"
                placeholder="Search videos..."
                value={searchQuery}
                onChange={(e) => handleSearchChange(e.target.value)}
                className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64"
                data-testid="input-search"
              />
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
            </div>
          </div>
          
          <Button 
            variant="ghost" 
            className="md:hidden text-bunny-light" 
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            data-testid="button-mobile-menu"
          >
            {isMobileMenuOpen ? <X className="text-xl" /> : <Menu className="text-xl" />}
          </Button>
        </div>
      </div>

      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <div className="md:hidden bunny-gray border-b border-white/20 animate-in slide-in-from-top-2 duration-200">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            {/* Mobile Search */}
            <div className="relative mb-4">
              <Input
                type="search"
                placeholder="Search videos..."
                value={searchQuery}
                onChange={(e) => handleSearchChange(e.target.value)}
                className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
                data-testid="input-mobile-search"
              />
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
            </div>
            
            {/* Mobile Navigation */}
            <nav className="flex flex-col space-y-4">
              <a 
                href="/" 
                className="text-bunny-light hover:text-bunny-blue transition-colors py-2 border-b border-white/10"
                onClick={() => setIsMobileMenuOpen(false)}
                data-testid="link-mobile-home"
              >
                Home
              </a>
            </nav>
          </div>
        </div>
      )}

      {/* Filter Bar */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h2 className="text-2xl font-bold mb-2 text-bunny-light">Video Library</h2>
            <p className="text-bunny-muted">Video streaming platform</p>
          </div>
          
          <div className="flex bg-bunny-gray rounded-lg p-1">
            <Button
              variant={currentView === "grid" ? "default" : "ghost"}
              size="sm"
              onClick={() => onViewChange("grid")}
              className={`px-3 py-1 rounded text-sm ${
                currentView === "grid" 
                  ? "bg-bunny-blue text-white" 
                  : "text-bunny-muted hover:text-white"
              }`}
              data-testid="button-grid-view"
            >
              <Grid3X3 className="w-4 h-4" />
            </Button>
            <Button
              variant={currentView === "list" ? "default" : "ghost"}
              size="sm"
              onClick={() => onViewChange("list")}
              className={`px-3 py-1 rounded text-sm ${
                currentView === "list" 
                  ? "bg-bunny-blue text-white" 
                  : "text-bunny-muted hover:text-white"
              }`}
              data-testid="button-list-view"
            >
              <List className="w-4 h-4" />
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}