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

async function debugTimeframeChange() {
  console.log('🔍 Debugging TradingView timeframe change...');
  
  const browser = await chromium.launch({
    headless: false,  // Show browser for debugging
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  
  const page = await browser.newPage();
  
  try {
    // Navigate to TradingView chart (assuming we're already logged in or using a public chart)
    console.log('📊 Navigating to TradingView chart...');
    await page.goto('https://www.tradingview.com/chart/', { 
      waitUntil: 'networkidle',
      timeout: 30000 
    });
    
    // Wait for chart to load
    await page.waitForTimeout(5000);
    
    // Take screenshot of initial state
    await page.screenshot({ path: 'debug-timeframe-initial.png', fullPage: true });
    console.log('📸 Initial screenshot taken');
    
    // Look for all buttons and elements that might be timeframe related
    console.log('🔍 Analyzing page for timeframe controls...');
    
    const timeframeElements = await page.$$eval('*', (elements) => {
      const found = [];
      
      for (const el of elements) {
        const text = el.textContent?.trim() || '';
        const className = el.className || '';
        const tagName = el.tagName;
        const dataset = el.dataset || {};
        const ariaLabel = el.getAttribute('aria-label') || '';
        const title = el.getAttribute('title') || '';
        
        // Look for elements that might be timeframe related
        if (
          text.match(/^(1|5|15|30|60|1h|4h|1d|1w)$/i) ||
          text.match(/^\d+[mhd]$/i) ||
          (typeof className === 'string' && className.includes('interval')) ||
          (typeof className === 'string' && className.includes('timeframe')) ||
          (typeof ariaLabel === 'string' && ariaLabel.includes('timeframe')) ||
          (typeof ariaLabel === 'string' && ariaLabel.includes('interval')) ||
          (typeof title === 'string' && title.includes('timeframe')) ||
          (typeof title === 'string' && title.includes('interval'))
        ) {
          found.push({
            tagName,
            text: text.substring(0, 20),
            className: typeof className === 'string' ? className.substring(0, 100) : className,
            dataset,
            ariaLabel,
            title,
            outerHTML: el.outerHTML.substring(0, 200)
          });
        }
      }
      
      return found.slice(0, 20); // Limit results
    });
    
    console.log('🎯 Potential timeframe elements found:');
    console.log(JSON.stringify(timeframeElements, null, 2));
    
    // Try to find the "1h" button specifically
    console.log('\n🎯 Looking specifically for 1h timeframe...');
    
    const oneHourSelectors = [
      'button:has-text("1h")',
      'button:has-text("1H")', 
      '[data-value="1h"]',
      '[data-value="1H"]',
      '[data-value="60"]',
      '[title="1h"]',
      '[title="1H"]'
    ];
    
    for (const selector of oneHourSelectors) {
      try {
        console.log(`Trying selector: ${selector}`);
        const element = page.locator(selector).first();
        const isVisible = await element.isVisible({ timeout: 2000 });
        console.log(`Selector ${selector}: ${isVisible ? '✅ VISIBLE' : '❌ Not visible'}`);
        
        if (isVisible) {
          console.log('🎉 Found 1h button! Clicking...');
          await element.click();
          await page.waitForTimeout(2000);
          await page.screenshot({ path: 'debug-timeframe-after-click.png', fullPage: true });
          console.log('📸 After-click screenshot taken');
          break;
        }
      } catch (e) {
        console.log(`Selector ${selector}: ❌ Error - ${e.message}`);
      }
    }
    
    // Check current URL and title
    console.log('\n📍 Current page info:');
    console.log('URL:', await page.url());
    console.log('Title:', await page.title());
    
    console.log('\n⏱️ Waiting 10 seconds for manual inspection...');
    await page.waitForTimeout(10000);
    
  } catch (error) {
    console.error('❌ Error during debugging:', error);
  } finally {
    await browser.close();
    console.log('🏁 Debug session completed');
  }
}

debugTimeframeChange().catch(console.error);