import React, { useState } from 'react'

import { Divider, Modal, Typography } from 'antd'

import { ClusterCluster, OrgOrganization } from '@clinic/client'
import { clusterDetailTelemetry } from '~/telemetry'
import {
  ClusterDeployType,
  ClusterDeployTypeV2,
  actionPreflightMap,
  ClusterStatus
} from '~/utils/cluster-status'
import envConfig from '~/utils/env-config'

import { DetailItemCard } from '../components/DetailItemCard'

interface OpsPortalModalProps {
  org: OrgOrganization
  cluster: ClusterCluster
  disabled?: boolean
}

function isCtlLinkEnabled(deployTypeV2?: string) {
  return (
    deployTypeV2 === ClusterDeployTypeV2.Dedicated ||
    deployTypeV2 === ClusterDeployTypeV2.Premium ||
    deployTypeV2 === ClusterDeployTypeV2.EssentialV2 ||
    deployTypeV2 === ClusterDeployTypeV2.Essential
  )
}

function getPDCtlLink(cluster: ClusterCluster, org: OrgOrganization) {
  return (
    envConfig.quickLinks.opsPortal +
    `/orgs/${org.externalID}/clusters/${cluster.id!}?activeKey=terminal`
  )
}

function getCondfigLink(cluster: ClusterCluster, org: OrgOrganization) {
  return (
    envConfig.quickLinks.opsPortal +
    `/orgs/${org.externalID}/clusters/${cluster.id!}?activeKey=configs`
  )
}

function getJumpserverLink(cluster: ClusterCluster) {
  let clusterId = cluster.id
  let deployType = cluster.deployType
  const ops = envConfig.quickLinks.opsPortal
  if (cluster.deployType === ClusterDeployType.Shared) {
    deployType = 'serverless'
    if (ops?.includes('dev')) {
      clusterId = `dev-${cluster.region}-f01`
    } else if (ops?.includes('staging')) {
      clusterId = `staging-${cluster.region}-f01`
    } else {
      clusterId = `prod-${cluster.region}-f01`
    }
  }
  return (
    ops +
    `/jumps?create=true&cluster_id=${clusterId}&cluster_deploy_type=${deployType}&plane=data_plane`
  )
}

export const OpsPortalModalBody: React.FC<OpsPortalModalProps> = ({
  cluster,
  org
}) => {
  return (
    <div className='flex flex-col'>
      <div className='grid grid-cols-2'>
        <Typography.Text strong style={{ color: 'var(--cc-brand-color)' }}>
          CTLs
        </Typography.Text>
        <Typography.Link
          disabled={!isCtlLinkEnabled(cluster.deployTypeV2)}
          href={getPDCtlLink(cluster, org)}
          target='_blank'
        >
          Link
        </Typography.Link>
      </div>
      <Divider />
      <div className='grid grid-cols-2'>
        <Typography.Text strong style={{ color: 'var(--cc-brand-color)' }}>
          Jumpserver
        </Typography.Text>
        <Typography.Link href={getJumpserverLink(cluster)} target='_blank'>
          Link
        </Typography.Link>
      </div>
      <Divider />
      <div className='grid grid-cols-2'>
        <Typography.Text strong style={{ color: 'var(--cc-brand-color)' }}>
          Config
        </Typography.Text>
        <Typography.Link
          disabled={
            (cluster.deployType !== ClusterDeployType.Dedicated ||
              cluster.controlPlaneArch !== '3layer' ||
              !actionPreflightMap.gitops(cluster.status! as ClusterStatus)) &&
            cluster.deployType !== ClusterDeployType.Premium
          }
          href={getCondfigLink(cluster, org)}
          target='_blank'
        >
          Link
        </Typography.Link>
      </div>
      <Divider />
    </div>
  )
}

export const OpsPortalModal: React.FC<OpsPortalModalProps> = ({
  cluster = {},
  org = {},
  disabled = false
}) => {
  const name = 'Ops Portal'
  const [showModal, setShowModal] = useState(false)

  return (
    <>
      <DetailItemCard
        name={name}
        onClick={() => {
          clusterDetailTelemetry.clickDetailItem(name)
          setShowModal(true)
        }}
        disabled={disabled}
      />

      <Modal
        visible={showModal}
        title={name}
        onCancel={() => setShowModal(false)}
        footer={null}
        destroyOnClose={true}
      >
        <OpsPortalModalBody cluster={cluster} org={org} />
      </Modal>
    </>
  )
}