import React, { useMemo } from 'react'

import {
  Card,
  Group,
  Badge,
  Title,
  Tooltip,
  Text,
  Flex,
  Box
} from '@mantine/core'

import {
  TiDBIcon,
  DMIcon,
  ServerlessIcon,
  DedicatedIcon
} from '~/components/Icons'
import { ComputedCluster, useUserStore } from '~/hooks/state'
import {
  ClusterDeployType,
  ClusterStatus,
  getStatusColor
} from '~/utils/cluster-status'
import { formatDateTime } from '~/utils/date-time'
import { CloudUIProvider, OnPremUIProvider } from '~/utils/tenant-type'

interface ClusterCardProps {
  cluster: ComputedCluster
}

export const ClusterCard: React.FC<ClusterCardProps> = ({ cluster }) => {
  const isInternalUser = useUserStore((state) => state.user?.internal)
  const isDM = cluster.clusterType?.startsWith('dm')
  const statusColor = useMemo(
    () => getStatusColor(cluster?.status),
    [cluster?.status]
  )

  const topology = useMemo(() => {
    const topo = cluster.topology ?? {}
    return Object.entries(topo)
      .filter(([k, _]) => {
        if (
          !isInternalUser &&
          cluster.deployType === ClusterDeployType.Dedicated &&
          k === 'pd'
        ) {
          return false
        }
        if (!isDM && (k === 'dmMaster' || k === 'dmWorker')) {
          return false
        }
        if (isDM && k !== 'dmMaster' && k !== 'dmWorker') {
          return false
        }
        return true
      })
      .map(([k, v]) => `${k}-${v}`)
      .join(' ')
  }, [cluster, isDM])

  return (
    <Card shadow='sm' p='lg' radius='md' withBorder>
      <CloudUIProvider>
        <Flex
          justify='space-between'
          align='center'
          style={{ whiteSpace: 'nowrap' }}
        >
          <Flex
            align='center'
            gap='sm'
            style={{
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              flexGrow: 1,
              marginRight: '1rem'
            }}
          >
            <Box style={{ flexShrink: 0 }}>
              {cluster?.deployType === ClusterDeployType.Dedicated ? (
                <DedicatedIcon />
              ) : (
                <ServerlessIcon />
              )}
            </Box>
            <Tooltip label={cluster.name}>
              <Text
                color='#383E40'
                weight={700}
                size='lg'
                style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
              >
                {cluster.name}
              </Text>
            </Tooltip>
          </Flex>
          <Group spacing='xs'>
            <Badge
              variant='outline'
              color={
                cluster?.computed.isDedicated
                  ? 'cyan'
                  : cluster?.computed.isByoc
                  ? 'blue'
                  : 'grape'
              }
              styles={{
                root: {
                  fontWeight: 500
                }
              }}
            >
              {cluster?.deployTypeV2 || 'Unknown'}
            </Badge>
            <Badge
              variant='outline'
              color={statusColor}
              styles={{
                root: {
                  fontWeight: 500
                }
              }}
            >
              {cluster?.status === ClusterStatus.Deletecomplete ||
              cluster?.status === ClusterStatus.Cleared
                ? 'Deleted'
                : cluster?.status}
            </Badge>
          </Group>
        </Flex>

        <div className='flex flex-col mt-2'>
          <Group spacing='xs'>
            <Text fz='sm' c='dimmed'>
              Version:
            </Text>
            <Text fz='sm'>{cluster.version}</Text>
          </Group>
          {cluster?.computed.isDedicated ? (
            <Group spacing='xs'>
              <Text fz='sm' c='dimmed'>
                Topology:
              </Text>
              <Text fz='sm'>{topology}</Text>
            </Group>
          ) : null}
          <Group spacing='xs'>
            <Text fz='sm' c='dimmed'>
              Created:
            </Text>
            <Text fz='sm'> {formatDateTime(cluster.created!)}</Text>
          </Group>
        </div>
      </CloudUIProvider>

      <OnPremUIProvider>
        <Group spacing='xs'>
          {isDM ? <DMIcon /> : <TiDBIcon />}
          <Tooltip label={cluster.name}>
            <Title order={4} fw={500} style={{ width: 230 }} truncate>
              {cluster.name}
            </Title>
          </Tooltip>
        </Group>
        <div className='flex flex-col'>
          <Group spacing='xs'>
            <Text fz='sm' c='dimmed'>
              Version:
            </Text>
            <Text fz='sm'>{cluster.version}</Text>
          </Group>
          <Group spacing='xs'>
            <Text fz='sm' c='dimmed'>
              Topology:
            </Text>
            <Text fz='sm'>{topology}</Text>
          </Group>
          <Group spacing='xs'>
            <Text fz='sm' c='dimmed'>
              Data Range:
            </Text>
            <Text fz='sm'>
              {formatDateTime(cluster.startTime!)} -{' '}
              {formatDateTime(cluster.endTime!)}
            </Text>
          </Group>
        </div>
      </OnPremUIProvider>
    </Card>
  )
}