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 { globalApplicationsApi } from "../../shared/api/global-applications-api";
import { globalApplicationKeys } from "../../shared/queries/global-applications-keys";
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 { 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("global.loading")}</p>}
      {query.isError && (
        <Button onClick={() => query.refetch()} variant="outline">
          {t("global.retry")}
        </Button>
      )}
      {resource && (
        <>
          <EntityListHeader
            description={t("global.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("global.provider")}>{resource.provider ?? "—"}</DetailField>
              <DetailField label={t("status")}>
                <EntityStatus active={resource.active}>
                  {t(resource.active ? "active" : "inactive")}
                </EntityStatus>
              </DetailField>
              <DetailField label={t("global.url")}>{resource.url ?? "—"}</DetailField>
              <DetailField label={t("global.productDescription")}>
                {resource.description ?? "—"}
              </DetailField>
            </div>
          )}
        </>
      )}
    </div>
  );
}