import {
  Card,
  Typography,
  Descriptions,
  Divider,
  Table,
  Button,
  Modal,
  message,
  Input,
  notification,
  Image
} from 'antd'
import { ColumnsType } from 'antd/lib/table'
import dayjs from 'dayjs'
import { capitalize } from 'lodash'
import { useState } from 'react'
import { Link, useParams } from 'react-router-dom'

import {
  deleteCustomer,
  useGetMspByOrgId,
  getSignupUrl,
  useGetCustomersByPartnerId,
  useGetSignupUrl
} from 'apiClient/services/account'
import { FormsPartnerCustomer } from 'apiClient/services/account/interface'
import { useGetTenantSupportPlan } from 'apiClient/services/billing'
import ModalForm from 'components/ModalForm'
import { ListToolBar } from 'components/Table'
import {
  PlanLevels,
  formatMonthlyUsage
} from 'pages/Tenants/TenantDetail/BusinessInfo/SupportPlan'
import { useClipboard } from 'utils/dom'
import { getErrorMessage } from 'utils/error'
import { format, formatTime } from 'utils/time'

import { CreateMSPCustomer } from './Create'
import { CreateOrUpdateMSP } from './Create/MSP'

const { Title } = Typography

export const MSPQuit: React.FC<
  React.PropsWithChildren<{
    customerId: string
    mspName: string
    onDelete?: () => void
  }>
> = ({ onDelete, customerId, mspName }) => {
  const [visible, setVisible] = useState(false)
  const onSubmit = async (data: FormsPartnerCustomer) => {
    await deleteCustomer({
      ...data,
      partner_type: 'MSP',
      customer_org_id: customerId
    })
    setVisible(false)
    onDelete?.()
  }

  const renderFields = () => (
    <>
      <p>Do you confirm to quit MSP customer name from {mspName}?</p>
      <p>
        The MSP customer organization will become a direct organization of TiDB
        Cloud after quit.
      </p>
    </>
  )

  return (
    <div>
      <Button type="link" onClick={() => setVisible(true)}>
        Quit
      </Button>
      <ModalForm
        title="Quit MSP"
        visible={visible}
        name="delete-customer-form"
        onSubmit={onSubmit}
        onCancel={() => setVisible(false)}
        destoryOnClose={true}
        getFields={renderFields}
      ></ModalForm>
    </div>
  )
}

const GenerateSignURL: React.FC<React.PropsWithChildren<{ orgId: string }>> = ({
  orgId
}) => {
  const { copied, copy } = useClipboard()
  const { data, isFetching, refetch } = useGetSignupUrl(orgId, {
    query: {
      enabled: false
    }
  })
  const [open, setOpen] = useState(false)

  const showModal = () => {
    setOpen(true)
  }

  const hideModal = () => {
    setOpen(false)
  }

  const onClick = async () => {
    try {
      const data = await refetch()
      window.open(data?.data?.data || '', '_blank')
    } catch (e) {
      notification.error({ message: getErrorMessage(e) })
    }
  }
  return (
    <div>
      <Modal
        title="Sign URL"
        visible={open}
        centered
        onOk={hideModal}
        onCancel={hideModal}
        cancelButtonProps={{ style: { display: 'none' } }}
      >
        <Input.Group compact style={{ display: 'flex' }}>
          <Input disabled defaultValue={data?.data} style={{ flex: 1 }} />
          <Button
            type={copied ? 'default' : 'primary'}
            onClick={() => copy(data?.data)}
          >
            {copied ? 'Copied' : 'Copy'}
          </Button>
        </Input.Group>
      </Modal>
      <Button onClick={onClick} loading={isFetching} type="default">
        Preview Signup URL
      </Button>
    </div>
  )
}

