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 { 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 { PaymentMethodModal } from 'dbaas/screens/Stripe/PaymentMethod/PaymentMethodModal'
import { useResourcePoolServiceGetResourcePool } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2'
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 { useVirtualProjectId } from '../../shared/use-virtual-project-id'

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

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

const SILENT_BYOC_QUERY_REQUEST = { isShowToast: false, isHandleErr: false }

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

export const ByocSummary = observer(({ formId, servicePlan, disabled, isPending }: ByocSummaryProps) => {
  const {
    store: {
      userProfile: { projects: allProjects },
      lastVisitLocation: { orgId }
    }
  } = 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 resourcePoolId = watch('resourcePoolId')
  // const highAvailabilityType = watch('highAvailabilityType')
  const virtualProjectId = useVirtualProjectId()
  const effectiveProjectId = projectId || virtualProjectId

  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 resourcePoolQuery = useResourcePoolServiceGetResourcePool(
    resourcePoolId ?? '',
    { orgId, projectId: effectiveProjectId },
    {
      query: {
        enabled: !!(orgId && effectiveProjectId && resourcePoolId),
        refetchOnWindowFocus: false,
        retry: 1
      },
      request: SILENT_BYOC_QUERY_REQUEST
    }
  )
  const resourcePoolName = resourcePoolQuery.data?.displayName ?? '-'
  // const haLabel =
  //   highAvailabilityType === V1beta2TidbHighAvailabilityType.REGIONAL
  //     ? 'Regional'
  //     : highAvailabilityType === V1beta2TidbHighAvailabilityType.ZONAL
  //       ? 'Zonal'
  //       : '-'

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

  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 || '-'} />
          <SumInfoItem label="Resource Pool" value={resourcePoolName} />
          <Divider my={8} />
          <SumInfoItem label="Max RCUs" value={maxRcu ? Number(maxRcu).toLocaleString() : '-'} />
          {/* Temporarily hidden for BYOC create; keep logic for future reuse. */}
          {/* <Divider my={8} />
          <SumInfoItem label="High Availability" value={haLabel} /> */}
        </Stack>
      </Box>
      <Divider />
      <Box sx={{ marginTop: 'auto' }}>
        <ByocCost />
        <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 the TiDB Cloud BYOC instance."
          >
            {!creditCardNeeded && (
              <Button
                type="submit"
                form={formId}
                disabled={isLoading || disabled}
                sx={{ flexGrow: 1 }}
                loading={isPending}
                data-testid="byoc-create-submit"
                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>
  )
})