import React, { useState } from 'react'

import { Grid, SimpleGrid, Stack } from '@mantine/core'
import { Divider, Modal, Typography } from 'antd'

import { ClusterCluster } from '@clinic/client'
import { clusterDetailTelemetry } from '~/telemetry'
import {
  ClusterDeployType,
  ClusterDeployTypeV2,
  isPremiumLikeDeployTypeV2,
  isPremiumLineResourcePoolDeployTypeV2
} from '~/utils/cluster-status'
import {
  getDedicatedDataPlaneLogPath,
  getDedicatedInstanceLogPath,
  getPremiumInstanceLogPath,
  getPremiumRestoreLogPath,
  getServerlessComponentLogPath,
  getServerlessComponentLogPathWithNSRegex,
  getServerlessComponentLogPathWithContainerRegex
} from '~/utils/links'

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

const isPremiumFamily = (deployType: ClusterCluster['deployType']) =>
  deployType === ClusterDeployType.Premium ||
  deployType === ClusterDeployType.NgHost ||
  deployType === ClusterDeployType.Byoc ||
  deployType === ClusterDeployType.ByocHost

const logModalLinkClassName = 'text-cc-primary hover:text-cc-primary'

/** Nested log link (e.g. alternate Loki query under the same grid cell). */
const logModalNestedLinkClassName = `${logModalLinkClassName} block text-xs leading-snug pl-2.5`

