import React, { useRef, useCallback, useState, useEffect, useMemo } from 'react';
import { 
  Box, 
  Button, 
  HStack, 
  Modal, 
  ModalOverlay, 
  ModalContent, 
  ModalHeader, 
  ModalCloseButton, 
  ModalBody, 
  ModalFooter,
  FormControl,
  FormLabel,
  FormHelperText,
  Input,
  Text,
  SimpleGrid,
  useToast,
  VStack,
  ButtonGroup,
  IconButton,
  Tooltip,
} from '@chakra-ui/react';
import ReactQuill from 'react-quill';
import ReactCrop, { Crop } from 'react-image-crop';
import DOMPurify from 'dompurify';
import 'react-quill/dist/quill.snow.css';
import 'react-image-crop/dist/ReactCrop.css';
import '../../styles/custom-editor.css';
import { 
  Image as ImageIcon, Code, Type, Trash2, AlignLeft, AlignCenter, AlignRight,
  RotateCw, RotateCcw, FlipHorizontal, FlipVertical, Sun, Droplets, Eye,
  Sparkles, Contrast, ZoomIn, ZoomOut, Move, Maximize2, Settings,
  Circle, Square, X, Check, Filter
} from 'lucide-react';
import { Image as ChakraImage } from '@chakra-ui/react';
import { cropAndUpload, quickEditImage } from '../../services/imageProcessing';

interface ImageFilters {
  brightness: number;
  contrast: number;
  saturation: number;
  blur: number;
  grayscale: number;
  sepia: number;
  hueRotate: number;
  rotation: number;
  flipH: boolean;
  flipV: boolean;
}

interface CustomRichEditorProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  height?: string;
  readOnly?: boolean;
  onImageUpload?: (file: File) => Promise<{ url: string }>;
  showImageResize?: boolean;
  toolbar?: 'full' | 'basic' | 'minimal';
}

