"use client";

import { useEffect, useId, useRef, useState } from "react";

export type AdminCompanyResult = {
  id: string;
  name: string;
  type?: string | null;
  email: string | null;
  phone: string | null;
  address: string | null;
  city: string | null;
  pib: string | null;
  maticni: string | null;
};

export function AdminCompanySearch({
  onSelect,
  selectedLabel,
  placeholder = "Pretraži firmu (naziv ili PIB)…",
  endpoint = "/api/admin/billing/company-search",
  inputClassName = "inline-input w-full",
  ariaLabel = "Pretraga kompanije",
  required = false,
}: {
  onSelect: (company: AdminCompanyResult) => void;
  selectedLabel?: string | null;
  placeholder?: string;
  endpoint?: string;
  inputClassName?: string;
  ariaLabel?: string;
  required?: boolean;
}) {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<AdminCompanyResult[]>([]);
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const boxRef = useRef<HTMLDivElement>(null);
  const resultsId = useId();

  // Debounced pretraga
  useEffect(() => {
    const term = query.trim();
    if (term.length < 2) {
      setResults([]);
      setOpen(false);
      setLoading(false);
      return;
    }
    const controller = new AbortController();
    const timer = setTimeout(async () => {
      setLoading(true);
      setOpen(true);
      try {
        const separator = endpoint.includes("?") ? "&" : "?";
        const res = await fetch(`${endpoint}${separator}q=${encodeURIComponent(term)}`, {
          signal: controller.signal,
        });
        if (!res.ok) throw new Error("Pretraga nije uspela.");
        const data = (await res.json()) as { companies?: AdminCompanyResult[] };
        setResults(Array.isArray(data.companies) ? data.companies : []);
      } catch (error) {
        if (error instanceof DOMException && error.name === "AbortError") return;
        setResults([]);
      } finally {
        if (!controller.signal.aborted) setLoading(false);
      }
    }, 250);
    return () => {
      clearTimeout(timer);
      controller.abort();
    };
  }, [endpoint, query]);

  // Zatvori na klik van
  useEffect(() => {
    function onDocClick(event: MouseEvent) {
      if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener("mousedown", onDocClick);
    return () => document.removeEventListener("mousedown", onDocClick);
  }, []);

  const term = query.trim();

  return (
    <div ref={boxRef} className="relative">
      <input
        className={inputClassName}
        placeholder={selectedLabel ? `✓ ${selectedLabel}` : placeholder}
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        onFocus={() => results.length > 0 && setOpen(true)}
        role="combobox"
        aria-label={ariaLabel}
        aria-autocomplete="list"
        aria-expanded={open && term.length >= 2}
        aria-controls={resultsId}
        required={required}
      />
      {open && term.length >= 2 && (
        <div id={resultsId} role="listbox" className="absolute z-40 mt-1 max-h-72 w-full overflow-y-auto rounded-xl border border-border bg-white shadow-[0_24px_60px_-20px_rgba(12,24,40,0.45)]">
          {loading ? (
            <p className="px-4 py-3 text-sm text-muted-foreground">Tražim…</p>
          ) : results.length === 0 ? (
            <p className="px-4 py-3 text-sm text-muted-foreground">Nema rezultata za „{term}“.</p>
          ) : (
            results.map((company) => (
              <button
                key={company.id}
                type="button"
                role="option"
                aria-selected="false"
                className="flex w-full flex-col items-start gap-0.5 border-b border-border/40 px-4 py-2.5 text-left transition last:border-b-0 hover:bg-accent/40"
                onClick={() => {
                  onSelect(company);
                  setOpen(false);
                  setQuery("");
                }}
              >
                <span className="text-sm font-semibold text-foreground">{company.name}</span>
                <span className="text-xs text-muted-foreground">
                  {[
                    company.type === "PLACE"
                      ? "Mesto"
                      : company.type
                        ? "Kompanija"
                        : null,
                    company.city,
                    company.pib ? `PIB ${company.pib}` : null,
                    company.email,
                  ]
                    .filter(Boolean)
                    .join(" · ") || "bez dodatnih podataka"}
                </span>
              </button>
            ))
          )}
        </div>
      )}
    </div>
  );
}