import { Card, Center, Group, Loader, ScrollArea, Stack, Typography } from '@tidbcloud/uikit'

import { RESTORE_MODE_OPTIONS } from 'dbaas/features/BackupRestore'
import { RestoreStatus } from 'dbaas/features/BackupRestore/RestoreStatus'
import { useListRestoresV2 } from 'dbaas/services/dataflow'
import { DataflowRestoreStatus } from 'dbaas/services/dataflow/interface'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import useStores from 'dbaas/stores/useStores'
import { formatTime } from 'dbaas/utils/format'

export const RestoreHistoryForDedicated = () => {
  const {
    store: { tenantData, activeProjectId, currentCluster, clustersById }
  } = useStores()
  const { data, isLoading, isError, error } = useListRestoresV2(
    tenantData.id,
    activeProjectId,
    currentCluster?.id!,
    undefined,
    {
      query: {
        refetchOnWindowFocus: false
      }
    }
  )

  if (isLoading) {
    return (
      <Center>
        <Loader size="xs" />
      </Center>
    )
  }

  if (isError) {
    return (
      <Typography>
        <span dangerouslySetInnerHTML={{ __html: getErrorMessage(error) }}></span>
      </Typography>
    )
  }

  if (data?.total === 0) {
    return (
      <Center mih="calc(100vh - 100px)">
        <Stack align="center" gap={8}>
          <Typography fw={700} ta="center" fz={18} c="carbon.7">
            No Restore Task Found
          </Typography>
          <Typography variant="body-lg" ta="center" sx={{ textWrap: 'balance' }}>
            All restore task will be automatically logged here
          </Typography>
        </Stack>
      </Center>
    )
  }

  return (
    <ScrollArea style={{ height: 'calc(100vh - 100px)' }}>
      <Stack>
        {data?.items.map((item) => (
          <Card withBorder shadow="none">
            <Stack>
              <Stack gap={0}>
                <Typography variant="title-lg">ID: {item?.id}</Typography>
                <Typography variant="body-md">
                  Restore Time:{' '}
                  {`${formatTime(item?.created_at!, {
                    offset: tenantData.timezone,
                    showTimezone: true,
                    showSeconds: true
                  })} - ${formatTime(item?.finished_at!, {
                    offset: tenantData.timezone,
                    showTimezone: true,
                    showSeconds: true
                  })}`}
                </Typography>
              </Stack>

              <Stack gap={4}>
                <Group>
                  <Typography variant="label-lg" miw={110}>
                    Status
                  </Typography>
                  <Group gap={0}>
                    <RestoreStatus
                      status={item?.status!}
                      progress={item?.progress}
                      name={
                        item?.status === DataflowRestoreStatus.RESTORE_STATUS_RUNNING
                          ? `Restoring (${item.progress}%)`
                          : undefined
                      }
                    />
                    <Typography variant="body-md"></Typography>
                  </Group>
                </Group>
                <Group>
                  <Typography variant="label-lg" miw={120}>
                    Restore Mode
                  </Typography>
                  <Typography variant="body-lg">
                    {RESTORE_MODE_OPTIONS.find((i) => i.value === item?.restore_mode)?.label ?? '-'}
                  </Typography>
                </Group>
                <Group>
                  <Typography variant="label-lg" miw={120}>
                    Restore Region
                  </Typography>
                  <Typography variant="body-lg">{item.restore_region ?? '-'}</Typography>
                </Group>
                <Group>
                  <Typography variant="label-lg" miw={120}>
                    Cluster Name
                  </Typography>
                  <Typography variant="body-lg">
                    {item.name ?? clustersById[item.cluster_id!]?.[0]?.displayName ?? '-'}
                  </Typography>
                </Group>

                <Group>
                  <Typography variant="label-lg" miw={120}>
                    Restore to
                  </Typography>
                  <Typography variant="body-lg">
                    {item.restored_ts
                      ? formatTime(new Date(item?.restored_ts!), {
                          showTimezone: true,
                          showSeconds: true,
                          offset: tenantData.timezone
                        })
                      : item.restored_tso}
                  </Typography>
                </Group>
              </Stack>
            </Stack>
          </Card>
        ))}
      </Stack>
    </ScrollArea>
  )
}