'use client'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { ChatContextProvider } from '@/app/components/base/chat/chat/context-provider'
import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
import { FileList } from '@/app/components/base/file-uploader'
import { ImageIndentLeft } from '@/app/components/base/icons/src/vender/line/editor'
import { Markdown } from '@/app/components/base/markdown'
import StatusContainer from '@/app/components/workflow/run/status-container'

type ResultTextProps = {
  isRunning?: boolean
  isPaused?: boolean
  outputs?: any
  error?: string
  onClick?: () => void
  allFiles?: any[]
}

const ResultText: FC<ResultTextProps> = ({
  isRunning,
  isPaused,
  outputs,
  error,
  onClick,
  allFiles,
}) => {
  const { t } = useTranslation()
  return (
    <div className="bg-background-section-burn">
      {isRunning && !outputs && (
        <div className="pt-4 pl-[26px]">
          <LoadingAnim type="text" />
        </div>
      )}
      {!isRunning && error && (
        <div className="px-4 py-2">
          <StatusContainer status="failed">{error}</StatusContainer>
        </div>
      )}
      {!isPaused && !isRunning && !outputs && !error && !allFiles?.length && (
        <div className="mt-[120px] flex flex-col items-center px-4 py-2 text-[13px] leading-[18px] text-gray-500">
          <ImageIndentLeft className="size-6 text-gray-400" />
          <div className="mr-2">{t(($) => $['resultEmpty.title'], { ns: 'runLog' })}</div>
          <div>
            {t(($) => $['resultEmpty.tipLeft'], { ns: 'runLog' })}
            <button
              type="button"
              onClick={onClick}
              className="inline cursor-pointer border-none bg-transparent p-0 text-left text-primary-600"
            >
              {t(($) => $['resultEmpty.link'], { ns: 'runLog' })}
            </button>
            {t(($) => $['resultEmpty.tipRight'], { ns: 'runLog' })}
          </div>
        </div>
      )}
      {(outputs || !!allFiles?.length) && (
        <>
          {outputs && (
            <div className="px-4 py-2">
              {/* ThinkBlock's timer reads isResponding from ChatContext, which the run panel otherwise lacks. */}
              <ChatContextProvider chatList={[]} isResponding={!!isRunning}>
                <Markdown content={outputs} />
              </ChatContextProvider>
            </div>
          )}
          {!!allFiles?.length &&
            allFiles.map((item) => (
              <div key={item.varName} className="flex flex-col gap-1 px-4 py-2 system-xs-regular">
                <div className="py-1 text-text-tertiary">{item.varName}</div>
                <FileList
                  files={item.list}
                  showDeleteAction={false}
                  showDownloadAction
                  canPreview
                />
              </div>
            ))}
        </>
      )}
    </div>
  )
}

export default ResultText