class PaintManager {
  constructor(canvas, ctx) {
    this.canvas = canvas;
    this.ctx = ctx;
    this.painting = false;
    this.lastX = 0;
    this.lastY = 0;
    this.brushColor = "#000000";
    this.brushSize = 2;
    this.currentTool = null;
    this.textElements = [];
    this.lineSegments = [];
    this.isTextPlacementMode = false;
    this.draggingCanvasContext = null;
    this.selectedTextElement = null;
    this.isDraggingText = false;
    this.dragOffsetX = 0;
    this.dragOffsetY = 0;
    this.textBold = false;
    this.textItalic = false;

    // Brush cursor indicator
    this.brushCursor = null;

    // Undo/Redo functionality
    this.historyStack = [];
    this.historyStep = -1;
    this.MAX_HISTORY = 50;

    // Bind event handlers
    this.startPaint = this.startPaint.bind(this);
    this.paint = this.paint.bind(this);
    this.endPaint = this.endPaint.bind(this);
    this.handleCanvasClick = this.handleCanvasClick.bind(this);
    this.onTouchStart = this.onTouchStart.bind(this);
    this.onTouchMove = this.onTouchMove.bind(this);
    this.onTouchEnd = this.onTouchEnd.bind(this);
    this.handleKeyboard = this.handleKeyboard.bind(this);
    this.updateBrushCursor = this.updateBrushCursor.bind(this);
    this.hideBrushCursor = this.hideBrushCursor.bind(this);
  }

  buildFontString(fontFamily, fontSize, bold = false, italic = false) {
    const fontParts = [];
    if (italic) fontParts.push('italic');
    if (bold) fontParts.push('bold');
    fontParts.push(`${fontSize}px`);
    fontParts.push(fontFamily);
    return fontParts.join(' ');
  }

