'use client';

import React, { useState, useEffect, useRef, useCallback } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { SearchIcon } from '@/components/ui/Icons';
import { siteConfig } from '@/config/site';

interface SearchResultItem {
  id: number;
  name: string;
  slug: string;
  brand?: string;
  price: number;
  regularPrice?: number;
  image: string;
}

interface SearchAutocompleteProps {
  placeholder?: string;
  autoFocus?: boolean;
  onItemSelect?: () => void;
  className?: string;
}

/**
 * Highlights matching search query inside product title
 */
function HighlightedText({ text, query }: { text: string; query: string }) {
  if (!query.trim()) return <span>{text}</span>;

  const escaped = query.trim().replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(`(${escaped})`, 'gi');
  const parts = text.split(regex);

  return (
    <span>
      {parts.map((part, index) => {
        if (regex.test(part)) {
          return (
            <strong
              key={index}
              style={{
                color: 'var(--g700)',
                fontWeight: 700,
              }}
            >
              {part}
            </strong>
          );
        }
        return <span key={index}>{part}</span>;
      })}
    </span>
  );
}

export default function SearchAutocomplete({
  placeholder = 'মধু, অশ্বগন্ধা, চিয়া সীড খুঁজুন…',
  autoFocus = false,
  onItemSelect,
  className = '',
}: SearchAutocompleteProps) {
  const router = useRouter();
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState<SearchResultItem[]>([]);
  const [totalCount, setTotalCount] = useState(0);
  const [isLoading, setIsLoading] = useState(false);
  const [isOpen, setIsOpen] = useState(false);

  const containerRef = useRef<HTMLDivElement>(null);
  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);

  // Click outside to close dropdown
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  // Fetch search results with debounce
  const fetchSearchResults = useCallback(async (query: string) => {
    const trimmed = query.trim();
    if (trimmed.length < 1) {
      setResults([]);
      setTotalCount(0);
      setIsLoading(false);
      return;
    }

    setIsLoading(true);
    try {
      const res = await fetch(`/api/search?q=${encodeURIComponent(trimmed)}`);
      if (res.ok) {
        const data = await res.json();
        setResults(data.results || []);
        setTotalCount(data.total || 0);
        setIsOpen(true);
      }
    } catch (err) {
      setResults([]);
    } finally {
      setIsLoading(false);
    }
  }, []);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value;
    setSearchTerm(val);

    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current);
    }

    if (!val.trim()) {
      setResults([]);
      setTotalCount(0);
      setIsOpen(false);
      return;
    }

    debounceTimerRef.current = setTimeout(() => {
      fetchSearchResults(val);
    }, 180);
  };

  const handleFocus = () => {
    if (searchTerm.trim().length >= 1 && results.length > 0) {
      setIsOpen(true);
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Escape') {
      setIsOpen(false);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (searchTerm.trim()) {
      setIsOpen(false);
      onItemSelect?.();
      router.push(`/shop?q=${encodeURIComponent(searchTerm.trim())}`);
    }
  };

  const handleItemClick = () => {
    setIsOpen(false);
    onItemSelect?.();
  };

  return (
    <div
      ref={containerRef}
      className={`search-autocomplete-wrapper ${className}`}
      style={{ position: 'relative', width: '100%', maxWidth: '540px' }}
    >
      <form
        className="search"
        action="/shop"
        method="GET"
        onSubmit={handleSubmit}
        role="search"
        style={{ width: '100%', maxWidth: 'none', margin: 0 }}
      >
        <span className="sr">Search products</span>
        <input
          type="search"
          name="q"
          placeholder={placeholder}
          value={searchTerm}
          onChange={handleInputChange}
          onFocus={handleFocus}
          onKeyDown={handleKeyDown}
          autoFocus={autoFocus}
          autoComplete="off"
          spellCheck={false}
          aria-autocomplete="list"
          aria-expanded={isOpen}
        />
        <button type="submit" aria-label="Search">
          {isLoading ? (
            <span className="search-spinner" />
          ) : (
            <SearchIcon width={18} height={18} />
          )}
        </button>
      </form>

      {/* Live Search Results Dropdown */}
      {isOpen && searchTerm.trim().length >= 1 && (
        <div className="search-dropdown-menu" role="listbox">
          {results.length > 0 ? (
            <>
              {/* Responsive Grid: 2 columns on desktop, 1 column on mobile */}
              <div className="search-results-grid">
                {results.map((item, index) => {
                  const formattedPrice = `${siteConfig.currency.symbol}${Math.round(item.price).toLocaleString()}`;
                  const formattedRegular = item.regularPrice && item.regularPrice > item.price
                    ? `${siteConfig.currency.symbol}${Math.round(item.regularPrice).toLocaleString()}`
                    : null;

                  return (
                    <Link
                      key={item.id}
                      href={`/product/${item.slug}`}
                      className="search-item-card"
                      onClick={handleItemClick}
                    >
                      <div className="search-item-thumb">
                        <img
                          src={item.image || '/images/placeholder.png'}
                          alt={item.name}
                          width={48}
                          height={48}
                          loading="lazy"
                          onError={(e) => {
                            (e.currentTarget as HTMLImageElement).src = '/images/placeholder.png';
                          }}
                        />
                      </div>
                      <div className="search-item-info">
                        <h4 className="search-item-title">
                          <HighlightedText text={item.name} query={searchTerm} />
                        </h4>
                        <div className="search-item-price">
                          <strong>{formattedPrice}</strong>
                          {formattedRegular && <s>{formattedRegular}</s>}
                        </div>
                      </div>
                    </Link>
                  );
                })}
              </div>

              {/* View All Results Footer Link */}
              <Link
                href={`/shop?q=${encodeURIComponent(searchTerm.trim())}`}
                className="search-view-all-link"
                onClick={handleItemClick}
              >
                <span>View all results for &ldquo;{searchTerm.trim()}&rdquo;</span>
                <span className="arrow">&rarr;</span>
              </Link>
            </>
          ) : (
            !isLoading && (
              <div className="search-empty-state">
                <p>No products found for &ldquo;{searchTerm.trim()}&rdquo;</p>
                <small>ব্র্যান্ড, ক্যাটাগরি বা পণ্যের নাম লিখে খুঁজুন।</small>
              </div>
            )
          )}
        </div>
      )}
    </div>
  );
}