import { Button, Group, HoverCard, notifier } from '@tidbcloud/uikit'
import { useHistory, useLocation } from 'react-router-dom'

import { AccessGuard } from 'dbaas/contexts/access-control'
import { PaymentMethodModal } from 'dbaas/screens/Stripe/PaymentMethod/PaymentMethodModal'
import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import useStores from 'dbaas/stores/useStores'
import { MixpanelEvents } from 'dbaas/utils/tracking'

import { useAddCreditCard } from './shared/use-add-credit-card'

interface CreatePremiumActionsPanelProps {
  formId: string
  isLoading?: boolean
  isPending?: boolean
  disabled?: boolean
  servicePlan: Commonv1beta1ServicePlan
}

export const CreatePremiumActionsPanel = ({
  formId,
  isLoading,
  isPending,
  disabled,
  servicePlan
}: CreatePremiumActionsPanelProps) => {
  const history = useHistory()
  const location = useLocation()
  const {
    store: {
      lastVisitLocation: { projectId }
    }
  } = useStores()
  const { creditCardNeeded, creditCardModalVisible, creditCardModalHandlers } = useAddCreditCard(servicePlan)

  return (
    <Group justify="flex-end" px="xl" py="md">
      <Button
        variant="default"
        onClick={() => history.push(`/tidbs${location.search}`)}
        data-mp-event={MixpanelEvents.TidbResource.Create.CancelClicked}
        data-mp-service-plan={servicePlan}
      >
        Cancel
      </Button>
      <AccessGuard
        id="TidbxCreateInProject"
        scopeProps={{ projectId }}
        fallback={
          <HoverCard withArrow withinPortal>
            <HoverCard.Target>
              <span>
                <Button disabled data-mp-event={MixpanelEvents.TidbResource.Create.SubmitClicked}>
                  Create
                </Button>
              </span>
            </HoverCard.Target>
            <HoverCard.Dropdown maw={320}>
              Please ask your admin to grant you the permission to create the TiDB premium instance.
            </HoverCard.Dropdown>
          </HoverCard>
        }
      >
        {!creditCardNeeded && (
          <Button
            type="submit"
            form={formId}
            disabled={isLoading || disabled}
            loading={isPending}
            data-mp-event={MixpanelEvents.TidbResource.Create.SubmitClicked}
            data-mp-service-plan={servicePlan}
          >
            Create
          </Button>
        )}
        {creditCardNeeded && (
          <AccessGuard
            id="BillingPaymentCreation"
            fallback={
              <HoverCard withArrow withinPortal>
                <HoverCard.Target>
                  <span>
                    <Button disabled>Add Credit Card</Button>
                  </span>
                </HoverCard.Target>
                <HoverCard.Dropdown maw={320}>
                  Please contact your Organization Owner or Billing Manager to add a credit card.
                </HoverCard.Dropdown>
              </HoverCard>
            }
          >
            <Button
              onClick={creditCardModalHandlers.open}
              data-mp-event="Add Credit Card Button Clicked"
              data-mp-service-plan={servicePlan}
            >
              Add Credit Card
            </Button>
          </AccessGuard>
        )}
        {creditCardNeeded && (
          <PaymentMethodModal
            open={creditCardModalVisible}
            onClose={creditCardModalHandlers.close}
            onComplete={() => {
              creditCardModalHandlers.close()
              notifier.success('Your credit card was added successfully!')
            }}
          />
        )}
      </AccessGuard>
    </Group>
  )
}