'use client'
import type { FC } from 'react'
import type {
  ExternalKnowledgeBaseHitTesting,
  ExternalKnowledgeBaseHitTestingResponse,
  HitTesting,
  HitTestingRecord,
  HitTestingResponse,
  Query,
} from '@/models/datasets'
import type { RetrievalConfig } from '@/types/app'
import { cn } from '@langgenius/dify-ui/cn'
import {
  Drawer,
  DrawerBackdrop,
  DrawerContent,
  DrawerPopup,
  DrawerPortal,
  DrawerViewport,
} from '@langgenius/dify-ui/drawer'
import { Pagination } from '@langgenius/dify-ui/pagination'
import { useBoolean } from 'ahooks'
import { useAtomValue } from 'jotai'
import * as React from 'react'
import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import FloatRightContainer from '@/app/components/base/float-right-container'
import Loading from '@/app/components/base/loading'
import docStyle from '@/app/components/datasets/documents/detail/completed/style.module.css'
import { userProfileIdAtom } from '@/context/account-state'
import DatasetDetailContext from '@/context/dataset-detail'
import { workspacePermissionKeysAtom } from '@/context/permission-state'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
import { useDatasetTestingRecords } from '@/service/knowledge/use-dataset'
import {
  useExternalKnowledgeBaseHitTesting,
  useHitTesting,
} from '@/service/knowledge/use-hit-testing'
import { getDatasetACLCapabilities } from '@/utils/permission'
import { CardSkelton } from '../documents/detail/completed/skeleton/general-list-skeleton'
import EmptyRecords from './components/empty-records'
import QueryInput from './components/query-input'
import Records from './components/records'
import ResultItem from './components/result-item'
import ResultItemExternal from './components/result-item-external'
import ModifyRetrievalModal from './modify-retrieval-modal'

const limit = 10

type Props = Readonly<{
  datasetId: string
}>

