import { Alert, Box, Button, Group, Loader, Stack, Typography } from '@tidbcloud/uikit'
import { PropertyCard } from '@tidbcloud/uikit/biz'
import { IconAlertCircle } from '@tidbcloud/uikit/icons'

import { StatusBadge } from 'dbaas/components/StatusBadge'
import TimeComponent from 'dbaas/components/TimeComponent'
import { useOrgProjectClusterIds } from 'dbaas/features/Common'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import { useExportServiceGetExport } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2'
import { getErrorMessage } from 'dbaas/services/errorCodes'

import { getCloudStorageProviderLabel, getCloudStorageUri, getExportStateBadgeProps, shouldPollExport } from './helpers'

const ExportDetailPremium = ({ exportId, onClose }: { exportId: string; onClose?: () => void }) => {
  const tidb = useSharedTiDBContext()
  const { orgId, projectId } = useOrgProjectClusterIds()

  const { data, isLoading, error, refetch } = useExportServiceGetExport(
    tidb.tidbId!,
    exportId,
    { orgId, projectId },
    {
      query: {
        enabled: !!tidb.tidbId && !!exportId && !!orgId && !!projectId,
        refetchInterval(queryData) {
          return shouldPollExport(queryData?.state) ? 15000 : false
        }
      }
    }
  )

  const targetUri = getCloudStorageUri(data?.cloudStorage)

  return (
    <Stack data-testid="premium-export-detail-page">
      {isLoading && <Loader size="xs" m="auto" />}
      {error && (
        <Alert color="red" title="Failed to fetch export task" icon={<IconAlertCircle />}>
          <Stack>
            <Typography>{getErrorMessage(error, true)}</Typography>
            <Group>
              <Button variant="default" onClick={onClose}>
                Back to list
              </Button>
              <Button onClick={() => refetch()}>Retry</Button>
            </Group>
          </Stack>
        </Alert>
      )}
      {data && (
        <Stack w="100%" px={8} data-testid="premium-export-detail-container">
          <PropertyCard title="" withBorder={false} shadow="none" py={0} px={0}>
            <PropertyCard.Item label="Task Name">{data.displayName || '-'}</PropertyCard.Item>
            <PropertyCard.Item label="Export ID">{data.exportId}</PropertyCard.Item>
            <PropertyCard.Item label="Status">
              <StatusBadge {...getExportStateBadgeProps(data.state, data.reason)} />
            </PropertyCard.Item>
            <PropertyCard.Item label="Create Time">
              {data.createTime ? <TimeComponent time={data.createTime} /> : '-'}
            </PropertyCard.Item>
            <PropertyCard.Item label="Complete Time">
              {data.completeTime ? <TimeComponent time={data.completeTime} /> : '-'}
            </PropertyCard.Item>
            <PropertyCard.Item label="Created By">{data.createdBy || '-'}</PropertyCard.Item>
            <PropertyCard.Item label="Instance ID">{data.tidbId || tidb.tidbId || '-'}</PropertyCard.Item>
            <PropertyCard.Item label="Username">{data.username || '-'}</PropertyCard.Item>
            <PropertyCard.Item label="Table Patterns">
              {data.exportOptions?.filter?.table?.patterns?.length
                ? data.exportOptions.filter.table.patterns.join(', ')
                : '*.*'}
            </PropertyCard.Item>
            <PropertyCard.Item label="File Type">{data.exportOptions?.fileType || '-'}</PropertyCard.Item>
            <PropertyCard.Item label="Compression">{data.exportOptions?.compression || '-'}</PropertyCard.Item>
            {data.exportOptions?.csvFormat?.separator && (
              <PropertyCard.Item label="CSV Separator">{data.exportOptions.csvFormat.separator}</PropertyCard.Item>
            )}
            {data.exportOptions?.csvFormat?.delimiter && (
              <PropertyCard.Item label="CSV Delimiter">{data.exportOptions.csvFormat.delimiter}</PropertyCard.Item>
            )}
            {data.exportOptions?.csvFormat?.nullValue !== undefined && (
              <PropertyCard.Item label="CSV Null Value">
                {data.exportOptions.csvFormat.nullValue || '-'}
              </PropertyCard.Item>
            )}
            {data.exportOptions?.csvFormat?.skipHeader !== undefined && (
              <PropertyCard.Item label="CSV Skip Header">
                {data.exportOptions.csvFormat.skipHeader ? 'Yes' : 'No'}
              </PropertyCard.Item>
            )}
            <PropertyCard.Item label="Target" sx={{ alignItems: 'flex-start' }}>
              <Stack gap={4}>
                <Typography>{getCloudStorageProviderLabel(data.cloudStorage)}</Typography>
                <Typography>{targetUri}</Typography>
              </Stack>
            </PropertyCard.Item>
            {data.reason && (
              <PropertyCard.Item label="Reason" valueProps={{ sx: { flex: 1 } }}>
                <Box>{data.reason}</Box>
              </PropertyCard.Item>
            )}
          </PropertyCard>
        </Stack>
      )}
    </Stack>
  )
}

export default ExportDetailPremium