document.addEventListener('DOMContentLoaded', function() {
    // DOM Elements
    const fileUpload = document.getElementById('file-upload');
    const previewImage = document.getElementById('preview-image');
    const previewPlaceholder = document.getElementById('preview-placeholder');
    const previewSection = document.getElementById('preview-section');
    const analyzeBtn = document.getElementById('analyze-btn');
    const resultsContainer = document.getElementById('results-container');
    const resultsTable = document.getElementById('results-table');
    const topPrediction = document.getElementById('top-prediction');

    // Handle file upload
    fileUpload.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(event) {
                previewImage.src = event.target.result;
                previewImage.classList.remove('hidden');
                previewPlaceholder.classList.add('hidden');
                previewSection.classList.remove('hidden');
                resultsContainer.classList.add('hidden');
            }
            reader.readAsDataURL(file);
        }
    });

    // Simulate analysis (in a real app, this would call your API)
    analyzeBtn.addEventListener('click', function() {
        // Show loading state
        analyzeBtn.innerHTML = '<div class="loader"></div>';
        analyzeBtn.disabled = true;
        
        // Simulate API call delay
        setTimeout(function() {
            // Mock results
            const mockResults = [
                { material: 'Cotton', confidence: 92.5 },
                { material: 'Polyester', confidence: 7.1 },
                { material: 'Wool', confidence: 0.4 },
                { material: 'Silk', confidence: 0.0 }
            ];
            
            // Display results
            displayResults(mockResults);
            
            // Reset button
            analyzeBtn.innerHTML = '<i data-feather="search" class="w-5 h-5"></i> Analyze Material';
            analyzeBtn.disabled = false;
            feather.replace();
        }, 2000);
    });

    // Display results in the UI
    function displayResults(results) {
        // Show results container
        resultsContainer.classList.remove('hidden');
        
        // Set top prediction
        topPrediction.innerHTML = `Top Prediction: <strong>${results[0].material}</strong> (${results[0].confidence.toFixed(1)}%)`;
        
        // Clear previous results
        resultsTable.innerHTML = '';
        
        // Add each result to the table
        results.forEach(result => {
            const row = document.createElement('tr');
            
            const materialCell = document.createElement('td');
            materialCell.className = 'py-3 px-4';
            materialCell.textContent = result.material;
            
            const confidenceCell = document.createElement('td');
            confidenceCell.className = 'py-3 px-4';
            
            const confidenceBar = document.createElement('div');
            confidenceBar.className = 'flex items-center gap-2';
            
            const barContainer = document.createElement('div');
            barContainer.className = 'flex-1 bg-gray-200 rounded-full h-2.5';
            
            const bar = document.createElement('div');
            bar.className = 'bg-primary-500 h-2.5 rounded-full';
            bar.style.width = `${result.confidence}%`;
            
            const percentage = document.createElement('span');
            percentage.className = 'text-sm text-gray-600';
            percentage.textContent = `${result.confidence.toFixed(1)}%`;
            
            barContainer.appendChild(bar);
            confidenceBar.appendChild(barContainer);
            confidenceBar.appendChild(percentage);
            confidenceCell.appendChild(confidenceBar);
            
            row.appendChild(materialCell);
            row.appendChild(confidenceCell);
            resultsTable.appendChild(row);
        });
        
        // Refresh feather icons
        feather.replace();
    }
});