document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file-input');
    const browseBtn = document.getElementById('browse-btn');
    const previewContainer = document.getElementById('preview-container');
    const uploadContent = document.getElementById('upload-content');
    const imagePreview = document.getElementById('image-preview');
    const clearBtn = document.getElementById('clear-btn');
    const searchBtn = document.getElementById('search-btn');
    const resultsSection = document.getElementById('results-section');
    const resultsGrid = document.getElementById('results-grid');
    const loader = document.querySelector('custom-loader');

    // Drag and drop functionality
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, unhighlight, false);
    });

    function highlight() {
        dropZone.classList.add('active');
    }

    function unhighlight() {
        dropZone.classList.remove('active');
    }

    dropZone.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles(files);
    }

    browseBtn.addEventListener('click', () => {
        fileInput.click();
    });

    fileInput.addEventListener('change', function() {
        if (this.files.length) {
            handleFiles(this.files);
        }
    });

    clearBtn.addEventListener('click', resetUpload);
    
    function resetUpload() {
        fileInput.value = '';
        previewContainer.classList.add('hidden');
        uploadContent.classList.remove('hidden');
        resultsSection.classList.add('hidden');
    }

    function handleFiles(files) {
        const file = files[0];
        if (!file.type.match('image.*')) {
            alert('Please upload an image file');
            return;
        }

        const reader = new FileReader();
        reader.onload = function(e) {
            imagePreview.src = e.target.result;
            uploadContent.classList.add('hidden');
            previewContainer.classList.remove('hidden');
        }
        reader.readAsDataURL(file);
    }

    searchBtn.addEventListener('click', function() {
        if (!fileInput.files.length) {
            alert('Please select an image first');
            return;
        }

        // Show loader
        loader.toggleLoader(true);
        
        // Simulate API call (in a real app, you would call your backend API here)
        setTimeout(() => {
            loader.toggleLoader(false);
            displayMockResults();
            resultsSection.classList.remove('hidden');
            
            // Scroll to results
            resultsSection.scrollIntoView({ behavior: 'smooth' });
        }, 2000);
    });
    function displayMockResults() {
        // In a real app, you would display actual API results here
        resultsGrid.innerHTML = '';
        
        // Structured data for SEO
        const structuredData = {
            "@context": "https://schema.org",
            "@type": "WebApplication",
            "name": "FaceFlip Detective",
            "description": "Reverse face search engine to find people by photo",
            "applicationCategory": "SearchApplication",
            "operatingSystem": "Web Browser",
            "offers": {
                "@type": "Offer",
                "price": "0",
                "priceCurrency": "USD"
            }
        };
        
        const script = document.createElement('script');
        script.type = 'application/ld+json';
        script.text = JSON.stringify(structuredData);
        document.head.appendChild(script);
const mockResults = [
            { url: 'https://static.photos/people/320x240/1', source: 'Social Media', similarity: '85%' },
            { url: 'https://static.photos/people/320x240/2', source: 'News Article', similarity: '78%' },
            { url: 'https://static.photos/people/320x240/3', source: 'Public Records', similarity: '72%' },
            { url: 'https://static.photos/people/320x240/4', source: 'Forum Post', similarity: '65%' },
            { url: 'https://static.photos/people/320x240/5', source: 'Blog', similarity: '60%' },
            { url: 'https://static.photos/people/320x240/6', source: 'Archive', similarity: '55%' },
            { url: 'https://static.photos/people/320x240/7', source: 'Portfolio', similarity: '50%' },
            { url: 'https://static.photos/people/320x240/8', source: 'Dating Site', similarity: '48%' },
        ];

        mockResults.forEach(result => {
            const resultCard = document.createElement('div');
            resultCard.className = 'result-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg';
            resultCard.innerHTML = `
                <div class="relative pb-[100%]">
                    <img src="${result.url}" alt="Result" class="absolute h-full w-full object-cover">
                </div>
                <div class="p-3">
                    <p class="text-sm text-gray-600">Source: <span class="font-medium">${result.source}</span></p>
                    <p class="text-sm text-gray-600">Similarity: <span class="font-medium text-blue-500">${result.similarity}</span></p>
                </div>
            `;
            resultsGrid.appendChild(resultCard);
        });
    }
});