import React, { useRef, useCallback, useState, useEffect } 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';

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 [editorMode, setEditorMode] = useState<'rich' | 'html'>('rich');
  
  // Crop modal state
  const [cropOpen, setCropOpen] = useState(false);
  const [cropSrc, setCropSrc] = useState<string | 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 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 });

  // Define toolbar configurations
  const toolbarConfigs = {
    full: [
      [{ header: [1, 2, 3, false] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ color: [] }, { background: [] }],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ align: [] }],
      ['link', 'image', 'video'],
      ['blockquote', 'code-block'],
      ['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 getToolbarConfig = () => {
    return toolbarConfigs[toolbar] || toolbarConfigs.full;
  };

  // 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;
      const reader = new FileReader();
      reader.onload = () => {
        setCropSrc(reader.result as string);
        setCropOpen(true);
      };
      reader.readAsDataURL(file);
    };
    input.click();
  }, []);

  // 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 {
      if (!imgRef.current) {
        toast({ title: 'Chyba', description: 'Obrázek není načten', status: 'error' });
        return;
      }
      
      if (!crop.width || !crop.height || crop.width <= 0 || crop.height <= 0) {
        toast({ title: 'Chyba', description: 'Vyberte oblast k oříznutí', status: 'warning' });
        return;
      }
      
      const img = imgRef.current;
      const percToPx = (val: number, size: number) => (crop.unit === '%' ? (val / 100) * size : val);
      const cropPx = {
        x: Math.max(0, percToPx(crop.x || 0, img.width)),
        y: Math.max(0, percToPx(crop.y || 0, img.height)),
        width: Math.min(img.width, percToPx(crop.width || img.width, img.width)),
        height: Math.min(img.height, percToPx(crop.height || img.height, img.height)),
      };
      
      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;
      }
      
      const blob = await getCroppedBlob(img, cropPx);
      const file = new File([blob], 'cropped-image.jpg', { type: 'image/jpeg' });
      
      if (onImageUpload) {
        toast({ title: 'Nahrávám obrázek...', status: 'info', duration: 2000 });
        const res = await onImageUpload(file);
        
        if (!res.url) {
          throw new Error('Upload failed - no URL returned');
        }
        
        const quill = quillRef.current?.getEditor();
        if (quill) {
          const range = quill.getSelection(true);
          const index = range ? range.index : quill.getLength();
          quill.insertEmbed(index, 'image', res.url, 'user');
          quill.setSelection(index + 1, 0);
          toast({ title: 'Obrázek vložen', status: 'success', duration: 2000 });
        }
      }
    } catch (e: any) {
      console.error('Crop and insert error:', e);
      toast({ title: 'Zpracování obrázku selhalo', description: e?.message || 'Chyba', status: 'error' });
    } finally {
      setCropOpen(false);
      setCropSrc(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();
      
      const handle = document.createElement('div');
      handle.className = 'custom-image-resize-handle';
      handle.style.cssText = `
        position: absolute;
        width: 14px;
        height: 14px;
        background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%);
        border: 2px solid white;
        border-radius: 50%;
        cursor: nwse-resize;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        transition: transform 0.2s;
      `;
      
      const updateHandlePosition = () => {
        const rect = img.getBoundingClientRect();
        const editorRect = editor.root.getBoundingClientRect();
        handle.style.left = `${rect.right - editorRect.left - 7}px`;
        handle.style.top = `${rect.bottom - editorRect.top - 7}px`;
      };
      
      updateHandlePosition();
      editor.root.style.position = 'relative';
      editor.root.appendChild(handle);
      resizeHandle = handle;
      
      handle.addEventListener('mouseenter', () => {
        handle.style.transform = 'scale(1.2)';
      });
      
      handle.addEventListener('mouseleave', () => {
        handle.style.transform = 'scale(1)';
      });
      
      handle.addEventListener('mousedown', (e) => {
        e.preventDefault();
        e.stopPropagation();
        isResizing = true;
        startX = e.clientX;
        startWidth = img.offsetWidth;
        
        const onMouseMove = (e: MouseEvent) => {
          if (!isResizing) return;
          const deltaX = e.clientX - startX;
          const newWidth = Math.max(50, startWidth + deltaX);
          img.style.width = `${newWidth}px`;
          img.style.maxWidth = '100%';
          updateHandlePosition();
        };
        
        const onMouseUp = () => {
          isResizing = false;
          document.removeEventListener('mousemove', onMouseMove);
          document.removeEventListener('mouseup', onMouseUp);
          onChange(editor.root.innerHTML);
        };
        
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
      });
      
      return handle;
    };

    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)';
      createResizeHandle(img);
      
      // Set selected image state and load filters
      setSelectedImageElement(img);
      const filtersData = img.getAttribute('data-filters');
      if (filtersData) {
        try {
          const savedFilters = JSON.parse(filtersData);
          setImageFilters(savedFilters);
        } catch {
          // If parsing fails, use defaults
        }
      }
      
      // Show toolbar and position it
      const rect = img.getBoundingClientRect();
      const editorRect = editor.root.getBoundingClientRect();
      setToolbarPosition({
        top: rect.top - editorRect.top - 50,
        left: rect.left - editorRect.left,
      });
      setShowImageToolbar(true);
    };

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

    const handleImageClick = (e: Event) => {
      const target = e.target as HTMLElement;
      if (target.tagName === 'IMG') {
        e.preventDefault();
        e.stopPropagation();
        selectImage(target as HTMLImageElement);
      } else if (!target.classList.contains('custom-image-resize-handle')) {
        deselectImage();
      }
    };

    const handleMouseDown = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      if (target.tagName === 'IMG' && selectedImage === target) {
        e.preventDefault();
        isDragging = true;
        startX = e.clientX;
        startY = e.clientY;
        
        const onMouseMove = (e: MouseEvent) => {
          if (!isDragging || !selectedImage) return;
          
          const deltaX = e.clientX - startX;
          
          if (Math.abs(deltaX) > 20) {
            if (deltaX > 0) {
              selectedImage.style.display = 'block';
              selectedImage.style.marginLeft = 'auto';
              selectedImage.style.marginRight = '0';
            } else {
              selectedImage.style.display = 'block';
              selectedImage.style.marginLeft = '0';
              selectedImage.style.marginRight = 'auto';
            }
          }
        };
        
        const onMouseUp = () => {
          isDragging = false;
          document.removeEventListener('mousemove', onMouseMove);
          document.removeEventListener('mouseup', onMouseUp);
          if (selectedImage) {
            onChange(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();
        onChange(editor.root.innerHTML);
        toast({ title: 'Obrázek odstraněn', status: 'info', duration: 1500 });
      }
    };

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

    return () => {
      editor.root.removeEventListener('click', handleImageClick);
      editor.root.removeEventListener('mousedown', handleMouseDown);
      document.removeEventListener('keydown', handleKeyDown);
      removeResizeHandle();
      deselectImage();
    };
  }, [value, onChange, 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
  const updateFilter = useCallback((key: keyof ImageFilters, value: any) => {
    setImageFilters(prev => {
      const newFilters = { ...prev, [key]: value };
      if (selectedImageElement) {
        applyFiltersToImage(selectedImageElement, newFilters);
      }
      return newFilters;
    });
  }, [selectedImageElement, applyFiltersToImage]);

  // Sanitize HTML on change
  const handleChange = (content: string) => {
    const cleaned = DOMPurify.sanitize(content, {
      USE_PROFILES: { html: true },
      ADD_TAGS: ['iframe'],
      ADD_ATTR: ['target', 'rel', 'allow', 'allowfullscreen', 'style', 'data-filters'],
    });
    onChange(cleaned);
  };

  return (
    <Box>
      {/* Editor Controls */}
      {!readOnly && (
        <HStack mb={2} spacing={2} justify="space-between" flexWrap="wrap">
          <ButtonGroup size="sm" isAttached variant="outline">
            <Button 
              leftIcon={<Type size={16} />}
              variant={editorMode === 'rich' ? 'solid' : 'outline'}
              colorScheme={editorMode === 'rich' ? 'blue' : 'gray'}
              onClick={() => setEditorMode('rich')}
            >
              Editor
            </Button>
            <Button 
              leftIcon={<Code size={16} />}
              variant={editorMode === 'html' ? 'solid' : 'outline'}
              colorScheme={editorMode === 'html' ? 'blue' : 'gray'}
              onClick={() => setEditorMode('html')}
            >
              HTML
            </Button>
          </ButtonGroup>
          
          {editorMode === 'rich' && onImageUpload && (
            <Button
              size="sm"
              leftIcon={<ImageIcon size={16} />}
              colorScheme="purple"
              onClick={handleImageUpload}
            >
              Vložit obrázek
            </Button>
          )}
        </HStack>
      )}

      {editorMode === 'rich' ? (
        <Box 
          position="relative"
          borderWidth="1px" 
          borderColor={borderColor}
          borderRadius="md" 
          overflow="hidden"
          bg={bgColor}
          sx={{
            '.ql-toolbar': {
              borderBottom: '1px solid',
              borderColor: borderColor,
              bg: hoverBg,
              '& button': {
                color: 'gray.700 !important',
              },
              '& .ql-stroke': {
                stroke: 'gray.700 !important',
              },
              '& .ql-fill': {
                fill: 'gray.700 !important',
              },
            },
            '.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: 'gray.800 !important',
              '&::-webkit-scrollbar': {
                width: '8px',
              },
              '&::-webkit-scrollbar-track': {
                bg: 'gray.100',
              },
              '&::-webkit-scrollbar-thumb': {
                bg: 'gray.400',
                borderRadius: '4px',
              },
              img: {
                cursor: 'pointer',
                maxWidth: '100%',
                height: 'auto',
                display: 'block',
                margin: '12px 0',
                transition: 'all 0.2s ease',
                borderRadius: '4px',
                userSelect: 'none',
                '&:hover': {
                  opacity: 0.95,
                  transform: 'scale(1.01)',
                },
              },
            },
            '.ql-editor.ql-blank::before': {
              color: 'gray.400 !important',
              fontStyle: 'italic',
            },
          }}
        >
          <ReactQuill
            theme="snow"
            value={value}
            onChange={handleChange}
            readOnly={readOnly}
            placeholder={placeholder}
            ref={quillRef}
            modules={{
              toolbar: {
                container: getToolbarConfig(),
                handlers: {
                  image: onImageUpload ? handleImageUpload : undefined,
                },
              },
              clipboard: {
                matchVisual: false,
              },
            }}
          />
        </Box>
      ) : (
        <Box 
          as="textarea"
          value={value}
          onChange={(e: any) => onChange(e.target.value)}
          fontFamily="mono"
          fontSize="sm"
          p={4}
          borderWidth="1px"
          borderColor={borderColor}
          borderRadius="md"
          bg={bgColor}
          resize="vertical"
          minH={height}
          maxH="70vh"
          width="100%"
        />
      )}

      {!readOnly && editorMode === 'rich' && (
        <Text fontSize="xs" color="gray.500" mt={2}>
          💡 Tip: Klikněte na obrázek pro výběr a úpravu. Používejte nástrojovou lištu pro filtry a transformace.
        </Text>
      )}

      {/* Floating Image Editing Toolbar */}
      {showImageToolbar && selectedImageElement && !readOnly && (
        <Box
          position="absolute"
          top={`${toolbarPosition.top}px`}
          left={`${toolbarPosition.left}px`}
          bg={toolbarBg}
          borderWidth="1px"
          borderColor={toolbarBorder}
          borderRadius="lg"
          boxShadow="lg"
          p={3}
          zIndex={1500}
          minW="320px"
          maxW="400px"
        >
          <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>

            {/* Transform Buttons */}
            <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="Resetovat vše">
                <IconButton
                  aria-label="Reset filters"
                  icon={<RotateCcw size={16} />}
                  size="sm"
                  onClick={resetFilters}
                  colorScheme="red"
                  variant="outline"
                />
              </Tooltip>
            </HStack>

            {/* 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>
          </VStack>
        </Box>
      )}

      {/* 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); }}>
              Zrušit
            </Button>
            <Button colorScheme="blue" onClick={confirmCropAndInsert}>
              Oříznout a vložit
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </Box>
  );
};

export default CustomRichEditor;