import { ReloadOutlined, PlusOutlined } from '@ant-design/icons'
import { Button, Form, Modal, Radio, Space, Table, Tag, message } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { Link } from 'react-router-dom'

import {
  regionControllerListRegions,
  regionControllerRegisterRegion
} from 'apiClient/services/devops'
import { RegionRegion } from 'apiClient/services/devops/interface/regionRegion'

import RegisterRegionForm, {
  RegisterRegionFormValues,
  buildRegisterRegionRequest
} from './Forms/RegisterRegionForm'
import { renderRegionState, DEPLOY_TYPE_OPTIONS } from './helper'
import { getPrimaryServicePlan, getRegionWhiteLists } from './regionWhiteList'

export const RegionList: React.FC<React.PropsWithChildren<unknown>> = () => {
  const [deployType, setDeployType] = useState<string>('DEPLOY_TYPE_SERVERLESS')
  const [regions, setRegions] = useState<RegionRegion[]>([])
  const [loading, setLoading] = useState(false)
  const [reload, setReload] = useState(false)
  const latestRequestIdRef = useRef(0)
  const [registerModalVisible, setRegisterModalVisible] = useState(false)
  const [registering, setRegistering] = useState(false)
  const [registerForm] = Form.useForm<RegisterRegionFormValues>()

  const fetchRegions = useCallback(async () => {
    const requestId = latestRequestIdRef.current + 1
    latestRequestIdRef.current = requestId
    setRegions([])
    setLoading(true)
    try {
      const { data } = await regionControllerListRegions({
        deploy_type: deployType
      })
      if (requestId !== latestRequestIdRef.current) {
        return
      }
      setRegions(data.regions || [])
    } catch (error) {
      if (requestId !== latestRequestIdRef.current) {
        return
      }
      console.error(error)
      message.error('Failed to load regions. Please try again.')
    } finally {
      if (requestId === latestRequestIdRef.current) {
        setLoading(false)
      }
    }
  }, [deployType])

  useEffect(() => {
    fetchRegions()
  }, [fetchRegions, reload])

  const isRegisterEnabled = deployType === 'DEPLOY_TYPE_SERVERLESS'

  const handleOpenRegisterModal = () => {
    registerForm.resetFields()
    setRegisterModalVisible(true)
  }

  const handleCloseRegisterModal = () => {
    setRegisterModalVisible(false)
  }

  const handleRegisterSubmit = async () => {
    try {
      const values = await registerForm.validateFields()
      setRegistering(true)
      var resp = (
        await regionControllerRegisterRegion(buildRegisterRegionRequest(values))
      ).data.instance_id

      Modal.success({
        title: 'Register Region Operation Created',
        content: (
          <div>
            <p>
              The operation has been created.
              <br></br>
              However, you should go to to the <b>Detail</b> Page to check the
              Approval information. Click <b>OK</b> will redirect you to that
              page.
            </p>
          </div>
        ),
        onOk() {
          window.open(`/operations/${resp}`, '_blank')
        }
      })

      setRegisterModalVisible(false)
      registerForm.resetFields()
      setReload(!reload)
    } catch (error) {
      if ((error as { errorFields?: unknown[] })?.errorFields) {
        return
      }
      message.error('Failed to register region. Please try again.')
    } finally {
      setRegistering(false)
    }
  }

  const columns: ColumnsType<RegionRegion> = [
    {
      title: 'Display Name',
      width: 200,
      render: (_: unknown, record) => record.region?.display_name || '-'
    },
    {
      title: 'Logical Name',
      width: 200,
      render: (_: unknown, record) => record.region?.logical_name || '-'
    },
    {
      title: 'Provider',
      width: 100,
      render: (_: unknown, record) => record.region?.cloud_provider_id || '-'
    },
    {
      title: 'Service Plan',
      width: 150,
      render: (_: unknown, record) => {
        const regionWhiteLists = getRegionWhiteLists(record.region)
        if (regionWhiteLists.length > 0) {
          return (
            <div>
              {regionWhiteLists.map((item, index) => (
                <div key={`${item.service_plan}-${index}`}>
                  {item.service_plan || '-'}
                </div>
              ))}
            </div>
          )
        }
        if (record.region?.service_plan === 'SERVICE_PLAN_UNSPECIFIED') {
          return '-'
        }
        return record.region?.service_plan || '-'
      }
    },
    {
      title: 'Public',
      width: 80,
      render: (_: unknown, record) => {
        const regionWhiteLists = getRegionWhiteLists(record.region)
        if (regionWhiteLists.length > 0) {
          return (
            <div>
              {regionWhiteLists.map((item, index) => (
                <div key={`${item.service_plan || 'public'}-${index}`}>
                  <Tag color={item.is_public ? 'success' : 'default'}>
                    {item.is_public ? 'Public' : 'Private'}
                  </Tag>
                </div>
              ))}
            </div>
          )
        }
        return (
          <Tag color={record.region?.is_public ? 'success' : 'default'}>
            {record.region?.is_public ? 'Public' : 'Private'}
          </Tag>
        )
      }
    },
    {
      title: 'State',
      width: 90,
      render: (_: unknown, record) => renderRegionState(record.region?.state)
    },
    {
      title: 'Deploy Type',
      width: 190,
      render: (_: unknown, record) => {
        return record.deploy_type || '-'
      }
    },
    {
      title: 'Action',
      width: 120,
      fixed: 'right',
      render: (_: unknown, record) => {
        const primaryServicePlan = getPrimaryServicePlan(record.region)
        const params = new URLSearchParams()
        params.set('logical_name', record.region?.logical_name!)
        params.set('cloud_provider', record.region?.cloud_provider_id!)
        params.set('deploy_type', record.deploy_type!)
        if (primaryServicePlan) {
          params.set('service_plan', primaryServicePlan)
        }
        return (
          <Link to={`/regions/${record.region?.id}?${params.toString()}`}>
            Detail
          </Link>
        )
      }
    }
  ]

  return (
    <div>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: 16
        }}
      >
        <Space size="large" align="center">
          <Space size="middle" align="center">
            <Radio.Group
              value={deployType}
              buttonStyle="solid"
              onChange={(event) => setDeployType(event.target.value)}
            >
              {DEPLOY_TYPE_OPTIONS.map((option) => (
                <Radio.Button key={option.value} value={option.value}>
                  {option.label}
                </Radio.Button>
              ))}
            </Radio.Group>
          </Space>
        </Space>
        <Space size="middle">
          <Button
            type="primary"
            disabled={!isRegisterEnabled}
            onClick={handleOpenRegisterModal}
            icon={<PlusOutlined />}
          >
            Register
          </Button>
          <Button
            type="default"
            icon={<ReloadOutlined />}
            onClick={() => setReload(!reload)}
            loading={loading}
          >
            Reload
          </Button>
        </Space>
      </div>

      <Table
        columns={columns}
        dataSource={regions.sort((a, b) => {
          return a.region?.state === 'ACTIVE' ? -1 : 1
        })}
        loading={loading}
        pagination={false}
        size="small"
        scroll={{ x: 1200 }}
        rowKey={(record, index) =>
          record.region?.id ||
          record.region?.logical_name ||
          `${record.deploy_type}-${index}`
        }
      />

      <Modal
        title="Register Region"
        width={600}
        open={registerModalVisible}
        onCancel={handleCloseRegisterModal}
        onOk={handleRegisterSubmit}
        okText="Register"
        confirmLoading={registering}
        maskClosable={false}
        destroyOnClose
      >
        <RegisterRegionForm deployType={deployType} form={registerForm} />
      </Modal>
    </div>
  )
}

export default RegionList