import type FederatedIdentityRepresentation from "@keycloak/keycloak-admin-client/lib/defs/federatedIdentityRepresentation";
import type IdentityProviderRepresentation from "@keycloak/keycloak-admin-client/lib/defs/identityProviderRepresentation";
import {
  AlertVariant,
  Button,
  ButtonVariant,
  Label,
  PageSection,
  Text,
  TextContent,
} from "@patternfly/react-core";
import { cellWidth } from "@patternfly/react-table";
import { capitalize } from "lodash-es";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { FormPanel } from "@keycloakify/keycloak-admin-ui/ui-shared";
import { useAdminClient } from "@keycloakify/keycloak-admin-ui/admin-client";
import { useAlerts } from "@keycloakify/keycloak-admin-ui/ui-shared";
import { useConfirmDialog } from "@keycloakify/keycloak-admin-ui/components/confirm-dialog/ConfirmDialog";
import { KeycloakDataTable } from "@keycloakify/keycloak-admin-ui/ui-shared";
import { useRealm } from "@keycloakify/keycloak-admin-ui/context/realm-context/RealmContext";
import { useServerInfo } from "@keycloakify/keycloak-admin-ui/context/server-info/ServerInfoProvider";
import { toIdentityProvider } from "@keycloakify/keycloak-admin-ui/identity-providers/routes/IdentityProvider";
import { emptyFormatter, upperCaseFormatter } from "@keycloakify/keycloak-admin-ui/util";
import { UserIdpModal } from "@keycloakify/keycloak-admin-ui/user/UserIdPModal";
import { useAccess } from "@keycloakify/keycloak-admin-ui/context/access/Access";

type UserIdentityProviderLinksProps = {
  userId: string;
};

