import React, { useMemo } from 'react'

import { Card, SimpleGrid, Tooltip } from '@mantine/core'
import { Typography } from 'antd'

import { useCurCluster, useCurOrg, useUserStore } from '~/hooks/state'
import { clusterDetailTelemetry } from '~/telemetry'
import { ClusterStatus, actionPreflightMap } from '~/utils/cluster-status'
import { getInvestibookWorkspaceEntryUrl } from '~/utils/investibook'

import { GitOPSModal } from '../../cards/GitOPSModal'
import { OpsPortalModal } from '../../cards/OpsPortalModal'
import { DetailItemCard } from '../../components/DetailItemCard'

export const OtherDetailItems: React.FC = () => {
  const { curOrg: org } = useCurOrg()
  const { curCluster } = useCurCluster()
  const cluster = curCluster!

  const isInternalUser = useUserStore((state) => state.user?.internal)
  const tidbDashboardEnable = useMemo(
    () =>
      actionPreflightMap.tidbDashboard(cluster.status as ClusterStatus) &&
      cluster.computed.isDedicated,
    [cluster]
  )
  const tidbDashboardHref = useMemo(() => {
    return `dashboard/cloud/?orgId=${org?.externalID!}&clusterId=${cluster.id!}#/overview`
  }, [cluster, org])
  const gitOPSEnable = useMemo(
    () =>
      cluster.computed.isDedicated &&
      cluster.controlPlaneArch !== '3layer' &&
      actionPreflightMap.gitops(cluster.status as ClusterStatus),
    [cluster]
  )
  const opsPortalEnable = useMemo(
    () =>
      !cluster.computed.isTiupCluster &&
      !cluster.computed.isTiDBOperator &&
      actionPreflightMap.opsPortal(cluster.status as ClusterStatus),
    [cluster]
  )

  if (!isInternalUser) {
    return null
  }

  return (
    <Card withBorder>
      <SimpleGrid
        cols={3}
        spacing={16}
        breakpoints={[
          { maxWidth: 'md', cols: 2 },
          { maxWidth: 'sm', cols: 1 }
        ]}
      >
        {tidbDashboardEnable ? (
          <div>
            <Typography.Link
              href={tidbDashboardHref}
              target='_blank'
              onClick={() =>
                clusterDetailTelemetry.clickDetailItem('TiDB Dashboard')
              }
            >
              <DetailItemCard name='TiDB Dashboard' />
            </Typography.Link>
          </div>
        ) : (
          <div>
            <Tooltip
              label='Not supported for current tier or not running cluster'
              position='right'
              withArrow
            >
              <div>
                <DetailItemCard disabled={true} name='TiDB Dashboard' />
              </div>
            </Tooltip>
          </div>
        )}

        {gitOPSEnable ? (
          <div>
            <GitOPSModal org={org!} cluster={cluster} />
          </div>
        ) : (
          <div>
            <Tooltip
              label='Not supported for current tier or deleted cluster or 3layer cluster'
              position='left'
              withArrow
            >
              <div>
                <GitOPSModal org={org!} cluster={cluster} disabled={true} />
              </div>
            </Tooltip>
          </div>
        )}

        {(cluster.status === ClusterStatus.Normal ||
          cluster.status === ClusterStatus.Active) &&
        cluster.computed.isDedicated ? (
          <div>
            <DetailItemCard
              name='Realtime Config'
              to='configurations'
              onClick={() =>
                clusterDetailTelemetry.clickDetailItem('Realtime Config')
              }
            />
          </div>
        ) : (
          <div>
            <Tooltip
              label='Not supported for current tier or not running cluster'
              position='left'
              withArrow
            >
              <div>
                <DetailItemCard
                  disabled={true}
                  name='Realtime Config'
                  to='configurations'
                />
              </div>
            </Tooltip>
          </div>
        )}

        {opsPortalEnable ? (
          <div>
            <OpsPortalModal cluster={cluster} org={org!} />
          </div>
        ) : (
          <div>
            <Tooltip
              label='Not supported for deleted cluster'
              position='left'
              withArrow
            >
              <div>
                <OpsPortalModal cluster={cluster} org={org!} disabled={true} />
              </div>
            </Tooltip>
          </div>
        )}

        <div>
          <Typography.Link
            href={getInvestibookWorkspaceEntryUrl(cluster.id!)}
            target='_blank'
            onClick={() =>
              clusterDetailTelemetry.clickDetailItem('Investibook')
            }
          >
            <DetailItemCard
              name='Investibook'
              desc='Create an AI diagnosis workspace for this cluster'
            />
          </Typography.Link>
        </div>
      </SimpleGrid>
    </Card>
  )
}