Image Support Service

function processImage(originalImg, text = "Служба поддержки", color = "#007BFF", position = "bottom-right") {
    // Create canvas
    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d');
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Calculate dimensions based on image size to maintain scaling
    const fontSize = Math.max(14, Math.floor(Math.min(width, height) * 0.04));
    ctx.font = `bold ${fontSize}px Arial, sans-serif`;
    ctx.textBaseline = 'middle';

    const fullText = "🎧 " + text;
    const metrics = ctx.measureText(fullText);
    const textWidth = metrics.width;

    const paddingX = fontSize * 1.2;
    const paddingY = fontSize * 0.8;
    const boxWidth = textWidth + paddingX * 2;
    const boxHeight = fontSize + paddingY * 2;
    const margin = fontSize * 1.5;

    // Determine positions
    let posX = margin;
    let posY = margin;

    if (position === 'bottom-right') {
        posX = width - boxWidth - margin;
        posY = height - boxHeight - margin;
    } else if (position === 'bottom-left') {
        posX = margin;
        posY = height - boxHeight - margin;
    } else if (position === 'top-right') {
        posX = width - boxWidth - margin;
        posY = margin;
    } else if (position === 'center') {
        posX = (width - boxWidth) / 2;
        posY = (height - boxHeight) / 2;
    }

    // Keep within bounds
    posX = Math.max(0, Math.min(posX, width - boxWidth));
    posY = Math.max(0, Math.min(posY, height - boxHeight));

    // Draw shadow for the support bubble
    ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
    ctx.shadowBlur = fontSize * 0.5;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = fontSize * 0.2;

    // Draw rounded rectangle (Support overlay bubble)
    ctx.fillStyle = color;
    const radius = fontSize * 0.8;
    
    ctx.beginPath();
    ctx.moveTo(posX + radius, posY);
    ctx.lineTo(posX + boxWidth - radius, posY);
    ctx.quadraticCurveTo(posX + boxWidth, posY, posX + boxWidth, posY + radius);
    ctx.lineTo(posX + boxWidth, posY + boxHeight - radius);
    ctx.quadraticCurveTo(posX + boxWidth, posY + boxHeight, posX + boxWidth - radius, posY + boxHeight);
    
    // Add a standard "chat tail" element if placed at the bottom
    if (position.includes('bottom') || position === 'center') {
        const tailOffset = (position === 'bottom-left') ? boxWidth * 0.2 : boxWidth * 0.8;
        ctx.lineTo(posX + tailOffset + radius, posY + boxHeight);
        ctx.lineTo(posX + tailOffset, posY + boxHeight + radius);
        ctx.lineTo(posX + tailOffset - radius, posY + boxHeight);
    }

    ctx.lineTo(posX + radius, posY + boxHeight);
    ctx.quadraticCurveTo(posX, posY + boxHeight, posX, posY + boxHeight - radius);
    ctx.lineTo(posX, posY + radius);
    ctx.quadraticCurveTo(posX, posY, posX + radius, posY);
    ctx.closePath();
    ctx.fill();

    // Reset shadow for the text
    ctx.shadowColor = "transparent";
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // Draw text inside the chat bubble
    ctx.fillStyle = "#FFFFFF";
    ctx.fillText(fullText, posX + paddingX, posY + boxHeight / 2);

    return canvas;
}