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

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  
  // Enable console logging
  page.on('console', msg => console.log(`[CONSOLE] ${msg.type()}: ${msg.text()}`));
  page.on('pageerror', error => console.error(`[PAGE ERROR] ${error.message}`));
  page.on('requestfailed', request => console.error(`[REQUEST FAILED] ${request.url()} - ${request.failure().errorText}`));
  
  try {
    console.log('Navigating to http://localhost:3000...');
    await page.goto('http://localhost:3000', { waitUntil: 'networkidle' });
    
    console.log('Waiting for page to load...');
    // Wait for the main content to load
    await page.waitForSelector('h1:has-text("Paragliding Weather Dashboard")', { timeout: 10000 });
    console.log('✓ Page loaded successfully');
    
    // Wait a bit for data to load
    await page.waitForTimeout(2000);
    
    // Check if there are any error messages
    const errorElements = await page.locator('text=/error|Error|failed|Failed/i').all();
    if (errorElements.length > 0) {
      console.log(`⚠ Found ${errorElements.length} potential error elements`);
      for (const elem of errorElements) {
        const text = await elem.textContent();
        console.log(`  - ${text}`);
      }
    }
    
    // Try to expand the threshold controls
    console.log('\nLooking for Threshold Controls...');
    const thresholdToggle = page.locator('text=Threshold Controls').first();
    if (await thresholdToggle.isVisible()) {
      console.log('✓ Found Threshold Controls, clicking to expand...');
      await thresholdToggle.click();
      await page.waitForTimeout(500);
    }
    
    // Try to interact with sliders
    console.log('\nLooking for sliders...');
    const sliders = await page.locator('input[type="range"], [role="slider"]').all();
    console.log(`Found ${sliders.length} sliders`);
    
    if (sliders.length > 0) {
      // Try to interact with the first slider (min speed)
      console.log('Interacting with first slider (min speed)...');
      const firstSlider = sliders[0];
      
      // Get current value
      const currentValue = await firstSlider.inputValue();
      console.log(`  Current value: ${currentValue}`);
      
      // Try to set a new value
      const newValue = parseFloat(currentValue) + 1;
      console.log(`  Setting to: ${newValue}`);
      await firstSlider.fill(newValue.toString());
      await page.waitForTimeout(1000);
      
      // Check if value updated
      const updatedValue = await firstSlider.inputValue();
      console.log(`  Updated value: ${updatedValue}`);
    }
    
    // Try to interact with direction center slider
    console.log('\nLooking for direction center slider...');
    const dirSliders = await page.locator('[aria-label*="direction"], [aria-label*="Direction"]').all();
    if (dirSliders.length > 0) {
      console.log(`Found ${dirSliders.length} direction-related sliders`);
      const dirSlider = dirSliders.find(async (s) => {
        const label = await s.getAttribute('aria-label');
        return label && label.includes('center');
      });
      
      if (dirSlider) {
        console.log('Interacting with direction center slider...');
        const currentDir = await dirSlider.inputValue();
        console.log(`  Current direction: ${currentDir}°`);
        
        // Try to change direction
        const newDir = (parseInt(currentDir) + 45) % 360;
        console.log(`  Setting to: ${newDir}°`);
        await dirSlider.fill(newDir.toString());
        await page.waitForTimeout(1000);
      }
    }
    
    // Check for any API errors in network tab
    console.log('\nChecking network requests...');
    const responses = [];
    page.on('response', response => {
      if (response.url().includes('/api/')) {
        responses.push({
          url: response.url(),
          status: response.status(),
          statusText: response.statusText()
        });
      }
    });
    
    // Trigger a refresh by clicking refresh if available
    const refreshButton = page.locator('button:has-text("Refresh"), button[aria-label*="refresh" i]').first();
    if (await refreshButton.isVisible({ timeout: 2000 })) {
      console.log('Clicking refresh button...');
      await refreshButton.click();
      await page.waitForTimeout(2000);
    }
    
    // Wait a bit more to capture responses
    await page.waitForTimeout(2000);
    
    console.log('\nAPI Response Summary:');
    responses.forEach(r => {
      const status = r.status >= 200 && r.status < 300 ? '✓' : '✗';
      console.log(`  ${status} ${r.url} - ${r.status} ${r.statusText}`);
    });
    
    // Take a screenshot for debugging
    await page.screenshot({ path: 'test-screenshot.png', fullPage: true });
    console.log('\n✓ Screenshot saved to test-screenshot.png');
    
    console.log('\n✓ Test completed successfully');
    
  } catch (error) {
    console.error('\n✗ Test failed:', error.message);
    await page.screenshot({ path: 'test-error.png', fullPage: true });
    console.log('Error screenshot saved to test-error.png');
  } finally {
    // Keep browser open for a bit to see results
    await page.waitForTimeout(3000);
    await browser.close();
  }
})();