Image Search For Film Studio Finders

function processImage(originalImg, searchQuery = "Студии Кинокомпании Года", theme = "dark", brandText = "Image Search For Film Studio Finders") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Make sure the canvas has a reasonable minimum width so the search UI looks good
    const minWidth = 600;
    const cWidth = Math.max(originalImg.width, minWidth);
    
    // Scale image proportionally if we adjusted the width
    const imgScale = cWidth / originalImg.width;
    const cHeightImg = originalImg.height * imgScale;

    // Define fixed dimensional ratios based on the canvas width
    const padding = cWidth * 0.03;
    const headerHeight = cWidth * 0.12;
    const footerHeight = cWidth * 0.08;

    canvas.width = cWidth;
    canvas.height = headerHeight + cHeightImg + footerHeight;

    // Theme Colors
    const isDark = theme.toLowerCase() !== 'light';
    const bgFill = isDark ? '#202124' : '#ffffff';
    const barFill = isDark ? '#303134' : '#f1f3f4';
    const textFill = isDark ? '#e8eaed' : '#202124';
    const iconFill = isDark ? '#9aa0a6' : '#5f6368';

    // 1. Draw Background
    ctx.fillStyle = bgFill;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Draw Header (Search Bar)
    const barMarginX = padding;
    const barY = padding;
    const barWidth = canvas.width - (barMarginX * 2);
    const barHeight = headerHeight - (padding * 1.5);
    const barRadius = barHeight / 2;

    ctx.fillStyle = barFill;
    ctx.beginPath();
    ctx.moveTo(barMarginX + barRadius, barY);
    ctx.lineTo(barMarginX + barWidth - barRadius, barY);
    ctx.quadraticCurveTo(barMarginX + barWidth, barY, barMarginX + barWidth, barY + barRadius);
    ctx.lineTo(barMarginX + barWidth, barY + barHeight - barRadius);
    ctx.quadraticCurveTo(barMarginX + barWidth, barY + barHeight, barMarginX + barWidth - barRadius, barY + barHeight);
    ctx.lineTo(barMarginX + barRadius, barY + barHeight);
    ctx.quadraticCurveTo(barMarginX, barY + barHeight, barMarginX, barY + barHeight - barRadius);
    ctx.lineTo(barMarginX, barY + barRadius);
    ctx.quadraticCurveTo(barMarginX, barY, barMarginX + barRadius, barY);
    ctx.closePath();
    ctx.fill();

    // Add Shadow/Border to bar if light mode
    if (!isDark) {
        ctx.strokeStyle = '#dfe1e5';
        ctx.lineWidth = 1;
        ctx.stroke();
    }

    // 3. Draw Search Icon (Magnifying Glass)
    const iconCenterY = barY + (barHeight / 2);
    const iconCenterX = barMarginX + barRadius * 1.2;
    const iconRadius = barHeight * 0.2;

    ctx.strokeStyle = iconFill;
    ctx.lineWidth = Math.max(2, barHeight * 0.05);
    ctx.beginPath();
    ctx.arc(iconCenterX, iconCenterY, iconRadius, 0, 2 * Math.PI);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(iconCenterX + iconRadius * 0.7, iconCenterY + iconRadius * 0.7);
    ctx.lineTo(iconCenterX + iconRadius * 1.6, iconCenterY + iconRadius * 1.6);
    ctx.lineCap = 'round';
    ctx.stroke();

    // 4. Draw Search Query Text
    ctx.fillStyle = textFill;
    const fontSize = Math.max(14, barHeight * 0.4);
    ctx.font = `${fontSize}px system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif`;
    ctx.textBaseline = 'middle';
    ctx.textAlign = 'left';
    
    // Simple text clipping / max width
    const maxTextWidth = barWidth - (iconRadius * 4) - barRadius;
    let displayText = searchQuery;
    if (ctx.measureText(displayText).width > maxTextWidth) {
        while (displayText.length > 0 && ctx.measureText(displayText + "...").width > maxTextWidth) {
            displayText = displayText.slice(0, -1);
        }
        displayText += "...";
    }
    
    ctx.fillText(displayText, iconCenterX + iconRadius * 2.5, iconCenterY);

    // 5. Draw the uploaded image
    const imgY = headerHeight;
    ctx.drawImage(originalImg, 0, imgY, cWidth, cHeightImg);

    // Add upper/lower subtle separator lines
    ctx.strokeStyle = isDark ? '#3c4043' : '#ebebeb';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(0, imgY);
    ctx.lineTo(cWidth, imgY);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(0, imgY + cHeightImg);
    ctx.lineTo(cWidth, imgY + cHeightImg);
    ctx.stroke();

    // 6. Draw Footer Bar (Branding)
    const footerY = imgY + cHeightImg;
    const footerTextY = footerY + (footerHeight / 2);
    
    ctx.fillStyle = iconFill;
    const footerFontSize = Math.max(12, footerHeight * 0.3);
    ctx.font = `600 ${footerFontSize}px system-ui, -apple-system, Roboto, Arial, sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    ctx.fillText(brandText.toUpperCase(), cWidth / 2, footerTextY);

    return canvas;
}