export const UserIdentityProviderLinks = ({
  userId,
}: UserIdentityProviderLinksProps) => {
  const { adminClient } = useAdminClient();

  const [key, setKey] = useState(0);
  const [federatedId, setFederatedId] = useState("");
  const [isLinkIdPModalOpen, setIsLinkIdPModalOpen] = useState(false);

  const { realm } = useRealm();
  const { addAlert, addError } = useAlerts();
  const { t } = useTranslation();
  const { hasAccess, hasSomeAccess } = useAccess();

  const canQueryIDPDetails = hasSomeAccess(
    "manage-identity-providers",
    "view-identity-providers",
  );

  const refresh = () => setKey(new Date().getTime());

  type WithProviderId = FederatedIdentityRepresentation & {
    providerId: string;
  };

  const identityProviders = useServerInfo().identityProviders;

  const getFederatedIdentities = async () => {
    const allFedIds = (await adminClient.users.listFederatedIdentities({
      id: userId,
    })) as WithProviderId[];

    if (canQueryIDPDetails) {
      const allProviders = await adminClient.identityProviders.find();
      for (const element of allFedIds) {
        element.providerId = allProviders.find(
          (item) => item.alias === element.identityProvider,
        )?.providerId!;
      }
    }

    return allFedIds;
  };

  const getAvailableIdPs = async () => {
    return adminClient.identityProviders.find();
  };

  const linkedIdPsLoader = async () => {
    return getFederatedIdentities();
  };

  const availableIdPsLoader = async () => {
    const linkedNames = (await getFederatedIdentities()).map(
      (x) => x.identityProvider,
    );

    return (await getAvailableIdPs())?.filter(
      (item) => !linkedNames.includes(item.alias),
    )!;
  };

  const [toggleUnlinkDialog, UnlinkConfirm] = useConfirmDialog({
    titleKey: t("unlinkAccountTitle", {
      provider: capitalize(federatedId),
    }),
    messageKey: t("unlinkAccountConfirm", {
      provider: capitalize(federatedId),
    }),
    continueButtonLabel: "unlink",
    continueButtonVariant: ButtonVariant.primary,
    onConfirm: async () => {
      try {
        await adminClient.users.delFromFederatedIdentity({
          id: userId,
          federatedIdentityId: federatedId,
        });
        addAlert(t("idpUnlinkSuccess"), AlertVariant.success);
        refresh();
      } catch (error) {
        addError("mappingDeletedError", error);
      }
    },
  });

  const idpLinkRenderer = (idp: WithProviderId) => {
    if (!canQueryIDPDetails)
      return <span>{capitalize(idp.identityProvider)}</span>;

    return (
      <Link
        to={toIdentityProvider({
          realm,
          providerId: idp.providerId,
          alias: idp.identityProvider!,
          tab: "settings",
        })}
      >
        {capitalize(idp.identityProvider)}
      </Link>
    );
  };

  const badgeRenderer1 = (idp: FederatedIdentityRepresentation) => {
    const groupName = identityProviders?.find(
      (provider) => provider["id"] === idp.identityProvider,
    )?.groupName!;
    return (
      <Label color={groupName === "Social" ? "blue" : "orange"}>
        {groupName === "Social" ? t("idpType.social") : t("idpType.custom")}
      </Label>
    );
  };

  const badgeRenderer2 = (idp: IdentityProviderRepresentation) => {
    const groupName = identityProviders?.find(
      (provider) => provider["id"] === idp.providerId,
    )?.groupName!;
    return (
      <Label color={groupName === "User-defined" ? "orange" : "blue"}>
        {groupName === "User-defined"
          ? "Custom"
          : groupName! === "Social"
            ? t("idpType.social")
            : groupName!}
      </Label>
    );
  };

  const unlinkRenderer = (fedIdentity: FederatedIdentityRepresentation) => {
    if (!hasAccess("manage-users")) return <span />;

    return (
      <Button
        variant="link"
        onClick={() => {
          setFederatedId(fedIdentity.identityProvider!);
          toggleUnlinkDialog();
        }}
      >
        {t("unlinkAccount")}
      </Button>
    );
  };

  const linkRenderer = (idp: IdentityProviderRepresentation) => {
    return (
      <Button
        variant="link"
        onClick={() => {
          setFederatedId(idp.alias!);
          setIsLinkIdPModalOpen(true);
        }}
      >
        {t("linkAccount")}
      </Button>
    );
  };

  const linkedIdpColumns = () => {
    const columns = [
      {
        name: "identityProvider",
        displayKey: "name",
        cellRenderer: idpLinkRenderer,
        transforms: [cellWidth(20)],
      },

      {
        name: "userId",
        displayKey: "userID",
        cellFormatters: [emptyFormatter()],
        transforms: [cellWidth(30)],
      },
      {
        name: "userName",
        displayKey: "username",
        cellFormatters: [emptyFormatter()],
        transforms: [cellWidth(20)],
      },
      {
        name: "",
        cellRenderer: unlinkRenderer,
        transforms: [cellWidth(20)],
      },
    ];

    if (canQueryIDPDetails)
      columns.splice(1, 0, {
        name: "type",
        displayKey: "type",
        cellRenderer: badgeRenderer1,
        transforms: [cellWidth(10)],
      });

    return columns;
  };

  return (
    <>
      {isLinkIdPModalOpen && (
        <UserIdpModal
          userId={userId}
          federatedId={federatedId}
          onClose={() => setIsLinkIdPModalOpen(false)}
          onRefresh={refresh}
        />
      )}
      <UnlinkConfirm />
      <PageSection variant="light" className="pf-v5-u-p-0">
        <FormPanel title={t("linkedIdPs")} className="kc-linked-idps">
          <TextContent>
            <Text className="kc-available-idps-text">
              {t("linkedIdPsText")}
            </Text>
          </TextContent>
          <KeycloakDataTable
            loader={linkedIdPsLoader}
            key={key}
            isPaginated={false}
            ariaLabelKey="LinkedIdPs"
            className="kc-linked-IdPs-table"
            columns={linkedIdpColumns()}
            emptyState={
              <TextContent className="kc-no-providers-text">
                <Text>{t("noProvidersLinked")}</Text>
              </TextContent>
            }
          />
        </FormPanel>
        {hasAccess("manage-users") && canQueryIDPDetails && (
          <FormPanel className="kc-available-idps" title={t("availableIdPs")}>
            <TextContent>
              <Text className="kc-available-idps-text">
                {t("availableIdPsText")}
              </Text>
            </TextContent>
            <KeycloakDataTable
              loader={availableIdPsLoader}
              key={key}
              isPaginated={false}
              ariaLabelKey="LinkedIdPs"
              className="kc-linked-IdPs-table"
              columns={[
                {
                  name: "alias",
                  displayKey: "name",
                  cellFormatters: [emptyFormatter(), upperCaseFormatter()],
                  transforms: [cellWidth(20)],
                },
                {
                  name: "type",
                  displayKey: "type",
                  cellRenderer: badgeRenderer2,
                  transforms: [cellWidth(60)],
                },
                {
                  name: "",
                  cellRenderer: linkRenderer,
                },
              ]}
              emptyState={
                <TextContent className="kc-no-providers-text">
                  <Text>{t("noAvailableIdentityProviders")}</Text>
                </TextContent>
              }
            />
          </FormPanel>
        )}
      </PageSection>
    </>
  );
};