import { BrowserLink } from "@metis/core/client";
import { useQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";

import { useGlobalSoftwareCatalog } from "../global-software-catalog-context";

import { GlobalApplicationFeedback } from "./global-application-feedback";

export function GlobalApplicationCoincidences({ name }: { name: string }) {
  const {
    api: globalApplicationsApi,
    keys: globalApplicationKeys,
    text,
  } = useGlobalSoftwareCatalog();
  const { t } = useTranslation("resources");
  const queryData = { search: name.trim(), sort: "name", direction: "asc", pageSize: 10 } as const;
  const query = useQuery({
    queryKey: globalApplicationKeys.list(queryData),
    queryFn: () => globalApplicationsApi.list(queryData),
    enabled: queryData.search.length > 0,
    retry: false,
  });

  return (
    <div className="space-y-2 text-sm">
      <GlobalApplicationFeedback error={query.error} />
      {query.isFetching && <p role="status">{t(`${text}.duplicateLoading`)}</p>}
      {query.data && query.data.items.length > 0 && (
        <>
          <p>{t(`${text}.duplicates`)}</p>
          <ul className="list-inside list-disc">
            {query.data.items.map((item) => (
              <li key={item.id}>
                <BrowserLink
                  href={`/catalogs/global-applications/${item.id}`}
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  {item.name} · {item.provider ?? "—"}
                </BrowserLink>
              </li>
            ))}
          </ul>
        </>
      )}
      <BrowserLink
        href={`/catalogs/global-applications?q=${encodeURIComponent(queryData.search)}`}
        rel="noopener noreferrer"
        target="_blank"
      >
        {t(`${text}.reviewCatalog`)}
      </BrowserLink>
    </div>
  );
}