import { ActionIcon, Badge, Box, Menu, Typography } from '@tidbcloud/uikit'
import { MRT_ColumnDef, ProTable } from '@tidbcloud/uikit/biz'
import { IconDotsHorizontal } from '@tidbcloud/uikit/icons'
import { capitalize } from 'lodash-es'
import { observer } from 'mobx-react'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'

import { HeroComponent } from 'dbaas/components/Measurement'
import TimeComponent from 'dbaas/components/TimeComponent'
import { useAccessCheck } from 'dbaas/contexts/access-control'
import { useOrgProjectClusterIds } from 'dbaas/features/Common'
import { useNextGenMode } from 'dbaas/features/Organization/mode'
import { TableFallback } from 'dbaas/screens/ClusterV2/components/PausedStatus'
import { useBackupRestoreServiceListBackups } from 'dbaas/services/api-clients/legacy/serverless'
import { Backup as ServerlessBackup } from 'dbaas/services/api-clients/legacy/serverless/interface'
import useStores from 'dbaas/stores/useStores'
import { DEFAULT_TIME_FORMAT_WITH_TIMEZONE } from 'dbaas/utils/format'

export const BackupListServerless = observer(() => {
  const {
    store: { tenantData }
  } = useStores()
  const history = useHistory()
  const { isNextGen } = useNextGenMode()
  const basePath = isNextGen ? '/tidbs' : '/clusters'
  const { orgId, projectId, clusterId } = useOrgProjectClusterIds()
  const restoreAccessible = useAccessCheck('TidbxRestoreCreate', { tidbId: clusterId ?? undefined })
  const [params, setParams] = useState({ page: 1, totalPage: 0 })
  const { data, isFetched, isLoading } = useBackupRestoreServiceListBackups(
    orgId,
    projectId,
    clusterId!,
    { page_size: 10, page_token: params.page === 1 ? '' : params.page + '', order_by: 'backup_time desc' },
    {
      query: {
        refetchOnWindowFocus: false,
        onSuccess(data) {
          setParams((prev) => ({ ...prev, totalPage: Math.ceil((data?.total_size ?? 0) / 10) }))
        }
      }
    }
  )

  const columns: MRT_ColumnDef<ServerlessBackup>[] = [
    {
      header: 'Backup Time',
      Header: () => <Typography pl={16}>Backup Time</Typography>,
      accessorFn: (row: ServerlessBackup) => {
        return (
          <Box pl={16}>
            <TimeComponent
              time={row.backup_time!}
              format={DEFAULT_TIME_FORMAT_WITH_TIMEZONE}
              utcOffset={tenantData.timezone}
            />
          </Box>
        )
      },
      minSize: 210
    },
    {
      header: 'Status',
      accessorFn: (row: ServerlessBackup) => {
        return (
          <Badge variant="dot" color={row.state === 'SUCCEEDED' ? 'green' : 'red'}>
            {capitalize(row.state)}
          </Badge>
        )
      },
      size: 100
    },
    {
      header: 'Expires Time',
      accessorFn: (row: ServerlessBackup) => {
        return (
          <TimeComponent
            time={row.expire_time!}
            format={DEFAULT_TIME_FORMAT_WITH_TIMEZONE}
            utcOffset={tenantData.timezone}
          />
        )
      }
    },

    {
      header: 'Action',
      size: 60,
      accessorFn: (rowData: ServerlessBackup) => {
        return (
          <Menu shadow="md" width={200} withinPortal>
            <Menu.Target>
              <ActionIcon variant="subtle" size={32} data-testid="backup-row-actions">
                <IconDotsHorizontal size={16} />
              </ActionIcon>
            </Menu.Target>
            <Menu.Dropdown>
              <Menu.Item
                onClick={() => {
                  history.push(`${basePath}/${clusterId}/backup/restore?backup_id=${rowData.backup_id}`)
                }}
                disabled={!restoreAccessible}
                data-mp-event="Backup Restore Action Button Clicked"
                data-testid="backup-row-restore"
              >
                Restore
              </Menu.Item>
            </Menu.Dropdown>
          </Menu>
        )
      }
    }
  ]

  return (
    <div className="backup-panel">
      {isFetched && <HeroComponent />}

      <ProTable
        data-testid="backup-list-table"
        loading={isLoading}
        columns={columns}
        emptyMessage="No Backup"
        data={data?.backups ?? []}
        manualPagination={true}
        pagination={
          data?.backups?.length
            ? {
                value: params.page,
                total: params.totalPage,
                onChange: (p) => setParams((prev) => ({ ...prev, page: p })),
                position: 'center'
              }
            : undefined
        }
        mantinePaperProps={{ mx: 24 }}
        renderEmptyRowsFallback={() => {
          return (
            <TableFallback>
              <TableFallback.Empty
                title="Get started by setting your backup"
                desc="Configure a backup schedule for your cluster to periodically back up your data."
              />
            </TableFallback>
          )
        }}
      />
    </div>
  )
})