import React, { useMemo, useState } from 'react'

import { Badge, Button, Input, Space, Typography } from 'antd'
import type { ColumnsType } from 'antd/es/table'

import { ViewDashboardItemExternal } from '@clinic/client'
import { useUserStore } from '~/hooks/state'
import {
  clusterDeployTypeFilters,
  clusterStatusFilters,
  controlPlaneArchFilters,
  getStatusColor,
  isMasterClusterTierChildDeployTypeV2,
  isResourcePoolTierChildDeployTypeV2,
  providerFilters,
  tenantPlanFilters
} from '~/utils/cluster-status'
import { formatDateTime } from '~/utils/date-time'
import { isGlobalRegion } from '~/utils/env-config'

import { IColumnKeys } from '../components/ColumnFilter'
import { ParentClusterLink } from '../components/ParentClusterLink'

type ParentLinkConfig = {
  label: string
  matches: (clusterDeployTypeV2?: string | null) => boolean
  lookupParentOrg?: boolean
}

const renderParentClusterLink = (
  record: ViewDashboardItemExternal,
  config: ParentLinkConfig
): React.ReactNode => {
  if (!record.parentID || !config.matches(record.clusterDeployTypeV2)) {
    return null
  }

  return (
    <ParentClusterLink
      parentClusterId={record.parentID}
      label={config.label}
      lookupOrgFromDashboard={config.lookupParentOrg}
      fallbackOrgId={record.orgID}
    />
  )
}

export const useColumns = (
  filters: any,
  sorter: any,
  regionFilters: Array<{ text: string; value: string }>
) => {
  const isInternalUser = useUserStore((state) => state.user?.internal)
  const columns = useMemo<ColumnsType<ViewDashboardItemExternal>>(
    () => [
      {
        title: 'Tenant',
        width: 210,
        fixed: 'left',
        dataIndex: 'tenantID',
        render: (_, record) => (
          <div className='flex flex-col'>
            {record.tenantName ? (
              <Typography.Text ellipsis={{ tooltip: record.tenantName }}>
                {record.tenantName}
              </Typography.Text>
            ) : (
              <span style={{ color: '#aaa' }}>-</span>
            )}
            <Typography.Text type='secondary'>
              {record.tenantID}
            </Typography.Text>
          </div>
        )
      },
      {
        title: 'Cluster',
        width: 200,
        fixed: 'left',
        dataIndex: 'clusterID',
        render: (_, record) => (
          <div className='flex flex-col'>
            <Typography.Text ellipsis={{ tooltip: record.clusterName }}>
              {record.clusterName}
            </Typography.Text>
            <Typography.Text type='secondary'>
              {record.clusterID}
            </Typography.Text>
            {isInternalUser &&
              renderParentClusterLink(record, {
                label: 'Resource pool',
                matches: isResourcePoolTierChildDeployTypeV2,
                lookupParentOrg: true
              })}
            {isInternalUser &&
              renderParentClusterLink(record, {
                label: 'Master cluster',
                matches: isMasterClusterTierChildDeployTypeV2
              })}
          </div>
        )
      },
      {
        title: 'Cluster Status',
        dataIndex: 'clusterStatus',
        width: 150,
        render: (status: string) => {
          if (status === '') {
            return null
          }
          const badgeStatus = status.endsWith('ing') ? 'processing' : 'default'
          return (
            <Badge
              color={getStatusColor(status)}
              status={badgeStatus}
              text={status}
            />
          )
        },
        filters: clusterStatusFilters,
        defaultFilteredValue: filters.clusterStatus
      },
      ...(isInternalUser
        ? [
            {
              title: 'Deploy Type',
              dataIndex: 'clusterDeployTypeV2',
              width: 120,
              filters: clusterDeployTypeFilters,
              defaultFilteredValue: filters.deployType
            }
          ]
        : []),
      {
        title: 'Version',
        dataIndex: 'clusterVersion',
        width: 100,
        render: (v) => {
          return v || 'N/A'
        },
        filterDropdown: ({
          setSelectedKeys,
          selectedKeys,
          confirm,
          clearFilters
        }) => (
          <div style={{ padding: 8 }}>
            <Input
              placeholder='Filter version'
              value={selectedKeys[0] as string}
              onChange={(e) =>
                setSelectedKeys(e.target.value ? [e.target.value] : [])
              }
              onPressEnter={() => confirm()}
              style={{ width: 188, marginBottom: 8, display: 'block' }}
            />
            <Space>
              <Button
                onClick={() => clearFilters && clearFilters()}
                size='small'
                style={{ width: 90 }}
              >
                Reset
              </Button>
              <Button
                type='primary'
                onClick={() => confirm()}
                size='small'
                style={{ width: 90 }}
              >
                Filter
              </Button>
            </Space>
          </div>
        )
      },
      {
        title: 'Cluster Lifecycle',
        dataIndex: 'clusterCreatedAt',
        width: 200,
        render: (_, record) => (
          <div className='flex flex-col'>
            <Typography.Text>
              {record.clusterCreatedAt! > 0 &&
                `${formatDateTime(record.clusterCreatedAt! / 1000)} ~ `}
            </Typography.Text>
            <Typography.Text>
              {record.clusterDeletedAt! > 0
                ? `${formatDateTime(record.clusterDeletedAt! / 1000)}`
                : 'now'}
            </Typography.Text>
          </div>
        )
      },
      {
        title: 'Creation Duration',
        dataIndex: 'clusterDuration',
        width: 120
      },
      {
        title: 'Tenant Plan',
        dataIndex: 'tenantPlan',
        width: 120,
        filters: tenantPlanFilters,
        defaultFilteredValue: filters.tenantPlan
      },
      {
        title: 'Provider',
        dataIndex: 'clusterProviderName',
        width: 150,
        filters: providerFilters,
        defaultFilteredValue: filters.provider
      },
      {
        title: 'Region',
        dataIndex: 'clusterRegionName',
        width: 150,
        filters: regionFilters,
        defaultFilteredValue: filters.region
      },
      {
        title: 'Project ID',
        dataIndex: 'projectID',
        width: 210
      },
      {
        title: 'Control Plane',
        dataIndex: 'controlPlaneArch',
        filters: controlPlaneArchFilters,
        defaultFilteredValue: filters.controlPlaneArch,
        width: 130
      }
    ],
    [regionFilters, isInternalUser]
  )

  const [visibleColumnKeys, setVisibleColumnKeys] = useState<IColumnKeys>({
    tenantID: true && isGlobalRegion(),
    tenantName: true,
    clusterID: true,
    clusterName: true,
    clusterStatus: true,
    clusterDeployTypeV2: true,
    clusterVersion: true,
    clusterCreatedAt: true,
    clusterDuration: true && isGlobalRegion(),
    tenantPlan: true && isGlobalRegion(),
    clusterDeletedAt: true,
    controlPlaneArch: true && isGlobalRegion(),
    clusterProviderName: true && isGlobalRegion(),
    clusterRegionName: isGlobalRegion(),
    projectID: true && isGlobalRegion()
  })

  const visibleColumns = useMemo(() => {
    return columns.filter((col) => visibleColumnKeys[(col as any).dataIndex!])
  }, [columns, visibleColumnKeys])

  return { columns, visibleColumns, visibleColumnKeys, setVisibleColumnKeys }
}