import { Box, Button, Divider, Group, HoverCard, Stack, Typography, notifier } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import { useFormContext } from 'react-hook-form'
import { useHistory, useLocation } from 'react-router-dom'

import { PropertyKV } from 'dbaas/components'
import { AccessGuard } from 'dbaas/contexts/access-control'
import { getCloudProviderLabel } from 'dbaas/features/Project'
import { CreateActionGuard } from 'dbaas/screens/NextGen/my-tidb-creation/shared/CreateActionGuard'
import {
  useGetTidbCloudProviders,
  useGetTidbCloudRegions
} from 'dbaas/screens/NextGen/my-tidb-creation/shared/premium-byoc/basic-settings/use-cloud-providers-regions'
import { useDualLayerDataEncryptionFeatEnabled } from 'dbaas/screens/NextGen/my-tidb-creation/shared/premium-byoc/dual-layer-data-encryption/use-dual-layer-data-encryption-feat-enabled'
import { PremiumByocFormValue } from 'dbaas/screens/NextGen/my-tidb-creation/shared/premium-byoc/types'
import { useAddCreditCard } from 'dbaas/screens/NextGen/my-tidb-creation/shared/use-add-credit-card'
import { useCreateResourceRoleState } from 'dbaas/screens/NextGen/shared/access/create-resource-role'
import { PaymentMethodModal } from 'dbaas/screens/Stripe/PaymentMethod/PaymentMethodModal'
import {
  Commonv1beta1ServicePlan,
  V1beta2TidbHighAvailabilityType
} from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import useStores from 'dbaas/stores/useStores'
import { MixpanelEvents } from 'dbaas/utils/tracking'

import { useVirtualProjectId } from '../../shared/use-virtual-project-id'

import { PremiumPricingCost } from './summary/PremiumPricingCost'

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

const SumInfoItem = ({ label, value }: { label: string; value: React.ReactNode }) => {
  return (
    <PropertyKV label={label} labelProps={{ w: 144 }}>
      {value}
    </PropertyKV>
  )
}

export const PremiumSummary = observer(({ formId, servicePlan, disabled, isPending }: PremiumSummaryProps) => {
  const {
    store: {
      userProfile: { projects: allProjects }
    }
  } = useStores()
  const history = useHistory()
  const location = useLocation()
  const { watch } = useFormContext<PremiumByocFormValue>()

  const projectId = watch('projectId')
  const name = watch('name')
  const cloudProvider = watch('cloudProvider')
  const regionId = watch('regionId')
  const maxRcu = watch('maxRcu')
  const minRcu = watch('minRcu')
  const highAvailabilityType = watch('highAvailabilityType')
  const dataEncryptionEnabled = watch('dualLayerDataEncryption.encrypted')
  const dataEncryptionKeyType = watch('dualLayerDataEncryption.keyType')
  const virtualProjectId = useVirtualProjectId()
  const { isOrgOwner } = useCreateResourceRoleState()
  const effectiveProjectId = isOrgOwner ? projectId || virtualProjectId : projectId

  const { isLoading: isLoadingProviders } = useGetTidbCloudProviders(servicePlan, {
    projectId: effectiveProjectId
  })
  const { regions, isLoading: isLoadingRegions } = useGetTidbCloudRegions(servicePlan, cloudProvider ?? '', {
    projectId: effectiveProjectId
  })
  const isLoading = isLoadingProviders || isLoadingRegions

  const projectName = allProjects?.find((project) => project.id === projectId)?.name ?? '-'
  const regionName = regions.find((r) => r.regionId === regionId)?.displayName ?? regionId ?? ''
  const haLabel =
    highAvailabilityType === V1beta2TidbHighAvailabilityType.REGIONAL
      ? 'Regional'
      : highAvailabilityType === V1beta2TidbHighAvailabilityType.ZONAL
        ? 'Zonal'
        : '-'
  const dataEncryptionKeyLabel =
    dataEncryptionKeyType === 'customer-managed'
      ? 'Customer-managed Encryption Key (CMEK)'
      : dataEncryptionKeyType === 'service-managed'
        ? 'Service-managed Encryption Key'
        : undefined

  const dataEncryptionValue = dataEncryptionEnabled
    ? `Enabled${dataEncryptionKeyLabel ? ` with ${dataEncryptionKeyLabel}` : ''}`
    : 'Disabled'
  const { isEnabled: isDataEncryptionFeatEnabled } = useDualLayerDataEncryptionFeatEnabled({
    servicePlan,
    cloudProvider
  })

  const { creditCardNeeded, creditCardModalVisible, creditCardModalHandlers } = useAddCreditCard({
    enabled: servicePlan === Commonv1beta1ServicePlan.Premium
  })

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
      <Box>
        <Typography variant="title-lg">Summary</Typography>
        <Typography variant="body-lg" c="carbon.7" mt={4}>
          Your new instance will be:
        </Typography>
        <Stack justify="flex-start" gap={8} pt="xl" pb="md">
          <SumInfoItem label="Plan" value={servicePlan} />
          <SumInfoItem label="Project" value={projectName} />
          <SumInfoItem label="Instance Name" value={name || '-'} />
          <SumInfoItem label="Cloud Provider" value={cloudProvider ? getCloudProviderLabel(cloudProvider) : '-'} />
          <SumInfoItem label="Region" value={regionName || '-'} />
          <Divider my={8} />
          <SumInfoItem label="Max RCUs" value={maxRcu ? Number(maxRcu).toLocaleString() : '-'} />
          {isDataEncryptionFeatEnabled && (
            <>
              <Divider my={8} />
              <SumInfoItem label="Dual-Layer Data Encryption" value={dataEncryptionValue} />
            </>
          )}
          <SumInfoItem label="High Availability" value={haLabel} />
        </Stack>
      </Box>
      <Divider />
      <Box sx={{ marginTop: 'auto' }}>
        <PremiumPricingCost
          cloudProvider={cloudProvider ?? ''}
          region={regionId ?? ''}
          minRcu={minRcu ?? 0}
          maxRcu={maxRcu ?? 0}
        />
        <Group justify="space-between">
          <Button
            variant="default"
            onClick={() => history.push(`/tidbs${location.search}`)}
            data-mp-event={MixpanelEvents.TidbResource.Create.CancelClicked}
            data-mp-service-plan={servicePlan}
          >
            Cancel
          </Button>
          <CreateActionGuard
            projectId={projectId}
            projectAccessId="TidbxCreateInProject"
            orgAccessId="TidbxCreateInVirtualProject"
            permissionMessage={'Please ask your admin to grant you the permission to create a Premium instance.'}
          >
            {!creditCardNeeded && (
              <Button
                type="submit"
                form={formId}
                disabled={isLoading || disabled}
                sx={{ flexGrow: 1 }}
                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 style={{ flexGrow: 1 }}>
                        <Button disabled sx={{ width: '100%' }}>
                          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}
                  sx={{ flexGrow: 1 }}
                  data-mp-event="Add Credit Card Button Clicked"
                  data-mp-service-plan={servicePlan}
                >
                  Add Credit Card
                </Button>
              </AccessGuard>
            )}
          </CreateActionGuard>
        </Group>
      </Box>

      {creditCardNeeded && (
        <PaymentMethodModal
          open={creditCardModalVisible}
          onClose={creditCardModalHandlers.close}
          onComplete={() => {
            creditCardModalHandlers.close()
            notifier.success('Your credit card was added successfully!')
          }}
        />
      )}
    </Box>
  )
})