"use client";

import { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Globe, List, Search, Send, Server, Tag as TagIcon, User } from "lucide-react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog";
import { Input } from "@/shared/components/ui/input";
import { useDebouncedValue } from "@/shared/hooks/use-debounced-value";
import { globalSearchAction } from "../actions/global-search-action";
import { SearchResultItem, SearchResultType } from "../dtos/search-result-dto";

interface GlobalSearchModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

const SECTION_CONFIG: Record<SearchResultType, { label: string; icon: typeof User }> = {
  contact: { label: "Contatos", icon: User },
  campaign: { label: "Campanhas", icon: Send },
  "contact-list": { label: "Listas de Contatos", icon: List },
  tag: { label: "Tags", icon: TagIcon },
  domain: { label: "Domínios", icon: Globe },
  sender: { label: "Remetentes", icon: Server },
};

const SECTION_ORDER: SearchResultType[] = ["contact", "campaign", "contact-list", "tag", "domain", "sender"];

export function GlobalSearchModal({ open, onOpenChange }: GlobalSearchModalProps) {
  const router = useRouter();
  const [searchInput, setSearchInput] = useState("");
  const [results, setResults] = useState<SearchResultItem[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const query = useDebouncedValue(searchInput, 300);

  const load = useCallback(() => {
    if (query.trim().length < 2) {
      setResults([]);
      setIsLoading(false);
      return;
    }

    setIsLoading(true);
    globalSearchAction(query)
      .then((data) => setResults(data.results))
      .catch(() => setResults([]))
      .finally(() => setIsLoading(false));
  }, [query]);

  useEffect(() => {
    load();
  }, [load]);

  useEffect(() => {
    if (!open) {
      setSearchInput("");
      setResults([]);
    }
  }, [open]);

  function handleSelect(href: string) {
    onOpenChange(false);
    router.push(href);
  }

  const hasQuery = query.trim().length >= 2;
  const hasResults = results.length > 0;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-2xl top-24 translate-y-0 gap-4">
        <DialogHeader>
          <DialogTitle>Pesquisar</DialogTitle>
        </DialogHeader>

        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400" />
          <Input
            autoFocus
            value={searchInput}
            onChange={(e) => setSearchInput(e.target.value)}
            placeholder="Pesquisar contatos, campanhas, domínios, remetentes..."
            className="pl-10"
          />
        </div>

        <div className="max-h-[60vh] overflow-y-auto -mx-2 px-2">
          {!hasQuery && (
            <p className="text-sm text-zinc-500 text-center py-8">
              Digite pelo menos 2 caracteres para pesquisar em todo o sistema.
            </p>
          )}

          {hasQuery && isLoading && <p className="text-sm text-zinc-500 text-center py-8">Buscando...</p>}

          {hasQuery && !isLoading && !hasResults && (
            <p className="text-sm text-zinc-500 text-center py-8">Nenhum resultado encontrado.</p>
          )}

          {hasQuery && !isLoading && hasResults && (
            <div className="flex flex-col gap-4">
              {SECTION_ORDER.map((type) => {
                const items = results.filter((result) => result.type === type);
                if (items.length === 0) return null;

                const { label, icon: Icon } = SECTION_CONFIG[type];

                return (
                  <div key={type}>
                    <p className="text-xs font-bold uppercase tracking-wide text-zinc-400 px-2 mb-1.5">{label}</p>
                    <div className="flex flex-col gap-0.5">
                      {items.map((item) => (
                        <button
                          key={`${item.type}-${item.id}`}
                          type="button"
                          onClick={() => handleSelect(item.href)}
                          className="flex items-center gap-3 px-2 py-2 rounded-xl text-left hover:bg-zinc-100 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0F9FDF]"
                        >
                          <Icon className="w-4 h-4 text-[#0F9FDF] shrink-0" />
                          <span className="flex flex-col min-w-0">
                            <span className="text-sm font-semibold text-zinc-900 truncate">{item.title}</span>
                            {item.subtitle && (
                              <span className="text-xs text-zinc-500 truncate">{item.subtitle}</span>
                            )}
                          </span>
                        </button>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}