Image Movie Finder

/**
 * Guides the user to find the source of a movie from an image.
 * Since client-side JavaScript cannot perform reverse image searches on its own
 * due to technical limitations and lack of free, public APIs, this function
 * provides the user with the necessary tools and instructions to do so manually.
 * It displays the image and provides a download link along with links to popular
 * reverse image search engines.
 *
 * @param {Image} originalImg The user-provided image object.
 * @returns {HTMLElement} A div element containing the image preview, instructions, and helpful links.
 */
function processImage(originalImg) {
    // Create a main container for the output
    const container = document.createElement('div');
    container.style.fontFamily = "Arial, 'Helvetica Neue', Helvetica, sans-serif";
    container.style.textAlign = 'center';
    container.style.padding = '20px';
    container.style.border = '1px solid #ddd';
    container.style.borderRadius = '10px';
    container.style.backgroundColor = '#f9f9f9';
    container.style.maxWidth = '500px';
    container.style.margin = '20px auto';
    container.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';

    // Create a heading
    const heading = document.createElement('h2');
    heading.textContent = 'Find The Movie';
    heading.style.color = '#333';
    heading.style.marginBottom = '20px';
    container.appendChild(heading);

    // Create a canvas to draw the image and get a data URL
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;
    ctx.drawImage(originalImg, 0, 0);

    // Style the canvas for preview
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.borderRadius = '8px';
    canvas.style.marginBottom = '20px';
    canvas.style.border = '1px solid #eee';
    container.appendChild(canvas);

    // Create instructional text
    const instructions = document.createElement('p');
    instructions.innerHTML = `
        Automatically finding a movie from an image isn't possible directly in the browser.
        <br>Follow these two simple steps to find your movie:
    `;
    instructions.style.lineHeight = '1.6';
    instructions.style.color = '#555';
    instructions.style.marginBottom = '25px';
    container.appendChild(instructions);

    // --- Step 1: Download ---
    const step1Container = document.createElement('div');
    step1Container.style.marginBottom = '20px';

    const step1Label = document.createElement('strong');
    step1Label.textContent = 'Step 1: Download The Image';
    step1Label.style.display = 'block';
    step1Label.style.marginBottom = '10px';
    step1Container.appendChild(step1Label);

    // Create a download link using the canvas data URL
    const dataURL = canvas.toDataURL('image/png');
    const downloadLink = document.createElement('a');
    downloadLink.href = dataURL;
    downloadLink.download = 'movie_frame_to_find.png';
    downloadLink.textContent = 'Download Image';
    downloadLink.style.display = 'inline-block';
    downloadLink.style.padding = '12px 20px';
    downloadLink.style.backgroundColor = '#007bff';
    downloadLink.style.color = 'white';
    downloadLink.style.textDecoration = 'none';
    downloadLink.style.borderRadius = '5px';
    downloadLink.style.fontWeight = 'bold';
    downloadLink.style.transition = 'background-color 0.3s';
    downloadLink.onmouseover = () => downloadLink.style.backgroundColor = '#0056b3';
    downloadLink.onmouseout = () => downloadLink.style.backgroundColor = '#007bff';
    step1Container.appendChild(downloadLink);
    container.appendChild(step1Container);

    // --- Step 2: Upload ---
    const step2Container = document.createElement('div');

    const step2Label = document.createElement('strong');
    step2Label.textContent = 'Step 2: Upload It To A Search Engine';
    step2Label.style.display = 'block';
    step2Label.style.marginBottom = '15px';
    step2Container.appendChild(step2Label);

    // Links to popular reverse image search engines
    const searchEngines = [
        { name: 'Google Lens', url: 'https://lens.google.com/upload' },
        { name: 'TinEye', url: 'https://tineye.com/' },
        { name: 'Yandex Images', url: 'https://yandex.com/images/' }
    ];

    searchEngines.forEach(engine => {
        const link = document.createElement('a');
        link.href = engine.url;
        link.textContent = engine.name;
        link.target = '_blank'; // Open in a new tab
        link.rel = 'noopener noreferrer';
        link.style.display = 'inline-block';
        link.style.padding = '8px 15px';
        link.style.margin = '5px';
        link.style.border = '1px solid #007bff';
        link.style.color = '#007bff';
        link.style.textDecoration = 'none';
        link.style.borderRadius = '5px';
        link.style.transition = 'background-color 0.3s, color 0.3s';
        link.onmouseover = () => {
            link.style.backgroundColor = '#007bff';
            link.style.color = 'white';
        };
        link.onmouseout = () => {
            link.style.backgroundColor = 'transparent';
            link.style.color = '#007bff';
        };
        step2Container.appendChild(link);
    });
    container.appendChild(step2Container);

    // Return the fully constructed element
    return container;
}