'use client';

import React, { useState, useEffect, useRef } from 'react';
import { GoogleCategory } from '@/types/catalog';
import { apiUrl } from '@/lib/utils/asset';

interface CategorySearchInputProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
}

export function CategorySearchInput({
  value,
  onChange,
  placeholder = 'Search Google/Meta product category...',
}: CategorySearchInputProps) {
  const [query, setQuery] = useState(value);
  const [results, setResults] = useState<GoogleCategory[]>([]);
  const [isOpen, setIsOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setQuery(value);
  }, [value]);

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

  const handleSearch = async (val: string) => {
    setQuery(val);
    onChange(val);
    if (!val || val.length < 2) {
      setResults([]);
      setIsOpen(false);
      return;
    }

    setLoading(true);
    try {
      const res = await fetch(apiUrl(`/api/google-categories?q=${encodeURIComponent(val)}&limit=25`));
      const data = await res.json();
      if (data.success) {
        setResults(data.categories || []);
        setIsOpen(true);
      }
    } catch (err) {
      console.error('Failed to search categories', err);
    } finally {
      setLoading(false);
    }
  };

  const handleSelect = (category: GoogleCategory) => {
    const selected = category.full_path || category.name || category.path || '';
    setQuery(selected);
    onChange(selected);
    setIsOpen(false);
  };

  return (
    <div ref={containerRef} className="relative w-full">
      <div className="relative">
        <input
          type="text"
          value={query}
          onChange={e => handleSearch(e.target.value)}
          onFocus={() => {
            if (results.length > 0) setIsOpen(true);
          }}
          placeholder={placeholder}
          className="w-full px-3.5 py-2.5 bg-white border border-slate-200 rounded-xl text-xs text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-theme/20 focus:border-theme transition"
        />
        {loading && (
          <div className="absolute right-3 top-3">
            <i className="fa-solid fa-spinner fa-spin text-theme text-sm" />
          </div>
        )}
      </div>

      {isOpen && results.length > 0 && (
        <div className="absolute z-50 mt-1 w-full max-h-60 overflow-y-auto bg-white border border-slate-200 rounded-xl shadow-xl divide-y divide-slate-100">
          {results.map(cat => (
            <button
              key={cat.id}
              type="button"
              onClick={() => handleSelect(cat)}
              className="w-full text-left px-3.5 py-2 text-xs hover:bg-slate-50 text-slate-800 transition"
            >
              <span className="font-semibold text-slate-900 block">{cat.full_path || cat.name}</span>
              <span className="block text-[10px] text-slate-400 mt-0.5">Taxonomy ID: {cat.id}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}