Image FBI Most Wanted Poster Creator

async function processImage(
    originalImg,
    name = "UNSUB",
    aliases = "NONE KNOWN",
    description = "Sex: Unknown\nRace: Unknown\nAge: Approx. 30-40 years\nHeight: Approx. 5'10\" - 6'2\"\nWeight: Approx. 170-190 lbs\nHair: Unknown\nEyes: Unknown\nScars/Marks: May have distinguishing features not visible in photo.",
    crime = "MULTIPLE FELONIES INCLUDING BUT NOT LIMITED TO:\nBANK ROBBERY, ARMED ASSAULT, INTERSTATE FLIGHT TO AVOID PROSECUTION",
    rewardText = "REWARD OF UP TO $1,000,000\nFOR INFORMATION LEADING DIRECTLY TO THE ARREST OF THIS INDIVIDUAL",
    cautionText = "CONSIDERED ARMED AND EXTREMELY DANGEROUS\nDO NOT ATTEMPT TO APPREHEND THIS INDIVIDUAL YOURSELF"
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const canvasWidth = 800;
    const canvasHeight = 1100;
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    ctx.textBaseline = 'top'; // Easier Y coordinate management

    // Background
    ctx.fillStyle = '#FDF5E6'; // Old Lace / very light beige, common for aged paper
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

    // Border
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = 5; // Outer thick border
    ctx.strokeRect(10, 10, canvasWidth - 20, canvasHeight - 20);
    ctx.lineWidth = 2; // Inner thin border
    ctx.strokeRect(20, 20, canvasWidth - 40, canvasHeight - 40);

    let currentY = 25; // Start currentY from top margin (inside borders)
    const margin = 40; // Margin for content from the inner border edge
    const contentWidth = canvasWidth - 2 * margin;

    // 1. "WANTED" Header
    let textBlockY = currentY + 35; // Add some top padding for the first element
    ctx.font = 'bold 120px Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif';
    ctx.fillStyle = '#A52A2A'; // Brownish Red (less bright than Firebrick)
    ctx.textAlign = 'center';
    ctx.fillText("WANTED", canvasWidth / 2, textBlockY);
    currentY = textBlockY + 120; // Height of "WANTED" text (approx font size)

    // 2. "BY THE..." Sub-Header
    textBlockY = currentY + 10; // Spacing from "WANTED"
    ctx.font = 'bold 22px "Times New Roman", Times, serif';
    ctx.fillStyle = '#000000'; // Black
    ctx.fillText("BY THE FEDERAL BUREAU OF INVESTIGATION", canvasWidth / 2, textBlockY);
    currentY = textBlockY + 22 + 15; // Height of sub-header + spacing after it

    // 3. Image Area
    const imgMaxHeight = 300; // Max height for the suspect's image
    const imgMaxWidth = contentWidth * 0.7; // Max width for the image, allowing some side margin
    let imgHeight = originalImg.height;
    let imgWidth = originalImg.width;
    const aspectRatio = imgWidth / imgHeight;

    // Scale image to fit constraints
    if (imgHeight > imgMaxHeight) {
        imgHeight = imgMaxHeight;
        imgWidth = imgHeight * aspectRatio;
    }
    if (imgWidth > imgMaxWidth) {
        imgWidth = imgMaxWidth;
        imgHeight = imgWidth / aspectRatio;
    }

    const imgX = (canvasWidth - imgWidth) / 2; // Center the image
    const imgY = currentY + 5; // Small space above image
    
    ctx.fillStyle = '#FFFFFF'; // White "matting" behind photo
    ctx.fillRect(imgX - 7, imgY - 7, imgWidth + 14, imgHeight + 14);
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = 2; // Border for the photo
    ctx.strokeRect(imgX - 5, imgY - 5, imgWidth + 10, imgHeight + 10); 
    ctx.drawImage(originalImg, imgX, imgY, imgWidth, imgHeight);
    currentY = imgY + imgHeight + 10 + 15; // Y below image border + spacing

    // Text Fields Section Helper Function
    const labelFontSize = 18;
    const valueFontSize = 16;
    const fieldLineSpacing = valueFontSize * 1.3; // Line height for multi-line values
    const labelFont = '"Arial Black", Gadget, sans-serif';
    const valueFont = '"Courier New", Courier, monospace'; // "Typewriter" style for values
    const valueIndent = margin + 170; // X position where value text starts (after label)
    const maxValueWidth = contentWidth - (valueIndent - margin); // Max width for value text

    function drawLabelAndValue(label, valueString, startDrawY) {
        let currentLineY = startDrawY;
        ctx.textAlign = 'left';
        ctx.font = `bold ${labelFontSize}px ${labelFont}`;
        ctx.fillStyle = '#000000';
        ctx.fillText(label.toUpperCase() + ":", margin, currentLineY);

        ctx.font = `normal ${valueFontSize}px ${valueFont}`;
        const valueLines = valueString.split('\n'); // Handle explicit newlines in value
        
        for (let i = 0; i < valueLines.length; i++) {
            const line = valueLines[i];
            const words = line.split(' '); // For word wrapping
            let textLine = '';
            for (let n = 0; n < words.length; n++) {
                const testLine = textLine + words[n] + ' ';
                if (ctx.measureText(testLine).width > maxValueWidth && textLine !== '') {
                    ctx.fillText(textLine.trim(), valueIndent, currentLineY);
                    textLine = words[n] + ' ';
                    currentLineY += fieldLineSpacing;
                } else {
                    textLine = testLine;
                }
            }
            ctx.fillText(textLine.trim(), valueIndent, currentLineY);
            if (i < valueLines.length - 1) { // If more pre-split lines follow
                 currentLineY += fieldLineSpacing;
            }
        }
        const labelBottom = startDrawY + labelFontSize;
        const valueBottom = currentLineY + valueFontSize; // Bottom of last line of value text
        return Math.max(labelBottom, valueBottom) + fieldLineSpacing * 0.7; // Y for next field, with spacing
    }
    
    currentY += 10; // Space before first field
    currentY = drawLabelAndValue("NAME", name, currentY);
    currentY = drawLabelAndValue("ALIASES", aliases, currentY);
    
    // Description field (special handling for full width value)
    ctx.textAlign = 'left';
    ctx.font = `bold ${labelFontSize}px ${labelFont}`;
    ctx.fillStyle = '#000000';
    ctx.fillText("DESCRIPTION:", margin, currentY);
    currentY += labelFontSize + 8; // Move Y below "DESCRIPTION:" label text + small gap

    ctx.font = `normal ${valueFontSize}px ${valueFont}`;
    const descriptionLines = description.split('\n');
    let descInnerY = currentY;
    for (let i = 0; i < descriptionLines.length; i++) {
        const line = descriptionLines[i];
        const words = line.split(' ');
        let textLine = '';
        for (let n = 0; n < words.length; n++) {
            const testLine = textLine + words[n] + ' ';
            // For description, value text uses full contentWidth
            if (ctx.measureText(testLine).width > contentWidth && textLine !== '') { 
                ctx.fillText(textLine.trim(), margin, descInnerY);
                textLine = words[n] + ' ';
                descInnerY += fieldLineSpacing;
            } else {
                textLine = testLine;
            }
        }
        ctx.fillText(textLine.trim(), margin, descInnerY);
        if (i < descriptionLines.length - 1) {
             descInnerY += fieldLineSpacing;
        }
    }
    currentY = descInnerY + valueFontSize + fieldLineSpacing * 0.7; // Y for next element

    currentY = drawLabelAndValue("CRIME", crime, currentY);

    // Helper for centered, multi-line (from \n) text blocks (e.g. Reward, Caution)
    function drawCenteredTextBlock(text, startBlockY, fontStyle, fontSize, fontFamily, color, lineHeightFactor = 1.2) {
        ctx.font = `${fontStyle} ${fontSize}px ${fontFamily}`;
        ctx.fillStyle = color;
        ctx.textAlign = 'center';
        const lines = text.toUpperCase().split('\n');
        let lineDrawY = startBlockY;
        for(const line of lines) {
            ctx.fillText(line.trim(), canvasWidth / 2, lineDrawY);
            lineDrawY += fontSize * lineHeightFactor;
        }
        return lineDrawY - (fontSize * (lineHeightFactor - 1)); // Return Y at conceptual bottom of last text line
    }

    currentY += 20; // Extra space before reward
    currentY = drawCenteredTextBlock(rewardText, currentY, 'bold', 26, '"Times New Roman", Times, serif', '#A52A2A', 1.2);
    
    currentY += 20; // Extra space
    currentY = drawCenteredTextBlock(cautionText, currentY, 'bold', 20, 'Arial, sans-serif', '#000000', 1.2);

    // Footer Text
    const footerFontSize = 11; // Slightly smaller for dense footer
    const footerFontFamily = '"Verdana", Geneva, sans-serif';
    const footerTopMargin = 30; 
    const footerLineHeight = footerFontSize * 1.25;
    
    const footerTextContent = "IF YOU HAVE ANY INFORMATION CONCERNING THIS PERSON, PLEASE CONTACT YOUR LOCAL FBI OFFICE OR THE NEAREST U.S. EMBASSY OR CONSULATE. YOU CAN ALSO SUBMIT A TIP ONLINE AT TIPS.FBI.GOV.";
    const footerWords = footerTextContent.split(' ');
    const tempFooterLines = [];
    const originalCtxFontForMeasure = ctx.font; 
    ctx.font = `bold ${footerFontSize}px ${footerFontFamily}`; // Use footer font for measuring
    let currentLineForFooter = "";
    for (const word of footerWords) {
        const testLine = currentLineForFooter + word + " ";
        if (ctx.measureText(testLine).width > contentWidth * 0.95 && currentLineForFooter !== "") {
            tempFooterLines.push(currentLineForFooter.trim());
            currentLineForFooter = word + " ";
        } else {
            currentLineForFooter = testLine;
        }
    }
    tempFooterLines.push(currentLineForFooter.trim());
    ctx.font = originalCtxFontForMeasure; 

    let footerStartY = canvasHeight - 20 - (tempFooterLines.length * footerLineHeight) - (footerLineHeight * 0.5); // Position from inner border-bottom
    
    // Ensure footer doesn't overlap content above it if content is very long
    if (footerStartY < currentY + footerTopMargin) { 
        footerStartY = currentY + footerTopMargin; 
    }
    
    currentY = drawCenteredTextBlock(tempFooterLines.join('\n'), footerStartY, 'bold', footerFontSize, footerFontFamily, '#000000', 1.25);

    // FBI Seal (simplified placeholder)
    const sealSize = 45;
    const sealMarginFromLeft = margin; 
    const sealBottomRefY = canvasHeight - 20 - 10; // Above inner border bottom + some padding
    const sealTopY = sealBottomRefY - sealSize;

    // Check if there's a clear spot for the seal (e.g., not overlapping image, not too close to footer start)
    const spaceBelowImage = imgY + imgHeight + 20;
    const spaceAboveFooter = footerStartY - sealSize - 15; // Ensure seal ends 15px above footer start
    
    if (sealTopY > spaceBelowImage && sealTopY < spaceAboveFooter) { 
        ctx.beginPath();
        const sealCenterX = sealMarginFromLeft + sealSize / 2;
        const sealCenterY = sealTopY + sealSize / 2;
        ctx.arc(sealCenterX, sealCenterY, sealSize / 2, 0, 2 * Math.PI);
        ctx.fillStyle = '#002868'; // FBI Blue
        ctx.fill();
        
        // Text inside seal
        ctx.font = 'bold 11px Arial';
        ctx.fillStyle = '#FFFFFF'; // White text
        ctx.textAlign = 'center';
        // Adjust Y for two lines of text, considering textBaseline='top'
        const textLineHeightSeal = 11;
        ctx.fillText("FBI", sealCenterX, sealCenterY - textLineHeightSeal * 0.8); 
        ctx.fillText("SEAL", sealCenterX, sealCenterY + textLineHeightSeal * 0.3);
    }
    
    return canvas;
}