import { Button, Divider, Group, Modal, Stack } from '@tidbcloud/uikit'
import { Form, FormErrorMessage } from '@tidbcloud/uikit/biz'
import { observer } from 'mobx-react'
import { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'

import { CloudProviderConst } from 'dbaas/features/Project'
import { CreationFormFields } from 'dbaas/screens/ConsoleV2/features/Network/PrivateEndpoint/azure/CreationFormFields'
import { usePrivateEndpointConnectionServiceCreatePrivateEndpointConnection } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2'
import { Nextgenv1beta2PrivateEndpointConnection } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import useStores from 'dbaas/stores/useStores'
import { MixpanelEvents } from 'dbaas/utils/tracking'

type EndpointFormValues = {
  resourceId: string
  ipAddress: string
}

interface EditPremiumAzurePrivateEndpointModalProps {
  tidbId: string
  privateEndpoint?: Nextgenv1beta2PrivateEndpointConnection
  opened: boolean
  onClose: () => void
  onFinish?: () => void
}

export const EditPremiumAzurePrivateEndpointModal = observer(
  ({ tidbId, privateEndpoint, opened, onClose, onFinish }: EditPremiumAzurePrivateEndpointModalProps) => {
    const {
      store: {
        lastVisitLocation: { orgId, projectId }
      }
    } = useStores()
    const [errorMsg, setErrorMsg] = useState('')
    const form = useForm<EndpointFormValues>({
      mode: 'onChange',
      reValidateMode: 'onChange',
      defaultValues: {
        resourceId: '',
        ipAddress: ''
      }
    })

    useEffect(() => {
      form.reset({
        resourceId: privateEndpoint?.endpointId ?? '',
        ipAddress: privateEndpoint?.privateIpAddress ?? ''
      })
      setErrorMsg('')
    }, [form, privateEndpoint, opened])

    const mutator = usePrivateEndpointConnectionServiceCreatePrivateEndpointConnection({
      mutation: {
        onSuccess: () => {
          onFinish?.()
          onClose()
        },
        onError: (error) => {
          setErrorMsg(getErrorMessage(error, true))
        }
      }
    })

    const onSubmit = (values: EndpointFormValues) =>
      mutator.mutateAsync({
        tidbId,
        data: {
          endpointId: values.resourceId,
          privateIpAddress: values.ipAddress,
          regionId: privateEndpoint?.regionId ?? ''
        },
        params: {
          orgId,
          projectId
        }
      })

    return (
      <Modal title="Edit Azure Private Endpoint Connection" size={730} centered opened={opened} onClose={onClose}>
        <Form form={form} onSubmit={onSubmit} withActions={false} layout="none">
          <Stack gap="xl">
            <CreationFormFields />
            <FormErrorMessage message={errorMsg} />
          </Stack>
          <Divider color="gray.3" />
          <Group justify="flex-end" pt="xl">
            <Button
              variant="default"
              onClick={onClose}
              data-mp-event={MixpanelEvents.PremiumPrivateEndpointDns.Enable.CancelClicked}
              data-mp-cloud-provider={CloudProviderConst.AZURE}
            >
              Cancel
            </Button>
            <Button
              loading={mutator.isLoading}
              type="submit"
              data-mp-event={MixpanelEvents.PremiumPrivateEndpointDns.Enable.EnterClicked}
              data-mp-cloud-provider={CloudProviderConst.AZURE}
            >
              Accept Endpoint
            </Button>
          </Group>
        </Form>
      </Modal>
    )
  }
)