script.js

let apiKey = localStorage.getItem('rapidapi-key');
let uploadCount = parseInt(localStorage.getItem('upload-count') || '0');
let currentImageUrl = null; // Store the current image URL

// Initialize the app
document.addEventListener('DOMContentLoaded', () => {
    updateUploadCount();
    updateApiStatus();
    
    // Load API key if exists
    if (apiKey) {
        document.getElementById('apiKey').value = apiKey;
    }

    // Event listener for image URL input
    const imageUrlInput = document.getElementById('imageUrlInput');
    imageUrlInput.addEventListener('input', (e) => {
        currentImageUrl = e.target.value.trim();
        updateApiStatus(); // Re-evaluate check button state after URL input
    });
});

function updateUploadCount() {
    document.getElementById('uploadCount').textContent = uploadCount;
}

function updateApiStatus() {
    const statusIndicator = document.getElementById('apiStatus');
    const statusDot = statusIndicator.querySelector('.status-dot');
    const statusText = statusIndicator.querySelector('.status-text');
    const checkBtn = document.getElementById('checkBtn');
    
    const imageUrlProvided = currentImageUrl && isValidUrl(currentImageUrl);

    if (apiKey) {
        statusDot.classList.add('active');
        statusText.textContent = 'API Key Configured';
        // Only enable check button if an image URL is also provided and valid
        checkBtn.disabled = !imageUrlProvided;
    } else {
        statusDot.classList.remove('active');
        statusText.textContent = 'API Key Required';
        checkBtn.disabled = true;
    }
}

function saveApiKey() {
    const input = document.getElementById('apiKey');
    const btn = input.nextElementSibling;
    
    if (!input.value.trim()) {
        showNotification('Please enter a valid API key', 'error');
        return;
    }
    
    btn.classList.add('loading');
    
    // Simulate API key validation
    setTimeout(() => {
        apiKey = input.value.trim();
        localStorage.setItem('rapidapi-key', apiKey);
        btn.classList.remove('loading');
        updateApiStatus();
        showNotification('API key saved successfully!', 'success');
    }, 1000);
}

function clearAll() {
    document.getElementById('imageUrlInput').value = '';
    currentImageUrl = null;
    document.getElementById('resultSection').style.display = 'none';
    updateApiStatus(); // Update check button state after clearing
}

function isValidUrl(string) {
    try {
        new URL(string);
        return true;
    } catch (_) {
        return false;
    }
}

async function checkAuthenticity() {
    const checkBtn = document.getElementById('checkBtn');
    
    if (!currentImageUrl || !isValidUrl(currentImageUrl)) {
        showNotification('Please enter a valid image URL to analyze', 'error');
        return;
    }

    if (!apiKey) {
        showNotification('Please save your RapidAPI key first.', 'error');
        return;
    }
    
    checkBtn.classList.add('loading');
    
    try {
        const response = await fetch('https://product-authentication-api-fake-vs-real-item-detector.p.rapidapi.com/check', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'x-rapidapi-host': 'product-authentication-api-fake-vs-real-item-detector.p.rapidapi.com',
                'x-rapidapi-key': apiKey
            },
            body: JSON.stringify({
                image_url: currentImageUrl // Send the provided image URL to the API
            })
        });
        
        if (!response.ok) {
            throw new Error(`API Error: ${response.status}`);
        }
        
        const result = await response.json();
        displayResult(result); 
        
        // Update upload count
        uploadCount++;
        localStorage.setItem('upload-count', uploadCount.toString());
        updateUploadCount();
        
    } catch (error) {
        console.error('Error:', error);
        showNotification('Authentication check failed. Please try again.', 'error');
        
        // For demo purposes, show a mock result even on error
        const mockResult = {
            status: 'fake', // Changed to fake for an example of error result
            brand: 'Unknown',
            description: 'Could not verify authenticity. Please try another image or check the URL.'
        };
        displayResult(mockResult);
    } finally {
        checkBtn.classList.remove('loading');
    }
}

function displayResult(result) {
    const resultSection = document.getElementById('resultSection');
    const resultBadge = document.getElementById('resultBadge');
    const resultImage = document.getElementById('resultImage');
    const resultBrand = document.getElementById('resultBrand');
    const resultStatus = document.getElementById('resultStatus');
    const resultDescription = document.getElementById('resultDescription');
    
    // Update badge
    resultBadge.className = `result-badge ${result.status}`;
    resultBadge.querySelector('.badge-text').textContent = result.status === 'real' ? 'Authentic' : 'Fake';
    
    // Update image - use the URL stored in currentImageUrl
    resultImage.src = currentImageUrl;
    
    // Update details
    resultBrand.textContent = result.brand || 'Unknown';
    resultStatus.textContent = result.status === 'real' ? 'Authentic Product' : 'Counterfeit Product';
    resultDescription.textContent = result.description || 'No description available';
    
    // Show result section with animation
    resultSection.style.display = 'block';
    setTimeout(() => {
        resultSection.scrollIntoView({ behavior: 'smooth' });
    }, 100);
    
    showNotification(`Product analyzed: ${result.status === 'real' ? 'Authentic' : 'Counterfeit'}`, result.status === 'real' ? 'success' : 'warning');
}

function showNotification(message, type = 'info') {
    // Create notification element
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.textContent = message;
    
    // Style the notification
    Object.assign(notification.style, {
        position: 'fixed',
        top: '20px',
        right: '20px',
        padding: '1rem 1.5rem',
        borderRadius: '12px',
        fontWeight: '600',
        fontSize: '0.875rem',
        zIndex: '1000',
        transform: 'translateX(400px)',
        transition: 'transform 0.3s ease',
        maxWidth: '300px',
        boxShadow: '0 10px 25px rgba(0,0,0,0.1)'
    });
    
    // Set colors based on type
    const colors = {
        success: { bg: '#10B981', color: 'white' },
        error: { bg: '#EF4444', color: 'white' },
        warning: { bg: '#F59E0B', color: 'white' },
        info: { bg: '#3B82F6', color: 'white' }
    };
    
    notification.style.backgroundColor = colors[type].bg;
    notification.style.color = colors[type].color;
    
    document.body.appendChild(notification);
    
    // Animate in
    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
    }, 10);
    
    // Remove after delay
    setTimeout(() => {
        notification.style.transform = 'translateX(400px)';
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 300);
    }, 3000);
}