import React from 'react'
import type {
  Attachment,
  ImageAttachment,
  McpContent,
  PlanConfig,
  TaskTodoConfig,
  Operation,
  BaseEvent,
  HandleImageAttachmentClick,
} from '../../types'
import { AttachmentItem } from './AttachmentItem'
import { ImageAttachmentItem } from './ImageAttachmentItem'
import { TodoList } from './TodoList'

export interface SystemMessageProps {
  attachment?: Attachment[]
  imageAttachment?: ImageAttachment[]
  operation?: Operation
  mcpContent?: McpContent
  planConfig?: PlanConfig
  taskTodoConfig?: TaskTodoConfig
  base?: BaseEvent
  showSystemAttachments: boolean
  showOperation: boolean
  showMcpContent: boolean
  showPlanConfig: boolean
  showTaskTodoList: boolean
  onAttachmentClick?: (attachment: Attachment) => void
  onImageAttachmentClick?: HandleImageAttachmentClick
}

/**
 * 系统消息组件 - 渲染系统附件、待办列表、MCP内容、计划配置、操作信息
 * 对应 next-agent SystemMessage
 */
function InnerSystemMessage({
  attachment,
  imageAttachment,
  operation,
  mcpContent,
  planConfig,
  taskTodoConfig,
  showSystemAttachments,
  showOperation,
  showMcpContent,
  showPlanConfig,
  showTaskTodoList,
  onAttachmentClick,
  onImageAttachmentClick,
}: SystemMessageProps) {
  const hasContent =
    showTaskTodoList ||
    (imageAttachment?.length ?? 0) > 0 ||
    (showSystemAttachments && (attachment?.length ?? 0) > 0) ||
    (showMcpContent && !!mcpContent) ||
    (showOperation && !!operation) ||
    (showPlanConfig && !!planConfig)

  if (!hasContent) return null

  return (
    <div className="w-full space-y-2 mt-1">
      {/* Todo 列表 */}
      {showTaskTodoList && taskTodoConfig?.list?.length && (
        <TodoList items={taskTodoConfig.list} />
      )}

      {/* 图片附件（系统消息里的） */}
      {(imageAttachment?.length ?? 0) > 0 && (
        <div className="flex flex-wrap gap-2">
          {imageAttachment!.map((img, i) => (
            <ImageAttachmentItem
              assetsType="assistant"
              key={img.url || img.path || i}
              image={img}
              onClick={onImageAttachmentClick}
            />
          ))}
        </div>
      )}

      {/* 文件附件（系统消息里的） */}
      {showSystemAttachments && (attachment?.length ?? 0) > 0 && (
        <div className="flex flex-wrap gap-2">
          {attachment!.map((att, i) => (
            <AttachmentItem
              key={att.file_id || att.file_url || i}
              attachment={att}
              onClick={onAttachmentClick}
            />
          ))}
        </div>
      )}

      {/* MCP 内容 */}
      {showMcpContent && mcpContent && (
        <div className="p-2 rounded-lg bg-muted border border-border/50">
          <pre className="text-xs text-muted-foreground whitespace-pre-wrap break-all">
            {JSON.stringify(mcpContent, null, 2)}
          </pre>
        </div>
      )}

      {/* 操作信息 */}
      {showOperation && operation && (
        <div className="p-2 rounded-lg bg-muted border border-border/50">
          <pre className="text-xs text-muted-foreground whitespace-pre-wrap break-all">
            {JSON.stringify(operation, null, 2)}
          </pre>
        </div>
      )}

      {/* 计划配置 */}
      {showPlanConfig && planConfig?.steps && (
        <TodoList
          items={planConfig.steps.map(s => ({
            id: s.id,
            title: s.title,
            status: s.status,
          }))}
        />
      )}
    </div>
  )
}

export const SystemMessage = React.memo(InnerSystemMessage)
export default SystemMessage