import { Badge, Box, Typography } from '@tidbcloud/uikit'
import { ProTable, MRT_ColumnDef } from '@tidbcloud/uikit/biz'
import { useMediaQuery } from '@tidbcloud/uikit/hooks'
import { useMemo, useState } from 'react'

import TimeComponent from 'dbaas/components/TimeComponent'
import { DtoChat2QueryLog } from 'dbaas/services/dataservice/interface'

import LogDetail from './LogDetail'

const Chat2QueryListTable = ({ requestLogs, loading }: { requestLogs: DtoChat2QueryLog[]; loading: boolean }) => {
  const [detailOpened, setDetailOpened] = useState(false)
  const [detailItem, setDetailItem] = useState<DtoChat2QueryLog | null>(null)
  const matchedXl = useMediaQuery('(max-width: 1500px)')

  const index = useMemo(() => (!detailItem ? 0 : requestLogs.indexOf(detailItem)), [detailItem, requestLogs])

  const columns = useMemo<MRT_ColumnDef<DtoChat2QueryLog>[]>(
    () => [
      {
        header: 'Request Id',
        Header: () => {
          return <Typography pl={12}>Request Id</Typography>
        },
        id: 'request_id',
        accessorFn: (column) => (
          <Typography
            variant="action-md"
            maw={200}
            fw={400}
            pl={12}
            sx={{ cursor: 'pointer', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
            onClick={() => {
              setDetailOpened(true)
              setDetailItem(column)
            }}
          >
            {column.request_id}
          </Typography>
        )
      },
      {
        header: 'Date Time',
        id: 'date_time',
        size: 170,
        accessorFn: (column) => (
          <Typography variant="body-lg">
            <TimeComponent time={column.log_time!} />
          </Typography>
        )
      },
      {
        header: 'Status',
        id: 'status',
        maxSize: 80,
        accessorFn: (column) => (
          <Badge variant="dot" color={column.status === 'success' ? 'green' : 'red'} sx={{ paddingLeft: 0 }}>
            <Typography variant="body-lg">{column.status ?? ''}</Typography>
          </Badge>
        )
      },
      {
        header: 'Type',
        id: 'type',
        maxSize: 80,
        accessorFn: (column) => <Typography variant="body-lg">{column.type ?? ''}</Typography>
      },
      {
        header: 'Question',
        accessorFn: (column) => (
          <Typography
            variant="body-lg"
            sx={{
              cursor: 'pointer',
              maxWidth: matchedXl ? 300 : 500,
              overflow: 'hidden',
              wordBreak: 'keep-all',
              whiteSpace: 'nowrap',
              textOverflow: 'ellipsis'
            }}
          >
            {column.input?.question ?? ''}
          </Typography>
        )
      }
    ],
    []
  )

  return (
    <Box>
      <ProTable<DtoChat2QueryLog>
        columns={columns}
        loading={loading}
        data={loading ? [] : (requestLogs ?? [])}
        mantinePaperProps={{ mx: 24 }}
        emptyMessage="No Data"
      />

      <LogDetail
        opened={detailOpened}
        close={() => {
          setDetailOpened(false)
          setDetailItem(null)
        }}
        data={detailItem}
        index={index}
        len={requestLogs.length}
        prev={() => {
          if (index > 0) {
            setDetailItem(requestLogs[index - 1])
          }
        }}
        next={() => {
          if (index < requestLogs.length - 1) {
            setDetailItem(requestLogs[index + 1])
          }
        }}
      />
    </Box>
  )
}

export default Chat2QueryListTable