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 { Link } from "wouter";
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="border-b border-white/5 bg-transparent backdrop-blur-sm 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-[#da234d]/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-[#da234d]/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 py-4">
          <div className="flex items-center space-x-4">
            <Link href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
              <div className="w-9 h-9 bg-[#da234d] 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">video.folx.tv</h1>
            </Link>
          </div>
          
          <div className="hidden md:flex items-center space-x-6">
            <nav className="flex space-x-6">
              <Link href="/" className="text-bunny-light hover:text-white transition-colors" data-testid="link-home">
                Home
              </Link>
              <Link href="/folx-stadl" className="text-bunny-light hover:text-white transition-colors" data-testid="link-folx-stadl">
                FOLX STADL
              </Link>
            </nav>
            
            <div className="relative">
              <Input
                type="search"
                placeholder="Videos suchen..."
                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-[#da234d] 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 space-y-4">
            {/* Mobile Navigation */}
            <nav className="flex flex-col space-y-3">
              <Link 
                href="/" 
                className="text-bunny-light hover:text-white transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5" 
                data-testid="link-mobile-home"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                Home
              </Link>
              <Link 
                href="/folx-stadl" 
                className="text-bunny-light hover:text-white transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5" 
                data-testid="link-mobile-folx-stadl"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                FOLX STADL
              </Link>
            </nav>
            
            {/* Mobile Search */}
            <div className="relative">
              <Input
                type="search"
                placeholder="Videos suchen..."
                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-[#da234d] transition-colors w-full"
                data-testid="input-mobile-search"
                autoFocus
              />
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
            </div>
          </div>
        </div>
      )}

    </div>
  );
}