import React, { useMemo } from 'react'

import {
  ActionIcon,
  Anchor,
  Badge,
  Menu,
  Text,
  openConfirmModal
} from '@tidbcloud/uikit'
import { MRT_ColumnDef, ProTable } from '@tidbcloud/uikit/biz'
import { IconDotsHorizontal } from '@tidbcloud/uikit/icons'
import { useNavigate, useParams } from 'react-router-dom'

import { formatDateTime } from '~/utils/date-time'

import type {
  HealthcheckHealthCheckResultResp,
  HealthcheckHealthCheckStrategyResp
} from '../types'

const statusColorMap: Record<string, string> = {
  pending: 'gray',
  running: 'blue',
  success: 'green',
  partial: 'yellow',
  partial_failed: 'orange',
  failed: 'red'
}

const viewableReportStatuses = new Set([
  'running',
  'success',
  'partial',
  'partial_failed',
  'failed'
])

function canViewReport(status?: string): boolean {
  return Boolean(status && viewableReportStatuses.has(status))
}

interface TaskTableProps {
  results: HealthcheckHealthCheckResultResp[]
  total: number
  loading: boolean
  page: number
  pageSize: number
  onPageChange: (page: number) => void
  strategies: HealthcheckHealthCheckStrategyResp[]
  onDelete: (uuid: string) => void
}

export const TaskTable: React.FC<TaskTableProps> = ({
  results,
  total,
  loading,
  page,
  pageSize,
  onPageChange,
  strategies,
  onDelete
}) => {
  const navigate = useNavigate()
  const { orgId, cid } = useParams<'orgId' | 'cid'>()

  const buildReportPath = (row: HealthcheckHealthCheckResultResp) => {
    const params = new URLSearchParams()
    if (row.timeRangeAStart) params.set('from', row.timeRangeAStart)
    if (row.timeRangeAEnd) params.set('to', row.timeRangeAEnd)
    const qs = params.toString()
    return `/orgs/${orgId}/clusters/${cid}/health-check/${row.uuid}${
      qs ? `?${qs}` : ''
    }`
  }

  const handleView = (row: HealthcheckHealthCheckResultResp) => {
    navigate(buildReportPath(row))
  }

  const handleDelete = (uuid: string, name: string) => {
    openConfirmModal({
      title: 'Delete Report',
      centered: true,
      labels: { confirm: 'Delete', cancel: 'Cancel' },
      confirmProps: { color: 'red' },
      children: (
        <Text size='sm'>
          Are you sure you want to delete report{' '}
          <Text span fw={600}>
            {name}
          </Text>
          ? This action cannot be undone.
        </Text>
      ),
      onConfirm: () => onDelete(uuid)
    })
  }

  const strategyMap = useMemo(() => {
    const map = new Map<string, string>()
    strategies.forEach((s) => {
      if (s.uuid) map.set(s.uuid, s.name ?? s.uuid)
    })
    return map
  }, [strategies])

  const totalPages = Math.ceil(total / pageSize) || 0

  const columns: MRT_ColumnDef<HealthcheckHealthCheckResultResp>[] = [
    {
      id: 'name',
      header: 'Name',
      accessorFn: (row) => {
        const name = `Report_${row.uuid?.slice(0, 8) ?? ''}`
        const canView = canViewReport(row.status)
        return canView && row.uuid ? (
          <Anchor
            href={`#${buildReportPath(row)}`}
            target='_blank'
            size='sm'
            style={{ color: 'var(--mantine-color-blue-6)' }}
          >
            {name}
          </Anchor>
        ) : (
          <Text size='sm'>{name}</Text>
        )
      }
    },
    {
      id: 'strategy',
      header: 'Strategy',
      accessorFn: (row) => {
        const uuid = row.strategyUuid ?? (row as any).strategy_uuid
        return uuid ? strategyMap.get(uuid) ?? '-' : '-'
      }
    },
    {
      id: 'timeRange',
      header: `Time Range (GMT${
        new Date().getTimezoneOffset() <= 0 ? '+' : '-'
      }${Math.abs(new Date().getTimezoneOffset() / 60)})`,
      accessorFn: (row) => {
        const start = row.timeRangeAStart
        const end = row.timeRangeAEnd
        if (!start || !end) return '-'
        return `${formatDateTime(
          new Date(start).getTime() / 1000
        )} ~ ${formatDateTime(new Date(end).getTime() / 1000)}`
      }
    },
    {
      id: 'status',
      header: 'Status',
      accessorFn: (row) => (
        <Badge color={statusColorMap[row.status ?? ''] ?? 'gray'} variant='dot'>
          {row.status}
        </Badge>
      )
    },
    {
      id: 'actions',
      header: 'Actions',
      size: 50,
      accessorFn: (row) => {
        const name = `Report_${row.uuid?.slice(0, 8) ?? ''}`
        const canView = canViewReport(row.status)
        return (
          <Menu position='bottom'>
            <Menu.Target>
              <ActionIcon size={32}>
                <IconDotsHorizontal size={16} />
              </ActionIcon>
            </Menu.Target>
            <Menu.Dropdown>
              <Menu.Item
                disabled={!canView}
                onClick={() => row.uuid && handleView(row)}
              >
                View Report
              </Menu.Item>
              <Menu.Item
                color='red'
                onClick={() => row.uuid && handleDelete(row.uuid, name)}
              >
                Delete
              </Menu.Item>
            </Menu.Dropdown>
          </Menu>
        )
      }
    }
  ]

  return (
    <ProTable<HealthcheckHealthCheckResultResp>
      columns={columns}
      data={results}
      state={{ isLoading: loading }}
      enableColumnPinning
      initialState={{ columnPinning: { right: ['actions'] } }}
      manualPagination
      pagination={{
        total: totalPages,
        value: page,
        onChange: onPageChange,
        wrapperProps: { justify: 'flex-end' }
      }}
    />
  )
}