const { chromium } = require('playwright');

async function debugTradingViewLogin() {
  console.log('🚀 Starting TradingView login debug...');
  
  const browser = await chromium.launch({ 
    headless: false,  // Show the browser
    slowMo: 1000,     // Slow down by 1000ms
    devtools: true    // Open devtools
  });
  
  const context = await browser.newContext({
    viewport: { width: 1280, height: 720 },
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36'
  });
  
  const page = await context.newPage();
  
  try {
    console.log('📍 Navigating to TradingView login page...');
    await page.goto('https://www.tradingview.com/accounts/signin/', { 
      waitUntil: 'networkidle',
      timeout: 30000 
    });
    
    console.log('📄 Current URL:', page.url());
    console.log('📋 Page title:', await page.title());
    
    // Wait a bit for dynamic content to load
    console.log('⏳ Waiting for page to settle...');
    await page.waitForTimeout(3000);
    
    // Take a screenshot for debugging
    await page.screenshot({ path: './debug-tradingview-visible.png', fullPage: true });
    console.log('📸 Screenshot saved as debug-tradingview-visible.png');
    
    // Try to find login form elements
    console.log('🔍 Looking for login form elements...');
    
    // Check for various email input selectors
    const emailSelectors = [
      'input[type="email"]',
      'input[name="email"]',
      'input[id*="email"]',
      'input[placeholder*="email" i]',
      'input[placeholder*="Email" i]',
      'input[data-name="email"]',
      '[data-qa="email-input"]',
      '[name="id_username"]',
      '[name="username"]'
    ];
    
    let emailInput = null;
    for (const selector of emailSelectors) {
      try {
        emailInput = await page.locator(selector).first();
        if (await emailInput.isVisible()) {
          console.log(`✅ Found email input with selector: ${selector}`);
          break;
        }
      } catch (e) {
        // Continue to next selector
      }
    }
    
    if (!emailInput || !(await emailInput.isVisible())) {
      console.log('❌ No email input found with any selector');
      
      // Try to find any input fields
      const allInputs = await page.locator('input').all();
      console.log(`📝 Found ${allInputs.length} total input elements`);
      
      for (let i = 0; i < allInputs.length; i++) {
        const input = allInputs[i];
        try {
          const type = await input.getAttribute('type');
          const name = await input.getAttribute('name');
          const id = await input.getAttribute('id');
          const placeholder = await input.getAttribute('placeholder');
          const isVisible = await input.isVisible();
          
          console.log(`  Input ${i + 1}: type="${type}", name="${name}", id="${id}", placeholder="${placeholder}", visible=${isVisible}`);
        } catch (e) {
          console.log(`  Input ${i + 1}: Error getting attributes - ${e.message}`);
        }
      }
    }
    
    // Check for iframes
    const frames = page.frames();
    console.log(`🖼️ Found ${frames.length} frames on the page`);
    
    for (let i = 0; i < frames.length; i++) {
      const frame = frames[i];
      try {
        const url = frame.url();
        const name = frame.name();
        console.log(`  Frame ${i + 1}: url="${url}", name="${name}"`);
        
        // Check for inputs in each iframe
        if (url && url !== 'about:blank') {
          try {
            const frameInputs = await frame.locator('input').all();
            console.log(`    Found ${frameInputs.length} inputs in this frame`);
            
            for (let j = 0; j < frameInputs.length; j++) {
              const input = frameInputs[j];
              try {
                const type = await input.getAttribute('type');
                const name = await input.getAttribute('name');
                const placeholder = await input.getAttribute('placeholder');
                console.log(`      Frame input ${j + 1}: type="${type}", name="${name}", placeholder="${placeholder}"`);
              } catch (e) {
                console.log(`      Frame input ${j + 1}: Error - ${e.message}`);
              }
            }
          } catch (e) {
            console.log(`    Error checking frame inputs: ${e.message}`);
          }
        }
      } catch (e) {
        console.log(`  Frame ${i + 1}: Error - ${e.message}`);
      }
    }
    
    // Wait for user interaction
    console.log('\n🎮 Browser is open for manual inspection. Press Ctrl+C to close when done.');
    console.log('💡 Try to find the login form manually and note down the correct selectors.');
    
    // Keep the browser open for manual inspection
    await page.waitForTimeout(300000); // Wait 5 minutes
    
  } catch (error) {
    console.error('❌ Error during debug:', error);
    await page.screenshot({ path: './debug-tradingview-error.png', fullPage: true });
  } finally {
    console.log('🔚 Closing browser...');
    await browser.close();
  }
}

// Handle Ctrl+C to close gracefully
process.on('SIGINT', () => {
  console.log('\n👋 Received SIGINT, closing browser...');
  process.exit(0);
});

debugTradingViewLogin().catch(console.error);