import React, { useState } from 'react'

import { Button, Card, Group, Select, Stack, Text } from '@tidbcloud/uikit'
import {
  TimeRange,
  TimeRangePicker,
  toTimeRangeValue
} from '@tidbcloud/uikit/biz'
import dayjs from 'dayjs'
import { useSearchParams } from 'react-router-dom'

import { useMutation } from '~/hooks/use-mutation'

import { triggerHealthCheck } from '../api'
import { formatWindowSuffix } from '../scheduleDisplay'
import type {
  HealthcheckCheckItem,
  HealthcheckHealthCheckStrategyResp
} from '../types'
import { CheckItemBadge } from './CheckItemBadge'

// Default: last 6 hours
const DEFAULT_TIME_RANGE: TimeRange = { type: 'relative', value: 6 * 3600 }
const MAX_TIME_RANGE_SECONDS = 24 * 3600

const QUICK_RANGES: (number | { value: number; label: string })[] = [
  { value: 3 * 3600, label: 'Last 3 hours' },
  { value: 6 * 3600, label: 'Last 6 hours' },
  { value: 12 * 3600, label: 'Last 12 hours' },
  { value: MAX_TIME_RANGE_SECONDS, label: 'Last 24 hours' }
]

function getEnabledItemsForProvider(
  strategy: HealthcheckHealthCheckStrategyResp | undefined,
  provider?: string
) {
  const shouldHideDiskCheck = provider != null && provider !== 'aws'
  return (
    strategy?.items?.filter(
      (item) =>
        item.enabled !== false &&
        (!shouldHideDiskCheck || item.name !== 'disk_check')
    ) ?? []
  )
}

interface StrategySectionProps {
  oid: string
  clusterId: string
  provider?: string
  strategies: HealthcheckHealthCheckStrategyResp[]
  strategiesLoading: boolean
  onTaskCreated: () => void
  onStrategySelected?: (uuid: string | null) => void
}

export const StrategySection: React.FC<StrategySectionProps> = ({
  oid,
  clusterId,
  provider,
  strategies,
  strategiesLoading,
  onTaskCreated,
  onStrategySelected
}) => {
  const [searchParams, setSearchParams] = useSearchParams()
  const urlStrategyUuid = searchParams.get('strategyUuid')

  const [selectedUuid, setSelectedUuid] = useState<string | null>(
    urlStrategyUuid
  )
  const [timeRange, setTimeRange] = useState<TimeRange>(DEFAULT_TIME_RANGE)

  // Clear URL param once consumed
  React.useEffect(() => {
    if (urlStrategyUuid) {
      setSelectedUuid(urlStrategyUuid)
      searchParams.delete('strategyUuid')
      setSearchParams(searchParams, { replace: true })
    }
  }, [urlStrategyUuid, searchParams, setSearchParams])

  // Auto-select the first strategy
  const effectiveUuid =
    selectedUuid ?? (strategies.length > 0 ? strategies[0].uuid ?? null : null)

  // Notify parent when effective strategy changes
  React.useEffect(() => {
    onStrategySelected?.(effectiveUuid)
  }, [effectiveUuid, onStrategySelected])

  const selectedStrategy = strategies.find((s) => s.uuid === effectiveUuid)
  const selectedEnabledItems = getEnabledItemsForProvider(
    selectedStrategy,
    provider
  )
  const canTrigger = !!effectiveUuid && selectedEnabledItems.length > 0

  const selectData = strategies.map((s) => ({
    value: s.uuid ?? '',
    label: s.name ?? s.uuid ?? ''
  }))

  const { loading: triggering, run: runTrigger } = useMutation(
    ({ startTime, endTime }: { startTime: string; endTime: string }) =>
      triggerHealthCheck(oid, clusterId, effectiveUuid!, {
        timeRangeAStart: startTime,
        timeRangeAEnd: endTime
      })
  )

  const handleTrigger = () => {
    const [start, end] = toTimeRangeValue(timeRange)
    if (!start || !end || !canTrigger) return
    runTrigger(
      {
        startTime: dayjs.unix(start).toISOString(),
        endTime: dayjs.unix(end).toISOString()
      },
      () => onTaskCreated()
    )
  }

  return (
    <Card withBorder mb='lg' p='lg'>
      <Text size='sm' c='carbon.9' mb='md'>
        Select a strategy and time range to run a health check immediately:
      </Text>

      {/* Main row */}
      <Group align='flex-end' gap='md'>
        <Stack gap='xs'>
          <Text size='xs' c='carbon.7'>
            Select Strategy:
          </Text>
          <Select
            placeholder={strategiesLoading ? 'Loading...' : 'Select a strategy'}
            data={selectData}
            value={effectiveUuid}
            onChange={(v) => setSelectedUuid(v)}
            disabled={strategiesLoading || strategies.length === 0}
            style={{ minWidth: 280 }}
          />
        </Stack>
        <Stack gap='xs'>
          <Text size='xs' c='carbon.7'>
            Time Range:
          </Text>
          <TimeRangePicker
            value={timeRange}
            onChange={setTimeRange}
            quickRanges={QUICK_RANGES}
            minDateTime={() => dayjs().subtract(1, 'month').toDate()}
            maxDateTime={() => dayjs().toDate()}
            maxDuration={MAX_TIME_RANGE_SECONDS}
          />
        </Stack>
        <Button
          loading={triggering}
          disabled={!canTrigger}
          onClick={handleTrigger}
        >
          Run Immediately
        </Button>
      </Group>

      {/* Selected strategy info */}
      {selectedStrategy && (
        <StrategyInfo
          enabledItems={selectedEnabledItems}
          strategy={selectedStrategy}
        />
      )}
    </Card>
  )
}