  parseInlineMarkdown(text, baseStyle = {}) {
    const patterns = [
      {
        regex: /`([^`]+)`/g,
        style: { code: true, fontFamily: 'monospace', background: 'rgba(0, 0, 0, 0.08)' }
      },
      { regex: /\*\*([^*]+)\*\*/g, style: { bold: true } },
      { regex: /__([^_]+)__/g, style: { bold: true } },
      { regex: /\*([^*]+)\*/g, style: { italic: true } },
      { regex: /_([^_]+)_/g, style: { italic: true } },
      { regex: /~~([^~]+)~~/g, style: { strike: true, color: '#666666' } }
    ];

    let segments = [{ text, style: { ...baseStyle } }];

    patterns.forEach(({ regex, style }) => {
      const nextSegments = [];
      segments.forEach((segment) => {
        if (!segment.text) return;
        regex.lastIndex = 0;
        let lastIndex = 0;
        let match = regex.exec(segment.text);
        let hasMatch = false;

        while (match) {
          hasMatch = true;
          if (match.index > lastIndex) {
            nextSegments.push({
              text: segment.text.slice(lastIndex, match.index),
              style: { ...segment.style }
            });
          }
          nextSegments.push({
            text: match[1],
            style: { ...segment.style, ...style }
          });
          lastIndex = match.index + match[0].length;
          match = regex.exec(segment.text);
        }

        if (!hasMatch) {
          nextSegments.push(segment);
          return;
        }

        if (lastIndex < segment.text.length) {
          nextSegments.push({
            text: segment.text.slice(lastIndex),
            style: { ...segment.style }
          });
        }
      });
      segments = nextSegments;
    });

    return segments.filter((segment) => segment.text);
  }

  parseMarkdownText(markdownText, fontFamily, fontSize, color, defaultBold = false, defaultItalic = false) {
    const normalizedText = String(markdownText || '').replace(/\r\n/g, '\n');
    const lines = normalizedText.split('\n');
    const blocks = [];

    lines.forEach((rawLine) => {
      const line = rawLine || '';
      const trimmed = line.trim();

      if (!trimmed) {
        blocks.push({ type: 'blank', height: Math.max(12, Math.round(fontSize * 0.75)) });
        return;
      }

      let type = 'paragraph';
      let content = line;
      let level = 0;
      let indent = 0;
      let prefix = '';

      const headingMatch = trimmed.match(/^(#{1,6})\s+(.*)$/);
      const quoteMatch = line.match(/^\s*>\s?(.*)$/);
      const unorderedListMatch = line.match(/^(\s*)[-*+]\s+(.*)$/);
      const orderedListMatch = line.match(/^(\s*)(\d+)\.\s+(.*)$/);

      if (headingMatch) {
        type = 'heading';
        level = headingMatch[1].length;
        content = headingMatch[2];
      } else if (quoteMatch) {
        type = 'quote';
        content = quoteMatch[1];
      } else if (unorderedListMatch) {
        type = 'list';
        content = unorderedListMatch[2];
        indent = Math.floor((unorderedListMatch[1] || '').length / 2);
        prefix = '•';
      } else if (orderedListMatch) {
        type = 'ordered-list';
        content = orderedListMatch[3];
        indent = Math.floor((orderedListMatch[1] || '').length / 2);
        prefix = `${orderedListMatch[2]}.`;
      }

      const scale = type === 'heading' ? Math.max(1, 1.65 - (level - 1) * 0.16) : 1;
      const blockFontSize = Math.max(10, Math.round(fontSize * scale));
      const baseStyle = {
        color: type === 'quote' ? '#444444' : color,
        fontFamily,
        fontSize: blockFontSize,
        bold: type === 'heading' || defaultBold,
        italic: defaultItalic
      };

      blocks.push({
        type,
        level,
        indent,
        prefix,
        fontSize: blockFontSize,
        lineHeight: Math.max(14, Math.round(blockFontSize * (type === 'heading' ? 1.45 : 1.35))),
        segments: this.parseInlineMarkdown(content, baseStyle)
      });
    });

    return blocks;
  }

  measureMarkdownBlock(block) {
    if (block.type === 'blank') {
      return { width: 0, height: block.height || 12 };
    }

    const indentWidth = block.indent ? block.indent * 18 : 0;
    let prefixWidth = 0;
    if (block.prefix) {
      this.ctx.font = this.buildFontString('Arial', block.fontSize, true, false);
      prefixWidth = this.ctx.measureText(block.prefix).width + 8;
    }

    let contentWidth = 0;
    block.segments.forEach((segment) => {
      this.ctx.font = this.buildFontString(
        segment.style.fontFamily || 'Arial',
        segment.style.fontSize || block.fontSize,
        !!segment.style.bold,
        !!segment.style.italic
      );
      contentWidth += this.ctx.measureText(segment.text).width;
    });

    return {
      width: indentWidth + prefixWidth + contentWidth + (block.type === 'quote' ? 16 : 0),
      height: block.lineHeight
    };
  }

  measureTextElement(textElement) {
    if (textElement.type === 'markdown' && Array.isArray(textElement.blocks)) {
      let width = 0;
      let height = 0;

      textElement.blocks.forEach((block) => {
        const size = this.measureMarkdownBlock(block);
        width = Math.max(width, size.width);
        height += size.height;
      });

      return {
        width,
        height,
        top: textElement.y - Math.max(14, textElement.baseFontSize || 16),
        left: textElement.x
      };
    }

    this.ctx.font = textElement.font;
    const textWidth = this.ctx.measureText(textElement.text).width;
    const fontSizeMatch = textElement.font.match(/(\d+)px/);
    const textHeight = (fontSizeMatch ? parseInt(fontSizeMatch[1], 10) : 14) * 1.2;

    return {
      width: textWidth,
      height: textHeight,
      top: textElement.y - textHeight,
      left: textElement.x
    };
  }

  renderTextElement(textElement) {
    if (textElement.type === 'markdown' && Array.isArray(textElement.blocks)) {
      let currentY = textElement.y;

      textElement.blocks.forEach((block) => {
        if (block.type === 'blank') {
          currentY += block.height || 12;
          return;
        }

        let currentX = textElement.x + (block.indent ? block.indent * 18 : 0);
        if (block.type === 'quote') {
          this.ctx.strokeStyle = '#999999';
          this.ctx.lineWidth = 2;
          this.ctx.beginPath();
          this.ctx.moveTo(textElement.x + 6, currentY - block.lineHeight + 4);
          this.ctx.lineTo(textElement.x + 6, currentY + 2);
          this.ctx.stroke();
          currentX += 16;
        }

        if (block.prefix) {
          this.ctx.font = this.buildFontString('Arial', block.fontSize, true, false);
          this.ctx.fillStyle = textElement.color;
          this.ctx.fillText(block.prefix, currentX, currentY);
          currentX += this.ctx.measureText(block.prefix).width + 8;
        }

        block.segments.forEach((segment) => {
          const fontSize = segment.style.fontSize || block.fontSize;
          this.ctx.font = this.buildFontString(
            segment.style.fontFamily || textElement.fontFamily || 'Arial',
            fontSize,
            !!segment.style.bold,
            !!segment.style.italic
          );

          const segmentWidth = this.ctx.measureText(segment.text).width;

          if (segment.style.code) {
            this.ctx.fillStyle = segment.style.background || 'rgba(0, 0, 0, 0.08)';
            this.ctx.fillRect(currentX - 2, currentY - fontSize, segmentWidth + 4, block.lineHeight - 2);
          }

          this.ctx.fillStyle = segment.style.color || textElement.color;
          this.ctx.fillText(segment.text, currentX, currentY);

          if (segment.style.strike) {
            this.ctx.strokeStyle = segment.style.color || textElement.color;
            this.ctx.lineWidth = 1;
            this.ctx.beginPath();
            this.ctx.moveTo(currentX, currentY - fontSize * 0.35);
            this.ctx.lineTo(currentX + segmentWidth, currentY - fontSize * 0.35);
            this.ctx.stroke();
          }

          currentX += segmentWidth;
        });

        currentY += block.lineHeight;
      });

      return;
    }

    this.ctx.font = textElement.font;
    this.ctx.fillStyle = textElement.color;
    this.ctx.fillText(textElement.text, textElement.x, textElement.y);
  }

  saveToHistory() {
    // Remove any states after current step (when user drew something after undoing)
    this.historyStack = this.historyStack.slice(0, this.historyStep + 1);

    // Save current canvas state along with text and line data
    const canvasState = {
      imageData: this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height),
      textElements: JSON.parse(JSON.stringify(this.textElements)),
      lineSegments: JSON.parse(JSON.stringify(this.lineSegments))
    };

    this.historyStack.push(canvasState);
    this.historyStep++;

    // Limit history size
    if (this.historyStack.length > this.MAX_HISTORY) {
      this.historyStack.shift();
      this.historyStep--;
    }

    this.updateUndoRedoButtons();
  }

  clearHistory() {
    this.historyStack = [];
    this.historyStep = -1;
    this.updateUndoRedoButtons();
  }

  undo() {
    if (this.historyStep > 0) {
      this.historyStep--;
      this.restoreFromHistory();
    }
  }

  redo() {
    if (this.historyStep < this.historyStack.length - 1) {
      this.historyStep++;
      this.restoreFromHistory();
    }
  }

  restoreFromHistory() {
    if (this.historyStep >= 0 && this.historyStep < this.historyStack.length) {
      const state = this.historyStack[this.historyStep];

      // Restore canvas image
      this.ctx.putImageData(state.imageData, 0, 0);

      // Restore text and line data
      this.textElements = JSON.parse(JSON.stringify(state.textElements));
      this.lineSegments = JSON.parse(JSON.stringify(state.lineSegments));

      this.updateUndoRedoButtons();
    }
  }

  updateUndoRedoButtons() {
    const undoBtn = document.getElementById('undo-btn');
    const redoBtn = document.getElementById('redo-btn');

    if (undoBtn) {
      undoBtn.disabled = this.historyStep <= 0;
    }

    if (redoBtn) {
      redoBtn.disabled = this.historyStep >= this.historyStack.length - 1;
    }
  }

  initPaintTools() {
    document.getElementById('brush-mode').addEventListener('click', () => {
      if (this.currentTool === 'brush') {
        this.setActiveTool(null, '');
      } else {
        this.setActiveTool('brush', '画笔模式');
        this.brushColor = document.getElementById('brush-color').value;
      }
    });

    document.getElementById('eraser-mode').addEventListener('click', () => {
      if (this.currentTool === 'eraser') {
        this.setActiveTool(null, '');
      } else {
        this.setActiveTool('eraser', '橡皮擦');
        this.brushColor = "#FFFFFF";
      }
    });

    document.getElementById('text-mode').addEventListener('click', () => {
      if (this.currentTool === 'text') {
        this.setActiveTool(null, '');
      } else {
        this.setActiveTool('text', '插入文字');
        this.brushColor = document.getElementById('brush-color').value;
      }
    });

    document.getElementById('brush-color').addEventListener('change', (e) => {
      this.brushColor = e.target.value;
    });

    document.getElementById('brush-size').addEventListener('input', (e) => {
      this.brushSize = parseInt(e.target.value);
      this.updateBrushCursorSize();
    });

    document.getElementById('add-text-btn').addEventListener('click', () => this.startTextPlacement());

    // Add event listeners for bold and italic buttons
    document.getElementById('text-bold').addEventListener('click', () => {
      this.textBold = !this.textBold;
      document.getElementById('text-bold').classList.toggle('primary', this.textBold);
    });

    document.getElementById('text-italic').addEventListener('click', () => {
      this.textItalic = !this.textItalic;
      document.getElementById('text-italic').classList.toggle('primary', this.textItalic);
    });

    // Add undo/redo button listeners
    document.getElementById('undo-btn').addEventListener('click', () => this.undo());
    document.getElementById('redo-btn').addEventListener('click', () => this.redo());

    this.canvas.addEventListener('mousedown', this.startPaint);
    this.canvas.addEventListener('mousemove', this.paint);
    this.canvas.addEventListener('mouseup', this.endPaint);
    this.canvas.addEventListener('mouseleave', this.endPaint);
    this.canvas.addEventListener('click', this.handleCanvasClick);

    // Touch support
    this.canvas.addEventListener('touchstart', this.onTouchStart);
    this.canvas.addEventListener('touchmove', this.onTouchMove);
    this.canvas.addEventListener('touchend', this.onTouchEnd);

    // Keyboard shortcuts for undo/redo
    document.addEventListener('keydown', this.handleKeyboard);

    // Mouse move for brush cursor
    this.canvas.addEventListener('mouseenter', this.updateBrushCursor);
    this.canvas.addEventListener('mousemove', this.updateBrushCursor);

    // Create brush cursor element
    this.createBrushCursor();

    // Initialize history with blank canvas state
    this.saveToHistory();
  }

  handleKeyboard(e) {
    // Ctrl+Z or Cmd+Z for undo
    if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
      e.preventDefault();
      this.undo();
    }
    // Ctrl+Y or Ctrl+Shift+Z or Cmd+Shift+Z for redo
    else if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.shiftKey && e.key === 'z'))) {
      e.preventDefault();
      this.redo();
    }
  }

  setActiveTool(tool, title) {
    setCanvasTitle(title);
    this.currentTool = tool;

    this.canvas.parentNode.classList.toggle('brush-mode', this.currentTool === 'brush');
    this.canvas.parentNode.classList.toggle('eraser-mode', this.currentTool === 'eraser');
    this.canvas.parentNode.classList.toggle('text-mode', this.currentTool === 'text');

    document.getElementById('brush-mode').classList.toggle('active', this.currentTool === 'brush');
    document.getElementById('eraser-mode').classList.toggle('active', this.currentTool === 'eraser');
    document.getElementById('text-mode').classList.toggle('active', this.currentTool === 'text');

    document.getElementById('brush-color').disabled = this.currentTool === 'eraser';
    document.getElementById('brush-size').disabled = this.currentTool === 'text';

    document.getElementById('undo-btn').classList.toggle('hide', this.currentTool === null);
    document.getElementById('redo-btn').classList.toggle('hide', this.currentTool === null);

    // Cancel any pending text placement
    this.cancelTextPlacement();
  }

  createBrushCursor() {
    // Create a div element to show as brush cursor
    this.brushCursor = document.createElement('div');
    this.brushCursor.id = 'brush-cursor';
    this.brushCursor.style.position = 'fixed';
    this.brushCursor.style.border = '2px solid rgba(0, 0, 0, 0.5)';
    this.brushCursor.style.borderRadius = '50%';
    this.brushCursor.style.pointerEvents = 'none';
    this.brushCursor.style.display = 'none';
    this.brushCursor.style.zIndex = '10000';
    this.brushCursor.style.transform = 'translate(-50%, -50%)';
    this.brushCursor.style.willChange = 'transform';
    this.brushCursor.style.left = '0';
    this.brushCursor.style.top = '0';
    document.body.appendChild(this.brushCursor);
    this.updateBrushCursorSize();

    // For requestAnimationFrame throttling
    this.cursorUpdateScheduled = false;
    this.pendingCursorX = 0;
    this.pendingCursorY = 0;
  }

  updateBrushCursorSize() {
    if (!this.brushCursor) return;

    const rect = this.canvas.getBoundingClientRect();
    const scaleX = rect.width / this.canvas.width;
    const scaleY = rect.height / this.canvas.height;
    const scale = Math.min(scaleX, scaleY);

    const size = this.brushSize * scale;
    this.brushCursor.style.width = size + 'px';
    this.brushCursor.style.height = size + 'px';
  }

  updateBrushCursor(e) {
    if (!this.brushCursor) return;

    if (this.currentTool === 'brush' || this.currentTool === 'eraser') {
      // Check if mouse is within canvas bounds
      const rect = this.canvas.getBoundingClientRect();
      const isInCanvas = e.clientX >= rect.left && 
                         e.clientX <= rect.right && 
                         e.clientY >= rect.top && 
                         e.clientY <= rect.bottom;

      if (isInCanvas) {
        this.brushCursor.style.display = 'block';
        this.canvas.style.cursor = 'none';

        // Store the pending position
        this.pendingCursorX = e.clientX;
        this.pendingCursorY = e.clientY;

        // Schedule update using requestAnimationFrame for smooth movement
        if (!this.cursorUpdateScheduled) {
          this.cursorUpdateScheduled = true;
          requestAnimationFrame(() => {
            this.brushCursor.style.transform = `translate(${this.pendingCursorX}px, ${this.pendingCursorY}px) translate(-50%, -50%)`;
            this.cursorUpdateScheduled = false;
          });
        }

        // Update color to match brush or show white for eraser (only needs to happen once or when tool changes)
        if (this.currentTool === 'eraser') {
          if (this.brushCursor.getAttribute('data-tool') !== 'eraser') {
            this.brushCursor.style.border = '2px solid rgba(255, 0, 0, 0.7)';
            this.brushCursor.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
            this.brushCursor.style.boxShadow = 'none';
            this.brushCursor.setAttribute('data-tool', 'eraser');
          }
        } else {
          if (this.brushCursor.getAttribute('data-tool') !== 'brush') {
            // Use a contrasting border - white with black outline for visibility
            this.brushCursor.style.border = '1px solid white';
            this.brushCursor.style.boxShadow = '0 0 0 1px black, inset 0 0 0 1px black';
            this.brushCursor.style.backgroundColor = 'transparent';
            this.brushCursor.setAttribute('data-tool', 'brush');
          }
        }
      } else {
        // Hide cursor when outside canvas
        this.brushCursor.style.display = 'none';
      }
    }
  }

  hideBrushCursor() {
    if (this.brushCursor) {
      this.brushCursor.style.display = 'none';
    }
    this.canvas.style.cursor = 'default';
  }

  startPaint(e) {
    if (!this.currentTool) return;

    if (this.currentTool === 'text') {
      // Check if we're clicking on a text element to drag
      const textElement = this.findTextElementAt(e);
      if (textElement && textElement === this.selectedTextElement) {
        this.isDraggingText = true;

        const rect = this.canvas.getBoundingClientRect();
        const scaleX = this.canvas.width / rect.width;
        const scaleY = this.canvas.height / rect.height;
        const x = (e.clientX - rect.left) * scaleX;
        const y = (e.clientY - rect.top) * scaleY;

        // Calculate offset for smooth dragging
        this.dragOffsetX = textElement.x - x;
        this.dragOffsetY = textElement.y - y;

        return; // Don't start drawing
      }
    } else {
      this.painting = true;
      this.draw(e);
    }
  }

  endPaint() {
    if (this.painting || this.isDraggingText) {
      this.saveToHistory(); // Save state after drawing or dragging text
    }
    this.painting = false;
    this.isDraggingText = false;
    this.lastX = 0;
    this.lastY = 0;

    this.hideBrushCursor();
  }

  paint(e) {
    if (!this.currentTool) return;

    if (this.currentTool === 'text') {
      if (this.isDraggingText && this.selectedTextElement) {
        this.dragText(e);
      }
    } else {
      if (this.painting) {
        this.draw(e);
      }
    }
  }

  draw(e) {
    const rect = this.canvas.getBoundingClientRect();
    const scaleX = this.canvas.width / rect.width;
    const scaleY = this.canvas.height / rect.height;
    const x = (e.clientX - rect.left) * scaleX;
    const y = (e.clientY - rect.top) * scaleY;

    this.ctx.lineJoin = 'round';
    this.ctx.lineCap = 'round';
    this.ctx.strokeStyle = this.brushColor;
    this.ctx.lineWidth = this.brushSize;

    this.ctx.beginPath();

    if (this.lastX === 0 && this.lastY === 0) {
      // For the first point, just do a dot
      this.ctx.moveTo(x, y);
      this.ctx.lineTo(x + 0.1, y + 0.1);

      // Store the dot for redrawing
      this.lineSegments.push({
        type: 'dot',
        x: x,
        y: y,
        color: this.brushColor,
        size: this.brushSize
      });
    } else {
      // Connect to the previous point
      this.ctx.moveTo(this.lastX, this.lastY);
      this.ctx.lineTo(x, y);

      // Store the line segment for redrawing
      this.lineSegments.push({
        type: 'line',
        x1: this.lastX,
        y1: this.lastY,
        x2: x,
        y2: y,
        color: this.brushColor,
        size: this.brushSize
      });
    }

    this.ctx.stroke();

    this.lastX = x;
    this.lastY = y;
  }

  handleCanvasClick(e) {
    if (this.currentTool === 'text' && this.isTextPlacementMode) {
      this.placeText(e);
    }
  }

  onTouchStart(e) {
    e.preventDefault();
    const touch = e.touches[0];

    // If in text placement mode, handle as a click
    if (this.currentTool === 'text' && this.isTextPlacementMode) {
      const mouseEvent = new MouseEvent('click', {
        clientX: touch.clientX,
        clientY: touch.clientY
      });
      this.canvas.dispatchEvent(mouseEvent);
      return;
    }

    // Otherwise handle as normal drawing
    const mouseEvent = new MouseEvent('mousedown', {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    this.canvas.dispatchEvent(mouseEvent);
  }

  onTouchMove(e) {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent('mousemove', {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    this.canvas.dispatchEvent(mouseEvent);
  }

  onTouchEnd(e) {
    e.preventDefault();
    this.endPaint();
  }

  dragText(e) {
    const rect = this.canvas.getBoundingClientRect();
    const scaleX = this.canvas.width / rect.width;
    const scaleY = this.canvas.height / rect.height;
    const x = (e.clientX - rect.left) * scaleX;
    const y = (e.clientY - rect.top) * scaleY;

    // Update text position with offset
    this.selectedTextElement.x = x + this.dragOffsetX;
    this.selectedTextElement.y = y + this.dragOffsetY;

    // Redraw selected text element
    if (this.draggingCanvasContext) {
      this.ctx.putImageData(this.draggingCanvasContext, 0, 0);
    } else {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
    this.renderTextElement(this.selectedTextElement);
  }

  findTextElementAt(e) {
    const rect = this.canvas.getBoundingClientRect();
    const scaleX = this.canvas.width / rect.width;
    const scaleY = this.canvas.height / rect.height;
    const x = (e.clientX - rect.left) * scaleX;
    const y = (e.clientY - rect.top) * scaleY;

    // Search through text elements in reverse order (top-most first)
    for (let i = this.textElements.length - 1; i >= 0; i--) {
      const text = this.textElements[i];

      const measurement = this.measureTextElement(text);
      const textWidth = measurement.width;
      const textHeight = measurement.height;
      const top = measurement.top;
      const left = measurement.left;

      // Check if click is within text bounds (allowing for some margin)
      const margin = 5;
      if (x >= left - margin &&
        x <= left + textWidth + margin &&
        y >= top - margin &&
        y <= top + textHeight + margin) {
        return text;
      }
    }

    return null;
  }

  startTextPlacement() {
    const text = document.getElementById('text-input').value.trim();
    if (!text) {
      alert('请输入文字内容');
      return;
    }

    this.isTextPlacementMode = true;

    // Add visual feedback
    setCanvasTitle('点击画布放置文字');
    this.canvas.classList.add('text-placement-mode');
  }

  cancelTextPlacement() {
    this.isTextPlacementMode = false;
    this.canvas.classList.remove('text-placement-mode');

    // reset dragging state
    this.isDraggingText = false;
    this.dragOffsetX = 0;
    this.dragOffsetY = 0;
    this.selectedTextElement = null;
    this.draggingCanvasContext = null;
  }

  placeText(e) {
    const rect = this.canvas.getBoundingClientRect();
    const scaleX = this.canvas.width / rect.width;
    const scaleY = this.canvas.height / rect.height;
    const x = (e.clientX - rect.left) * scaleX;
    const y = (e.clientY - rect.top) * scaleY;

    const text = document.getElementById('text-input').value;
    const fontFamily = document.getElementById('font-family').value;
    const fontSize = parseInt(document.getElementById('font-size').value, 10);
    const blocks = this.parseMarkdownText(text, fontFamily, fontSize, this.brushColor, this.textBold, this.textItalic);

    // Create a new text element
    const newText = {
      type: 'markdown',
      text: text,
      x: x,
      y: y,
      font: this.buildFontString(fontFamily, fontSize, this.textBold, this.textItalic),
      color: this.brushColor,
      fontFamily: fontFamily,
      baseFontSize: fontSize,
      blocks: blocks
    };

    // Add to our list of text elements
    this.textElements.push(newText);

    // Select this text element for immediate dragging
    this.selectedTextElement = newText;
    this.draggingCanvasContext = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);

    // Draw text on canvas
    this.renderTextElement(newText);

    // Save to history after placing text
    this.saveToHistory();

    // Reset
    document.getElementById('text-input').value = '';
    this.isTextPlacementMode = false;
    this.canvas.classList.remove('text-placement-mode');
    setCanvasTitle('拖动新添加文字可调整位置');
  }

  redrawTextElements() {
    // Redraw all text elements after dithering
    this.textElements.forEach(item => {
      this.renderTextElement(item);
    });
  }

  redrawLineSegments() {
    // Redraw all line segments after dithering
    this.lineSegments.forEach(segment => {
      this.ctx.lineJoin = 'round';
      this.ctx.lineCap = 'round';
      this.ctx.strokeStyle = segment.color;
      this.ctx.lineWidth = segment.size;
      this.ctx.beginPath();

      if (segment.type === 'dot') {
        this.ctx.moveTo(segment.x, segment.y);
        this.ctx.lineTo(segment.x + 0.1, segment.y + 0.1);
      } else {
        this.ctx.moveTo(segment.x1, segment.y1);
        this.ctx.lineTo(segment.x2, segment.y2);
      }

      this.ctx.stroke();
    });
  }

  clearElements() {
    this.textElements = [];
    this.lineSegments = [];
  }
}