import { Box, Group, HoverCard, Radio, Stack, Typography } from '@tidbcloud/uikit'
import { DateTimePicker, DEFAULT_TIME_FORMAT_WITH_TIMEZONE, FormTextInput } from '@tidbcloud/uikit/biz'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import dayjs from 'dayjs'
import { useMemo } from 'react'
import { Controller, useFormContext } from 'react-hook-form'

import { useIsEditingChangefeed } from 'dbaas/features/Changefeed'
import { tso2date } from 'dbaas/features/Changefeed/tso'
import {
  DataflowDescribeSchemaTableResp,
  DataflowStartMode,
  DataflowStartPosition
} from 'dbaas/services/dataflow/interface'

const StartPositionOptions = [
  {
    text: `From now on`,
    value: DataflowStartMode.FROM_NOW
  },
  {
    text: `From a specific TSO`,
    value: DataflowStartMode.FROM_TSO
  },
  {
    text: `From a specific time`,
    value: DataflowStartMode.FROM_UTC
  }
]

export function getStartPosition(data?: DataflowStartPosition) {
  const startPosition: DataflowStartPosition = {
    mode: data?.mode
  }
  if (data?.mode === DataflowStartMode.FROM_TSO) {
    startPosition.tso = data.tso
  }
  if (data?.mode === DataflowStartMode.FROM_UTC) {
    startPosition.utc = data.utc
  }

  return startPosition
}

export function useTsoDescription(tso: string) {
  return useMemo(() => {
    const tsoDate = tso ? tso2date(tso) : undefined
    if (!tsoDate) return undefined

    // is future time
    if (dayjs(tsoDate).isAfter(new Date())) {
      return `This corresponds to a future time: ${dayjs(tsoDate).format(DEFAULT_TIME_FORMAT_WITH_TIMEZONE)}`
    }

    return `This corresponds to time: ${dayjs(tsoDate).format(DEFAULT_TIME_FORMAT_WITH_TIMEZONE)}`
  }, [tso])
}

function TSOTip() {
  return (
    <HoverCard shadow="md" withArrow>
      <HoverCard.Target>
        <IconInfoCircle size={14} />
      </HoverCard.Target>
      <HoverCard.Dropdown>
        <Typography variant="body-md">
          Set the starting position for your sink.{' '}
          <a
            href="https://docs.pingcap.com/tidb/stable/sql-statement-show-master-status/"
            target="_blank"
            rel="noreferrer"
          >
            See doc for instructions.
          </a>
        </Typography>
      </HoverCard.Dropdown>
    </HoverCard>
  )
}

export function FormStartPosition({
  name,
  schemaTableData
}: {
  name: string
  schemaTableData?: DataflowDescribeSchemaTableResp
}) {
  const { setValue, watch, control } = useFormContext()
  const startPositionMode = watch(`${name}.mode`) as DataflowStartMode
  const isEditing = useIsEditingChangefeed()
  const tso = watch(`${name}.tso`)
  const tsoDesciption = useTsoDescription(tso)

  const tsoValidationRules = {
    required: {
      value: startPositionMode === DataflowStartMode.FROM_TSO,
      message: 'TSO is required'
    },
    pattern: {
      value: /^\d{18}$/,
      message: 'TSO must be an 18-digit number'
    }
    // validate: {
    //   validTimestamp: (value: string) => {
    //     if (!value) return true
    //     // Validate physical part (first 13 digits) represents a valid timestamp
    //     const physicalPart = value.substring(0, 13)
    //     const timestamp = Number(physicalPart)
    //     // Check if timestamp is within reasonable range (after 2000 and before 2100)
    //     const minTimestamp = 978307200000 // 2001-01-01
    //     const maxTimestamp = 4102444800000 // 2099-12-31
    //     return (timestamp >= minTimestamp && timestamp <= maxTimestamp) || 'TSO contains invalid timestamp'
    //   }
    // }
  }

  return (
    <Stack>
      <Controller
        name={`${name}.mode`}
        control={control}
        render={({ field }) => (
          <Stack>
            <Radio.Group {...field} sx={{ 'div[role="radiogroup"]': { paddingTop: 0 } }}>
              <Group align="flex-start" gap={48}>
                {StartPositionOptions.map((i) => (
                  <Box key={i.value}>
                    {i.value === DataflowStartMode.FROM_TSO ? (
                      <Group gap={8}>
                        <Radio disabled={isEditing} label={i.text} value={i.value} />
                        <TSOTip />
                      </Group>
                    ) : (
                      <Radio disabled={isEditing} label={i.text} value={i.value} />
                    )}
                  </Box>
                ))}
              </Group>
            </Radio.Group>
          </Stack>
        )}
      />

      {startPositionMode === DataflowStartMode.FROM_TSO && (
        <FormTextInput
          name={`${name}.tso`}
          inputWrapperOrder={['input', 'error', 'description']}
          description={tsoDesciption}
          descriptionProps={{ sx: { position: 'absolute' } }}
          disabled={isEditing}
          placeholder="Enter TSO"
          rules={tsoValidationRules}
          sx={{ width: '100%' }}
        />
      )}
      {startPositionMode === DataflowStartMode.FROM_UTC && (
        <Controller
          control={control}
          name={`${name}.utc`}
          render={({ field }) => (
            <Group>
              <input {...field} hidden />
              <DateTimePicker
                startDate={schemaTableData?.gc_safe_point ? new Date(schemaTableData?.gc_safe_point) : undefined}
                endDate={new Date()}
                value={new Date(field.value)}
                disabled={isEditing}
                onChange={(val) => {
                  setValue(`${name}.utc`, val.toISOString())
                }}
                sx={{ width: '100%' }}
              />
            </Group>
          )}
        />
      )}
    </Stack>
  )
}