import { ReloadOutlined } from '@ant-design/icons'
import { Button, Space, Table, Tag, Typography } from 'antd'
import type { ColumnsType } from 'antd/lib/table'
import { AxiosResponse } from 'axios'
import { useMemo } from 'react'
import { Link, useParams } from 'react-router-dom'

import { devopsInstance } from 'apiClient/custom-instance'
import type {
  ClusterCluster,
  ClusterListClustersResp,
  OperationOperationTarget
} from 'apiClient/services/devops/interface'
import { useTable } from 'components/Table'
import CreateOperation from 'pages/Devops/Operations/CreateOperation'

import SharedResourcePoolDetail from './Detail'

type RouteParams = {
  resource_pool_id?: string
}

const listSharedResourcePools = (params?: {
  page?: number
  pagesize?: number
}) =>
  devopsInstance<ClusterListClustersResp>({
    url: '/api/v1/devops/cluster/shared-resource-pools',
    method: 'GET',
    params
  })

const SharedResourcePoolList = () => {
  const getData = (
    params?: Partial<PageInfo>
  ): Promise<AxiosResponse<ClusterListClustersResp>> =>
    listSharedResourcePools({
      page: params?.page,
      pagesize: params?.pageSize
    })

  const { dataSource, loading, onTableChange, paginationProps, reload } =
    useTable<ListData<ClusterCluster>>(getData, [], {
      pagination: true,
      defaultPageSize: 10
    })

  const columns = useMemo<ColumnsType<ClusterCluster>>(
    () => [
      {
        title: 'Resource Pool',
        width: 180,
        fixed: 'left',
        dataIndex: 'id',
        render: (_, record) => (
          <Space direction="vertical">
            {record.name ? (
              <Typography.Text
                style={{ width: 180 }}
                ellipsis={{ tooltip: record.name }}
              >
                {record.name}
              </Typography.Text>
            ) : (
              <span style={{ color: '#aaa' }}>-</span>
            )}
            <Typography.Text type="secondary">{record.id}</Typography.Text>
          </Space>
        )
      },
      {
        title: 'Service Plan',
        dataIndex: 'service_plan',
        render: (_: any, { service_plan }: ClusterCluster) =>
          service_plan || '-',
        width: 140
      },
      {
        title: 'Provider',
        dataIndex: 'provider',
        render: (provider: string) => provider || '-',
        width: 110
      },
      {
        title: 'Region',
        dataIndex: 'region',
        render: (region: string) => region || '-',
        width: 140
      },
      {
        title: 'Logical Region',
        dataIndex: 'logical_region',
        render: (logicalRegion: string) => logicalRegion || '-',
        width: 160
      },
      {
        title: 'Default In Region',
        dataIndex: 'resource_pool_details',
        render: (details: any) =>
          details?.is_default === true ? (
            <Tag color="green">Yes</Tag>
          ) : details?.is_default === false ? (
            <Tag>No</Tag>
          ) : (
            '-'
          ),
        width: 150
      },
      {
        title: 'Default For Tenants',
        dataIndex: 'resource_pool_details',
        render: (details: any) => {
          const defaultOrgs = details?.default_orgs
          if (!Array.isArray(defaultOrgs) || defaultOrgs.length === 0) {
            return '-'
          }

          return defaultOrgs
            .map((orgId: string | number) => String(orgId))
            .join(', ')
        },
        width: 220
      },
      {
        title: 'TiKV Tag',
        dataIndex: 'resource_pool_details',
        render: (details: any) => details?.tikv_tag || '-',
        width: 150
      },
      {
        title: 'Instance Limit',
        dataIndex: 'resource_pool_details',
        render: (details: any) =>
          details?.instance_limit ? details.instance_limit : '-',
        width: 140
      },
      {
        title: 'Action',
        key: 'action',
        fixed: 'right',
        width: 220,
        render: (_: any, record: ClusterCluster) => (
          <Space>
            <Link to={`/sharedResourcePool/${record.id}`}>Detail</Link>
            <CreateOperation
              target_type={'resource_pool' as OperationOperationTarget}
              target_id={record.id}
              op="DeleteResourcePool"
              bottom_name="Delete"
              reload={reload}
            />
          </Space>
        )
      }
    ],
    [reload]
  )

  return (
    <>
      <Space
        style={{
          marginBottom: 16,
          display: 'flex',
          justifyContent: 'flex-end'
        }}
      >
        <Button type="primary">
          <CreateOperation
            target_type={'tenant' as OperationOperationTarget}
            target_id="0"
            op="CreateResourcePool"
            init_categories={['resource-pool']}
            bottom_name="Create"
            triggerStyle={{ color: '#fff', textAlign: 'center' }}
            reload={reload}
          />
        </Button>
        <Button icon={<ReloadOutlined />} onClick={() => reload()}>
          Refresh
        </Button>
      </Space>
      <Table<ClusterCluster>
        columns={columns}
        rowKey="id"
        dataSource={dataSource}
        loading={loading}
        pagination={{
          ...paginationProps,
          showSizeChanger: true,
          pageSizeOptions: ['5', '10', '20', '50']
        }}
        onChange={onTableChange}
        size="small"
        scroll={{ x: 1200 }}
      />
    </>
  )
}

const SharedResourcePool = () => {
  const { resource_pool_id } = useParams<RouteParams>()

  if (resource_pool_id) {
    return <SharedResourcePoolDetail />
  }

  return <SharedResourcePoolList />
}

export default SharedResourcePool