smart-electronics-frontend/components/layout/ui/SearchBar.tsx

"use client";

import React, { useState, useEffect, useRef } from "react";
import { Search, X, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { useRouter } from "next/navigation";
import { useSearchProducts } from "@/features/search/hooks/useSearch";
import Image from "next/image";
import { SearchIcon } from "@/components/icons";

interface SearchBarProps {
  isMobile: boolean;
  searchPlaceholder: string;
  isOpen?: boolean;
  onClose?: () => void;
  className?: string;
  locale?: string;
}

export default function SearchBar({
  isMobile,
  searchPlaceholder,
  isOpen,
  onClose,
  className = "",
  locale = "ru",
}: SearchBarProps) {
  const router = useRouter();
  const [searchValue, setSearchValue] = useState("");
  const [debouncedSearch, setDebouncedSearch] = useState("");
  const [showResults, setShowResults] = useState(false);
  const searchRef = useRef<HTMLDivElement>(null);

  const { data, isLoading } = useSearchProducts({ q: debouncedSearch });

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedSearch(searchValue);
    }, 300);

    return () => clearTimeout(timer);
  }, [searchValue]);

  useEffect(() => {
    if (debouncedSearch && data?.data && data.data.length > 0) {
      setShowResults(true);
    } else {
      setShowResults(false);
    }
  }, [debouncedSearch, data]);

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
        setShowResults(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const handleSearch = (value: string) => {
    setSearchValue(value);
  };

  const handleProductClick = (productId: number) => {
    router.push(`/${locale}/product/${productId}`);
    setSearchValue("");
    setShowResults(false);
    if (onClose) onClose();
  };

  const handleClearSearch = () => {
    setSearchValue("");
    setShowResults(false);
  };

  const SearchResults = () => {
    if (!showResults || !data?.data) return null;

    return (
      <div className="absolute top-full left-0 right-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-2xl max-h-[500px] overflow-y-auto z-50 animate-slide-up">
        <div className="p-2">
          {data.data.map((product, index) => (
            <button
              key={product.id}
              onClick={() => handleProductClick(product.id)}
              className={`w-full cursor-pointer flex items-center gap-4 p-3 rounded-lg hover:bg-gray-50 transition-all duration-200 group ${
                index !== data.data.length - 1 ? "border-b border-gray-100" : ""
              }`}
            >
              <div className="relative w-20 h-20 shrink-0 rounded-lg overflow-hidden bg-gray-50 border border-gray-100">
                <Image
                  src={product.thumbnail}
                  alt={product.name}
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-200"
                />
              </div>
              <div className="flex-1 text-left min-w-0">
                <p className="font-semibold text-sm line-clamp-2 text-gray-900 group-hover:text-gray-700 transition-colors mb-1">
                  {product.name}
                </p>
                <p className="text-base font-bold text-gray-900 mb-1">
                  {product.price_amount} TMT
                </p>
                <p className="text-xs text-gray-500 font-medium">
                  {product.brand.name}
                </p>
              </div>
            </button>
          ))}
        </div>
      </div>
    );
  };

  if (isMobile) {
    return (
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="top-4 translate-y-0 rounded-lg border-gray-200">
          <DialogHeader>
            <DialogTitle className="text-xl font-bold">
              {searchPlaceholder}
            </DialogTitle>
          </DialogHeader>
          <div className="relative" ref={searchRef}>
            <div className="relative">
              <Input
                type="text"
                placeholder={searchPlaceholder}
                value={searchValue}
                onChange={(e) => handleSearch(e.target.value)}
                className="h-12 rounded-lg pl-12 pr-10 border-gray-200 focus:border-gray-900 focus-visible:border-gray-900 focus-visible:ring-0 transition-colors"
                autoFocus
              />
              <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
              {isLoading && (
                <Loader2 className="absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5 animate-spin text-gray-400" />
              )}
            </div>
            <SearchResults />
          </div>
        </DialogContent>
      </Dialog>
    );
  }

  return (
    <div
      className={`bg-gray-900 rounded-lg flex items-center relative shadow-sm hover:shadow-md transition-shadow duration-200 ${className}`}
      ref={searchRef}
    >
      <div className="w-full relative">
        <div className="relative">
          <Input
            type="text"
            placeholder={searchPlaceholder}
            value={searchValue}
            onChange={(e) => handleSearch(e.target.value)}
            className="border w-full rounded-lg h-11 border-gray-900 bg-white pl-12 pr-4 focus-visible:ring-2 focus-visible:ring-gray-300 transition-all"
          />
          <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
        </div>
        {isLoading && (
          <Loader2 className="absolute right-4 top-1/2 -translate-y-1/2 h-5 w-5 animate-spin text-gray-400" />
        )}
      </div>
      <Button
        size="icon"
        className="h-11 w-11 hover:bg-gray-800 cursor-pointer bg-transparent flex items-center mr-1 text-white rounded-lg transition-colors"
      >
        <SearchIcon />
      </Button>
      <SearchResults />
    </div>
  );
}