document.addEventListener('DOMContentLoaded', function() {
    // Copy button functionality
    const copyButton = document.getElementById('copyButton');
    const webhookUrl = 'https://webhook-image-generator.com/api/webhook/endpoint';
    
    if (copyButton) {
        copyButton.addEventListener('click', function() {
            navigator.clipboard.writeText(webhookUrl).then(() => {
                const originalText = copyButton.innerHTML;
                copyButton.innerHTML = '<i data-feather="check" class="mr-2"></i> Copied!';
                feather.replace();
                
                setTimeout(() => {
                    copyButton.innerHTML = originalText;
                    feather.replace();
                }, 2000);
            });
        });
    }
    
    // Sample images data (in a real app, this would come from an API)
    const sampleImages = [
        {
            id: 1,
            title: "User Registration Data",
            timestamp: "2023-05-15T14:30:00Z",
            imageUrl: "http://static.photos/technology/320x240/1"
        },
        {
            id: 2,
            title: "Payment Confirmation",
            timestamp: "2023-05-15T13:45:00Z",
            imageUrl: "http://static.photos/finance/320x240/2"
        },
        {
            id: 3,
            title: "System Alert",
            timestamp: "2023-05-15T12:15:00Z",
            imageUrl: "http://static.photos/abstract/320x240/3"
        },
        {
            id: 4,
            title: "New Order Received",
            timestamp: "2023-05-15T11:20:00Z",
            imageUrl: "http://static.photos/office/320x240/4"
        },
        {
            id: 5,
            title: "API Usage Report",
            timestamp: "2023-05-15T10:05:00Z",
            imageUrl: "http://static.photos/data/320x240/5"
        },
        {
            id: 6,
            title: "Security Notification",
            timestamp: "2023-05-15T09:30:00Z",
            imageUrl: "http://static.photos/cybersecurity/320x240/6"
        }
    ];
    
    // Render images in gallery
    const imageGallery = document.getElementById('imageGallery');
    const noImagesMessage = document.getElementById('noImagesMessage');
    
    if (imageGallery && sampleImages.length > 0) {
        noImagesMessage.classList.add('hidden');
        
        sampleImages.forEach((img, index) => {
            // Add slight delay for staggered animation
            setTimeout(() => {
                const imageCard = document.createElement('div');
                imageCard.className = 'bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow animate-fade-in';
                imageCard.innerHTML = `
                    <div class="relative">
                        <img src="${img.imageUrl}" alt="${img.title}" class="w-full h-48 object-cover">
                        <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
                            ID: ${img.id}
                        </div>
                    </div>
                    <div class="p-4">
                        <h3 class="font-semibold text-gray-800 mb-1">${img.title}</h3>
                        <p class="text-gray-600 text-sm">${formatDate(img.timestamp)}</p>
                        <div class="mt-3 flex justify-between">
                            <a href="${img.imageUrl}" download class="text-indigo-600 hover:text-indigo-800 text-sm flex items-center">
                                <i data-feather="download" class="mr-1 w-4 h-4"></i> Download
                            </a>
                            <a href="#" class="text-gray-500 hover:text-gray-700 text-sm flex items-center">
                                <i data-feather="share-2" class="mr-1 w-4 h-4"></i> Share
                            </a>
                        </div>
                    </div>
                `;
                imageGallery.appendChild(imageCard);
                feather.replace();
            }, index * 150);
        });
    } else if (noImagesMessage) {
        noImagesMessage.classList.remove('hidden');
    }
    
    // Format date helper
    function formatDate(dateString) {
        const options = { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
        return new Date(dateString).toLocaleDateString(undefined, options);
    }
});