Function ResultDisplay

components/ResultDisplay.tsx:17–366

({ content, onUseImageAsInput, onImageClick, originalImageUrl })

type ImageSelection = 'Original' | 'Line Art' | 'Final Result';

const ResultDisplay: React.FC<ResultDisplayProps> = ({ content, onUseImageAsInput, onImageClick, originalImageUrl }) => {
  const { t } = useTranslation();
  const [viewMode, setViewMode] = useState<ViewMode>('result');
  const [twoStepViewMode, setTwoStepViewMode] = useState<TwoStepViewMode>('result');
  
  const sliderContainerRef = useRef<HTMLDivElement>(null);
  const [sliderPosition, setSliderPosition] = useState(50);
  const [isDragging, setIsDragging] = useState(false);
  
  const [sliderLeft, setSliderLeft] = useState<ImageSelection>('Original');
  const [sliderRight, setSliderRight] = useState<ImageSelection>('Final Result');

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!isDragging || !sliderContainerRef.current) return;
      const rect = sliderContainerRef.current.getBoundingClientRect();
      const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
      const percent = (x / rect.width) * 100;
      setSliderPosition(percent);
    };

    const handleMouseUp = () => setIsDragging(false);

    if (isDragging) {
      window.addEventListener('mousemove', handleMouseMove);
      window.addEventListener('mouseup', handleMouseUp);
    }

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isDragging]);

  const handleMouseDown = () => setIsDragging(true);

  const handleDownload = () => {
    if (!content.imageUrl) return;
    const fileExtension = content.imageUrl.split(';')[0].split('/')[1] || 'png';
    downloadImage(content.imageUrl, `generated-image-${Date.now()}.${fileExtension}`);
  };

  const handleDownloadBoth = () => {
    if (content.secondaryImageUrl) {
        downloadImage(content.secondaryImageUrl, `line-art-${Date.now()}.png`);
    }
    if (content.imageUrl) {
        downloadImage(content.imageUrl, `final-result-${Date.now()}.png`);
    }
  };
  
  const handleDownloadComparison = useCallback(async () => {
    const imagesToLoad: {url: string | null, img: HTMLImageElement}[] = [
        { url: originalImageUrl, img: new Image() },
    ];
    if (content.secondaryImageUrl && content.imageUrl) {
        imagesToLoad.push({ url: content.secondaryImageUrl, img: new Image() });
        imagesToLoad.push({ url: content.imageUrl, img: new Image() });