import React, { useMemo, useState } from 'react'

import { CloudUploadOutlined } from '@ant-design/icons'
import { Group, TextInput, Title } from '@mantine/core'
import { IconSearch } from '@tabler/icons-react'
import { Button, message, Modal, Pagination, Popover } from 'antd'
import { Link } from 'react-router-dom'
import useSWR from 'swr'

import { listOrgClusters } from '~/api'
import EmptyResult from '~/components/EmptyResult'
import { getComputedCluster, useCurOrg } from '~/hooks/state'
import { useQueryParams } from '~/hooks/use-query-params'
import { orgClustersTelemetry } from '~/telemetry'
import FileUploader from '~/utils/file-uploader'
import { OnPremUIProvider } from '~/utils/tenant-type'

import { ClusterCard } from './cluster'
import UploadTokenSetting from './components/UploadTokenSetting'

const UploadPopoverTitle: React.FC = () => {
  return (
    <div className='flex gap-2 items-center text-base py-2'>
      <span className='font-normal'>Cluster Data Upload</span>
    </div>
  )
}

const UploadPopoverContent: React.FC<{
  onMenuClick?: (menu: string) => void
}> = ({ onMenuClick }) => {
  return (
    <div className='flex flex-col'>
      <span
        className='py-1 cursor-pointer hover:text-[color:var(--cc-primary-color)]'
        onClick={() => onMenuClick?.('upload')}
      >
        Upload Diag Package (.diag)
      </span>
      <span
        className='py-1 cursor-pointer hover:text-[color:var(--cc-primary-color)]'
        onClick={() => onMenuClick?.('gen_token')}
      >
        Get Access Token For Diag Tool
      </span>
    </div>
  )
}

const defParams = {
  query: '',
  limit: 10,
  page: 1
}

function buildFileSelector() {
  const fileSelector = document.createElement('input')
  fileSelector.setAttribute('type', 'file')
  fileSelector.setAttribute('accept', '.diag')
  return fileSelector
}

const Page: React.FC = () => {
  const { curOrg } = useCurOrg()
  const { id: curOrgId, isAdmin, isAnalyst, isOP } = curOrg!

  const { queryParams, setQueryParams } = useQueryParams(defParams)
  const searchPlaceHolderText = useMemo(() => {
    return isOP ? 'Enter a Cluster Name or ID' : 'Enter a Cluster ID'
  }, [isOP])

  const { data: clustersRes, mutate } = useSWR(
    ['/clusters', curOrgId, queryParams],
    () =>
      listOrgClusters(
        curOrgId!,
        queryParams.query,
        queryParams.limit,
        queryParams.page,
        queryParams.projectId,
        queryParams.showDeleted
      )
  )

  const clusters = useMemo(() => {
    return clustersRes?.data.items || []
  }, [clustersRes])

  const [showTokenModal, setShowTokenModal] = useState(false)

  function handleMenuClick(menu: string) {
    orgClustersTelemetry.clickUploadItem(menu)

    if (menu === 'gen_token') {
      setShowTokenModal(true)
    }
    if (menu === 'upload') {
      handleUpload()
    }
  }

  function handleUpload() {
    const fileSelector = buildFileSelector()
    fileSelector.addEventListener('change', function () {
      if (this.files && this.files[0]) {
        const fileUploader = new FileUploader(
          this.files[0],
          `/clinic/api/v1/orgs/${curOrgId!}/diag`
        )
        fileUploader.upload(function (err) {
          if (err) {
            message.error(err.message)
          } else {
            message.success('upload successfully!')
            mutate()
          }
        })
        message.info('start to upload, see task list to get the progress.')
      }
    })
    fileSelector.click()
  }

  function onSearch(str: string) {
    orgClustersTelemetry.searchCluster(str)
    setQueryParams({
      ...defParams,
      query: str
    })
  }

  function handlePaginationChange(page: number, pageSize: number) {
    orgClustersTelemetry.clickPagination({ page, pageSize })
    setQueryParams({
      ...queryParams,
      page,
      limit: pageSize
    })
  }

  return (
    <div className='flex flex-col max-w-5xl mb-4 mx-auto'>
      <section className='flex justify-between pt-4'>
        <Title order={1} weight={300}>
          Clusters
        </Title>
      </section>

      {(queryParams.query || (clustersRes?.data.total ?? -1) > 0) && (
        <section className='flex justify-between items-center pb-4 py-4'>
          {/* <div className='flex-none flex items-center gap-2'> */}
          <Group spacing='xs'>
            <TextInput
              label='Search'
              placeholder={searchPlaceHolderText}
              onKeyPress={(e) => {
                if (e.key === 'Enter') {
                  onSearch(e.currentTarget.value)
                }
              }}
              style={{ width: 300 }}
              rightSection={<IconSearch size={16} stroke={1.5} />}
            />
          </Group>
          {/* </div> */}
        </section>
      )}

      <section className='grid grid-cols-1 md:grid-cols-2 gap-4 pb-4'>
        {clusters.map((cluster, idx) => (
          <Link
            to={`/orgs/${curOrgId}/clusters/${cluster.id}`}
            key={idx}
            onClick={() =>
              orgClustersTelemetry.clickClusterItem({
                name: cluster.name!,
                id: cluster.id!
              })
            }
          >
            <ClusterCard cluster={getComputedCluster(cluster)} />
          </Link>
        ))}
      </section>

      {(clustersRes?.data.total ?? 0) > 0 && (
        <section className='flex justify-end'>
          <Pagination
            total={clustersRes?.data.total}
            current={queryParams.page}
            pageSize={queryParams.limit}
            onChange={handlePaginationChange}
          />
        </section>
      )}

      {clustersRes?.data.total === 0 && !queryParams.query && (
        <EmptyResult
          title='No cluster data'
          subTitle='Try uploading'
          className='mt-24'
        />
      )}
      {clustersRes?.data.total === 0 && queryParams.query && (
        <EmptyResult className='mt-24' />
      )}

      <OnPremUIProvider>
        {(isAdmin || isAnalyst) && (
          <div className='absolute right-6 bottom-6'>
            <Popover
              placement='topRight'
              title={<UploadPopoverTitle />}
              content={<UploadPopoverContent onMenuClick={handleMenuClick} />}
              trigger='click'
            >
              <Button
                type='primary'
                shape='circle'
                icon={<CloudUploadOutlined />}
                size='large'
                onClick={() => orgClustersTelemetry.clickUpload()}
              />
            </Popover>
          </div>
        )}
      </OnPremUIProvider>

      <Modal
        width={640}
        visible={showTokenModal}
        onCancel={() => setShowTokenModal(false)}
        title='Get Access Token For Diag Tool'
        footer={null}
        destroyOnClose={true}
      >
        <UploadTokenSetting />
      </Modal>
    </div>
  )
}

export default Page