import { Code, Modal, notifier, Stack, Typography } from '@tidbcloud/uikit'
import { Form, FormTextInput } from '@tidbcloud/uikit/biz'
import { observer } from 'mobx-react'
import { useForm } from 'react-hook-form'

import { ModalCodeTitle } from 'dbaas/components'
import { useTidbServiceDeleteTidb } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2'
import {
  Commonv1beta1ServicePlan,
  TidbCloudOpenApinextgenv1beta2Tidb
} from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import useStores from 'dbaas/stores/useStores'
import { MixpanelEvents } from 'dbaas/utils/tracking/event'

interface PremiumDeletionModalBodyProps {
  onClose: () => void
  onDelete: () => Promise<unknown>
  isPending: boolean
  tidb: TidbCloudOpenApinextgenv1beta2Tidb
}

const PremiumDeletionModalBody = observer(({ tidb, onClose, onDelete, isPending }: PremiumDeletionModalBodyProps) => {
  const {
    store: {
      tenantData: { name: orgName }
    }
  } = useStores()
  const { displayName } = tidb

  const form = useForm<{ confirmation: string }>({
    mode: 'onSubmit',
    defaultValues: {
      confirmation: ''
    }
  })
  const { watch } = form
  const confirmation = watch('confirmation')
  const confirmationName = `${orgName}/${displayName}`.trim()
  const isConfirmationMatched = confirmation === confirmationName

  return (
    <Stack>
      <Typography variant="body-lg">Are you sure you want to delete this instance?</Typography>
      <Typography variant="body-lg">
        To confirm, type{' '}
        <Code fz={13} fw={600} bg="carbon.3" c="carbon.9" sx={{ whiteSpace: 'pre-wrap' }}>
          {confirmationName}
        </Code>{' '}
        in the box below.
      </Typography>
      <Form
        layout="none"
        form={form}
        onSubmit={onDelete}
        onCancel={onClose}
        actionsProps={{
          confirmText: 'I understand, delete it',
          confirmProps: {
            color: 'red',
            variant: 'light',
            disabled: !isConfirmationMatched,
            'data-mp-event': MixpanelEvents.TidbResource.Delete.SubmitClicked,
            'data-mp-service-plan': Commonv1beta1ServicePlan.Premium
          },
          cancelProps: {
            disabled: isPending,
            'data-mp-event': MixpanelEvents.TidbResource.Delete.CancelClicked,
            'data-mp-service-plan': Commonv1beta1ServicePlan.Premium
          }
        }}
      >
        <FormTextInput
          name="confirmation"
          autoFocus
          rules={{
            required: 'Required',
            validate: (value) => value === confirmationName || 'Incorrect instance name'
          }}
        />
      </Form>
    </Stack>
  )
})

interface PremiumDeletionModalProps {
  tidb: TidbCloudOpenApinextgenv1beta2Tidb
  opened: boolean
  onClose: () => void
  onFinish?: () => Promise<unknown> | void
}

export const PremiumDeletionModal = observer(({ tidb, opened, onClose, onFinish }: PremiumDeletionModalProps) => {
  const {
    store: {
      lastVisitLocation: { orgId, projectId }
    }
  } = useStores()
  const mutator = useTidbServiceDeleteTidb({
    mutation: {
      onSuccess: async () => {
        await onFinish?.()
        onClose()
        notifier.success('The instance is successfully deleted.')
      }
    }
  })
  const onDelete = () => {
    return mutator.mutateAsync({
      tidbId: tidb.tidbId!,
      params: { orgId, projectId }
    })
  }

  return (
    <Modal
      size="lg"
      centered
      trapFocus={false}
      opened={opened}
      onClose={onClose}
      closeOnClickOutside={false}
      title={
        <>
          Delete <ModalCodeTitle maxWidth={400}>{tidb.displayName}</ModalCodeTitle>
        </>
      }
    >
      <PremiumDeletionModalBody tidb={tidb} isPending={mutator.isLoading} onClose={onClose} onDelete={onDelete} />
    </Modal>
  )
})