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

import { showNotification } from '@mantine/notifications'
import {
  ActionIcon,
  Button,
  Card,
  Center,
  Checkbox,
  Group,
  Stack,
  Text,
  Title
} from '@tidbcloud/uikit'
import { IconArrowCircleLeft } from '@tidbcloud/uikit/icons'
import { useNavigate, useParams } from 'react-router-dom'
import useSWR from 'swr'

import { useCurCluster, useCurOrg } from '~/hooks/state'

import { listStrategies, listResults, deleteResult } from './api'
import { StrategySection } from './components/StrategySection'
import { TaskTable } from './components/TaskTable'

const HealthCheckPage: React.FC = () => {
  const navigate = useNavigate()
  const { orgId, cid } = useParams<'orgId' | 'cid'>()
  const { curOrg } = useCurOrg()
  const { curCluster } = useCurCluster()

  const oid = curOrg!.id!
  const clusterId = curCluster!.id!

  // Load strategies
  const { data: strategiesRes, error: strategiesError } = useSWR(
    `/healthcheck/strategies/${oid}/${clusterId}`,
    () => listStrategies(oid, clusterId)
  )
  const strategies = strategiesRes?.data?.strategies ?? []
  const strategiesLoading = !strategiesRes && !strategiesError

  // Result list
  const [page, setPage] = useState(1)
  const pageSize = 10
  const {
    data: resultListRes,
    error,
    mutate: reloadResults
  } = useSWR(`/healthcheck/results/${oid}/${clusterId}?page=${page}`, () =>
    listResults(oid, clusterId, page, pageSize)
  )

  const results = resultListRes?.data?.results ?? []
  const total = resultListRes?.data?.total ?? 0
  const loading = !resultListRes && !error

  // Poll for running tasks
  const hasRunning = results.some(
    (r) =>
      r.status === 'pending' || r.status === 'running' || r.status === 'partial'
  )
  useEffect(() => {
    if (!hasRunning) return
    const timer = setInterval(() => reloadResults(), 5000)
    return () => clearInterval(timer)
  }, [hasRunning, reloadResults])

  // Track selected strategy from StrategySection
  const [selectedStrategyUuid, setSelectedStrategyUuid] = useState<
    string | null
  >(null)
  const [filterByStrategy, setFilterByStrategy] = useState(false)

  const handleTaskCreated = useCallback(() => {
    reloadResults()
  }, [reloadResults])

  const handleStrategySelected = useCallback((uuid: string | null) => {
    setSelectedStrategyUuid(uuid)
  }, [])

  const handleDeleteResult = useCallback(
    (uuid: string) => {
      deleteResult(oid, clusterId, uuid).then(() => {
        showNotification({ color: 'green', message: 'Report deleted.' })
        reloadResults()
      })
    },
    [oid, clusterId, reloadResults]
  )

  const filteredResults = useMemo(() => {
    if (!filterByStrategy || !selectedStrategyUuid) return results
    return results.filter(
      (r) =>
        (r.strategyUuid ?? (r as any).strategy_uuid) === selectedStrategyUuid
    )
  }, [results, filterByStrategy, selectedStrategyUuid])

  const hasStrategies = strategies.length > 0
  const hasResults = results.length > 0
  const showEmpty =
    !strategiesLoading && !loading && !hasStrategies && !hasResults

  return (
    <div>
      <Group justify='space-between' mb='lg' align='center'>
        <Group gap='xs' align='center'>
          <ActionIcon
            variant='subtle'
            aria-label='back'
            onClick={() => navigate(`/orgs/${orgId}/clusters/${cid}`)}
            title='Back to Cluster'
          >
            <IconArrowCircleLeft size={20} />
          </ActionIcon>
          <Title order={3}>Health Check</Title>
        </Group>
        {hasStrategies && (
          <Button
            variant='filled'
            onClick={() =>
              navigate(`/orgs/${orgId}/clusters/${cid}/health-check/strategies`)
            }
          >
            Strategy Management
          </Button>
        )}
      </Group>

      {showEmpty ? (
        <Card withBorder p='xl'>
          <Center style={{ minHeight: 240 }}>
            <Stack align='center' gap='md'>
              <Text size='lg' c='dimmed'>
                No health check strategy found.
              </Text>
              <Text size='sm' c='carbon.9'>
                Health Check is strategy-based. Create a strategy first to start
                running health checks.
              </Text>
              <Button
                onClick={() =>
                  navigate(
                    `/orgs/${orgId}/clusters/${cid}/health-check/strategies/create`
                  )
                }
              >
                Create Strategy
              </Button>
            </Stack>
          </Center>
        </Card>
      ) : (
        <>
          <StrategySection
            oid={oid}
            clusterId={clusterId}
            provider={curCluster?.provider}
            strategies={strategies}
            strategiesLoading={strategiesLoading}
            onTaskCreated={handleTaskCreated}
            onStrategySelected={handleStrategySelected}
          />

          <Card withBorder p='lg'>
            <Group justify='space-between' mb='md'>
              <Group gap='lg'>
                <Text fw={500}>Health Check Reports</Text>
                <Checkbox
                  label='Selected strategy only'
                  size='xs'
                  checked={filterByStrategy}
                  onChange={(e) => setFilterByStrategy(e.currentTarget.checked)}
                  disabled={!selectedStrategyUuid}
                />
              </Group>
              <Button
                variant='subtle'
                size='compact-sm'
                onClick={() => reloadResults()}
              >
                Refresh
              </Button>
            </Group>
            <TaskTable
              results={filteredResults}
              total={filterByStrategy ? filteredResults.length : total}
              loading={loading || strategiesLoading}
              page={filterByStrategy ? 1 : page}
              pageSize={pageSize}
              onPageChange={setPage}
              strategies={strategies}
              onDelete={handleDeleteResult}
            />
          </Card>
        </>
      )}
    </div>
  )
}

export default HealthCheckPage