import React, { useState, useEffect, useRef } from 'react';
import { useRouter } from 'next/router';

interface ProductVariant {
  id: number;
  name: string;
  volume: string;
  currentPrice: number;
}

interface SearchProduct {
  id: number;
  slug: string;
  name: string;
  brandName: string;
  primaryImage: string;
  variants: ProductVariant[];
}

interface SearchDropdownProps {
  searchTerm: string;
  onClose: () => void;
  isOpen: boolean;
}

const SearchDropdown: React.FC<SearchDropdownProps> = ({ searchTerm, onClose, isOpen }) => {
  const [results, setResults] = useState<SearchProduct[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();
  const dropdownRef = useRef<HTMLDivElement>(null);
  const debounceTimeoutRef = useRef<NodeJS.Timeout>();

  useEffect(() => {
    if (!isOpen || !searchTerm.trim()) {
      setResults([]);
      return;
    }

    // Debounce search
    if (debounceTimeoutRef.current) {
      clearTimeout(debounceTimeoutRef.current);
    }

    setLoading(true);
    debounceTimeoutRef.current = setTimeout(async () => {
      try {
        const response = await fetch(`/api/products?q=${encodeURIComponent(searchTerm)}`);
        if (!response.ok) {
          throw new Error('Failed to fetch search results');
        }
        const data = await response.json();
        setResults(data);
        setError(null);
      } catch (err) {
        setError('Chyba při vyhledávání');
        setResults([]);
      } finally {
        setLoading(false);
      }
    }, 300);

    return () => {
      if (debounceTimeoutRef.current) {
        clearTimeout(debounceTimeoutRef.current);
      }
    };
  }, [searchTerm, isOpen]);

  const handleProductClick = (slug: string) => {
    onClose();
    router.push(`/product/${slug}`);
  };

  if (!isOpen) return null;

  return (
    <>
      <style>{`
        .search-dropdown-scrollbar::-webkit-scrollbar {
          width: 8px;
        }
        .search-dropdown-scrollbar::-webkit-scrollbar-track {
          background: rgba(13, 13, 13, 0.5);
          border-radius: 4px;
        }
        .search-dropdown-scrollbar::-webkit-scrollbar-thumb {
          background: #DDA20D;
          border-radius: 4px;
        }
        .search-dropdown-scrollbar::-webkit-scrollbar-thumb:hover {
          background: #e8c330;
        }
      `}</style>
      <div
        ref={dropdownRef}
        className="absolute top-full left-0 right-0 mt-2 bg-luxury-dark border-2 border-luxury-gold/50 rounded-lg shadow-xl z-40 max-h-96 overflow-y-auto search-dropdown-scrollbar"
      >
        {loading && (
          <div className="p-4 text-center text-luxury-gold">
            Hledám...
          </div>
        )}

        {error && (
          <div className="p-4 text-center text-red-500">
            {error}
          </div>
        )}

        {!loading && !error && results.length === 0 && searchTerm.trim() && (
          <div className="p-4 text-center text-luxury-light/60">
            Žádné produkty nenalezeny
          </div>
        )}

        {!loading && !error && results.length > 0 && (
          <div className="divide-y divide-luxury-gold/20">
            {results.map((product) => {
              const availableVariants = product.variants.filter(v => v.currentPrice > 0);
              const minPrice = availableVariants.length > 0
                ? Number(Math.min(...availableVariants.map(v => v.currentPrice))).toFixed(2)
                : null;
              const variantCount = product.variants.length;

              return (
                <div
                  key={product.id}
                  onClick={() => handleProductClick(product.slug)}
                  className="p-3 hover:bg-luxury-dark/80 cursor-pointer transition-colors border-l-4 border-luxury-gold/0 hover:border-luxury-gold/50"
                >
                  <div className="flex gap-3 items-start">
                    <img
                      src={product.primaryImage}
                      alt={product.name}
                      className="w-12 h-12 object-contain rounded bg-luxury-dark/50 flex-shrink-0"
                      onError={(e) => {
                        (e.target as HTMLImageElement).src = '/images/logo.png';
                      }}
                    />
                    <div className="flex-1 min-w-0">
                      <div className="flex justify-between items-start gap-2">
                        <div className="flex-1 min-w-0">
                          <p className="text-luxury-gold font-semibold text-sm uppercase tracking-wide">
                            {product.brandName}
                          </p>
                          <p className="text-luxury-light text-sm truncate">
                            {product.name}
                          </p>
                        </div>
                        {minPrice ? (
                          <div className="text-right">
                            <p className="text-luxury-light/60 text-xs whitespace-nowrap">Cena od</p>
                            <p className="text-luxury-gold font-bold text-base whitespace-nowrap">
                              {minPrice} Kč
                            </p>
                          </div>
                        ) : (
                          <div className="text-right">
                            <p className="text-red-400 font-bold text-base whitespace-nowrap">
                              Vyprodáno
                            </p>
                          </div>
                        )}
                      </div>
                      {variantCount > 0 && (
                        <p className="text-luxury-light/60 text-xs mt-1">
                          ve {variantCount} {variantCount === 1 ? 'velikosti' : variantCount < 5 ? 'velikostech' : 'velikostech'}
                        </p>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </>
  );
};

export default SearchDropdown;