// Test script for SideBar Vue components
// This can be run in the browser console when the chat client is loaded

console.log('Testing SideBar Vue components...');

// Test if all components are available
function testComponentAvailability() {
    console.log('🧪 Testing component availability...');
    
    // Check if Vue is available
    if (!window.Vue || !window.Vue.createApp) {
        console.error('❌ Vue is not available');
        return false;
    }
    console.log('✅ Vue is available');
    
    // Check if chatConfig is available
    if (!window.chatConfig) {
        console.error('❌ window.chatConfig is not available');
        return false;
    }
    console.log('✅ window.chatConfig is available');
    
    // Check if sidebar container exists
    const container = document.getElementById('sidebar-container');
    if (!container) {
        console.error('❌ #sidebar-container not found in DOM');
        return false;
    }
    console.log('✅ #sidebar-container found in DOM');
    
    return true;
}

// Test sidebar component props
function testSidebarProps() {
    console.log('🧪 Testing sidebar props...');
    
    const expectedProps = {
        tenantMake: window.chatConfig.tenantMake || {},
        explanationText: window.chatConfig.explanation || '',
        initialLanguage: window.chatConfig.language || 'nl',
        supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
        allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de'],
        apiPrefix: window.chatConfig.apiPrefix || ''
    };
    
    console.log('📋 Expected props:', expectedProps);
    
    // Validate props
    if (!expectedProps.tenantMake.name) {
        console.warn('⚠️ tenantMake.name is empty');
    }
    
    if (!expectedProps.explanationText) {
        console.warn('⚠️ explanationText is empty');
    }
    
    if (!expectedProps.supportedLanguageDetails || Object.keys(expectedProps.supportedLanguageDetails).length === 0) {
        console.warn('⚠️ supportedLanguageDetails is empty, using defaults');
    }
    
    console.log('✅ Props validation completed');
    return expectedProps;
}

// Test if old sidebar elements are removed
function testOldSidebarCleanup() {
    console.log('🧪 Testing old sidebar cleanup...');
    
    const oldElements = [
        'sidebar-explanation',
        'language-selector-container'
    ];
    
    let foundOldElements = false;
    oldElements.forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            console.warn(`⚠️ Old element #${id} still exists in DOM`);
            foundOldElements = true;
        }
    });
    
    if (!foundOldElements) {
        console.log('✅ No old sidebar elements found - cleanup successful');
    }
    
    return !foundOldElements;
}

// Test translation functionality
async function testTranslationIntegration() {
    console.log('🧪 Testing translation integration...');
    
    try {
        // Test if translation API is accessible
        const response = await fetch('/api/translate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin',
            body: JSON.stringify({
                text: 'Test translation',
                target_lang: 'nl',
                context: 'sidebar_test'
            })
        });
        
        if (response.ok) {
            const result = await response.json();
            console.log('✅ Translation API is accessible:', result.success ? 'Success' : 'Failed');
            return result.success;
        } else {
            console.warn('⚠️ Translation API returned error:', response.status);
            return false;
        }
    } catch (error) {
        console.warn('⚠️ Translation API test failed:', error.message);
        return false;
    }
}

// Run all tests
async function runAllSidebarTests() {
    console.log('🚀 Starting SideBar component tests...');
    
    console.log('\n1. Testing component availability...');
    const availabilityTest = testComponentAvailability();
    
    console.log('\n2. Testing sidebar props...');
    const props = testSidebarProps();
    
    console.log('\n3. Testing old sidebar cleanup...');
    const cleanupTest = testOldSidebarCleanup();
    
    console.log('\n4. Testing translation integration...');
    const translationTest = await testTranslationIntegration();
    
    console.log('\n📊 Test Results Summary:');
    console.log(`Component Availability: ${availabilityTest ? '✅' : '❌'}`);
    console.log(`Props Validation: ✅`);
    console.log(`Old Sidebar Cleanup: ${cleanupTest ? '✅' : '⚠️'}`);
    console.log(`Translation Integration: ${translationTest ? '✅' : '⚠️'}`);
    
    const allPassed = availabilityTest && cleanupTest && translationTest;
    console.log(`\n🎯 Overall Status: ${allPassed ? '✅ All tests passed!' : '⚠️ Some tests need attention'}`);
    
    return {
        availability: availabilityTest,
        cleanup: cleanupTest,
        translation: translationTest,
        props: props,
        overall: allPassed
    };
}

// Export for manual testing
if (typeof window !== 'undefined') {
    window.testComponentAvailability = testComponentAvailability;
    window.testSidebarProps = testSidebarProps;
    window.testOldSidebarCleanup = testOldSidebarCleanup;
    window.testTranslationIntegration = testTranslationIntegration;
    window.runAllSidebarTests = runAllSidebarTests;
    
    console.log('SideBar test functions available:');
    console.log('- testComponentAvailability()');
    console.log('- testSidebarProps()');
    console.log('- testOldSidebarCleanup()');
    console.log('- testTranslationIntegration()');
    console.log('- runAllSidebarTests()');
}

// Auto-run if in Node.js environment (for CI/CD)
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        testComponentAvailability,
        testSidebarProps,
        testOldSidebarCleanup,
        testTranslationIntegration,
        runAllSidebarTests
    };
}