import React from 'react'
import { cn } from '@/utils/cn'
import type { MessageContent, UserInteraction } from '../../types'
import type { BaseEvent } from '../../types'
import { ContentMessage } from './ContentMessage'

export interface FactCheckProps {
  content?: MessageContent
  userInteraction?: UserInteraction
  base?: BaseEvent
  isUserInput: boolean
  showUserFile: boolean
}

/**
 * 事实核查消息组件 - 带引用内容的消息展示，对应 next-agent FactCheck
 */
function InnerFactCheck({
  content,
  userInteraction,
  isUserInput,
  showUserFile,
}: FactCheckProps) {
  if (!content && !userInteraction) return null

  return (
    <div
      className={cn('flex flex-col rounded-xl w-full', {
        'mt-9 mb-0 px-3': showUserFile,
        'my-9': isUserInput && !showUserFile,
      })}
    >
      <ContentMessage
        content={content}
        userInteraction={userInteraction}
        isUserInput={isUserInput}
        showUserFile={showUserFile}
      />
      {content?.refer_content && (
        <div className="mt-3 w-full">
          <div className="px-3 py-2 rounded-lg border border-border/60 bg-muted/40 text-xs text-muted-foreground leading-relaxed">
            <span className="font-medium text-foreground/70 mr-1">引用：</span>
            {content.refer_content}
          </div>
        </div>
      )}
    </div>
  )
}

export const FactCheck = React.memo(InnerFactCheck)
export default FactCheck