import { PlusOutlined } from '@ant-design/icons'
import { Button, Input, Modal, Row, Select } from 'antd'
import { FormInstance } from 'antd/es/form/Form'
import Table, { ColumnsType } from 'antd/lib/table'
import { useCallback, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'

import { patchSpu } from 'apiClient/services/devops'
import {
  spuServiceCreateSpu,
  spuServiceListSpus,
  spuServiceUpdateSpu
} from 'apiClient/services/sku'
import {
  Dedicatedv1ComponentType,
  SpuServiceListSpusComponentType,
  TidbMgmtServicev1Spu
} from 'apiClient/services/sku/interface'
import ModalForm from 'components/ModalForm'
import { ListToolBar, useTable } from 'components/Table'

import SPUPage, { AddSPUFormType } from './Forms/SPUForm'

export const SPUManagement = () => {
  const [component, setComponent] = useState<Dedicatedv1ComponentType>(
    Dedicatedv1ComponentType.TIDB
  )
  const [modifyRecord, setModifyRecord] = useState<TidbMgmtServicev1Spu>()
  const getData = (params?: Partial<PageInfo>) =>
    spuServiceListSpus({
      componentType: component
    }).then((response) => ({
      ...response,
      data: {
        items: response.data.spus
      }
    }))
  const { dataSource, loading, reload, paginationProps, onTableChange } =
    useTable<ListData<TidbMgmtServicev1Spu>>(getData, [], {
      pagination: true
    })
  const columns: ColumnsType<TidbMgmtServicev1Spu> = [
    {
      title: 'ID',
      render: (_: any, record) => {
        return record.id
      }
    },
    {
      title: 'DISPLAY NAME',
      render: (_: any, record) => {
        return record.displayName
      }
    },
    {
      title: 'COMPONENT',
      render: (_: any, record) => {
        return record.componentType
      }
    },
    {
      title: 'CPU NUMBER',
      render: (_: any, record) => {
        return record.cpuCore
      }
    },
    {
      title: 'MEMORY SIZE',
      render: (_: any, record) => {
        return record.memorySizeGi
      }
    },
    {
      title: 'SPU KEY',
      render: (_: any, record) => {
        return record.key
      }
    },
    {
      title: 'Actions',
      width: 300, // 定义足够列宽
      render: (_: any, record) => (
        <div
          style={{
            display: 'flex',
            gap: 8, // 现代浏览器间距方案
            flexWrap: 'nowrap' // 禁止换行
          }}
        >
          <Button
            type="link"
            size="small"
            style={{ padding: '0 4px' }}
            onClick={() => {
              setModifyRecord(record)
              setModifyForm(true)
            }}
          >
            Modify
          </Button>
          <Button type="link" size="small" style={{ padding: '0 4px' }}>
            <Link target="_blank" to={`/sku_service/sku?spu_key=${record.key}`}>
              SKU
            </Link>
          </Button>
          <Button type="link" size="small" style={{ padding: '0 4px' }}>
            <Link
              target="_blank"
              to={`/sku_service/whitelist?spu_key=${record.key}&component_type=${record.componentType}`}
            >
              Whitelist Strategy
            </Link>
          </Button>
        </div>
      )
    }
  ]

  const [createForm, setCreateForm] = useState(false)
  const [modifyForm, setModifyForm] = useState(false)
  const handleCancelCreate = useCallback(() => {
    setCreateForm(false)
  }, [])
  const handleCancelModify = useCallback(() => {
    setModifyForm(false)
  }, [])

  const createChange = () => {
    setCreateForm(true)
  }

  const renderCreateFormFields = useCallback(
    (form: FormInstance) => {
      form.setFieldsValue({
        component: SpuServiceListSpusComponentType.TIDB
      })
      return <SPUPage form={form} type="create" />
    },
    [createForm]
  )
  const renderModifyFormFields = useCallback(
    (form: FormInstance) => {
      form.setFieldsValue({
        component: modifyRecord?.componentType,
        vCPUNumber: modifyRecord?.cpuCore,
        memorySize: String(modifyRecord?.memorySizeGi),
        displayName: String(modifyRecord?.displayName),
        name: String(modifyRecord?.name)
      })
      return <SPUPage form={form} type="modify" />
    },
    [modifyForm, modifyRecord]
  )

  const handleCreate = useCallback(
    async (payload: AddSPUFormType) => {
      const req: TidbMgmtServicev1Spu = {
        name: payload.name,
        displayName: payload.displayName,
        componentType: payload.component,
        cpuCore: payload.vCPUNumber,
        memorySizeGi: payload.memorySize
      }
      try {
        await spuServiceCreateSpu(req)
        Modal.success({
          title: 'Info',
          content: (
            <div>
              <p>SPU has been added</p>
            </div>
          ),
          onOk() {}
        })
        setCreateForm(false)
        reload()
      } catch (error) {
        Modal.error({
          title: error.response.data.code,
          content: error.response.data.message
        })
      }
    },
    [reload]
  )

  const handleModify = useCallback(
    async (payload: AddSPUFormType) => {
      try {
        const instance = (
          await patchSpu(modifyRecord!.id!, {
            displayName: payload.displayName
          })
        ).data.instance_id
        Modal.success({
          title: 'info',
          content: (
            <div>
              <p>
                Successfully submit the request to update the spu.
                <br></br>
                <br></br>
                To check the progress of this operation, please refer to the{' '}
                <a href={`/operations/${instance}`}>Detail</a> page.
              </p>
            </div>
          ),
          onOk() {
            window.open(`/operations/${instance}`, '_blank')
          }
        })
        setModifyForm(false)
        reload()
      } catch (error) {
        Modal.error({
          title: error.response.data.code,
          content: error.response.data.message
        })
      }
    },
    [reload]
  )

  const actions = useMemo(
    () => [
      <Select
        options={Object.entries(Dedicatedv1ComponentType).map(
          ([key, value]) => ({
            label: key,
            value: value
          })
        )}
        value={component}
        onChange={(event) => {
          setComponent(event)
          reload()
        }}
        style={{ width: 150 }}
      ></Select>,
      <div style={{ display: 'flex', gap: '10px' }}>
        <Button type="primary" onClick={createChange} icon={<PlusOutlined />}>
          Create SPU
        </Button>
      </div>
    ],
    [component, reload]
  )

  return (
    <div>
      <ListToolBar
        actions={actions}
        reload={() => {
          return reload()
        }}
      ></ListToolBar>
      <Table<TidbMgmtServicev1Spu>
        columns={columns}
        rowKey="id"
        dataSource={dataSource.sort((v1, v2) => {
          return parseInt(v2.id!) - parseInt(v1.id!)
        })}
        loading={loading}
        pagination={paginationProps}
        size="small"
        onChange={onTableChange}
      ></Table>
      <ModalForm<AddSPUFormType>
        visible={!!createForm}
        name="createSPU"
        title={'Create SPU'}
        getFields={renderCreateFormFields}
        onSubmit={handleCreate}
        onCancel={handleCancelCreate}
        maskClosable={false}
        destoryOnClose={true}
      />
      <ModalForm<AddSPUFormType>
        visible={!!modifyForm}
        name="modifySPU"
        title={'Modify SPU'}
        getFields={renderModifyFormFields}
        onSubmit={handleModify}
        onCancel={handleCancelModify}
        maskClosable={false}
        destoryOnClose={true}
      />
    </div>
  )
}