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

async function debugTradingViewLoginV3() {
  console.log('🚀 Starting TradingView login debug v3 - Looking for trigger elements...');
  
  const browser = await chromium.launch({ 
    headless: false,
    slowMo: 1000,
    devtools: true
  });
  
  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 
    });
    
    // Wait for page to settle
    await page.waitForTimeout(5000);
    
    console.log('📸 Taking initial screenshot...');
    await page.screenshot({ path: './debug-initial.png', fullPage: true });
    
    // Look for common TradingView login triggers
    console.log('🔍 Looking for login triggers...');
    
    const triggers = [
      // Email/password login button
      { selector: 'text="Email"', name: 'Email button' },
      { selector: 'text="Sign in with email"', name: 'Sign in with email' },
      { selector: 'text="Continue with email"', name: 'Continue with email' },
      { selector: '[data-name="email"]', name: 'Email data-name' },
      { selector: '[data-qa*="email"]', name: 'Email data-qa' },
      { selector: 'button:has-text("Email")', name: 'Button containing Email' },
      { selector: 'button:has-text("email")', name: 'Button containing email' },
      { selector: '.tv-signin-dialog__toggle-email', name: 'TV signin email toggle' },
      { selector: '.js-show-email', name: 'JS show email' },
      { selector: '[data-outside-click*="email"]', name: 'Data outside click email' },
      
      // General buttons that might trigger login
      { selector: 'button', name: 'Any button' },
      { selector: '[role="button"]', name: 'Role button' },
      { selector: 'a[href="#"]', name: 'Anchor with hash' },
      { selector: '.js-signin', name: 'JS signin class' },
    ];
    
    let foundTrigger = null;
    
    for (const trigger of triggers) {
      try {
        console.log(`  Checking: ${trigger.name} (${trigger.selector})`);
        
        if (trigger.selector === 'button' || trigger.selector === '[role="button"]') {
          // For generic buttons, check each one
          const buttons = await page.locator(trigger.selector).all();
          console.log(`    Found ${buttons.length} buttons`);
          
          for (let i = 0; i < Math.min(buttons.length, 10); i++) { // Check first 10 buttons
            try {
              const button = buttons[i];
              const text = await button.textContent();
              const isVisible = await button.isVisible();
              
              if (isVisible && text) {
                console.log(`      Button ${i + 1}: "${text.trim()}" (visible: ${isVisible})`);
                
                // Check if this button might be the email login trigger
                const lowerText = text.toLowerCase().trim();
                if (lowerText.includes('email') || lowerText.includes('sign') || lowerText.includes('continue')) {
                  console.log(`      ⭐ Potential trigger button: "${text.trim()}"`);
                  foundTrigger = { element: button, text: text.trim(), selector: trigger.selector };
                }
              }
            } catch (e) {
              console.log(`      Button ${i + 1}: Error - ${e.message}`);
            }
          }
        } else {
          // For specific selectors
          const element = await page.locator(trigger.selector).first();
          const isVisible = await element.isVisible({ timeout: 1000 });
          
          if (isVisible) {
            const text = await element.textContent();
            console.log(`    ✅ Found: "${text?.trim()}" (visible: ${isVisible})`);
            foundTrigger = { element, text: text?.trim(), selector: trigger.selector };
            break; // Use the first specific match
          } else {
            console.log(`    ❌ Not visible or not found`);
          }
        }
      } catch (e) {
        console.log(`    ❌ Error: ${e.message}`);
      }
    }
    
    if (foundTrigger) {
      console.log(`\n🎯 Found potential trigger: "${foundTrigger.text}" with selector: ${foundTrigger.selector}`);
      console.log('🖱️ Clicking the trigger...');
      
      try {
        await foundTrigger.element.click();
        console.log('✅ Clicked successfully!');
        
        // Wait for login form to appear after clicking
        await page.waitForTimeout(3000);
        
        console.log('📸 Taking screenshot after click...');
        await page.screenshot({ path: './debug-after-click.png', fullPage: true });
        
        // Now check for inputs again
        console.log('🔍 Checking for inputs after clicking...');
        const inputs = await page.locator('input').all();
        console.log(`📝 Found ${inputs.length} input elements after clicking`);
        
        for (let i = 0; i < inputs.length; i++) {
          const input = inputs[i];
          try {
            const type = await input.getAttribute('type');
            const name = await input.getAttribute('name');
            const placeholder = await input.getAttribute('placeholder');
            const isVisible = await input.isVisible();
            
            console.log(`  Input ${i + 1}: type="${type}", name="${name}", placeholder="${placeholder}", visible=${isVisible}`);
          } catch (e) {
            console.log(`  Input ${i + 1}: Error - ${e.message}`);
          }
        }
        
      } catch (e) {
        console.log(`❌ Error clicking trigger: ${e.message}`);
      }
    } else {
      console.log('\n❌ No login trigger found');
    }
    
    // Manual inspection
    console.log('\n🎮 Browser is open for manual inspection. Look for:');
    console.log('   - Buttons or links that might show email login form');
    console.log('   - Modal dialogs or popup forms');
    console.log('   - JavaScript console errors');
    console.log('   - Network requests when clicking buttons');
    console.log('\nPress Ctrl+C to close when done.');
    
    await page.waitForTimeout(300000); // Wait 5 minutes
    
  } catch (error) {
    console.error('❌ Error during debug:', error);
    await page.screenshot({ path: './debug-error-v3.png', fullPage: true });
  } finally {
    console.log('🔚 Closing browser...');
    await browser.close();
  }
}

process.on('SIGINT', () => {
  console.log('\n👋 Received SIGINT, closing browser...');
  process.exit(0);
});

debugTradingViewLoginV3().catch(console.error);