script.js

document.getElementById('generateBtn').addEventListener('click', generateImage);


async function generateImage() {
    const button = document.getElementById('generateBtn');
    button.disabled = true;
    button.innerText = "Uploading to S3...";

    try {
        
        const randomSeed = Math.floor(Math.random() * 100000);
        
        
        const response = await fetch(`https://picsum.photos/800/600?random=${randomSeed}`);
        
        if (!response.ok) throw new Error("Failed to fetch random image");
        
        const blob = await response.blob();

       
        const timestamp = Date.now();
        const fileName = `images/${timestamp}_image.jpg`;

        
        const params = {
            Bucket: BUCKET_NAME,
            Key: fileName,
            Body: blob,
            ContentType: 'image/jpeg'
        };

        
        await s3.upload(params).promise();
        console.log("Uploaded successfully:", fileName);

       
        await loadImages();

    } catch (error) {
        console.error("Error during execution:", error);
        alert("Failed to process image operation. Check console logs.");
    } finally {
        button.disabled = false;
        button.innerText = "🔄 Generate Random Image";
    }
}


async function loadImages() {
    const gallery = document.getElementById('gallery');
    gallery.innerHTML = '<p style="color:#8b949e;">Loading S3 Objects...</p>';

    const params = {
        Bucket: BUCKET_NAME,
        Prefix: 'images/'
    };

    try {
        const data = await s3.listObjectsV2(params).promise();
        gallery.innerHTML = ''; 

        
        const files = data.Contents.filter(obj => obj.Key !== 'images/').reverse();

        if (files.length === 0) {
            gallery.innerHTML = '<p style="color:#8b949e;">No images stored yet inside your S3 bucket.</p>';
            return;
        }

        files.forEach(obj => {
           
            const imgUrl = `https://${BUCKET_NAME}.s3.${AWS.config.region}.amazonaws.com/${obj.Key}`;            
            
            const cleanName = obj.Key.replace('images/', '').split('_')[1] || obj.Key;

            
            const card = document.createElement('div');
            card.className = 'gallery-card';
            card.innerHTML = `
                <img src="${imgUrl}" alt="S3 Asset" width="250">
                <div class="info">
                    <p><strong>${cleanName}</strong></p>
                    <p class="date">Modified: ${new Date(obj.LastModified).toLocaleTimeString()}</p>
                </div>
            `;
            gallery.appendChild(card);
        });

    } catch (error) {
        console.error("Error fetching object listing from S3:", error);
        gallery.innerHTML = '<p style="color:#ff7b72;">Failed to load objects from Amazon S3. View browser console.</p>';
    }
}


window.onload = loadImages;