static/script.js

document.addEventListener('DOMContentLoaded', function() {
    const fileUpload = document.getElementById('file-upload');
    const imagePreview = document.getElementById('image-preview');
    const classifyBtn = document.getElementById('classify-btn');
    const results = document.querySelector('.results');
    const predictedClass = document.getElementById('predicted-class');
    const pesticide = document.getElementById('pesticide');
    const languageInputs = document.querySelectorAll('input[name="language"]');

    // Language switch handler
    languageInputs.forEach(input => {
        input.addEventListener('change', async function() {
            const selectedLanguage = this.value;
            
            // If there's already a classification result, refresh it
            if (!results.classList.contains('hidden')) {
                const file = fileUpload.files[0];
                const plantType = document.getElementById('plant-type').value;
                
                // Reclassify with new language
                await performClassification(file, plantType, selectedLanguage);
            }
        });
    });

    // File upload handler
    fileUpload.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
                classifyBtn.disabled = false;
            }
            reader.readAsDataURL(file);
        }
    });

    // Classification handler
    classifyBtn.addEventListener('click', async function() {
        const file = fileUpload.files[0];
        const plantType = document.getElementById('plant-type').value;
        const language = document.querySelector('input[name="language"]:checked').value;
        
        await performClassification(file, plantType, language);
    });

    // Separate classification function to be reusable
    async function performClassification(file, plantType, language) {
        const formData = new FormData();
        formData.append('file', file);
        formData.append('plant_type', plantType);
        formData.append('language', language);

        try {
            // Show loading state
            classifyBtn.disabled = true;
            classifyBtn.textContent = language === 'Marathi' ? 'प्रक्रिया सुरू आहे...' : 'Processing...';

            const response = await fetch('/classify', {
                method: 'POST',
                body: formData
            });
                
            const data = await response.json();
            
            if (response.ok) {
                results.classList.remove('hidden');
                predictedClass.textContent = data.predicted_class;
                pesticide.textContent = data.pesticide;
                
                // Fetch additional information
                await getAdditionalInfo(
                    data.predicted_class,
                    plantType,
                    language
                );
            } else {
                const errorMessage = language === 'Marathi' ? 
                    'त्रुटी: ' + data.error : 
                    'Error: ' + data.error;
                alert(errorMessage);
            }
        } catch (error) {
            const errorMessage = language === 'Marathi' ? 
                'त्रुटी: ' + error.message : 
                'Error: ' + error.message;
            alert(errorMessage);
        } finally {
            // Reset button state
            classifyBtn.disabled = false;
            classifyBtn.textContent = language === 'Marathi' ? 'वर्गीकरण करा' : 'Classify';
        }
    }

    // Additional info fetcher
    async function getAdditionalInfo(disease, plantType, language) {
        try {
            const response = await fetch('/get_additional_info', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    disease,
                    plant_type: plantType,
                    language
                })
            });

            const data = await response.json();
            
            // Update detailed info tab
            const detailedInfo = document.querySelector('#detailed-info .content');
            detailedInfo.innerHTML = data.detailed_info || (
                language === 'Marathi' ? 
                'तपशीलवार माहिती उपलब्ध नाही.' : 
                'No detailed information available.'
            );
            
            // Update commercial products tab
            const productsContent = document.querySelector('#commercial-products .content');
            productsContent.innerHTML = data.commercial_products?.map(product => `
                <div class="product">
                    <h4>${product.title}</h4>
                    <p>${product.snippet}</p>
                    <a href="${product.link}" target="_blank">${language === 'Marathi' ? 'अधिक वाचा' : 'Read More'}</a>
                </div>
            `).join('') || (
                language === 'Marathi' ? 
                'व्यावसायिक उत्पादने उपलब्ध नाहीत.' : 
                'No commercial products available.'
            );
            
            // Update more articles tab
            const articlesContent = document.querySelector('#more-articles .content');
            articlesContent.innerHTML = data.web_results?.map(article => `
                <div class="article">
                    <h4>${article.title}</h4>
                    <p>${article.snippet}</p>
                    <a href="${article.link}" target="_blank">${language === 'Marathi' ? 'अधिक वाचा' : 'Read More'}</a>
                </div>
            `).join('') || (
                language === 'Marathi' ? 
                'लेख उपलब्ध नाहीत.' : 
                'No articles available.'
            );
            
        } catch (error) {
            console.error('Error fetching additional info:', error);
        }
    }

    // Tab switching functionality
    document.querySelectorAll('.tab-btn').forEach(button => {
        button.addEventListener('click', () => {
            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
            
            button.classList.add('active');
            document.getElementById(button.dataset.tab).classList.add('active');
        });
    });
});