export const MSPDetails: React.FC<React.PropsWithChildren<{}>> = () => {
  const { org_id } = useParams<{ org_id: string }>()
  const { data, refetch: refetchMSP } = useGetMspByOrgId(org_id, {
    query: { refetchOnWindowFocus: false, refetchInterval: false }
  })
  const { data: bindedPlan } = useGetTenantSupportPlan(org_id)
  const [pageConfig, setPageConfig] = useState({
    page: 1,
    pageSize: 10
  })

  const {
    data: customers,
    refetch,
    isLoading
  } = useGetCustomersByPartnerId(
    org_id,
    {
      page: pageConfig.page,
      per_page: pageConfig.pageSize
    },
    {
      query: { refetchOnWindowFocus: false, refetchInterval: false }
    }
  )

  const columns: ColumnsType<FormsPartnerCustomer> = [
    {
      title: 'ID',
      dataIndex: 'customer_org_id',
      render(value) {
        return <Link to={`/orgs/${value}`}>{value}</Link>
      }
    },
    {
      title: 'MSP Customer',
      dataIndex: 'name'
    },
    {
      title: 'Email',
      dataIndex: 'email'
    },
    {
      title: 'Status',
      dataIndex: 'status',
      render(value) {
        return capitalize(value)
      }
    },
    {
      title: 'Effective At',
      dataIndex: 'effected_at',
      render(value) {
        return formatTime(value, undefined, 'YYYY-MM-DD HH:mm:ssZ', 0)
      }
    },
    {
      title: 'Expiration At',
      dataIndex: 'expired_at',
      render(value) {
        if (!value) {
          return '-'
        }
        return formatTime(value, undefined, 'YYYY-MM-DD HH:mm:ssZ', 0)
      }
    }
    // {
    //   title: 'Action',
    //   fixed: 'right',
    //   width: 100,
    //   dataIndex: 'action',
    //   render: (value, record) => {
    //     const effectedAt = dayjs(record.effected_at).unix()
    //     const now = dayjs()
    //     if (
    //       effectedAt > now.unix() &&
    //       effectedAt <= now.add(1, 'hour').unix()
    //     ) {
    //       return ''
    //     }
    //     return (
    //       <MSPQuit
    //         key={record.customer_org_id || ''}
    //         customerId={record.customer_org_id || ''}
    //         mspName={data?.data.name || ''}
    //         onDelete={() => {
    //           setPageConfig({ page: 1, pageSize: 10 })
    //           refetch()
    //         }}
    //       />
    //     )
    //   }
    // }
  ]

  const msp = data?.data || {}

  return (
    <div>
      <Card
        title={<Title level={4}>{msp.name}</Title>}
        bordered={false}
        extra={
          <div style={{ display: 'flex', gap: 8 }}>
            <CreateOrUpdateMSP
              onComplete={() => {
                refetchMSP()
              }}
              actionText="Update MSP"
              title="Update MSP"
              action="update"
              initValues={{
                ...msp,
                support_plan: {
                  ...bindedPlan?.data,
                  support_price_percentage:
                    formatMonthlyUsage(
                      bindedPlan?.data.support_price_percentage || ''
                    ) + ''
                }
              }}
            />
            <GenerateSignURL orgId={org_id} />
          </div>
        }
      >
        <Descriptions>
          <Descriptions.Item label="ID">
            <Link to={`/orgs/${msp.org_id}`}>{msp.org_id}</Link>
          </Descriptions.Item>
          <Descriptions.Item label="Email">{msp.email}</Descriptions.Item>
          <Descriptions.Item label="Support Plan Level">
            {bindedPlan?.data.level}
          </Descriptions.Item>
          <Descriptions.Item label="Created By">
            {msp.created_by}
          </Descriptions.Item>
          <Descriptions.Item label="Website">
            <a href={msp.website} target="_blank" rel="noreferrer">
              {msp.website}
            </a>
          </Descriptions.Item>
          <Descriptions.Item label="Logo">
            <Image
              width={80}
              height={80}
              src={msp.logo_url}
              fallback="data:image/png;base64,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"
            ></Image>
          </Descriptions.Item>
        </Descriptions>
      </Card>
      <Divider></Divider>
      <div>
        <Title level={5}>MSP Customers</Title>
        <ListToolBar
          reload={async () => {
            await refetch()
          }}
          actions={[
            <CreateMSPCustomer
              msp_org_id={org_id}
              onCreate={() => {
                refetch()
              }}
            />
          ]}
        />
      </div>
      <Table
        columns={columns}
        dataSource={customers?.data || []}
        loading={isLoading}
      ></Table>
    </div>
  )
}

export default MSPDetails