'use client';
import { useState, useEffect, useRef } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import CartLink from '@/components/cart/CartLink';
import UserMenu from '@/components/auth/UserMenu';
import { fetchProducts, fetchSearchSuggestions } from '@/lib/api';

interface SearchProduct {
  id: string;
  name: string;
  slug: string;
  images?: { url: string }[];
}

function LiveSearchResults({
  q,
  results,
  suggestions,
  onClose,
  onSuggestionClick,
}: {
  q: string;
  results: SearchProduct[];
  suggestions: string[];
  onClose: () => void;
  onSuggestionClick: (term: string) => void;
}) {
  if (!q.trim()) return null;

  const hasResults = results.length > 0;

  return (
    <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg z-50 overflow-hidden">
      {results.slice(0, 6).map((product) => (
        <Link
          key={product.id}
          href={`/products/${product.slug}`}
          onClick={onClose}
          className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors"
        >
          <div className="w-10 h-14 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0 flex items-center justify-center">
            {product.images?.[0] ? (
              <Image
                src={product.images[0].url.replace('/uploads/', '/uploads/40/')}
                alt={product.name}
                width={40}
                height={56}
                className="object-contain"
              />
            ) : (
              <span className="text-lg">🌿</span>
            )}
          </div>
          <span className="text-sm font-medium text-gray-800 line-clamp-1">{product.name}</span>
        </Link>
      ))}

      {!hasResults && (
        <div className="px-4 py-3">
          <p className="text-sm text-gray-400 mb-2">Sin resultados para &ldquo;{q}&rdquo;</p>
          {suggestions.length > 0 && (
            <div>
              <p className="text-xs text-gray-400 mb-1">Quizás buscabas:</p>
              <div className="flex flex-wrap gap-1">
                {suggestions.map((s) => (
                  <button
                    key={s}
                    onClick={() => onSuggestionClick(s)}
                    className="text-xs px-2 py-1 bg-[#70ad47]/10 text-[#70ad47] rounded-full hover:bg-[#70ad47]/20 transition-colors font-medium"
                  >
                    {s}
                  </button>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      <Link
        href={`/search?q=${encodeURIComponent(q)}`}
        onClick={onClose}
        className="block px-4 py-2.5 text-xs text-center text-[#70ad47] hover:bg-[#70ad47]/5 font-medium border-t border-gray-100 transition-colors"
      >
        Ver todos los resultados para &ldquo;{q}&rdquo; →
      </Link>
    </div>
  );
}

export function Header() {
  const [q, setQ] = useState('');
  const [results, setResults] = useState<SearchProduct[]>([]);
  const [suggestions, setSuggestions] = useState<string[]>([]);
  const [showDropdown, setShowDropdown] = useState(false);
  const [searching, setSearching] = useState(false);
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const router = useRouter();

  const loadResults = async (term: string) => {
    setSearching(true);
    try {
      const [items, suggs] = await Promise.all([
        fetchProducts({ q: term, limit: 6 }),
        fetchSearchSuggestions(term),
      ]);
      setResults(Array.isArray(items) ? items as SearchProduct[] : []);
      setSuggestions(suggs);
      setShowDropdown(true);
    } catch {
      setResults([]);
      setSuggestions([]);
      setShowDropdown(false);
    } finally {
      setSearching(false);
    }
  };

  useEffect(() => {
    if (!q.trim()) return;
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => {
      loadResults(q.trim());
    }, 300);
    return () => {
      if (debounceRef.current) clearTimeout(debounceRef.current);
    };
  }, [q]);

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setShowDropdown(false);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const handleSearchChange = (value: string) => {
    setQ(value);
    if (!value.trim()) {
      setResults([]);
      setSuggestions([]);
      setShowDropdown(false);
      setSearching(false);
    }
  };

  const handleSuggestionClick = (term: string) => {
    setQ(term);
    setShowDropdown(false);
    router.push(`/search?q=${encodeURIComponent(term)}`);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setShowDropdown(false);
    const term = q.trim();
    if (term) router.push(`/search?q=${encodeURIComponent(term)}`);
    else router.push('/search');
  };

  return (
    <header className="sticky top-0 z-50 bg-white border-b border-gray-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16 gap-4">
          {/* Logo */}
          <Link href="/" className="flex items-center shrink-0">
            <Image
              src="/images/logo-main.png"
              alt="mercadodevida"
              width={56}
              height={56}
              className="h-14 w-auto object-contain"
              priority
            />
          </Link>

          {/* Search bar */}
          <div className="flex-1 max-w-xl hidden sm:block relative" ref={dropdownRef}>
            <form onSubmit={handleSubmit}>
              <div className="relative w-full">
                <input
                  type="search"
                  id="site-search"
                  name="q"
                  value={q}
                  onChange={(e) => handleSearchChange(e.target.value)}
                  onFocus={() => { if (q.trim() && (results.length > 0 || suggestions.length > 0)) setShowDropdown(true); }}
                  placeholder="Buscar productos, marcas..."
                  className="w-full pl-10 pr-10 py-2.5 border border-gray-200 rounded-full text-sm
                    focus:ring-2 focus:ring-[#70ad47] focus:border-transparent outline-none
                    placeholder-gray-400 text-gray-900 bg-gray-50 hover:bg-white transition-colors"
                />
                <svg
                  className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"
                  fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
                >
                  <path strokeLinecap="round" strokeLinejoin="round"
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                {searching && (
                  <div className="absolute right-3 top-1/2 -translate-y-1/2">
                    <div className="w-4 h-4 border-2 border-gray-300 border-t-[#70ad47] rounded-full animate-spin" />
                  </div>
                )}
              </div>
            </form>
            {showDropdown && (
              <LiveSearchResults
                q={q}
                results={results}
                suggestions={suggestions}
                onClose={() => setShowDropdown(false)}
                onSuggestionClick={handleSuggestionClick}
              />
            )}
          </div>

          {/* Nav */}
          <nav className="hidden lg:flex items-center gap-6">
            <Link href="/products" className="text-sm font-medium text-gray-700 hover:text-[#70ad47] transition-colors">
              Productos
            </Link>
            <Link href="/categories" className="text-sm font-medium text-gray-700 hover:text-[#70ad47] transition-colors">
              Categorías
            </Link>
            <Link href="/brands" className="text-sm font-medium text-gray-700 hover:text-[#70ad47] transition-colors">
              Marcas
            </Link>
          </nav>

          {/* Cart + user */}
          <div className="flex items-center gap-3 shrink-0">
            <Link href="/search" className="sm:hidden text-gray-500 hover:text-[#70ad47]">
              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round"
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </Link>
            <CartLink />
            <UserMenu />
          </div>
        </div>
      </div>
    </header>
  );
}
