"use client";

import { useImperativeHandle, useRef } from "react";
import { Alert, Button, Group, Skeleton, Stack, Text } from "@mantine/core";
import { IconInfoCircle } from "@tabler/icons-react";

import { clientApi } from "@homarr/api/client";
import { getIntegrationName } from "@homarr/definitions";
import { useI18n } from "@homarr/translation/client";
import { IntegrationAvatar } from "@homarr/ui";
import type { EmbeddedIntegrationEditFormProps } from "@homarr/widgets/modals";

import type { EditIntegrationFormHandle } from "~/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form";
import { EditIntegrationForm } from "~/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form";

export type { EmbeddedIntegrationEditFormProps } from "@homarr/widgets/modals";

export const EmbeddedIntegrationEditForm = ({
  integrationId,
  handleRef,
  onSuccess,
}: EmbeddedIntegrationEditFormProps) => {
  const t = useI18n();
  const integrationFormRef = useRef<EditIntegrationFormHandle>(null);
  const {
    data: integration,
    isPending,
    isError,
    refetch,
  } = clientApi.integration.byId.useQuery({
    id: integrationId,
  });

  useImperativeHandle(
    handleRef,
    () => ({
      submitIfDirty: async () => {
        if (!integrationFormRef.current?.isDirty()) {
          return true;
        }

        return integrationFormRef.current.submit();
      },
    }),
    [],
  );

  if (isPending) {
    return (
      <Stack gap="sm" aria-busy="true" aria-label={t("item.edit.integration.loading")}>
        <Skeleton height={36} width="60%" />
        <Skeleton height={60} />
        <Skeleton height={120} />
      </Stack>
    );
  }

  if (isError || !integration) {
    return (
      <Alert color="red" title={t("common.error")}>
        <Stack gap="sm">
          <Text size="sm">{t("item.edit.integration.loadError")}</Text>
          <Button variant="light" color="red" onClick={() => void refetch()}>
            {t("common.action.tryAgain")}
          </Button>
        </Stack>
      </Alert>
    );
  }

  return (
    <Stack>
      <Group gap="sm" wrap="nowrap">
        <IntegrationAvatar kind={integration.kind} size="sm" />
        <Stack gap={0} style={{ minWidth: 0 }}>
          <Text fw={600} truncate>
            {integration.name}
          </Text>
          <Text size="xs" c="dimmed">
            {getIntegrationName(integration.kind)}
          </Text>
        </Stack>
      </Group>
      <Alert icon={<IconInfoCircle size={16} />} color="blue" variant="light">
        {t("item.edit.integration.propagationNotice")}
      </Alert>
      <EditIntegrationForm integration={integration} hideButtons formRef={integrationFormRef} onSuccess={onSuccess} />
    </Stack>
  );
};