const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
  value,
  onChange,
  placeholder = 'Začněte psát...',
  height = '400px',
  readOnly = false,
  onImageUpload,
  showImageResize = true,
  toolbar = 'full',
}) => {
  const toast = useToast();
  const quillRef = useRef<ReactQuill | null>(null);
  const toolbarRef = useRef<HTMLDivElement | null>(null);
  const onChangeRef = useRef(onChange);
  const [isMounted, setIsMounted] = useState(false);
  
  // Ensure component is mounted before rendering Quill
  useEffect(() => {
    setIsMounted(true);
    return () => setIsMounted(false);
  }, []);
  
  // Keep onChange ref up to date
  useEffect(() => {
    onChangeRef.current = onChange;
  }, [onChange]);
  
  // Crop modal state
  const [cropOpen, setCropOpen] = useState(false);
  const [cropSrc, setCropSrc] = useState<string | null>(null);
  const [cropFile, setCropFile] = useState<File | null>(null);
  const [crop, setCrop] = useState<Crop>({ unit: '%', width: 80, height: 80, x: 10, y: 10 });
  const [cropQuality, setCropQuality] = useState<number>(85);
  const [cropMaxWidth, setCropMaxWidth] = useState<number>(1500);
  const [cropProcessing, setCropProcessing] = useState(false);
  const imgRef = useRef<HTMLImageElement | null>(null);

  // Force white mode for better readability in admin
  const borderColor = 'gray.200';
  const bgColor = 'white';
  const hoverBg = 'gray.50';
  const toolbarBg = 'white';
  const toolbarBorder = 'gray.200';
  
  // Image editing state
  const [selectedImageElement, setSelectedImageElement] = useState<HTMLImageElement | null>(null);
  const [imageFilters, setImageFilters] = useState<ImageFilters>({
    brightness: 100,
    contrast: 100,
    saturation: 100,
    blur: 0,
    grayscale: 0,
    sepia: 0,
    hueRotate: 0,
    rotation: 0,
    flipH: false,
    flipV: false,
  });
  const [showImageToolbar, setShowImageToolbar] = useState(false);
  const [toolbarPosition, setToolbarPosition] = useState({ top: 0, left: 0 });
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
  const [imageWidth, setImageWidth] = useState<number>(0);
  const [manualWidth, setManualWidth] = useState<string>('');

  // Define toolbar configurations
  const toolbarConfigs = {
    full: [
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ color: [] }, { background: [] }],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ align: [] }],
      ['link', 'image'],
      ['blockquote'],
      ['clean'],
    ],
    basic: [
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ align: [] }],
      ['link', 'image'],
      ['clean'],
    ],
    minimal: [
      ['bold', 'italic', 'underline'],
      [{ list: 'bullet' }],
      ['link'],
      ['clean'],
    ],
  };

  const toolbarConfig = useMemo(() => {
    return toolbarConfigs[toolbar] || toolbarConfigs.full;
  }, [toolbar]);

  // Image upload handler
  const handleImageUpload = useCallback(() => {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.onchange = async () => {
      const file = (input.files || [])[0];
      if (!file) return;
      setCropFile(file);
      const reader = new FileReader();
      reader.onload = () => {
        setCropSrc(reader.result as string);
        setCropOpen(true);
      };
      reader.readAsDataURL(file);
    };
    input.click();
  }, []);

  // Memoize modules to prevent Quill reinitialization
  const quillModules = useMemo(() => ({
    toolbar: {
      container: toolbarConfig,
      handlers: {
        image: onImageUpload ? handleImageUpload : undefined,
      },
    },
    clipboard: {
      matchVisual: false,
    },
  }), [toolbarConfig, onImageUpload, handleImageUpload]);

  // Get cropped blob
  const getCroppedBlob = (image: HTMLImageElement, cropPixels: { x: number; y: number; width: number; height: number }): Promise<Blob> => {
    const canvas = document.createElement('canvas');
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    
    let outputWidth = Math.max(1, Math.round(cropPixels.width * scaleX));
    let outputHeight = Math.max(1, Math.round(cropPixels.height * scaleY));
    
    if (outputWidth > cropMaxWidth) {
      const scale = cropMaxWidth / outputWidth;
      outputWidth = cropMaxWidth;
      outputHeight = Math.round(outputHeight * scale);
    }
    
    canvas.width = outputWidth;
    canvas.height = outputHeight;
    const ctx = canvas.getContext('2d', { alpha: false });
    if (!ctx) throw new Error('Canvas not supported');
    
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
    
    ctx.drawImage(
      image,
      Math.round(cropPixels.x * scaleX),
      Math.round(cropPixels.y * scaleY),
      Math.round(cropPixels.width * scaleX),
      Math.round(cropPixels.height * scaleY),
      0,
      0,
      outputWidth,
      outputHeight
    );
    
    return new Promise((resolve) => {
      canvas.toBlob((blob) => resolve(blob as Blob), 'image/jpeg', cropQuality / 100);
    });
  };

  // Confirm crop and insert
  const confirmCropAndInsert = async () => {
    try {
      setCropProcessing(true);
      
      if (!cropFile) {
        toast({ title: 'Chyba', description: 'Soubor není načten', status: 'error' });
        return;
      }
      
      if (!imgRef.current) {
        toast({ title: 'Chyba', description: 'Obrázek není načten', status: 'error' });
        return;
      }
      
      // Calculate crop data in pixels
      const img = imgRef.current;
      const percToPx = (val: number, size: number) => (crop.unit === '%' ? (val / 100) * size : val);
      
      let cropData = undefined;
      if (crop.width && crop.height && crop.width > 0 && crop.height > 0) {
        const cropPx = {
          x: Math.round(Math.max(0, percToPx(crop.x || 0, img.width))),
          y: Math.round(Math.max(0, percToPx(crop.y || 0, img.height))),
          width: Math.round(Math.min(img.width, percToPx(crop.width || img.width, img.width))),
          height: Math.round(Math.min(img.height, percToPx(crop.height || img.height, img.height))),
        };
        
        // Adjust crop to fit image bounds
        if (cropPx.x + cropPx.width > img.width) {
          cropPx.width = img.width - cropPx.x;
        }
        if (cropPx.y + cropPx.height > img.height) {
          cropPx.height = img.height - cropPx.y;
        }
        
        cropData = cropPx;
      }
      
      toast({ title: 'Zpracování obrázku...', status: 'info', duration: 2000 });
      
      // Use backend to crop and upload
      const res = await cropAndUpload(cropFile, cropData, cropQuality, cropMaxWidth);
      
      if (!res.url) {
        throw new Error('Upload failed - no URL returned');
      }
      
      // Insert into editor
      const quill = quillRef.current?.getEditor();
      if (quill) {
        // Ensure editor is focused and ready
        quill.focus();
        
        // Use setTimeout to ensure Quill's internal state is ready
        setTimeout(() => {
          try {
            const range = quill.getSelection();
            const index = range ? range.index : quill.getLength();
            
            // Insert the image
            quill.insertEmbed(index, 'image', res.url, 'api');
            
            // Move cursor after the image
            quill.setSelection(index + 1, 0, 'api');
            
            // Force content change to trigger re-render
            onChangeRef.current(quill.root.innerHTML);
            
            toast({ title: 'Obrázek vložen', status: 'success', duration: 2000 });
          } catch (embedError) {
            console.error('Error inserting image:', embedError);
            toast({ title: 'Chyba při vkládání obrázku', description: String(embedError), status: 'error' });
          }
        }, 50);
      }
    } catch (e: any) {
      console.error('Crop and insert error:', e);
      toast({ title: 'Zpracování obrázku selhalo', description: e?.response?.data?.error || e?.message || 'Chyba', status: 'error' });
    } finally {
      setCropProcessing(false);
      setCropOpen(false);
      setCropSrc(null);
      setCropFile(null);
      setCrop({ unit: '%', width: 80, height: 80, x: 10, y: 10 });
      setCropQuality(85);
      setCropMaxWidth(1500);
    }
  };

  // Make images draggable and resizable
  useEffect(() => {
    const editor = quillRef.current?.getEditor();
    if (!editor || readOnly) return;

    let selectedImage: HTMLImageElement | null = null;
    let resizeHandle: HTMLDivElement | null = null;
    let isResizing = false;
    let isDragging = false;
    let startX = 0;
    let startY = 0;
    let startWidth = 0;

    const createResizeHandle = (img: HTMLImageElement) => {
      removeResizeHandle();
      
      // Create container for all resize handles
      const container = document.createElement('div');
      container.className = 'custom-image-resize-container';
      container.style.cssText = `
        position: absolute;
        pointer-events: none;
        z-index: 1000;
      `;
      
      const rect = img.getBoundingClientRect();
      const editorRect = editor.root.getBoundingClientRect();
      const scrollTop = editor.root.scrollTop;
      const scrollLeft = editor.root.scrollLeft;
      
      // Create edge handles (right, bottom, left, top)
      const handles = [
        { position: 'right', cursor: 'ew-resize', width: '8px', height: '60%' },
        { position: 'bottom', cursor: 'ns-resize', width: '60%', height: '8px' },
        { position: 'left', cursor: 'ew-resize', width: '8px', height: '60%' },
        { position: 'top', cursor: 'ns-resize', width: '60%', height: '8px' },
        // Corner handles
        { position: 'bottom-right', cursor: 'nwse-resize', width: '16px', height: '16px', isCorner: true },
        { position: 'bottom-left', cursor: 'nesw-resize', width: '16px', height: '16px', isCorner: true },
        { position: 'top-right', cursor: 'nesw-resize', width: '16px', height: '16px', isCorner: true },
        { position: 'top-left', cursor: 'nwse-resize', width: '16px', height: '16px', isCorner: true },
      ];
      
      const updateHandlePositions = () => {
        const rect = img.getBoundingClientRect();
        const editorRect = editor.root.getBoundingClientRect();
        const scrollTop = editor.root.scrollTop;
        const scrollLeft = editor.root.scrollLeft;
        
        container.style.left = `${rect.left - editorRect.left + scrollLeft}px`;
        container.style.top = `${rect.top - editorRect.top + scrollTop}px`;
        container.style.width = `${rect.width}px`;
        container.style.height = `${rect.height}px`;
      };
      
      handles.forEach(({ position, cursor, width, height, isCorner }) => {
        const handle = document.createElement('div');
        handle.className = `custom-image-resize-handle custom-resize-${position}`;
        
        let positionStyle = 'position: absolute; pointer-events: auto; transition: all 0.2s;';
        
        if (isCorner) {
          // Corner handle - circular blue dot
          positionStyle += `
            width: ${width};
            height: ${height};
            background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%);
            border: 3px solid white;
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(49, 130, 206, 0.3);
          `;
          
          if (position === 'bottom-right') {
            positionStyle += 'right: -8px; bottom: -8px;';
          } else if (position === 'bottom-left') {
            positionStyle += 'left: -8px; bottom: -8px;';
          } else if (position === 'top-right') {
            positionStyle += 'right: -8px; top: -8px;';
          } else if (position === 'top-left') {
            positionStyle += 'left: -8px; top: -8px;';
          }
        } else {
          // Edge handle - thin blue bar
          positionStyle += `
            background: rgba(49, 130, 206, 0.6);
            border: 1px solid rgba(49, 130, 206, 0.8);
          `;
          
          if (position === 'right') {
            positionStyle += `width: ${width}; height: ${height}; right: -4px; top: 50%; transform: translateY(-50%);`;
          } else if (position === 'bottom') {
            positionStyle += `width: ${width}; height: ${height}; bottom: -4px; left: 50%; transform: translateX(-50%);`;
          } else if (position === 'left') {
            positionStyle += `width: ${width}; height: ${height}; left: -4px; top: 50%; transform: translateY(-50%);`;
          } else if (position === 'top') {
            positionStyle += `width: ${width}; height: ${height}; top: -4px; left: 50%; transform: translateX(-50%);`;
          }
        }
        
        positionStyle += `cursor: ${cursor};`;
        handle.style.cssText = positionStyle;
        
        // Hover effect for corners
        if (isCorner) {
          handle.addEventListener('mouseenter', () => {
            handle.style.transform = 'scale(1.3)';
            handle.style.boxShadow = '0 3px 12px rgba(0,0,0,0.5), 0 0 0 2px rgba(49, 130, 206, 0.5)';
          });
          
          handle.addEventListener('mouseleave', () => {
            if (!isResizing) {
              handle.style.transform = 'scale(1)';
              handle.style.boxShadow = '0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(49, 130, 206, 0.3)';
            }
          });
        } else {
          // Hover effect for edges
          handle.addEventListener('mouseenter', () => {
            handle.style.background = 'rgba(49, 130, 206, 0.9)';
          });
          
          handle.addEventListener('mouseleave', () => {
            if (!isResizing) {
              handle.style.background = 'rgba(49, 130, 206, 0.6)';
            }
          });
        }
        
        handle.addEventListener('mousedown', (e) => {
          e.preventDefault();
          e.stopPropagation();
          e.stopImmediatePropagation();
          isResizing = true;
          startX = e.clientX;
          startY = e.clientY;
          startWidth = img.offsetWidth;
          const startHeight = img.offsetHeight;
          const aspectRatio = startWidth / startHeight;
          
          const onMouseMove = (e: MouseEvent) => {
            if (!isResizing) return;
            const deltaX = e.clientX - startX;
            const deltaY = e.clientY - startY;
            let newWidth = startWidth;
            
            // Calculate new width based on handle position
            if (position.includes('right')) {
              newWidth = startWidth + deltaX;
            } else if (position.includes('left')) {
              newWidth = startWidth - deltaX;
            } else if (position.includes('bottom') || position.includes('top')) {
              // For vertical handles, maintain aspect ratio
              newWidth = startWidth + (deltaY * aspectRatio);
            }
            
            // Constrain width
            newWidth = Math.max(50, Math.min(newWidth, editor.root.clientWidth - 40));
            
            img.style.width = `${newWidth}px`;
            img.style.maxWidth = '100%';
            img.style.height = 'auto';
            setImageWidth(newWidth);
            setManualWidth(newWidth.toString());
            updateHandlePositions();
          };
          
          const onMouseUp = () => {
            isResizing = false;
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
            onChangeRef.current(editor.root.innerHTML);
          };
          
          document.addEventListener('mousemove', onMouseMove);
          document.addEventListener('mouseup', onMouseUp);
        });
        
        container.appendChild(handle);
      });
      
      updateHandlePositions();
      editor.root.style.position = 'relative';
      editor.root.appendChild(container);
      resizeHandle = container;
      
      return container;
    };

    const removeResizeHandle = () => {
      if (resizeHandle && resizeHandle.parentNode) {
        resizeHandle.parentNode.removeChild(resizeHandle);
        resizeHandle = null;
      }
    };

    const selectImage = (img: HTMLImageElement) => {
      if (selectedImage) {
        selectedImage.style.outline = '';
        selectedImage.style.cursor = '';
        selectedImage.style.boxShadow = '';
      }
      
      selectedImage = img;
      img.style.outline = '3px solid #3182ce';
      img.style.cursor = 'move';
      img.style.boxShadow = '0 4px 12px rgba(49, 130, 206, 0.3)';
      
      // Prevent default drag behavior to avoid duplication
      img.setAttribute('draggable', 'false');
      
      createResizeHandle(img);
      
      // Set selected image state and load filters
      setSelectedImageElement(img);
      
      // Get current width
      const currentWidth = img.offsetWidth || img.width;
      setImageWidth(currentWidth);
      setManualWidth(currentWidth.toString());
      
      // Load saved filters
      const filtersData = img.getAttribute('data-filters');
      if (filtersData) {
        try {
          const savedFilters = JSON.parse(filtersData);
          setImageFilters(savedFilters);
        } catch {
          // If parsing fails, reset to defaults
          setImageFilters({
            brightness: 100,
            contrast: 100,
            saturation: 100,
            blur: 0,
            grayscale: 0,
            sepia: 0,
            hueRotate: 0,
            rotation: 0,
            flipH: false,
            flipV: false,
          });
        }
      }
      
      // Show toolbar and position it next to the image
      const rect = img.getBoundingClientRect();
      const editorRect = editor.root.getBoundingClientRect();
      const scrollTop = editor.root.scrollTop;
      const scrollLeft = editor.root.scrollLeft;
      
      // Position toolbar to the right of the image, or left if not enough space
      const toolbarWidth = 380;
      const spaceOnRight = window.innerWidth - rect.right;
      const positionRight = spaceOnRight > toolbarWidth + 20;
      
      let leftPos = positionRight 
        ? rect.right - editorRect.left + scrollLeft + 10
        : rect.left - editorRect.left + scrollLeft - toolbarWidth - 10;
      
      // Ensure toolbar is visible horizontally
      leftPos = Math.max(10, Math.min(leftPos, editorRect.width - toolbarWidth - 10));
      
      // Position vertically aligned with top of image
      let topPos = rect.top - editorRect.top + scrollTop;
      
      // Ensure toolbar is visible vertically
      topPos = Math.max(10, topPos);
      
      setToolbarPosition({
        top: topPos,
        left: leftPos,
      });
      setShowImageToolbar(true);
    };

    const deselectImage = () => {
      if (selectedImage) {
        selectedImage.style.outline = '';
        selectedImage.style.cursor = '';
        selectedImage.style.boxShadow = '';
        selectedImage = null;
      }
      removeResizeHandle();
      setSelectedImageElement(null);
      setShowImageToolbar(false);
      setImageWidth(0);
      setManualWidth('');
    };

    const handleImageClick = (e: Event) => {
      const target = e.target as HTMLElement;
      if (target.tagName === 'IMG') {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        
        // In read-only mode, show preview instead of selecting
        if (readOnly) {
          const imgSrc = (target as HTMLImageElement).src;
          setPreviewImage(imgSrc);
          setIsPreviewOpen(true);
          return;
        }
        
        selectImage(target as HTMLImageElement);
        return; // Important: return early to prevent further processing
      }
      
      // Don't deselect if clicking on resize handle or toolbar
      if (target.classList.contains('custom-image-resize-handle') || 
          target.classList.contains('custom-image-resize-container')) {
        e.preventDefault();
        e.stopPropagation();
        return;
      }
      if (toolbarRef.current && (toolbarRef.current === target || toolbarRef.current.contains(target))) {
        e.preventDefault();
        e.stopPropagation();
        return; // Don't deselect if clicking inside toolbar
      }
      
      // Only deselect if clicking outside image, toolbar, and handle
      deselectImage();
    };

    const handleMouseDown = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      if (target.tagName === 'IMG' && selectedImage === target) {
        // Only enable dragging if clicking directly on the image (not on resize handle)
        const rect = target.getBoundingClientRect();
        const isNearEdge = (e.clientX > rect.right - 20 || e.clientY > rect.bottom - 20);
        if (isNearEdge) return; // Let resize handle take over
        
        e.preventDefault();
        e.stopPropagation();
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        
        // Store initial alignment to prevent copying behavior
        const initialMarginLeft = selectedImage.style.marginLeft || '';
        const initialMarginRight = selectedImage.style.marginRight || '';
        let currentAlignment: 'left' | 'center' | 'right' = 'center';
        
        if (initialMarginLeft === '0' || initialMarginLeft === '0px') {
          currentAlignment = 'left';
        } else if (initialMarginRight === '0' || initialMarginRight === '0px') {
          currentAlignment = 'right';
        }
        
        // Already set in selectImage, but ensure it's off
        target.setAttribute('draggable', 'false');
        
        const onMouseMove = (e: MouseEvent) => {
          if (!isDragging || !selectedImage) return;
          
          const deltaX = e.clientX - startX;
          
          // Require significant movement to trigger alignment change
          if (Math.abs(deltaX) > 50) {
            const newAlignment = deltaX > 0 ? 'right' : 'left';
            
            // Only update if alignment actually changed
            if (newAlignment !== currentAlignment) {
              currentAlignment = newAlignment;
              startX = e.clientX; // Reset start position
              
              selectedImage.style.display = 'block';
              selectedImage.style.float = 'none';
              
              if (newAlignment === 'right') {
                selectedImage.style.marginLeft = 'auto';
                selectedImage.style.marginRight = '0';
              } else {
                selectedImage.style.marginLeft = '0';
                selectedImage.style.marginRight = 'auto';
              }
            }
          }
        };
        
        const onMouseUp = () => {
          isDragging = false;
          document.removeEventListener('mousemove', onMouseMove);
          document.removeEventListener('mouseup', onMouseUp);
          if (selectedImage) {
            onChangeRef.current(editor.root.innerHTML);
          }
        };
        
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
      }
    };

    // Delete selected image on Delete key
    const handleKeyDown = (e: KeyboardEvent) => {
      if (selectedImage && (e.key === 'Delete' || e.key === 'Backspace')) {
        e.preventDefault();
        selectedImage.remove();
        deselectImage();
        onChangeRef.current(editor.root.innerHTML);
        toast({ title: 'Obrázek odstraněn', status: 'info', duration: 1500 });
      }
    };

    // Handle scroll to update resize handle position
    const handleScroll = () => {
      if (selectedImage && resizeHandle) {
        const rect = selectedImage.getBoundingClientRect();
        const editorRect = editor.root.getBoundingClientRect();
        const scrollTop = editor.root.scrollTop;
        const scrollLeft = editor.root.scrollLeft;
        resizeHandle.style.left = `${rect.left - editorRect.left + scrollLeft}px`;
        resizeHandle.style.top = `${rect.top - editorRect.top + scrollTop}px`;
        resizeHandle.style.width = `${rect.width}px`;
        resizeHandle.style.height = `${rect.height}px`;
      }
    };

    // Prevent default drag behavior on images
    const handleDragStart = (e: DragEvent) => {
      const target = e.target as HTMLElement;
      if (target.tagName === 'IMG') {
        e.preventDefault();
        e.stopPropagation();
        return false;
      }
    };

    editor.root.addEventListener('click', handleImageClick);
    editor.root.addEventListener('mousedown', handleMouseDown);
    editor.root.addEventListener('scroll', handleScroll);
    editor.root.addEventListener('dragstart', handleDragStart);
    document.addEventListener('keydown', handleKeyDown);

    return () => {
      editor.root.removeEventListener('click', handleImageClick);
      editor.root.removeEventListener('mousedown', handleMouseDown);
      editor.root.removeEventListener('scroll', handleScroll);
      editor.root.removeEventListener('dragstart', handleDragStart);
      document.removeEventListener('keydown', handleKeyDown);
      removeResizeHandle();
      deselectImage();
    };
  }, [readOnly, toast]);

  // Apply filters to selected image
  const applyFiltersToImage = useCallback((img: HTMLImageElement, filters: ImageFilters) => {
    const filterString = `
      brightness(${filters.brightness}%)
      contrast(${filters.contrast}%)
      saturate(${filters.saturation}%)
      blur(${filters.blur}px)
      grayscale(${filters.grayscale}%)
      sepia(${filters.sepia}%)
      hue-rotate(${filters.hueRotate}deg)
    `.trim();
    
    const transform = `
      rotate(${filters.rotation}deg)
      scaleX(${filters.flipH ? -1 : 1})
      scaleY(${filters.flipV ? -1 : 1})
    `.trim();
    
    img.style.filter = filterString;
    img.style.transform = transform;
    img.setAttribute('data-filters', JSON.stringify(filters));
  }, []);

  // Reset filters
  const resetFilters = useCallback(() => {
    const defaultFilters: ImageFilters = {
      brightness: 100,
      contrast: 100,
      saturation: 100,
      blur: 0,
      grayscale: 0,
      sepia: 0,
      hueRotate: 0,
      rotation: 0,
      flipH: false,
      flipV: false,
    };
    setImageFilters(defaultFilters);
    if (selectedImageElement) {
      applyFiltersToImage(selectedImageElement, defaultFilters);
    }
  }, [selectedImageElement, applyFiltersToImage]);

  // Update filter and apply to image (preview only - client-side)
  const updateFilter = useCallback((key: keyof ImageFilters, value: any) => {
    setImageFilters(prev => {
      const newFilters = { ...prev, [key]: value };
      if (selectedImageElement) {
        applyFiltersToImage(selectedImageElement, newFilters);
      }
      return newFilters;
    });
  }, [selectedImageElement, applyFiltersToImage]);

  // Apply filters via backend and replace image
  const [isApplyingFilters, setIsApplyingFilters] = useState(false);
  const applyFiltersToBackend = useCallback(async () => {
    if (!selectedImageElement) return;
    
    try {
      setIsApplyingFilters(true);
      toast({ title: 'Zpracování filtry...', status: 'info', duration: 2000 });
      
      const currentSrc = selectedImageElement.src;
      
      // Prepare filter values for backend (convert from % to -100 to 100 scale)
      const brightness = imageFilters.brightness - 100;
      const contrast = imageFilters.contrast - 100;
      const saturation = imageFilters.saturation - 100;
      
      const res = await quickEditImage({
        image_url: currentSrc,
        width: selectedImageElement.offsetWidth || undefined,
        rotation: imageFilters.rotation,
        flip_h: imageFilters.flipH,
        flip_v: imageFilters.flipV,
        brightness,
        contrast,
        saturation,
        grayscale: imageFilters.grayscale > 0,
        quality: 85,
      });
      
      // Replace image src
      selectedImageElement.src = res.url;
      
      // Reset filters to default since they're now baked into the image
      setImageFilters({
        brightness: 100,
        contrast: 100,
        saturation: 100,
        blur: 0,
        grayscale: 0,
        sepia: 0,
        hueRotate: 0,
        rotation: 0,
        flipH: false,
        flipV: false,
      });
      selectedImageElement.style.filter = '';
      selectedImageElement.style.transform = '';
      selectedImageElement.removeAttribute('data-filters');
      
      // Update editor content
      const editor = quillRef.current?.getEditor();
      if (editor) {
        onChangeRef.current(editor.root.innerHTML);
      }
      
      toast({ title: 'Filtry aplikovány', status: 'success', duration: 2000 });
    } catch (e: any) {
      console.error('Apply filters error:', e);
      toast({ title: 'Aplikace filtrů selhala', description: e?.response?.data?.error || e?.message, status: 'error' });
    } finally {
      setIsApplyingFilters(false);
    }
  }, [selectedImageElement, imageFilters, toast]);

  // Align image
  const alignImage = useCallback((alignment: 'left' | 'center' | 'right') => {
    if (selectedImageElement) {
      selectedImageElement.style.display = 'block';
      selectedImageElement.style.float = 'none';
      
      if (alignment === 'left') {
        selectedImageElement.style.marginLeft = '0';
        selectedImageElement.style.marginRight = 'auto';
      } else if (alignment === 'center') {
        selectedImageElement.style.marginLeft = 'auto';
        selectedImageElement.style.marginRight = 'auto';
      } else if (alignment === 'right') {
        selectedImageElement.style.marginLeft = 'auto';
        selectedImageElement.style.marginRight = '0';
      }
      
      const editor = quillRef.current?.getEditor();
      if (editor) {
        onChangeRef.current(editor.root.innerHTML);
      }
      toast({ title: `Obrázek zarovnán ${alignment === 'left' ? 'vlevo' : alignment === 'center' ? 'na střed' : 'vpravo'}`, status: 'success', duration: 1500 });
    }
  }, [selectedImageElement, toast]);

  // Set manual width
  const applyManualWidth = useCallback(() => {
    if (selectedImageElement && manualWidth) {
      const width = parseInt(manualWidth);
      if (!isNaN(width) && width > 0) {
        const editor = quillRef.current?.getEditor();
        const maxWidth = editor ? editor.root.clientWidth - 40 : 1200;
        const finalWidth = Math.min(Math.max(50, width), maxWidth);
        selectedImageElement.style.width = `${finalWidth}px`;
        selectedImageElement.style.height = 'auto';
        selectedImageElement.style.maxWidth = '100%';
        setImageWidth(finalWidth);
        setManualWidth(finalWidth.toString());
        if (editor) {
          onChangeRef.current(editor.root.innerHTML);
        }
        toast({ title: 'Šířka nastavena', description: `${finalWidth}px`, status: 'success', duration: 1500 });
      } else {
        toast({ title: 'Neplatná šířka', description: 'Zadejte kladné číslo', status: 'warning', duration: 1500 });
      }
    }
  }, [selectedImageElement, manualWidth, toast]);

  // Delete selected image
  const deleteSelectedImage = useCallback(() => {
    if (selectedImageElement) {
      selectedImageElement.remove();
      setSelectedImageElement(null);
      setShowImageToolbar(false);
      const editor = quillRef.current?.getEditor();
      if (editor) {
        onChangeRef.current(editor.root.innerHTML);
      }
      toast({ title: 'Obrázek odstraněn', status: 'info', duration: 1500 });
    }
  }, [selectedImageElement, toast]);

  // Sanitize HTML on change and fix white text colors
  const handleChange = (content: string) => {
    // First sanitize
    let cleaned = DOMPurify.sanitize(content, {
      USE_PROFILES: { html: true },
      ADD_TAGS: ['iframe'],
      ADD_ATTR: ['target', 'rel', 'allow', 'allowfullscreen', 'style', 'data-filters'],
    });
    
    // Replace white and very light colors with dark colors for visibility
    const whiteColorPatterns = [
      /color:\s*rgb\(255,\s*255,\s*255\)/gi,
      /color:\s*rgb\(255\s*,\s*255\s*,\s*255\)/gi,
      /color:\s*white/gi,
      /color:\s*#fff(?:fff)?(?=[;\s"'])/gi,
      /color:\s*rgba?\(255,\s*255,\s*255/gi,
      // Very light grays that are barely visible on white
      /color:\s*rgb\(25[0-4],\s*25[0-4],\s*25[0-4]\)/gi,
      /color:\s*rgb\(24[5-9],\s*24[5-9],\s*24[5-9]\)/gi,
    ];
    
    whiteColorPatterns.forEach(pattern => {
      cleaned = cleaned.replace(pattern, 'color: #1a202c');
    });
    
    onChangeRef.current(cleaned);
  };

  return (
    <Box>
      {/* Editor Controls */}
      {!readOnly && onImageUpload && (
        <HStack mb={2} spacing={2} justify="flex-start" flexWrap="wrap">
          <Button
            size="sm"
            leftIcon={<ImageIcon size={16} />}
            colorScheme="purple"
            onClick={handleImageUpload}
          >
            Vložit obrázek
          </Button>
          <Text fontSize="xs" color="gray.500">
            nebo použijte tlačítko obrázku v nástrojové liště
          </Text>
        </HStack>
      )}

      <Box 
        position="relative"
        borderWidth="1px" 
        borderColor={borderColor}
        borderRadius="md" 
        overflow="hidden"
        bg={bgColor}
        sx={{
            '.ql-toolbar': {
              borderBottom: '1px solid',
              borderColor: borderColor,
              bg: hoverBg,
              display: 'flex',
              flexWrap: 'wrap',
              gap: '4px',
              padding: '12px',
              '& button': {
                color: 'gray.700 !important',
                width: '32px !important',
                height: '32px !important',
                borderRadius: '6px',
                transition: 'all 0.2s',
                '&:hover': {
                  background: 'rgba(49, 130, 206, 0.1) !important',
                  transform: 'scale(1.05)',
                },
                '&.ql-active': {
                  background: 'rgba(49, 130, 206, 0.2) !important',
                  color: '#3182ce !important',
                },
              },
              '& .ql-stroke': {
                stroke: 'gray.700 !important',
              },
              '& .ql-fill': {
                fill: 'gray.700 !important',
              },
              '& .ql-active .ql-stroke': {
                stroke: '#3182ce !important',
              },
              '& .ql-active .ql-fill': {
                fill: '#3182ce !important',
              },
              '& .ql-picker': {
                color: 'gray.700 !important',
              },
              '& .ql-picker-label': {
                borderRadius: '6px',
                padding: '4px 8px',
                transition: 'all 0.2s',
                '&:hover': {
                  background: 'rgba(49, 130, 206, 0.1) !important',
                },
              },
              '& .ql-picker-options': {
                background: 'white',
                borderRadius: '8px',
                boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
                padding: '8px',
              },
            },
            '.ql-container': {
              fontSize: '16px',
              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
              bg: 'white',
            },
            '.ql-editor': {
              minHeight: height,
              maxHeight: '70vh',
              overflowY: 'auto',
              bg: 'white !important',
              color: '#1a202c !important',
              padding: '16px',
              lineHeight: '1.6',
              '&::-webkit-scrollbar': {
                width: '8px',
              },
              '&::-webkit-scrollbar-track': {
                bg: 'gray.100',
              },
              '&::-webkit-scrollbar-thumb': {
                bg: 'gray.400',
                borderRadius: '4px',
              },
              'h1, h2, h3, h4, h5, h6': {
                color: '#1a202c !important',
              },
              'h1': {
                fontSize: '2em !important',
                fontWeight: 'bold !important',
                marginTop: '0.67em !important',
                marginBottom: '0.67em !important',
                lineHeight: '1.2 !important',
              },
              'h2': {
                fontSize: '1.5em !important',
                fontWeight: 'bold !important',
                marginTop: '0.83em !important',
                marginBottom: '0.83em !important',
                lineHeight: '1.3 !important',
              },
              'h3': {
                fontSize: '1.17em !important',
                fontWeight: 'bold !important',
                marginTop: '1em !important',
                marginBottom: '1em !important',
                lineHeight: '1.4 !important',
              },
              'p, li, span, div': {
                color: '#2d3748 !important',
              },
              'strong, b': {
                color: '#1a202c !important',
                fontWeight: 'bold !important',
              },
              'a': {
                color: '#3182ce !important',
                textDecoration: 'underline',
              },
              'blockquote': {
                borderLeft: '4px solid #3182ce',
                paddingLeft: '16px',
                margin: '1em 0',
                color: '#4a5568 !important',
                fontStyle: 'italic',
                backgroundColor: '#f7fafc',
                padding: '12px 16px',
                borderRadius: '4px',
              },
              'code': {
                backgroundColor: '#f7fafc',
                padding: '2px 6px',
                borderRadius: '3px',
                color: '#e53e3e !important',
                fontFamily: 'monospace',
              },
              'pre': {
                backgroundColor: '#2d3748',
                color: '#f7fafc !important',
                padding: '16px',
                borderRadius: '6px',
                overflow: 'auto',
              },
              'ul, ol': {
                paddingLeft: '1.5em',
                margin: '0.5em 0',
              },
              img: {
                cursor: 'pointer',
                maxWidth: '100%',
                height: 'auto',
                display: 'block',
                margin: '12px 0',
                transition: 'all 0.2s ease',
                borderRadius: '4px',
                userSelect: 'none',
                pointerEvents: 'auto',
                WebkitUserDrag: 'none',
                userDrag: 'none',
                '&:hover': {
                  opacity: 0.95,
                  transform: 'scale(1.01)',
                },
              },
            },
            '.ql-editor.ql-blank::before': {
              color: '#a0aec0 !important',
              fontStyle: 'italic',
            },
            // Prevent white and very light text colors
            '.ql-editor [style*="color: rgb(255, 255, 255)"]': {
              color: '#1a202c !important',
            },
            '.ql-editor [style*="color: white"]': {
              color: '#1a202c !important',
            },
            '.ql-editor [style*="color: #fff"]': {
              color: '#1a202c !important',
            },
            '.ql-editor [style*="color: #ffffff"]': {
              color: '#1a202c !important',
            },
            '.ql-editor [style*="color: rgb(255,255,255)"]': {
              color: '#1a202c !important',
            },
          }}
        >
          {isMounted && (
            <ReactQuill
              theme="snow"
              value={value}
              onChange={handleChange}
              readOnly={readOnly}
              placeholder={placeholder}
              ref={quillRef}
              modules={quillModules}
            />
          )}
        </Box>

      {!readOnly && (
        <Text fontSize="xs" color="gray.500" mt={2}>
          💡 <strong>Tip:</strong> Klikněte na obrázek pro výběr. Poté můžete: • Přetáhnout pro zarovnání • Změnit velikost tažením modrého bodu • Upravit filtry a transformace • Stisknout Delete pro smazání
        </Text>
      )}

      {/* Floating Image Editing Toolbar */}
      {showImageToolbar && selectedImageElement && !readOnly && (
        <Box
          ref={toolbarRef}
          position="absolute"
          top={`${toolbarPosition.top}px`}
          left={`${toolbarPosition.left}px`}
          bg={toolbarBg}
          borderWidth="2px"
          borderColor="blue.400"
          borderRadius="lg"
          boxShadow="2xl"
          p={3}
          zIndex={9999}
          minW="320px"
          maxW="380px"
          maxH="80vh"
          overflowY="auto"
          pointerEvents="auto"
          onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}
          onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
          onMouseUp={(e) => { e.preventDefault(); e.stopPropagation(); }}
          css={{
            '&::-webkit-scrollbar': {
              width: '6px',
            },
            '&::-webkit-scrollbar-track': {
              background: '#f1f1f1',
            },
            '&::-webkit-scrollbar-thumb': {
              background: '#888',
              borderRadius: '3px',
            },
            '&::-webkit-scrollbar-thumb:hover': {
              background: '#555',
            },
          }}
        >
          <VStack align="stretch" spacing={3}>
            {/* Toolbar Header */}
            <HStack justify="space-between">
              <HStack spacing={2}>
                <Settings size={16} />
                <Text fontWeight="bold" fontSize="sm">Úprava obrázku</Text>
              </HStack>
              <IconButton
                aria-label="Close"
                icon={<X size={16} />}
                size="xs"
                onClick={() => setShowImageToolbar(false)}
                variant="ghost"
              />
            </HStack>

            {/* Alignment Buttons */}
            <VStack align="stretch" spacing={2}>
              <Text fontSize="xs" fontWeight="semibold" color="gray.600">Zarovnání</Text>
              <HStack spacing={2} justify="stretch">
                <Tooltip label="Zarovnat vlevo">
                  <IconButton
                    aria-label="Align left"
                    icon={<AlignLeft size={16} />}
                    size="sm"
                    onClick={() => alignImage('left')}
                    colorScheme="teal"
                    variant="outline"
                    flex={1}
                  />
                </Tooltip>
                <Tooltip label="Zarovnat na střed">
                  <IconButton
                    aria-label="Align center"
                    icon={<AlignCenter size={16} />}
                    size="sm"
                    onClick={() => alignImage('center')}
                    colorScheme="teal"
                    variant="outline"
                    flex={1}
                  />
                </Tooltip>
                <Tooltip label="Zarovnat vpravo">
                  <IconButton
                    aria-label="Align right"
                    icon={<AlignRight size={16} />}
                    size="sm"
                    onClick={() => alignImage('right')}
                    colorScheme="teal"
                    variant="outline"
                    flex={1}
                  />
                </Tooltip>
              </HStack>
            </VStack>

            {/* Width Control */}
            <VStack align="stretch" spacing={2}>
              <Text fontSize="xs" fontWeight="semibold" color="gray.600">Šířka obrázku</Text>
              <HStack spacing={2}>
                <Input
                  size="sm"
                  type="number"
                  value={manualWidth}
                  onChange={(e) => setManualWidth(e.target.value)}
                  onKeyPress={(e) => e.key === 'Enter' && applyManualWidth()}
                  placeholder="Šířka v px"
                  min={50}
                />
                <Button
                  size="sm"
                  colorScheme="blue"
                  onClick={applyManualWidth}
                  minW="80px"
                >
                  Nastavit
                </Button>
              </HStack>
              <Text fontSize="xs" color="gray.500">Aktuální: {imageWidth}px</Text>
            </VStack>

            {/* Transform Buttons */}
            <VStack align="stretch" spacing={2}>
              <Text fontSize="xs" fontWeight="semibold" color="gray.600">Transformace</Text>
              <HStack spacing={2} flexWrap="wrap">
                <Tooltip label="Otočit doleva">
                  <IconButton
                    aria-label="Rotate left"
                    icon={<RotateCcw size={16} />}
                    size="sm"
                    onClick={() => updateFilter('rotation', (imageFilters.rotation - 90) % 360)}
                    colorScheme="blue"
                    variant="outline"
                  />
                </Tooltip>
                <Tooltip label="Otočit doprava">
                  <IconButton
                    aria-label="Rotate right"
                    icon={<RotateCw size={16} />}
                    size="sm"
                    onClick={() => updateFilter('rotation', (imageFilters.rotation + 90) % 360)}
                    colorScheme="blue"
                    variant="outline"
                  />
                </Tooltip>
                <Tooltip label="Převrátit horizontálně">
                  <IconButton
                    aria-label="Flip horizontal"
                    icon={<FlipHorizontal size={16} />}
                    size="sm"
                    onClick={() => updateFilter('flipH', !imageFilters.flipH)}
                    colorScheme="blue"
                    variant={imageFilters.flipH ? 'solid' : 'outline'}
                  />
                </Tooltip>
                <Tooltip label="Převrátit vertikálně">
                  <IconButton
                    aria-label="Flip vertical"
                    icon={<FlipVertical size={16} />}
                    size="sm"
                    onClick={() => updateFilter('flipV', !imageFilters.flipV)}
                    colorScheme="blue"
                    variant={imageFilters.flipV ? 'solid' : 'outline'}
                  />
                </Tooltip>
                <Tooltip label="Smazat obrázek">
                  <IconButton
                    aria-label="Delete image"
                    icon={<Trash2 size={16} />}
                    size="sm"
                    onClick={deleteSelectedImage}
                    colorScheme="red"
                    variant="outline"
                  />
                </Tooltip>
                <Tooltip label="Resetovat filtry">
                  <IconButton
                    aria-label="Reset filters"
                    icon={<RotateCcw size={16} />}
                    size="sm"
                    onClick={resetFilters}
                    colorScheme="gray"
                    variant="outline"
                  />
                </Tooltip>
              </HStack>
            </VStack>

            {/* Filter Sliders */}
            <VStack align="stretch" spacing={2}>
              <FormControl>
                <HStack justify="space-between">
                  <HStack spacing={1}>
                    <Sun size={14} />
                    <FormLabel fontSize="xs" mb={0}>Jas</FormLabel>
                  </HStack>
                  <Text fontSize="xs" color="gray.500">{imageFilters.brightness}%</Text>
                </HStack>
                <input
                  type="range"
                  min="0"
                  max="200"
                  value={imageFilters.brightness}
                  onChange={(e) => updateFilter('brightness', Number(e.target.value))}
                  style={{ width: '100%' }}
                />
              </FormControl>

              <FormControl>
                <HStack justify="space-between">
                  <HStack spacing={1}>
                    <Contrast size={14} />
                    <FormLabel fontSize="xs" mb={0}>Kontrast</FormLabel>
                  </HStack>
                  <Text fontSize="xs" color="gray.500">{imageFilters.contrast}%</Text>
                </HStack>
                <input
                  type="range"
                  min="0"
                  max="200"
                  value={imageFilters.contrast}
                  onChange={(e) => updateFilter('contrast', Number(e.target.value))}
                  style={{ width: '100%' }}
                />
              </FormControl>

              <FormControl>
                <HStack justify="space-between">
                  <HStack spacing={1}>
                    <Droplets size={14} />
                    <FormLabel fontSize="xs" mb={0}>Sytost</FormLabel>
                  </HStack>
                  <Text fontSize="xs" color="gray.500">{imageFilters.saturation}%</Text>
                </HStack>
                <input
                  type="range"
                  min="0"
                  max="200"
                  value={imageFilters.saturation}
                  onChange={(e) => updateFilter('saturation', Number(e.target.value))}
                  style={{ width: '100%' }}
                />
              </FormControl>

              <FormControl>
                <HStack justify="space-between">
                  <HStack spacing={1}>
                    <Eye size={14} />
                    <FormLabel fontSize="xs" mb={0}>Rozostření</FormLabel>
                  </HStack>
                  <Text fontSize="xs" color="gray.500">{imageFilters.blur}px</Text>
                </HStack>
                <input
                  type="range"
                  min="0"
                  max="10"
                  step="0.5"
                  value={imageFilters.blur}
                  onChange={(e) => updateFilter('blur', Number(e.target.value))}
                  style={{ width: '100%' }}
                />
              </FormControl>
            </VStack>

            {/* Quick Filters */}
            <HStack spacing={2} flexWrap="wrap">
              <Button
                size="xs"
                onClick={() => {
                  updateFilter('grayscale', imageFilters.grayscale === 100 ? 0 : 100);
                }}
                colorScheme={imageFilters.grayscale === 100 ? 'purple' : 'gray'}
                variant={imageFilters.grayscale === 100 ? 'solid' : 'outline'}
                leftIcon={<Filter size={12} />}
              >
                Černobílá
              </Button>
              <Button
                size="xs"
                onClick={() => {
                  updateFilter('sepia', imageFilters.sepia === 100 ? 0 : 100);
                }}
                colorScheme={imageFilters.sepia === 100 ? 'orange' : 'gray'}
                variant={imageFilters.sepia === 100 ? 'solid' : 'outline'}
                leftIcon={<Sparkles size={12} />}
              >
                Sepia
              </Button>
            </HStack>

            {/* Apply All Changes Button */}
            <Button
              colorScheme="green"
              size="md"
              width="full"
              onClick={applyFiltersToBackend}
              isLoading={isApplyingFilters}
              loadingText="Zpracování..."
              leftIcon={<Check size={16} />}
            >
              Aplikovat všechny změny
            </Button>
            <Text fontSize="xs" color="gray.500" textAlign="center">
              💡 Filtry jsou pouze náhled. Klikněte pro trvalou aplikaci.
            </Text>
          </VStack>
        </Box>
      )}

      {/* Crop Modal */}
      {/* Image Preview Modal */}
      <Modal isOpen={isPreviewOpen} onClose={() => setIsPreviewOpen(false)} size="6xl" isCentered>
        <ModalOverlay bg="blackAlpha.800" backdropFilter="blur(4px)" />
        <ModalContent maxW="90vw" maxH="90vh" bg="transparent" boxShadow="none">
          <ModalCloseButton color="white" bg="blackAlpha.600" _hover={{ bg: 'blackAlpha.700' }} />
          <ModalBody display="flex" alignItems="center" justifyContent="center" p={0}>
            {previewImage && (
              <ChakraImage
                src={previewImage}
                alt="Preview"
                maxW="100%"
                maxH="90vh"
                objectFit="contain"
                borderRadius="md"
                boxShadow="2xl"
              />
            )}
          </ModalBody>
        </ModalContent>
      </Modal>

      {/* Crop Modal */}
      <Modal isOpen={cropOpen} onClose={() => { setCropOpen(false); setCropSrc(null); }} size="6xl">
        <ModalOverlay bg="blackAlpha.700" backdropFilter="blur(4px)" />
        <ModalContent maxW="90vw" maxH="90vh">
          <ModalHeader>Oříznout a upravit obrázek</ModalHeader>
          <ModalCloseButton />
          <ModalBody maxH="calc(90vh - 140px)" overflowY="auto" overflowX="hidden">
            <VStack align="stretch" spacing={4}>
              {cropSrc && (
                <Box 
                  display="flex" 
                  justifyContent="center" 
                  alignItems="center" 
                  p={4}
                  bg="gray.50"
                  borderRadius="md"
                >
                  <ReactCrop 
                    crop={crop} 
                    onChange={(c: Crop) => setCrop(c)}
                    minWidth={50}
                    minHeight={50}
                    keepSelection
                  >
                    <img 
                      ref={imgRef as any} 
                      src={cropSrc || ''} 
                      alt="Crop preview" 
                      style={{ 
                        maxWidth: '100%', 
                        maxHeight: '60vh',
                        display: 'block',
                        margin: 'auto'
                      }} 
                    />
                  </ReactCrop>
                </Box>
              )}
              
              <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
                <FormControl>
                  <FormLabel fontSize="sm">Max. šířka (px)</FormLabel>
                  <HStack>
                    <Input 
                      type="number" 
                      value={cropMaxWidth} 
                      onChange={(e) => setCropMaxWidth(Math.max(100, Math.min(3000, Number(e.target.value))))}
                      min={100}
                      max={3000}
                      step={100}
                      size="sm"
                    />
                    <Text fontSize="sm" color="gray.600" whiteSpace="nowrap">px</Text>
                  </HStack>
                  <FormHelperText fontSize="xs">
                    Větší obrázky budou zmenšeny (optimalizace výkonu)
                  </FormHelperText>
                </FormControl>
                
                <FormControl>
                  <FormLabel fontSize="sm">Kvalita JPEG</FormLabel>
                  <HStack>
                    <Input 
                      type="number" 
                      value={cropQuality} 
                      onChange={(e) => setCropQuality(Math.max(1, Math.min(100, Number(e.target.value))))}
                      min={1}
                      max={100}
                      step={5}
                      size="sm"
                    />
                    <Text fontSize="sm" color="gray.600" whiteSpace="nowrap">%</Text>
                  </HStack>
                  <FormHelperText fontSize="xs">
                    85% je doporučená hodnota (menší velikost souboru)
                  </FormHelperText>
                </FormControl>
              </SimpleGrid>
              
              <Text fontSize="sm" color="gray.600">
                💡 Přetáhněte rohy a hrany modré oblasti pro výběr části obrázku k oříznutí.
              </Text>
            </VStack>
          </ModalBody>
          <ModalFooter>
            <Button variant="ghost" mr={3} onClick={() => { setCropOpen(false); setCropSrc(null); setCropFile(null); }} isDisabled={cropProcessing}>
              Zrušit
            </Button>
            <Button colorScheme="blue" onClick={confirmCropAndInsert} isLoading={cropProcessing} loadingText="Zpracování...">
              Oříznout a vložit
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </Box>
  );
};

export default CustomRichEditor;
