#!/usr/bin/env node

/**
 * Comprehensive MCP Theme System Demonstration
 * 
 * This script demonstrates the complete professional theme system:
 * - Built-in themes (minimal, corporate, hacker, glassmorphism, high-contrast)
 * - Custom theme creation and management
 * - Theme switching and persistence
 * - Accessibility features and responsive design
 * - Performance optimization
 */

const { createConnection } = require('./lib/index.js');

async function demonstrateThemeSystem() {
  console.log('🎨 MCP Professional Theme System Demonstration');
  console.log('='.repeat(60));
  console.log('Showcasing comprehensive theme management capabilities\n');

  const mcp = createConnection();

  try {
    // Setup: Navigate to a test page
    console.log('📱 Setting up test environment...');
    await mcp.request({
      method: 'tools/call',
      params: {
        name: 'browser_navigate',
        arguments: { url: 'https://example.com' }
      }
    });

    // ==========================================
    // PHASE 1: Explore Built-in Themes
    // ==========================================
    console.log('\n🔍 PHASE 1: Exploring Built-in Themes');
    console.log('-'.repeat(40));

    // List all available themes
    console.log('\n📋 Listing all available themes...');
    const themeList = await mcp.request({
      method: 'tools/call',
      params: {
        name: 'browser_mcp_theme_list',
        arguments: {
          includePreview: true,
          includeStats: true
        }
      }
    });
    
    themeList.result.forEach(item => {
      console.log('  ', item.text);
    });

    // Test each built-in theme
    const builtinThemes = [
      { id: 'minimal', name: 'Minimal GitHub-style', delay: 3000 },
      { id: 'corporate', name: 'Corporate Professional', delay: 3000 },
      { id: 'hacker', name: 'Hacker Matrix Terminal', delay: 4000 },
      { id: 'glassmorphism', name: 'Glass Morphism Modern', delay: 4000 },
      { id: 'highContrast', name: 'High Contrast Accessibility', delay: 3000 }
    ];

    for (const theme of builtinThemes) {
      console.log(`\n🎨 Testing ${theme.name} theme...`);
      
      // Get detailed theme information
      const themeDetails = await mcp.request({
        method: 'tools/call',
        params: {
          name: 'browser_mcp_theme_get',
          arguments: { themeId: theme.id }
        }
      });
      
      console.log('   Theme details:');
      themeDetails.result.slice(0, 8).forEach(item => {
        console.log('   ', item.text);
      });

      // Apply theme and enable toolbar
      await mcp.request({
        method: 'tools/call',
        params: {
          name: 'browser_mcp_theme_set',
          arguments: {
            themeId: theme.id,
            applyToToolbar: false, // We'll create fresh toolbar
            persistent: true
          }
        }
      });

      await mcp.request({
        method: 'tools/call',
        params: {
          name: 'browser_enable_debug_toolbar',
          arguments: {
            projectName: `Theme Demo: ${theme.name}`,
            position: 'top-right',
            themeId: theme.id,
            minimized: false,
            showDetails: true,
            opacity: 0.95
          }
        }
      });

      console.log(`   ✅ ${theme.name} theme applied and toolbar visible`);
      console.log(`   ⏰ Observing for ${theme.delay / 1000} seconds...`);
      await new Promise(resolve => setTimeout(resolve, theme.delay));

      // Disable toolbar before next theme
      await mcp.request({
        method: 'tools/call',
        params: {
          name: 'browser_disable_debug_toolbar',
          arguments: {}
        }
      });
    }

    // ==========================================
    // PHASE 2: Custom Theme Creation
    // ==========================================
    console.log('\n🛠️ PHASE 2: Custom Theme Creation');
    console.log('-'.repeat(40));

    // Create a custom startup theme
    console.log('\n🚀 Creating "Startup Energy" custom theme...');
    const customTheme1 = await mcp.request({
      method: 'tools/call',
      params: {
        name: 'browser_mcp_theme_create',
        arguments: {
          name: 'Startup Energy',
          description: 'Energetic theme perfect for startup demos and pitches',
          baseTheme: 'glassmorphism',
          colors: {
            primary: '#ff6b6b',
            primaryHover: '#ff5252',
            success: '#4ecdc4',
            warning: '#ffe66d',
            surface: 'rgba(255, 255, 255, 0.1)',
            textPrimary: '#ffffff'
          },
          effects: {
            borderRadius: '1rem',
            backdropBlur: '16px',
            opacity: 0.92
          },
          tags: ['startup', 'energetic', 'demo', 'modern']
        }
      }
    });

    customTheme1.result.forEach(item => {
      console.log('   ', item.text);
    });

    // Create a custom retro theme
    console.log('\n📺 Creating "Retro Computing" custom theme...');
    const customTheme2 = await mcp.request({
      method: 'tools/call',
      params: {
        name: 'browser_mcp_theme_create',
        arguments: {
          name: 'Retro Computing',
          description: '80s computing aesthetic with amber and green CRT vibes',
          baseTheme: 'hacker',
          colors: {
            primary: '#ffb000',
            primaryHover: '#ff9500',
            success: '#00ff00',
            surface: '#1a1a0d',
            textPrimary: '#ffb000',
            textSecondary: '#ccaa00'
          },
          effects: {
            borderRadius: '0.25rem',
            backdropBlur: '4px'
          },
          tags: ['retro', '80s', 'amber', 'computing', 'nostalgia']
        }
      }
    });

    customTheme2.result.forEach(item => {
      console.log('   ', item.text);
    });

    // ==========================================
    // PHASE 3: Theme Management & Features
    // ==========================================
    console.log('\n⚙️ PHASE 3: Theme Management Features');
    console.log('-'.repeat(40));

    // Test custom themes
    console.log('\n🎯 Testing custom themes...');
    
    // Apply Startup Energy theme
    await mcp.request({
      method: 'tools/call',
      params: {
        name: 'browser_mcp_theme_set',
        arguments: { themeId: 'startup_energy', persistent: true }
      }
    });

    await mcp.request({
      method: 'tools/call',
      params: {
        name: 'browser_enable_debug_toolbar',
        arguments: {
          projectName: 'Startup Pitch Demo',
          position: 'bottom-left',
          themeId: 'startup_energy',
          minimized: false,
          showDetails: true,
          opacity: 0.92
        }
      }
    });

    console.log('   🚀 Startup Energy theme applied');
    console.log('   ⏰ Testing for 4 seconds...');
    await new Promise(resolve => setTimeout(resolve, 4000));

    // Switch to Retro theme
    await mcp.request({
      method: 'tools/call',
      params: {
        name: 'browser_mcp_theme_set',
        arguments: { themeId: 'retro_computing', applyToToolbar: true }
      }
    });

    console.log('   📺 Switched to Retro Computing theme');
    console.log('   ⏰ Testing for 4 seconds...');
    await new Promise(resolve => setTimeout(resolve, 4000));

    // ==========================================
    // PHASE 4: Advanced Features Demo
    // ==========================================
    console.log('\n🔬 PHASE 4: Advanced Features');
    console.log('-'.repeat(40));

    // Test theme categories
    console.log('\n📁 Testing theme categories...');
    const categories = ['corporate', 'creative', 'accessibility'];
    
    for (const category of categories) {
      const categoryThemes = await mcp.request({
        method: 'tools/call',
        params: {
          name: 'browser_mcp_theme_list',
          arguments: { category }
        }
      });
      
      console.log(`\n   ${category.toUpperCase()} themes:`);
      categoryThemes.result.slice(1, 5).forEach(item => {
        console.log('     ', item.text);
      });
    }

    // Test accessibility features
    console.log('\n♿ Testing accessibility features...');
    await mcp.request({
      method: 'tools/call',
      params: {
        name: 'browser_mcp_theme_set',
        arguments: { themeId: 'highContrast', applyToToolbar: true }
      }
    });

    console.log('   ✅ High contrast theme applied for accessibility testing');
    console.log('   📊 Features: WCAG AAA compliance, 21:1 contrast ratio, reduced motion support');
    console.log('   ⏰ Testing for 3 seconds...');
    await new Promise(resolve => setTimeout(resolve, 3000));

    // Test theme persistence and management
    console.log('\n💾 Testing theme persistence...');
    const currentTheme = await mcp.request({
      method: 'tools/call',
      params: {
        name: 'browser_mcp_theme_get',
        arguments: {}
      }
    });

    console.log('   Current active theme:');
    currentTheme.result.slice(0, 6).forEach(item => {
      console.log('     ', item.text);
    });

    // ==========================================
    // PHASE 5: Interactive Testing
    // ==========================================
    console.log('\n🎮 PHASE 5: Interactive Testing');
    console.log('-'.repeat(40));

    // Reset to corporate theme for final demo
    await mcp.request({
      method: 'tools/call',
      params: {
        name: 'browser_mcp_theme_set',
        arguments: { themeId: 'corporate', applyToToolbar: true }
      }
    });

    console.log('\n💼 Final demo with Corporate theme...');
    console.log('🎯 Interactive features to test:');
    console.log('   • Click toolbar to toggle minimized/expanded');
    console.log('   • Drag toolbar to different positions');
    console.log('   • Tab navigation for keyboard accessibility');
    console.log('   • Hover effects and smooth animations');
    console.log('   • Responsive design on window resize');

    console.log('\n🔧 Theme Management Commands Available:');
    console.log('   • browser_mcp_theme_list - List all themes');
    console.log('   • browser_mcp_theme_set - Apply a theme');
    console.log('   • browser_mcp_theme_get - Get theme details');
    console.log('   • browser_mcp_theme_create - Create custom theme');
    console.log('   • browser_mcp_theme_reset - Reset to default');

    console.log('\n⏰ Interactive testing window: 30 seconds...');
    console.log('💡 Try resizing browser window to test responsive design!');
    await new Promise(resolve => setTimeout(resolve, 30000));

    // ==========================================
    // SUMMARY & CLEANUP
    // ==========================================
    console.log('\n📊 DEMONSTRATION SUMMARY');
    console.log('='.repeat(60));

    const finalStats = await mcp.request({
      method: 'tools/call',
      params: {
        name: 'browser_mcp_theme_list',
        arguments: { includeStats: true }
      }
    });

    console.log('\n📈 Theme System Statistics:');
    finalStats.result.slice(-6).forEach(item => {
      console.log('   ', item.text);
    });

    console.log('\n✅ DEMONSTRATION COMPLETED SUCCESSFULLY!');
    console.log('\n🎨 Theme System Features Demonstrated:');
    console.log('   ✓ 5 built-in professional themes');
    console.log('   ✓ Custom theme creation and management');
    console.log('   ✓ Real-time theme switching');
    console.log('   ✓ Accessibility compliance (WCAG 2.1 AA/AAA)');
    console.log('   ✓ Responsive design and mobile support');
    console.log('   ✓ Performance optimization');
    console.log('   ✓ Semantic HTML structure');
    console.log('   ✓ CSS custom properties architecture');
    console.log('   ✓ Professional developer experience');

    console.log('\n🚀 Ready for Production Use!');
    console.log('📚 See src/themes/README.md for complete documentation');

  } catch (error) {
    console.error('❌ Demonstration failed:', error);
    if (error.stack) {
      console.error('Stack trace:', error.stack);
    }
  } finally {
    // Cleanup
    try {
      console.log('\n🧹 Cleaning up...');
      
      // Reset to default theme
      await mcp.request({
        method: 'tools/call',
        params: {
          name: 'browser_mcp_theme_reset',
          arguments: { resetToTheme: 'corporate', clearCustomThemes: true }
        }
      });

      // Disable toolbar
      await mcp.request({
        method: 'tools/call',
        params: {
          name: 'browser_disable_debug_toolbar',
          arguments: {}
        }
      });

      console.log('✅ Cleanup completed');
    } catch (cleanupError) {
      console.error('⚠️ Cleanup error:', cleanupError);
    }
    
    await mcp.close();
  }
}

// Enhanced error handling
process.on('unhandledRejection', (reason, promise) => {
  console.error('❌ Unhandled Rejection at:', promise, 'reason:', reason);
  process.exit(1);
});

process.on('uncaughtException', (error) => {
  console.error('❌ Uncaught Exception:', error);
  process.exit(1);
});

// Run the demonstration
console.log('🎬 Starting MCP Theme System Demonstration...');
console.log('📋 This will showcase the complete professional theme system');
console.log('⏰ Total duration: approximately 2-3 minutes\n');

demonstrateThemeSystem().catch(error => {
  console.error('💥 Fatal error:', error);
  process.exit(1);
});