Image Location Identifier

async function processImage(originalImg) {
    const outputContainer = document.createElement('div');
    outputContainer.style.fontFamily = 'Arial, sans-serif';
    outputContainer.style.textAlign = 'center';
    outputContainer.style.padding = '20px';
    outputContainer.style.maxWidth = '100%';
    outputContainer.style.boxSizing = 'border-box';

    const showMessage = (message, isError = false) => {
        outputContainer.innerHTML = '';
        const p = document.createElement('p');
        p.textContent = message;
        if (isError) {
            p.style.color = 'red';
        }
        outputContainer.appendChild(p);
        return outputContainer;
    };

    outputContainer.innerHTML = '<p>Analyzing image metadata...</p>';

    try {
        // 1. Dynamically import a modern EXIF reader library.
        // This avoids adding a script tag to the main document.
        const ExifReader = (await import('https://cdn.jsdelivr.net/npm/exifreader@4.21.0/dist/exif-reader.mjs')).default;

        // 2. Fetch the image data as an ArrayBuffer.
        // This is necessary to read the binary EXIF data.
        // It will work for blob URLs (from file uploads) and data URLs.
        // It may fail for cross-origin URLs if CORS is not configured on the server.
        const response = await fetch(originalImg.src);
        if (!response.ok) {
            return showMessage('Error: Could not fetch image data. The image might be on a server that does not allow cross-origin requests.', true);
        }
        const buffer = await response.arrayBuffer();

        // 3. Parse the EXIF data from the image buffer.
        const tags = ExifReader.load(buffer);

        // 4. Check if GPS coordinate tags exist.
        if (!tags.GPSLatitude || !tags.GPSLongitude) {
            return showMessage('No GPS location data found in this image\'s metadata (EXIF).');
        }

        // 5. The exifreader library conveniently provides decimal coordinates.
        const latitude = tags.GPSLatitude.description;
        const longitude = tags.GPSLongitude.description;

        if (typeof latitude !== 'number' || typeof longitude !== 'number') {
            return showMessage('Could not parse GPS coordinates from the image\'s metadata.', true);
        }

        showMessage('GPS data found. Fetching location information...');

        // 6. Use the free OpenStreetMap (Nominatim) API for reverse geocoding.
        const geoApiUrl = `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`;
        const geoResponse = await fetch(geoApiUrl, {
            headers: {
                'Accept': 'application/json'
            }
        });

        if (!geoResponse.ok) {
            throw new Error(`Reverse geocoding API request failed with status: ${geoResponse.status}`);
        }
        const geoData = await geoResponse.json();

        // 7. Format and display the results.
        if (geoData.error) {
            return showMessage(`Could not find a location for the given coordinates: ${geoData.error}`, true);
        }

        let resultHtml = `
            <p style="font-size: 1.2em; font-weight: bold; margin-bottom: 15px; word-wrap: break-word;">
                ${geoData.display_name}
            </p>
            <iframe
                width="100%"
                height="400"
                style="border: 1px solid #ccc; border-radius: 5px; max-width: 600px;"
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"
                src="https://www.openstreetmap.org/export/embed.html?bbox=${longitude-0.01}%2C${latitude-0.01}%2C${longitude+0.01}%2C${latitude+0.01}&layer=mapnik&marker=${latitude}%2C${longitude}">
            </iframe>
            <div style="margin-top: 20px; text-align: left; max-width: 600px; margin-left: auto; margin-right: auto;">
                <details>
                    <summary style="cursor: pointer; font-weight: bold;">View Technical Details</summary>
                    <pre style="background-color: #f4f4f4; padding: 10px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; font-size: 0.9em; margin-top: 10px;">Coordinates (Lat, Lon): ${latitude}, ${longitude}\n\nFull Geocoding Response:\n${JSON.stringify(geoData, null, 2)}</pre>
                </details>
            </div>
        `;
        outputContainer.innerHTML = resultHtml;

    } catch (error) {
        console.error("Image Location Identifier Error:", error);
        return showMessage(`An error occurred: ${error.message}. This can happen due to network issues or browser restrictions (CORS).`, true);
    }

    return outputContainer;
}