"use client";
// src/components/layout/GlobalSearch.tsx
import { useState, useEffect, useRef, useCallback } from "react";
import { useRouter } from "next/navigation";
import { Search, TrendingUp, Users, Building2, Briefcase, Ticket, X, Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { useLanguage } from "@/i18n/LanguageContext";
import type { TranslationKey } from "@/i18n/translations";

interface SearchResult {
  type: string;
  id: string;
  label: string;
  subLabel: string;
  href: string;
}

const TYPE_ICONS: Record<string, React.ReactNode> = {
  lead: <TrendingUp className="w-4 h-4 text-blue-500" />,
  contact: <Users className="w-4 h-4 text-green-500" />,
  account: <Building2 className="w-4 h-4 text-purple-500" />,
  opportunity: <Briefcase className="w-4 h-4 text-amber-500" />,
  ticket: <Ticket className="w-4 h-4 text-red-500" />,
};

const GROUP_HEADER_KEYS: Record<string, TranslationKey> = {
  lead: "search.groupLeads",
  contact: "search.groupContacts",
  account: "search.groupAccounts",
  opportunity: "search.groupOpportunities",
  ticket: "search.groupTickets",
};

export function GlobalSearch() {
  const router = useRouter();
  const { isRTL, t } = useLanguage();
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<SearchResult[]>([]);
  const [isOpen, setIsOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const search = useCallback(async (q: string) => {
    const normalized = q.trim();
    if (normalized.length < 1) { setResults([]); return; }
    setIsLoading(true);
    try {
      const res = await fetch(`/api/search?q=${encodeURIComponent(normalized)}`);
      if (!res.ok) throw new Error("Search request failed");
      const data = await res.json();
      setResults(data.data?.results ?? []);
    } catch { setResults([]); }
    finally { setIsLoading(false); }
  }, []);

  useEffect(() => {
    const timer = setTimeout(() => search(query), 300);
    return () => clearTimeout(timer);
  }, [query, search]);

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

  // Keyboard shortcut: Cmd/Ctrl + K
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        inputRef.current?.focus();
        setIsOpen(true);
      }
      if (e.key === "Escape") setIsOpen(false);
    };
    document.addEventListener("keydown", handler);
    return () => document.removeEventListener("keydown", handler);
  }, []);

  const handleSelect = (result: SearchResult) => {
    router.push(result.href);
    setQuery("");
    setResults([]);
    setIsOpen(false);
  };

  return (
    <div ref={containerRef} className="relative flex-1 max-w-md">
      <div className="relative">
        <Search className={cn(
          "absolute top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none",
          isRTL ? "right-3" : "left-3"
        )} />
        <input
          ref={inputRef}
          value={query}
          onChange={(e) => { setQuery(e.target.value); setIsOpen(true); }}
          onFocus={() => setIsOpen(true)}
          placeholder={t("search.placeholder")}
          className={cn(
            "w-full h-9 rounded-lg border border-input bg-background text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring transition-all",
            isRTL ? "pr-9 pl-9" : "pl-9 pr-9"
          )}
        />
        {query && (
          <button
            onClick={() => { setQuery(""); setResults([]); setIsOpen(false); }}
            className={cn("absolute top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", isRTL ? "left-3" : "right-3")}
          >
            {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <X className="w-4 h-4" />}
          </button>
        )}
      </div>

      {/* Results dropdown */}
      {isOpen && (query.trim().length >= 1) && (
        <div className={cn(
          "absolute top-full mt-1.5 w-full bg-popover border border-border rounded-xl shadow-xl z-50 overflow-hidden animate-fade-in",
          isRTL ? "right-0" : "left-0"
        )}>
          {isLoading ? (
            <div className="px-4 py-6 text-center text-sm text-muted-foreground flex items-center justify-center gap-2">
              <Loader2 className="w-4 h-4 animate-spin" /> {t("search.searching")}
            </div>
          ) : results.length === 0 ? (
            <div className="px-4 py-6 text-center text-sm text-muted-foreground">
              {t("search.noResultsFor", { query })}
            </div>
          ) : (
            <div>
              {/* Group by type */}
              {(["lead", "contact", "account", "opportunity", "ticket"] as const).map(type => {
                const typeResults = results.filter(r => r.type === type);
                if (!typeResults.length) return null;
                return (
                  <div key={type}>
                    <div className="px-3 py-1.5 bg-muted/30 border-b border-border">
                      <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-1.5">
                        {TYPE_ICONS[type]} {t(GROUP_HEADER_KEYS[type])}
                      </span>
                    </div>
                    {typeResults.map(result => (
                      <button
                        key={result.id}
                        onClick={() => handleSelect(result)}
                        className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-accent transition-colors text-start"
                      >
                        <span className="flex-shrink-0">{TYPE_ICONS[result.type]}</span>
                        <div className="min-w-0">
                          <p className="text-sm font-medium text-foreground truncate">{result.label}</p>
                          <p className="text-xs text-muted-foreground truncate">{result.subLabel}</p>
                        </div>
                      </button>
                    ))}
                  </div>
                );
              })}
            </div>
          )}
        </div>
      )}
    </div>
  );
}