import { Anchor, Box, Center, Loader, Stack, Typography } from '@tidbcloud/uikit'
import { CodeBlock, PropertyCard } from '@tidbcloud/uikit/biz'
import { IconLinkExternal01 } from '@tidbcloud/uikit/icons'

import TimeComponent from 'dbaas/components/TimeComponent'
import { ExportTargets } from 'dbaas/features/Import'
import { ExportStatus } from 'dbaas/features/Import/ExportStatus'
import { useExportServiceGetExport } from 'dbaas/services/api-clients/legacy/serverless'
import {
  ExportFileTypeEnum,
  ExportTargetTypeEnum as ServerlessExportTargetTypeEnum
} from 'dbaas/services/api-clients/legacy/serverless/interface'
import useStores from 'dbaas/stores/useStores'

export default function ExportTaskDetail({ id }: { id: string }) {
  const {
    store: { activeProjectId, tenantData, currentCluster }
  } = useStores()

  const { data, isLoading } = useExportServiceGetExport(tenantData.id, activeProjectId, currentCluster?.id!, id, {
    query: {
      enabled: !!currentCluster?.id && !!id,
      refetchInterval: 3000
    }
  })

  const sourceProvider = ExportTargets.find((target) => target.value === data?.target?.type)
  const sourceUri = sourceProvider ? data?.target?.[sourceProvider.key]?.uri : ''

  if (isLoading) {
    return (
      <Center>
        <Loader size="xs" m="auto" />
      </Center>
    )
  }

  return (
    <Stack px={8}>
      <PropertyCard title="" withBorder={false} shadow="none" py={0} px={0}>
        <PropertyCard.Item label="Name">{data?.display_name}</PropertyCard.Item>
        <PropertyCard.Item label="Task ID">{data?.export_id}</PropertyCard.Item>
        <PropertyCard.Item label="Status">
          <ExportStatus status={data?.state!} error={data?.reason} withinPortal />
        </PropertyCard.Item>

        {data?.target?.type === ServerlessExportTargetTypeEnum.LOCAL && data?.target.local_download_command && (
          <Stack gap={8}>
            <Box bg="carbon.3" sx={{ borderRadius: 8 }}>
              <Box px={16} py={8}>
                <Typography variant="label-sm">Download file with TiDB Cloud CLI</Typography>
              </Box>
              <CodeBlock
                codeHighlightProps={{
                  styles: {
                    lineContent: { wordBreak: 'break-word', whiteSpace: 'pre-wrap' }
                  }
                }}
                sx={{ '&>div': { border: 'none', borderRadius: 0 } }}
              >
                {data?.target.local_download_command!}
              </CodeBlock>
              <Box px={16} py={8} sx={{ textAlign: 'right' }}>
                <Typography variant="body-md">
                  File expires in <TimeComponent time={data?.expire_time!} />
                </Typography>
              </Box>
            </Box>

            <Anchor href="https://docs.pingcap.com/tidbcloud/get-started-with-cli" target="_blank">
              Learn how to install and use the CLI <IconLinkExternal01 size={12} />
            </Anchor>
          </Stack>
        )}

        <PropertyCard.Item label="Creation Time">
          <TimeComponent time={data?.create_time!} />
        </PropertyCard.Item>
        <PropertyCard.Item label="Snapshot Time">
          <TimeComponent time={data?.snapshot_time!} />
        </PropertyCard.Item>

        <PropertyCard.Item label="Created by">{data?.created_by}</PropertyCard.Item>

        {data?.export_options?.filter?.table?.patterns && (
          <PropertyCard.Item label="Source">
            {data?.export_options?.filter?.table?.patterns?.join(', ')}
          </PropertyCard.Item>
        )}

        {data?.export_options?.filter?.sql && (
          <PropertyCard.Item label="Source" valueProps={{ sx: { flex: 1 } }}>
            <Stack gap={8}>
              <Box bg="carbon.3" sx={{ borderRadius: 8 }}>
                <Box px={16} py={8}>
                  <Typography variant="label-sm">SQL Query</Typography>
                </Box>
                <CodeBlock language="sql" sx={{ '&>div': { border: 'none' } }}>
                  {data?.export_options?.filter?.sql}
                </CodeBlock>
              </Box>
            </Stack>
          </PropertyCard.Item>
        )}

        <PropertyCard.Item label="Data Format">{data?.export_options?.file_type}</PropertyCard.Item>

        {data?.export_options?.file_type === ExportFileTypeEnum.PARQUET ? (
          <PropertyCard.Item label="Compression">{data?.export_options?.parquet_format?.compression}</PropertyCard.Item>
        ) : (
          <PropertyCard.Item label="Compression">{data?.export_options?.compression}</PropertyCard.Item>
        )}

        {data?.target?.type !== ServerlessExportTargetTypeEnum.LOCAL && sourceProvider && sourceUri && (
          <PropertyCard.Item label="Target" sx={{ alignItems: 'flex-start' }}>
            <Stack gap={4}>
              <Typography>{sourceProvider.label}</Typography>
              <Typography>{sourceUri}</Typography>
            </Stack>
          </PropertyCard.Item>
        )}
      </PropertyCard>
    </Stack>
  )
}