const HitTestingPage: FC<Props> = ({ datasetId }: Props) => {
  const { t } = useTranslation()

  const media = useBreakpoints()
  const isMobile = media === MediaType.mobile

  const [hitResult, setHitResult] = useState<HitTestingResponse | undefined>()
  const [externalHitResult, setExternalHitResult] = useState<
    ExternalKnowledgeBaseHitTestingResponse | undefined
  >()
  const [queries, setQueries] = useState<Query[]>([])
  const [queryInputKey, setQueryInputKey] = useState(Date.now())

  const [currPage, setCurrPage] = useState<number>(0)
  const { dataset: currentDataset } = useContext(DatasetDetailContext)
  const currentUserId = useAtomValue(userProfileIdAtom)
  const workspacePermissionKeys = useAtomValue(workspacePermissionKeysAtom)
  const canRunRetrievalRecall = getDatasetACLCapabilities(currentDataset?.permission_keys, {
    currentUserId,
    resourceMaintainer: currentDataset?.maintainer,
    workspacePermissionKeys,
  }).canRetrievalRecall
  const {
    data: recordsRes,
    refetch: recordsRefetch,
    isLoading: isRecordsLoading,
  } = useDatasetTestingRecords(
    datasetId,
    { limit, page: currPage + 1 },
    { enabled: canRunRetrievalRecall },
  )

  const total = recordsRes?.total || 0
  const totalPages = total ? Math.max(Math.ceil(total / limit), 1) : 1

  const isExternal = currentDataset?.provider === 'external'

  const [retrievalConfig, setRetrievalConfig] = useState(
    currentDataset?.retrieval_model_dict as RetrievalConfig,
  )
  const [isShowModifyRetrievalModal, setIsShowModifyRetrievalModal] = useState(false)
  const [
    isShowRightPanel,
    { setTrue: showRightPanel, setFalse: hideRightPanel, set: setShowRightPanel },
  ] = useBoolean(!isMobile)

  const { mutateAsync: hitTestingMutation, isPending: isHitTestingPending } =
    useHitTesting(datasetId)
  const {
    mutateAsync: externalKnowledgeBaseHitTestingMutation,
    isPending: isExternalKnowledgeBaseHitTestingPending,
  } = useExternalKnowledgeBaseHitTesting(datasetId)

  const isRetrievalLoading = isHitTestingPending || isExternalKnowledgeBaseHitTestingPending

  const renderHitResults = (results: HitTesting[] | ExternalKnowledgeBaseHitTesting[]) => (
    <div className="flex h-full flex-col rounded-tl-2xl bg-background-body px-4 py-3">
      <div className="mb-2 shrink-0 pl-2 leading-6 font-semibold text-text-primary">
        {t(($) => $['hit.title'], { ns: 'datasetHitTesting', num: results.length })}
      </div>
      <div className="grow space-y-2 overflow-y-auto">
        {results.map((record, idx) =>
          isExternal ? (
            <ResultItemExternal
              key={idx}
              positionId={idx + 1}
              payload={record as ExternalKnowledgeBaseHitTesting}
            />
          ) : (
            <ResultItem key={idx} payload={record as HitTesting} />
          ),
        )}
      </div>
    </div>
  )

  const renderEmptyState = () => (
    <div className="flex h-full flex-col items-center justify-center rounded-tl-2xl bg-background-body px-4 py-3">
      <div
        className={cn(docStyle.commonIcon, docStyle.targetIcon, 'size-14! bg-text-quaternary!')}
      />
      <div className="mt-3 text-[13px] text-text-quaternary">
        {t(($) => $['hit.emptyTip'], { ns: 'datasetHitTesting' })}
      </div>
    </div>
  )

  const handleClickRecord = useCallback((record: HitTestingRecord) => {
    setQueries(record.queries)
    setQueryInputKey(Date.now())
  }, [])

  useEffect(() => {
    setShowRightPanel(!isMobile)
  }, [isMobile, setShowRightPanel])

  if (!canRunRetrievalRecall) return <Loading type="app" />

  return (
    <div className="relative flex size-full gap-x-6 overflow-y-auto pl-6">
      <div className="flex min-w-0 flex-1 flex-col py-3">
        <div className="mb-4 flex flex-col justify-center">
          <h1 className="text-base font-semibold text-text-primary">
            {t(($) => $.title, { ns: 'datasetHitTesting' })}
          </h1>
          <p className="mt-0.5 text-[13px] leading-4 font-normal text-text-tertiary">
            {t(($) => $.desc, { ns: 'datasetHitTesting' })}
          </p>
        </div>
        <QueryInput
          key={queryInputKey}
          setHitResult={setHitResult}
          setExternalHitResult={setExternalHitResult}
          onSubmit={showRightPanel}
          onUpdateList={recordsRefetch}
          loading={isRetrievalLoading}
          queries={queries}
          setQueries={setQueries}
          isExternal={isExternal}
          onClickRetrievalMethod={() => setIsShowModifyRetrievalModal(true)}
          retrievalConfig={retrievalConfig}
          isEconomy={currentDataset?.indexing_technique === 'economy'}
          hitTestingMutation={hitTestingMutation}
          externalKnowledgeBaseHitTestingMutation={externalKnowledgeBaseHitTestingMutation}
          canRunRetrievalRecall={canRunRetrievalRecall}
        />
        <div className="mt-6 mb-3 text-base font-semibold text-text-primary">
          {t(($) => $.records, { ns: 'datasetHitTesting' })}
        </div>
        {isRecordsLoading && (
          <div className="flex-1">
            <Loading type="app" />
          </div>
        )}
        {!isRecordsLoading && recordsRes?.data && recordsRes.data.length > 0 && (
          <>
            <Records records={recordsRes?.data} onClickRecord={handleClickRecord} />
            {total && total > limit ? (
              <Pagination
                page={currPage + 1}
                totalPages={totalPages}
                onPageChange={(page) => setCurrPage(page - 1)}
                labels={{
                  previous: t(($) => $['pagination.previous'], { ns: 'common' }),
                  next: t(($) => $['pagination.next'], { ns: 'common' }),
                  editPageNumber: (page, totalPages) =>
                    t(($) => $['pagination.editPageNumber'], { ns: 'common', page, totalPages }),
                  pageNumberInput: t(($) => $['pagination.pageNumber'], { ns: 'common' }),
                }}
              />
            ) : null}
          </>
        )}
        {!isRecordsLoading && !recordsRes?.data?.length && <EmptyRecords />}
      </div>
      <FloatRightContainer
        panelClassName="justify-start! overflow-y-auto!"
        showClose
        isMobile={isMobile}
        isOpen={isShowRightPanel}
        onClose={hideRightPanel}
      >
        <div className="flex min-w-0 flex-1 flex-col pt-3">
          {isRetrievalLoading ? (
            <div className="flex h-full flex-col rounded-tl-2xl bg-background-body px-4 py-3">
              <CardSkelton />
            </div>
          ) : (
            (() => {
              if (!hitResult?.records.length && !externalHitResult?.records.length)
                return renderEmptyState()

              if (hitResult?.records.length) return renderHitResults(hitResult.records)

              return renderHitResults(externalHitResult?.records || [])
            })()
          )}
        </div>
      </FloatRightContainer>
      <Drawer
        open={isShowModifyRetrievalModal}
        modal
        swipeDirection="right"
        onOpenChange={(open) => {
          if (!open) setIsShowModifyRetrievalModal(false)
        }}
      >
        <DrawerPortal>
          <DrawerBackdrop className={cn(!isMobile && 'bg-transparent')} />
          <DrawerViewport>
            <DrawerPopup className="p-0! data-[swipe-direction=right]:top-16 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-3 data-[swipe-direction=right]:h-auto data-[swipe-direction=right]:w-full data-[swipe-direction=right]:max-w-[640px] data-[swipe-direction=right]:rounded-xl">
              <DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
                <ModifyRetrievalModal
                  indexMethod={currentDataset?.indexing_technique || ''}
                  value={retrievalConfig}
                  isShow={isShowModifyRetrievalModal}
                  onHide={() => setIsShowModifyRetrievalModal(false)}
                  onSave={(value) => {
                    setRetrievalConfig(value)
                    setIsShowModifyRetrievalModal(false)
                  }}
                />
              </DrawerContent>
            </DrawerPopup>
          </DrawerViewport>
        </DrawerPortal>
      </Drawer>
    </div>
  )
}

export default HitTestingPage