const StrategyInfo: React.FC<{
  enabledItems: HealthcheckCheckItem[]
  strategy: HealthcheckHealthCheckStrategyResp
}> = ({ enabledItems, strategy }) => {
  return (
    <Stack
      gap='xs'
      mt='md'
      p='sm'
      style={{ background: '#f8f9fa', borderRadius: 4 }}
    >
      <Group gap='xl'>
        <div>
          <Text size='xs' c='dimmed'>
            Name
          </Text>
          <Text size='sm'>{strategy.name ?? '-'}</Text>
        </div>
        <div>
          <Text size='xs' c='dimmed'>
            Description
          </Text>
          <Text size='sm'>{strategy.description || '-'}</Text>
        </div>
        <div>
          <Text size='xs' c='dimmed'>
            Schedule
          </Text>
          <Text size='sm'>
            {(() => {
              const st = strategy.scheduleType || 'manual'
              if (st === 'manual') return 'Manual Only'
              if (st === 'cron') {
                const cronMatch = strategy.scheduleExpr?.match(
                  /^(?:CRON_TZ=(\S+)\s+)?(\d+)\s+(\d+)\s+\*\s+\*\s+\*$/
                )
                if (cronMatch) {
                  const tz = cronMatch[1] || 'UTC'
                  const minute = cronMatch[2].padStart(2, '0')
                  const hour = cronMatch[3].padStart(2, '0')
                  return `Daily at ${hour}:${minute} (${tz})${formatWindowSuffix(
                    strategy.timeRangeAStart,
                    strategy.timeRangeAEnd
                  )}`
                }
                return `Cron (${strategy.scheduleExpr})`
              }
              return st
            })()}
          </Text>
        </div>
        <div>
          <Text size='xs' c='dimmed'>
            Enabled Items
          </Text>
          <Group gap={4}>
            {enabledItems.length > 0 ? (
              enabledItems.map((item) => (
                <CheckItemBadge key={item.name} item={item} />
              ))
            ) : (
              <Text size='sm'>-</Text>
            )}
          </Group>
        </div>
      </Group>
    </Stack>
  )
}