export const CloudInstanceLogsModal: React.FC<{
  cluster: ClusterCluster
  timeRange: TimeRange
}> = ({ cluster, timeRange }) => {
  const [showModal, setShowModal] = useState(false)
  const isStarterOrEssentialV1 =
    cluster.deployTypeV2 === ClusterDeployTypeV2.Starter ||
    cluster.deployTypeV2 === ClusterDeployTypeV2.Essential
  const showSchemaManager =
    isPremiumLikeDeployTypeV2(cluster.deployTypeV2) ||
    isPremiumLineResourcePoolDeployTypeV2(cluster.deployTypeV2) ||
    cluster.deployTypeV2 === ClusterDeployTypeV2.Byoc ||
    cluster.deployTypeV2 === ClusterDeployTypeV2.ByocResourcePool

  return (
    <>
      <DetailItemCard
        name='Logs'
        onClick={() => {
          clusterDetailTelemetry.clickLogsCard()
          setShowModal(true)
        }}
      />

      <Modal
        visible={showModal}
        title='Logs'
        onCancel={() => setShowModal(false)}
        footer={null}
      >
        {cluster.deployType === ClusterDeployType.Dedicated && (
          <Grid>
            <Grid.Col span={4}>
              <Typography.Text
                strong
                style={{ color: 'var(--cc-brand-color)' }}
              >
                TiDB Cluster
              </Typography.Text>
            </Grid.Col>
            <Grid.Col span={8}>
              <SimpleGrid cols={3} spacing={8} verticalSpacing={8}>
                {cluster && (
                  <a
                    key={'TiDB'}
                    href={getDedicatedInstanceLogPath(
                      cluster,
                      timeRange,
                      '',
                      'tidb|slowlog'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiDB
                  </a>
                )}
                {cluster &&
                  ['PD', 'TiKV'].map((container) => (
                    <a
                      key={container}
                      href={getDedicatedInstanceLogPath(
                        cluster,
                        timeRange,
                        container.toLocaleLowerCase()
                      )}
                      target='_blank'
                      className={logModalLinkClassName}
                    >
                      {container}
                    </a>
                  ))}
                {cluster && (
                  <a
                    key={'TiFlash'}
                    href={getDedicatedInstanceLogPath(
                      cluster,
                      timeRange,
                      '',
                      'tiflash|errorlog|serverlog'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiFlash
                  </a>
                )}
                {cluster && (
                  <a
                    key={'TiProxy'}
                    href={getDedicatedInstanceLogPath(
                      cluster,
                      timeRange,
                      'tiproxy'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiProxy
                  </a>
                )}
              </SimpleGrid>
            </Grid.Col>
            <Divider />

            <Grid.Col span={4}>
              <Typography.Text
                strong
                style={{ color: 'var(--cc-brand-color)' }}
              >
                Tools
              </Typography.Text>
            </Grid.Col>
            <Grid.Col span={8}>
              <SimpleGrid cols={3} spacing={8} verticalSpacing={8}>
                <a
                  href={getDedicatedDataPlaneLogPath(
                    cluster,
                    timeRange,
                    '',
                    'dm-'
                  )}
                  target='_blank'
                  className={logModalLinkClassName}
                >
                  DM
                </a>
                <a
                  href={getDedicatedInstanceLogPath(
                    cluster,
                    timeRange,
                    'ticdc'
                  )}
                  target='_blank'
                  className={logModalLinkClassName}
                >
                  TiCDC
                </a>
                <a
                  href={getDedicatedInstanceLogPath(
                    cluster,
                    timeRange,
                    'backup'
                  )}
                  target='_blank'
                  className={logModalLinkClassName}
                >
                  Backup
                </a>
                <a
                  href={getDedicatedInstanceLogPath(
                    cluster,
                    timeRange,
                    'restore'
                  )}
                  target='_blank'
                  className={logModalLinkClassName}
                >
                  Restore
                </a>
                <a
                  href={getDedicatedInstanceLogPath(
                    cluster,
                    timeRange,
                    'tidb-lightning'
                  )}
                  target='_blank'
                  className={logModalLinkClassName}
                >
                  Lightning
                </a>
              </SimpleGrid>
            </Grid.Col>
            <Divider />

            <Grid.Col span={4}>
              <Typography.Text
                strong
                style={{ color: 'var(--cc-brand-color)' }}
              >
                Dataplane
              </Typography.Text>
            </Grid.Col>
            <Grid.Col span={8}>
              <SimpleGrid cols={3} spacing={8} verticalSpacing={8}>
                <a
                  href={getDedicatedDataPlaneLogPath(
                    cluster,
                    timeRange,
                    'tidb-admin',
                    '',
                    'tidb-operator'
                  )}
                  target='_blank'
                  className={logModalLinkClassName}
                >
                  Operator
                </a>
                <a
                  href={getDedicatedDataPlaneLogPath(
                    cluster,
                    timeRange,
                    'tidb-admin',
                    '',
                    'cluster-proxy'
                  )}
                  target='_blank'
                  className={logModalLinkClassName}
                >
                  Proxy
                </a>
                <a
                  href={getDedicatedDataPlaneLogPath(cluster, timeRange)}
                  target='_blank'
                  className={logModalLinkClassName}
                >
                  Other
                </a>
              </SimpleGrid>
            </Grid.Col>
            <Divider />
          </Grid>
        )}

        {isPremiumFamily(cluster.deployType) && (
          <Grid>
            <Grid.Col span={4}>
              <Typography.Text
                strong
                style={{ color: 'var(--cc-brand-color)' }}
              >
                TiDB Cluster
              </Typography.Text>
            </Grid.Col>
            <Grid.Col span={8}>
              <SimpleGrid cols={3} spacing={8} verticalSpacing={8}>
                {cluster && (
                  <a
                    key='TiDB'
                    href={getPremiumInstanceLogPath(
                      cluster,
                      timeRange,
                      '',
                      'tidb|slowlog',
                      true
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiDB
                  </a>
                )}
                {cluster && (
                  <a
                    key='PD'
                    href={getPremiumInstanceLogPath(
                      cluster,
                      timeRange,
                      '',
                      'pd|tso|scheduling'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    PD
                  </a>
                )}
                {cluster && (
                  <a
                    key='TiKV'
                    href={getPremiumInstanceLogPath(cluster, timeRange, 'tikv')}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiKV
                  </a>
                )}
                {cluster && (
                  <Stack key='tidb-worker-logs' spacing={4} align='flex-start'>
                    <a
                      href={getPremiumInstanceLogPath(
                        cluster,
                        timeRange,
                        'worker-tidb'
                      )}
                      target='_blank'
                      className={logModalLinkClassName}
                    >
                      TiDB Worker
                    </a>
                    <a
                      href={getPremiumInstanceLogPath(
                        cluster,
                        timeRange,
                        'worker-tidb',
                        '',
                        false,
                        true,
                        'ImportInto'
                      )}
                      target='_blank'
                      className={logModalNestedLinkClassName}
                      title='Separate Loki query: TiDB Worker logs filtered by ImportInto'
                    >
                      (Import)
                    </a>
                  </Stack>
                )}
                {cluster && (
                  <a
                    key='TiKV Worker'
                    href={getPremiumInstanceLogPath(
                      cluster,
                      timeRange,
                      'tikv-worker'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiKV Worker
                  </a>
                )}
                {cluster && (
                  <a
                    key='Coprocessor Worker'
                    href={getPremiumInstanceLogPath(
                      cluster,
                      timeRange,
                      'coprocessor-worker'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    Coprocessor Worker
                  </a>
                )}
                {cluster && (
                  <a
                    key='TiFlash'
                    href={getPremiumInstanceLogPath(
                      cluster,
                      timeRange,
                      '',
                      'tiflash|write-tiflash|compute-tiflash'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiFlash
                  </a>
                )}
                {cluster && (
                  <a
                    key='TiProxy'
                    href={getPremiumInstanceLogPath(
                      cluster,
                      timeRange,
                      'tiproxy',
                      '',
                      true
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiProxy
                  </a>
                )}
                {showSchemaManager && (
                  <a
                    key='Schema Manager'
                    href={getPremiumInstanceLogPath(
                      cluster,
                      timeRange,
                      'schema-manager'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    Schema Manager
                  </a>
                )}
              </SimpleGrid>
            </Grid.Col>
            <Divider />

            <Grid.Col span={4}>
              <Typography.Text
                strong
                style={{ color: 'var(--cc-brand-color)' }}
              >
                Tools
              </Typography.Text>
            </Grid.Col>
            <Grid.Col span={8}>
              <SimpleGrid cols={3} spacing={8} verticalSpacing={8}>
                <a
                  href={getPremiumInstanceLogPath(
                    cluster,
                    timeRange,
                    '',
                    'dm-.*'
                  )}
                  target='_blank'
                  className={logModalLinkClassName}
                >
                  DM
                </a>
                <a
                  href={getPremiumInstanceLogPath(cluster, timeRange, 'ticdc')}
                  target='_blank'
                  className={logModalLinkClassName}
                >
                  TiCDC
                </a>
                <a
                  href={getPremiumInstanceLogPath(cluster, timeRange, 'tibr')}
                  target='_blank'
                  className={logModalLinkClassName}
                >
                  TiBR
                </a>
                {cluster.deployType === ClusterDeployType.Premium && (
                  <a
                    href={getPremiumRestoreLogPath(cluster, timeRange)}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    Restore
                  </a>
                )}
                <a
                  href={getPremiumInstanceLogPath(
                    cluster,
                    timeRange,
                    'export-dumpling'
                  )}
                  target='_blank'
                  className={logModalLinkClassName}
                  data-testid='cloud-instance-logs-dumpling-link'
                >
                  Dumpling
                </a>
              </SimpleGrid>
            </Grid.Col>
            <Divider />
          </Grid>
        )}

        {cluster.deployType === ClusterDeployType.Shared && (
          <Grid>
            <Grid.Col span={4}>
              <Typography.Text
                strong
                style={{ color: 'var(--cc-brand-color)' }}
              >
                TiDB Cluster
              </Typography.Text>
            </Grid.Col>
            <Grid.Col span={8}>
              <SimpleGrid cols={3} spacing={8} verticalSpacing={8}>
                {cluster && (
                  <a
                    href={getServerlessComponentLogPathWithNSRegex(
                      cluster,
                      timeRange,
                      'tidb-pool|vip-tidb-pool|super-vip-tidb-pool|canary-tidb-pool|canary-vip-tidb-pool',
                      'tidb'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiDB
                  </a>
                )}
                {cluster && (
                  <a
                    href={getServerlessComponentLogPath(
                      cluster,
                      timeRange,
                      'tikv-log'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiKV
                  </a>
                )}
                {cluster && (
                  <a
                    href={getServerlessComponentLogPath(
                      cluster,
                      timeRange,
                      'tiflash'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiFlash
                  </a>
                )}
                {cluster && (
                  <a
                    href={getServerlessComponentLogPath(
                      cluster,
                      timeRange,
                      'pd'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    PD
                  </a>
                )}
                {cluster && (
                  <a
                    href={getServerlessComponentLogPath(
                      cluster,
                      timeRange,
                      'tidb-worker-job',
                      'tidb-worker'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiDB Worker
                  </a>
                )}
                {cluster && (
                  <a
                    href={getServerlessComponentLogPath(
                      cluster,
                      timeRange,
                      'tikv-worker'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiKV Worker
                  </a>
                )}
                {cluster && (
                  <a
                    href={getServerlessComponentLogPathWithNSRegex(
                      cluster,
                      timeRange,
                      'tidb-pool|vip-tidb-pool|super-vip-tidb-pool|canary-tidb-pool|canary-vip-tidb-pool',
                      'slowlog'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    SlowLog
                  </a>
                )}
                {cluster && (
                  <a
                    href={getServerlessComponentLogPathWithNSRegex(
                      cluster,
                      timeRange,
                      'tidb-pool|vip-tidb-pool|super-vip-tidb-pool|canary-tidb-pool|canary-vip-tidb-pool',
                      'statementlog'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    StatementLog
                  </a>
                )}
              </SimpleGrid>
            </Grid.Col>
            <Divider />

            <Grid.Col span={4}>
              <Typography.Text
                strong
                style={{ color: 'var(--cc-brand-color)' }}
              >
                Tools
              </Typography.Text>
            </Grid.Col>
            <Grid.Col span={8}>
              <SimpleGrid cols={3} spacing={8} verticalSpacing={8}>
                {cluster && (
                  <a
                    href={getServerlessComponentLogPath(
                      cluster,
                      timeRange,
                      'tidb-lightning',
                      'import-jobs'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    Lightning
                  </a>
                )}
                {cluster && (
                  <a
                    href={getServerlessComponentLogPath(
                      cluster,
                      timeRange,
                      'rep-cdc',
                      'tidb-serverless'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    TiCDC
                  </a>
                )}
                {cluster && isStarterOrEssentialV1 && (
                  <a
                    href={getServerlessComponentLogPath(
                      cluster,
                      timeRange,
                      'ticdc',
                      'tidb-serverless'
                    )}
                    target='_blank'
                    className={`${logModalLinkClassName} inline-flex flex-col items-center justify-center leading-snug`}
                  >
                    <span>TiCDC</span>
                    <span className='text-xs'>(New Arch)</span>
                  </a>
                )}
                {cluster && (
                  <a
                    href={getServerlessComponentLogPathWithContainerRegex(
                      cluster,
                      timeRange,
                      'tidb-serverless',
                      'dm-worker|dm-master'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    DM
                  </a>
                )}
              </SimpleGrid>
            </Grid.Col>
            <Divider />

            <Grid.Col span={4}>
              <Typography.Text
                strong
                style={{ color: 'var(--cc-brand-color)' }}
              >
                Dataplane
              </Typography.Text>
            </Grid.Col>
            <Grid.Col span={8}>
              <SimpleGrid cols={3} spacing={8} verticalSpacing={8}>
                {cluster && (
                  <a
                    href={getServerlessComponentLogPath(
                      cluster,
                      timeRange,
                      'manager',
                      'tidb-admin'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    Manager
                  </a>
                )}
                {cluster && (
                  <a
                    href={getServerlessComponentLogPath(
                      cluster,
                      timeRange,
                      'tidb-gateway',
                      'tidb-admin'
                    )}
                    target='_blank'
                    className={logModalLinkClassName}
                  >
                    Gateway
                  </a>
                )}
              </SimpleGrid>
            </Grid.Col>
            <Divider />
          </Grid>
        )}
      </Modal>
    </>
  )
}