#!/usr/bin/env node

// Test script to verify LanguageSelector component functionality
// This script tests if the component can be imported and has the correct structure

const fs = require('fs');
const path = require('path');

console.log('🔍 Testing Vue component refactoring...');

// Read the LanguageSelector component file
const languageSelectorPath = path.join(__dirname, 'eveai_chat_client/static/assets/js/components/LanguageSelector.js');

if (!fs.existsSync(languageSelectorPath)) {
    console.error('❌ LanguageSelector.js file not found!');
    process.exit(1);
}

const componentContent = fs.readFileSync(languageSelectorPath, 'utf8');

// Test 1: Check that renderComponent method is removed
console.log('🔍 Test 1: Checking renderComponent method is removed...');
if (componentContent.includes('renderComponent()')) {
    console.error('❌ FAIL: renderComponent method still exists!');
    process.exit(1);
} else {
    console.log('✅ PASS: renderComponent method successfully removed');
}

// Test 2: Check that render() fallback method is removed
console.log('🔍 Test 2: Checking render() fallback method is removed...');
if (componentContent.includes('render()')) {
    console.error('❌ FAIL: render() fallback method still exists!');
    process.exit(1);
} else {
    console.log('✅ PASS: render() fallback method successfully removed');
}

// Test 3: Check that Vue template exists
console.log('🔍 Test 3: Checking Vue template exists...');
if (componentContent.includes('template:') && componentContent.includes('v-model="selectedLanguage"')) {
    console.log('✅ PASS: Vue template with v-model exists');
} else {
    console.error('❌ FAIL: Vue template missing or incorrect!');
    process.exit(1);
}

// Test 4: Check that component has proper Vue structure
console.log('🔍 Test 4: Checking Vue component structure...');
const hasName = componentContent.includes("name: 'LanguageSelector'");
const hasProps = componentContent.includes('props:');
const hasData = componentContent.includes('data()');
const hasMethods = componentContent.includes('methods:');
const hasMounted = componentContent.includes('mounted()');

if (hasName && hasProps && hasData && hasMethods && hasMounted) {
    console.log('✅ PASS: Component has proper Vue structure');
} else {
    console.error('❌ FAIL: Component missing Vue structure elements');
    console.error(`  - name: ${hasName}`);
    console.error(`  - props: ${hasProps}`);
    console.error(`  - data: ${hasData}`);
    console.error(`  - methods: ${hasMethods}`);
    console.error(`  - mounted: ${hasMounted}`);
    process.exit(1);
}

// Test 5: Check that chat-client.js fallback logic is removed
console.log('🔍 Test 5: Checking chat-client.js fallback logic is removed...');
const chatClientPath = path.join(__dirname, 'nginx/frontend_src/js/chat-client.js');

if (!fs.existsSync(chatClientPath)) {
    console.error('❌ chat-client.js file not found!');
    process.exit(1);
}

const chatClientContent = fs.readFileSync(chatClientPath, 'utf8');

if (chatClientContent.includes('LanguageSelector.renderComponent') || 
    chatClientContent.includes('Noodoplossing: Handmatige DOM manipulatie')) {
    console.error('❌ FAIL: Fallback logic still exists in chat-client.js!');
    process.exit(1);
} else {
    console.log('✅ PASS: Fallback logic successfully removed from chat-client.js');
}

// Test 6: Check build output exists
console.log('🔍 Test 6: Checking build output exists...');
const chatClientBundlePath = path.join(__dirname, 'nginx/static/dist/chat-client.js');

if (!fs.existsSync(chatClientBundlePath)) {
    console.error('❌ FAIL: chat-client.js bundle not found!');
    process.exit(1);
} else {
    const bundleStats = fs.statSync(chatClientBundlePath);
    console.log(`✅ PASS: chat-client.js bundle exists (${Math.round(bundleStats.size / 1024)} KB)`);
}

// Test 7: Check ChatInput component
console.log('🔍 Test 7: Checking ChatInput component refactoring...');
const chatInputPath = path.join(__dirname, 'eveai_chat_client/static/assets/js/components/ChatInput.js');

if (!fs.existsSync(chatInputPath)) {
    console.error('❌ ChatInput.js file not found!');
    process.exit(1);
}

const chatInputContent = fs.readFileSync(chatInputPath, 'utf8');

if (chatInputContent.includes('renderComponent(container, props, app)')) {
    console.error('❌ FAIL: ChatInput renderComponent method still exists!');
    process.exit(1);
} else {
    console.log('✅ PASS: ChatInput renderComponent method successfully removed');
}

// Check ChatInput has proper Vue template
if (chatInputContent.includes('template:') && chatInputContent.includes('v-model="localMessage"')) {
    console.log('✅ PASS: ChatInput Vue template with v-model exists');
} else {
    console.error('❌ FAIL: ChatInput Vue template missing or incorrect!');
    process.exit(1);
}

console.log('\n🎉 All tests passed! LanguageSelector and ChatInput components successfully refactored to use pure Vue templates.');
console.log('\n📋 Summary of changes:');
console.log('  ✅ LanguageSelector: Removed renderComponent() method');
console.log('  ✅ LanguageSelector: Removed render() fallback method');
console.log('  ✅ LanguageSelector: Removed renderComponent() call from mounted()');
console.log('  ✅ ChatInput: Removed renderComponent() method');
console.log('  ✅ Removed fallback logic from chat-client.js');
console.log('  ✅ Kept clean Vue templates with proper reactivity');
console.log('  ✅ Build completed successfully');
console.log('\n🔧 Next components to refactor:');
console.log('  - MessageHistory.js');
console.log('  - ChatMessage.js');
console.log('  - TypingIndicator.js');
console.log('  - ProgressTracker.js');
console.log('  - DynamicForm.js');
console.log('  - FormField.js');
console.log('  - FormMessage.js');