"use client";

import type { ComponentProps } from "react";
import { Streamdown } from "streamdown";
import { cn } from "@/lib/utils";
import { ImagePreview } from "@/components/image-preview";
import { VideoPreview } from "@/components/video-preview";

type ResponseProps = ComponentProps<typeof Streamdown> & {
  onImageEdit?: (imageUrl: string) => void;
  onDrawingComplete?: (annotatedImageUrl: string) => void;
  onImageEnhance?: (imageUrl: string) => void;
  onImageRmbg?: (imageUrl: string) => void;
  onImageExtend?: (imageUrl: string) => void;
  onImageAngleEdit?: (imageUrl: string) => void;
  isProcessingEnhance?: boolean;
  isProcessingRmbg?: boolean;
  isProcessingExtend?: boolean;
  isProcessingAngleEdit?: boolean;
};

// 注意：移除了 memo 的自定义比较函数，确保 isProcessing* 状态变化时组件能正确重新渲染
// 之前的 memo 比较函数可能导致 Streamdown 内部的 ImagePreview 组件没有正确更新
export const Response = ({ 
  className, 
  onImageEdit, 
  onDrawingComplete, 
  onImageEnhance, 
  onImageRmbg, 
  onImageExtend, 
  onImageAngleEdit, 
  isProcessingEnhance, 
  isProcessingRmbg, 
  isProcessingExtend, 
  isProcessingAngleEdit, 
  ...props 
}: ResponseProps) => (
  <Streamdown
    className={cn(
      "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&_code]:whitespace-pre-wrap [&_code]:break-words [&_pre]:max-w-full [&_pre]:overflow-x-auto",
      className
    )}
    components={{
      img: ({ src, alt }: { src?: string; alt?: string }) => {
        if (!src) {
          return null;
        }
        // 使用 key 强制在处理状态变化时重新渲染组件
        const processingKey = `${isProcessingEnhance}-${isProcessingRmbg}-${isProcessingExtend}-${isProcessingAngleEdit}`;
        return <ImagePreview 
          key={`${src}-${processingKey}`}
          src={src} 
          alt={alt} 
          onImageEdit={onImageEdit} 
          onDrawingComplete={onDrawingComplete}
          onImageEnhance={onImageEnhance}
          onImageRmbg={onImageRmbg}
          onImageExtend={onImageExtend}
          onImageAngleEdit={onImageAngleEdit}
          isProcessingEnhance={isProcessingEnhance}
          isProcessingRmbg={isProcessingRmbg}
          isProcessingExtend={isProcessingExtend}
          isProcessingAngleEdit={isProcessingAngleEdit}
        />;
      },
      video: ({ src, alt }: { src?: string; alt?: string }) => {
        if (!src) {
          return null;
        }
        return <VideoPreview src={src} alt={alt} />;
      },
    }}
    {...props}
  />
);

Response.displayName = "Response";