import { DetailField } from "@repo/rdx-ui/components/detail-field";
import { EntityListHeader, EntityStatus } from "@repo/rdx-ui/components/entity-list";
import { LayersIcon } from "@repo/rdx-ui/lib/icons";
import { Button } from "@repo/shadcn-ui/components/button";
import { useQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";

import type { GlobalApplicationCapabilitiesDTO } from "../../../../common";
import { OperatingSystemProductFields } from "../../../global-operating-systems/shared/ui/operating-system-product-fields";
import { useGlobalSoftwareCatalog } from "../../shared/global-software-catalog-context";
import { GlobalApplicationFeedback } from "../../shared/ui/global-application-feedback";

import { GlobalApplicationAdministration } from "./global-application-administration";

export function GlobalApplicationDetail({
  id,
  access,
  onEdit,
}: {
  id: string;
  access: GlobalApplicationCapabilitiesDTO | undefined;
  onEdit: (id: string) => void;
}) {
  const {
    api: globalApplicationsApi,
    keys: globalApplicationKeys,
    text,
  } = useGlobalSoftwareCatalog();
  const { t } = useTranslation("resources");
  const query = useQuery({
    queryKey: globalApplicationKeys.detail(id),
    queryFn: () => globalApplicationsApi.detail(id),
    retry: false,
  });
  const resource = query.data?.resource;

  return (
    <div className="space-y-6">
      <GlobalApplicationFeedback error={query.error} />
      {query.isPending && <p role="status">{t(`${text}.loading`)}</p>}
      {query.isError && (
        <Button onClick={() => query.refetch()} variant="outline">
          {t(`${text}.retry`)}
        </Button>
      )}
      {resource && (
        <>
          <EntityListHeader
            description={t(`${text}.detailDescription`)}
            icon={<LayersIcon />}
            title={resource.name}
          />
          {access?.canManage ? (
            <GlobalApplicationAdministration access={access} id={id} onEdit={onEdit} />
          ) : (
            <div className="grid gap-4 sm:grid-cols-2">
              <DetailField label={t(`${text}.provider`)}>{resource.provider ?? "—"}</DetailField>
              <DetailField label={t("status")}>
                <EntityStatus active={resource.active}>
                  {t(resource.active ? "active" : "inactive")}
                </EntityStatus>
              </DetailField>
              {resource.kind === "os" && <OperatingSystemProductFields product={resource} />}
              <DetailField label={t(`${text}.url`)}>{resource.url ?? "—"}</DetailField>
              <DetailField label={t(`${text}.productDescription`)}>
                {resource.description ?? "—"}
              </DetailField>
            </div>
          )}
        </>
      )}
    </div>
  );
}