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

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

import { MappingsForm, MappingsFormType } from './Forms/MappingsForm'

export const WhitelistStrategy = () => {
  const params = new URLSearchParams(window.location.search)
  const spu_key = params.get('spu_key') || ''
  const sku_key = params.get('sku_key') || ''
  const component_type = params.get('component_type') || ''
  const [modifyRecord, setModifyRecord] = useState<TidbMgmtServicev1Spu>()
  const [component, setComponent] = useState<Dedicatedv1ComponentType>(
    (component_type as Dedicatedv1ComponentType) ||
      Dedicatedv1ComponentType.TIDB
  )
  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: 'DISPLAY NAME',
      render: (_: any, record) => {
        return record.displayName
      }
    },
    {
      title: 'SPU KEY',
      render: (_: any, record) => {
        return record.key
      }
    },
    {
      title: 'Mappings',
      width: 800,
      render: (_any, record) => {
        return (
          <Typography.Text
            style={{
              maxWidth: 800,
              display: 'inline-block',
              whiteSpace: 'pre-wrap',
              // fontFamily: 'monospace', // 使用等宽字体保证对齐
              wordBreak: 'break-all' // 避免长文本溢出
            }}
          >
            {JSON.stringify(record.mappings, null, 2)}{' '}
            {/* 改用2空格缩进更稳定 */}
          </Typography.Text>
        )
      }
    },
    {
      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)
              setCreateForm(true)
            }}
          >
            Modify
          </Button>
          {/* <Button
                        type="link"
                        size="small"
                        style={{ padding: '0 4px' }}
                        onClick={() => {
                        }}
                    >
                        Approval Detail
                    </Button>
                    <Button
                        type="link"
                        size="small"
                        style={{ padding: '0 4px', color: '#1890ff' }}
                        onClick={() => { }}
                    >
                        Activate
                    </Button> */}
        </div>
      )
    }
  ]
  const [createForm, setCreateForm] = useState(false)
  const renderCreateFormFields = useCallback(
    (form: FormInstance) => {
      form.setFieldsValue({
        mappings: JSON.stringify(modifyRecord?.mappings, null, '\t')
      })
      return <MappingsForm />
    },
    [createForm]
  )
  const handleCreate = useCallback(
    async (payload: MappingsFormType) => {
      try {
        await patchSpu(modifyRecord!.id!, {
          mappings: JSON.parse(payload.mappings) as SpuMapping[]
        })
        Modal.success({
          title: 'Info',
          content: (
            <div>
              <p>SPU has been modified</p>
            </div>
          ),
          onOk() {}
        })
        setCreateForm(false)
        reload()
      } catch (error) {
        if (error.response != undefined) {
          Modal.error({
            title: error.response.data.code,
            content: error.response.data.message
          })
        } else {
          Modal.error({
            title: String(error),
            content: String(error)
          })
        }
      }
    },
    [reload]
  )

  const handleCancelCreate = useCallback(() => {
    setCreateForm(false)
  }, [])

  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>
    ],
    [component, reload]
  )

  return (
    <div>
      <ListToolBar
        actions={actions}
        reload={() => {
          const url = new URL(window.location.href)
          url.search = ''
          window.history.replaceState({}, '', url)
          return reload()
        }}
      ></ListToolBar>
      <Table<TidbMgmtServicev1Spu>
        columns={columns}
        rowKey="id"
        dataSource={dataSource
          .filter(
            (v) =>
              (!spu_key || v.key === spu_key) &&
              (!sku_key || v.mappings?.map((v2) => v2.skuKey).includes(sku_key))
          )
          .sort((v1, v2) => {
            return parseInt(v2.id!) - parseInt(v1.id!)
          })}
        loading={loading}
        pagination={paginationProps}
        size="small"
        onChange={onTableChange}
      ></Table>
      <ModalForm<MappingsFormType>
        visible={!!createForm}
        name="modifyMappings"
        title={'Modify SPU Mappings'}
        getFields={renderCreateFormFields}
        onSubmit={handleCreate}
        width={1100}
        onCancel={handleCancelCreate}
        maskClosable={false}
        destoryOnClose={true}
      />
    </div>
  )
}