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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({ viewport: { width: 1400, height: 800 } });
  const page = await context.newPage();
  
  page.on('console', msg => console.log('BROWSER:', msg.text()));
  
  await page.goto('https://homeproz.dev.hanson.xyz/properties/', { timeout: 60000 });
  await page.waitForTimeout(3000);
  
  // Check JS state
  const jsState = await page.evaluate(() => {
    const map = document.querySelector('.property-map-container');
    const footer = document.querySelector('footer.site-footer');
    const results = document.querySelector('.property-results-map, .property-results-grid');
    
    if (!map || !footer) {
      return { error: 'Required elements not found', mapFound: !!map, footerFound: !!footer };
    }
    
    const scrollTop = window.scrollY;
    const footerTop = footer.getBoundingClientRect().top + scrollTop;
    const mapHeight = map.getBoundingClientRect().height;
    const stickyTop = 100;
    const mapBottomIfSticky = scrollTop + stickyTop + mapHeight;
    
    const resultsBottom = results ? 
      results.getBoundingClientRect().top + scrollTop + results.getBoundingClientRect().height : 
      Infinity;
    
    const stopPoint = Math.min(footerTop, resultsBottom);
    
    return {
      scrollTop,
      footerTop,
      mapHeight,
      mapBottomIfSticky,
      resultsBottom,
      stopPoint,
      shouldStop: mapBottomIfSticky >= stopPoint - 20,
      hasStoppedClass: map.classList.contains('sticky-stopped'),
      computedPosition: window.getComputedStyle(map).position
    };
  });
  
  console.log('\nJS State at current scroll:', JSON.stringify(jsState, null, 2));
  
  if (jsState.stopPoint && !jsState.error) {
    const targetScroll = jsState.stopPoint - 100 - jsState.mapHeight + 50;
    
    console.log('\nScrolling to', targetScroll, 'to trigger stop...');
    await page.evaluate((y) => window.scrollTo(0, y), targetScroll);
    await page.waitForTimeout(500);
    
    const afterState = await page.evaluate(() => {
      const map = document.querySelector('.property-map-container');
      const footer = document.querySelector('footer.site-footer');
      
      return {
        scrollY: window.scrollY,
        footerViewportY: footer ? footer.getBoundingClientRect().top : null,
        mapBottom: map ? map.getBoundingClientRect().top + map.getBoundingClientRect().height : null,
        hasStoppedClass: map ? map.classList.contains('sticky-stopped') : null,
        computedPosition: map ? window.getComputedStyle(map).position : null
      };
    });
    
    console.log('\nAfter scroll:', JSON.stringify(afterState, null, 2));
    
    await page.screenshot({ path: '/tmp/sticky-after-scroll.png' });
  }
  
  await browser.close();
})();