import TimeRangePicker from '@tidb-cloud-uikit/components/TimeRangePicker'
import { ActionIcon, Box, Flex, Loader, Typography } from '@tidbcloud/uikit'
import { TimeRange, toTimeRangeValue, TimeRangeValue } from '@tidbcloud/uikit/biz'
import { Form, FormTextInput, FormSelect } from '@tidbcloud/uikit/biz'
import { IconChevronLeft, IconChevronRight, IconRefreshCw02, IconXClose } from '@tidbcloud/uikit/icons'
import dayjs from 'dayjs'
import { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'

import { useGetChat2Querylogs } from 'dbaas/services/dataservice'
import { DtoDataAppLogEntry } from 'dbaas/services/dataservice/interface'

import { useDataApiContext } from '../../context'
import { OVERVIEW_QUICK_RANGES } from '../../utils'
import { DEFAULT_TIME_RANGE } from '../AppLogs'

import LogActions from './DownloadLogs'
import LogListTable from './ListTable'

interface AppLogFilterProps {
  status: string
  type: string
  question?: string
}

const AppLogs = () => {
  const [timeRange, setTimeRange] = useState<TimeRange>(DEFAULT_TIME_RANGE)
  const [timeRangeValue, setTimeRangeValue] = useState<TimeRangeValue>(toTimeRangeValue(DEFAULT_TIME_RANGE))

  const { orgId, projectId, editApp, dataappOpenedTab, logsDefaultValue, setLogsDefaultValue } = useDataApiContext()
  const formProps = useForm<AppLogFilterProps>({
    defaultValues: {
      status: '',
      type: '',
      question: ''
    }
  })
  const { watch, setValue } = formProps
  const status = watch('status')
  const type = watch('type')
  const question = watch('question')
  const [requestLogs, setRequestLogs] = useState<{
    logs: DtoDataAppLogEntry[]
    has_more: boolean
  } | null>(null)
  const [curPageNo, setCurPageNo] = useState(1)

  const resetRequest = () => {
    formProps.setValue('status', '')
    formProps.setValue('type', '')
    setTimeRange(DEFAULT_TIME_RANGE)
    setTimeRangeValue(toTimeRangeValue(DEFAULT_TIME_RANGE))
    setValue('question', '')
  }

  useEffect(() => {
    if (dataappOpenedTab === 'Logs' && logsDefaultValue?.endpointId) {
      if (logsDefaultValue?.timeRange) {
        const val = {
          type: 'absolute',
          value: [logsDefaultValue.timeRange?.from, logsDefaultValue?.timeRange?.to]
        } as TimeRange
        setTimeRange(val)
        setTimeRangeValue(toTimeRangeValue(val))
      }
      setValue('status', logsDefaultValue?.status ?? '')
      setLogsDefaultValue(null)
    }
  }, [dataappOpenedTab])

  const {
    isLoading: isLoadigLogs,
    isRefetching: isRefetchingLogs,
    isFetching: isFetchingLogs,
    refetch: refetchRequestLogs
  } = useGetChat2Querylogs(
    orgId,
    projectId,
    `${editApp?.id}`,
    {
      start: timeRangeValue[0],
      end: timeRangeValue[1],
      status,
      type,
      question,
      page: curPageNo
    },
    {
      query: {
        enabled: false,
        cacheTime: 0,
        refetchInterval: false,
        refetchOnWindowFocus: false,
        onSuccess: (res) => {
          setRequestLogs({
            logs: res?.logs ?? [],
            has_more: res.has_more ?? false
          })
        }
      }
    }
  )

  useEffect(() => {
    setCurPageNo(1)
  }, [editApp?.id])

  useEffect(() => {
    refetchRequestLogs()
  }, [curPageNo, refetchRequestLogs])

  useEffect(() => {
    setCurPageNo(1)

    setTimeout(() => {
      refetchRequestLogs()
    }, 200)
  }, [timeRangeValue, status, type])

  const LogFilterInput = (name: keyof AppLogFilterProps, placeholder: string) => {
    return (
      <FormTextInput
        autoComplete="off"
        placeholder={placeholder}
        name={name}
        w={110}
        rightSection={
          !!question && (
            <IconXClose
              style={{ cursor: 'pointer' }}
              size={14}
              onClick={() => {
                setValue(name, '')
                setTimeout(() => {
                  refetchRequestLogs()
                })
              }}
            />
          )
        }
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            refetchRequestLogs()
          }
        }}
      />
    )
  }

  return (
    <Box
      sx={{
        height: '100%',
        overflowX: 'hidden',
        overflowY: 'auto',
        marginLeft: -16,
        marginRight: -16
      }}
    >
      <Flex px={16} align="center" my={16} justify="space-between" wrap="wrap">
        <Form layout="none" formMode="onChange" onSubmit={(_values) => {}} form={formProps} withActions={false}>
          <Flex align="center" gap={16}>
            <TimeRangePicker
              value={timeRange}
              quickRanges={OVERVIEW_QUICK_RANGES}
              loading={isLoadigLogs}
              minDateTime={() => dayjs().subtract(30, 'day').toDate()}
              maxDateTime={() => dayjs().toDate()}
              onChange={(v) => {
                setTimeRange(v)
                setTimeRangeValue(toTimeRangeValue(v))
              }}
            />

            <FormSelect
              w={150}
              name="type"
              data={[
                {
                  label: 'All Type',
                  value: ''
                },
                {
                  label: 'Data Summary',
                  value: 'create_data_summary'
                },
                {
                  label: 'Chat2data',
                  value: 'chat2data'
                },
                {
                  label: 'Refine SQL',
                  value: 'refine_sql'
                }
              ]}
              placeholder="Type"
              onChange={(type) => setValue('type', type!)}
            />

            <FormSelect
              w={115}
              name="status"
              data={[
                {
                  label: 'All Status',
                  value: ''
                },
                {
                  label: 'Success',
                  value: 'success'
                },
                {
                  label: 'Error',
                  value: 'failed'
                }
              ]}
              placeholder="Status"
              onChange={(status) => setValue('status', status!)}
            />

            {LogFilterInput('question', 'Question')}

            {!isFetchingLogs ? (
              <Typography variant="label-lg" sx={{ cursor: 'pointer' }} onClick={resetRequest}>
                Clear Filters
              </Typography>
            ) : (
              <Typography variant="label-lg" color="carbon.6">
                Clear Filters
              </Typography>
            )}
          </Flex>
        </Form>

        <Flex>
          <ActionIcon
            aria-label="Refresh"
            variant="subtle"
            onClick={() => {
              setTimeRangeValue(toTimeRangeValue(timeRange))
              refetchRequestLogs()
            }}
          >
            {isFetchingLogs ? <Loader size={16} /> : <IconRefreshCw02 size={16} strokeWidth={2} color="carbon.8" />}
          </ActionIcon>

          <LogActions
            orgId={orgId}
            projectId={projectId}
            appId={editApp?.id ?? ''}
            start={timeRangeValue[0]}
            end={timeRangeValue[1]}
            status={status}
            type={type}
            question={question ?? ''}
          />
        </Flex>
      </Flex>

      <LogListTable loading={isLoadigLogs || isRefetchingLogs} requestLogs={requestLogs?.logs ?? []} />

      {(curPageNo > 1 || requestLogs?.has_more) && (
        <Flex justify="end" align="center" mt={16} mr={16}>
          {curPageNo > 1 && (
            <ActionIcon aria-label="Previous Page" variant="subtle" onClick={() => setCurPageNo(curPageNo - 1)}>
              <IconChevronLeft />
            </ActionIcon>
          )}

          <Box
            fw={600}
            mx={8}
            sx={(t) => ({
              backgroundColor: t.colors.carbon[3],
              borderRadius: t.defaultRadius,
              width: 32,
              lineHeight: '32px',
              textAlign: 'center'
            })}
          >
            {curPageNo}
          </Box>

          {requestLogs?.has_more && (
            <ActionIcon aria-label="Next Page" variant="subtle" onClick={() => setCurPageNo(curPageNo + 1)}>
              <IconChevronRight />
            </ActionIcon>
          )}
        </Flex>
      )}
    </Box>
  )
}
export default AppLogs