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();
  
  await page.goto('https://homeproz.dev.hanson.xyz/properties/', { timeout: 60000 });
  await page.waitForTimeout(3000);
  
  // Get document structure
  const docInfo = await page.evaluate(() => {
    const mapLayout = document.querySelector('.property-map-layout');
    const mapContainer = document.querySelector('.property-map-container');
    const footer = document.querySelector('footer.site-footer');
    
    const getDocPosition = el => {
      const rect = el.getBoundingClientRect();
      return {
        top: rect.top + window.scrollY,
        bottom: rect.top + rect.height + window.scrollY,
        height: rect.height
      };
    };
    
    return {
      mapLayout: mapLayout ? getDocPosition(mapLayout) : null,
      footer: footer ? getDocPosition(footer) : null,
      scrollHeight: document.documentElement.scrollHeight,
      viewportHeight: window.innerHeight,
      maxScroll: document.documentElement.scrollHeight - window.innerHeight,
      mapContentHeight: mapContainer ? mapContainer.getBoundingClientRect().height : null
    };
  });
  
  console.log('Document positions:', JSON.stringify(docInfo, null, 2));
  
  // Calculate when CSS sticky would stop the map
  // Sticky stops when: elementTop + elementHeight >= parentBottom
  // For sticky at top:100 -> when scrollY + 100 + mapHeight >= mapLayout.bottom
  const stickyStopScroll = docInfo.mapLayout.bottom - 100 - docInfo.mapContentHeight;
  console.log('\nCSS sticky should stop at scrollY:', stickyStopScroll);
  console.log('Max scroll possible:', docInfo.maxScroll);
  
  if (stickyStopScroll <= docInfo.maxScroll) {
    console.log('\nSticky WILL naturally stop before footer. Testing...');
    
    // Scroll past the sticky stop point
    const testScroll = Math.min(stickyStopScroll + 200, docInfo.maxScroll);
    await page.evaluate(y => window.scrollTo(0, y), testScroll);
    await page.waitForTimeout(500);
    
    const afterScroll = await page.evaluate(() => {
      const mapContainer = document.querySelector('.property-map-container');
      const footer = document.querySelector('footer.site-footer');
      
      return {
        actualScrollY: window.scrollY,
        mapViewportTop: mapContainer ? mapContainer.getBoundingClientRect().top : null,
        mapViewportBottom: mapContainer ? mapContainer.getBoundingClientRect().bottom : null,
        footerViewportTop: footer ? footer.getBoundingClientRect().top : null
      };
    });
    
    console.log('After scrolling to', testScroll);
    console.log('Actual scrollY:', afterScroll.actualScrollY);
    console.log('Map viewport position:', afterScroll.mapViewportTop, 'to', afterScroll.mapViewportBottom);
    console.log('Footer viewport top:', afterScroll.footerViewportTop);
    
    // Check if map extended past footer
    if (afterScroll.mapViewportBottom > afterScroll.footerViewportTop) {
      console.log('\n*** OVERLAP DETECTED! Map extends into footer by', 
        afterScroll.mapViewportBottom - afterScroll.footerViewportTop, 'px');
    } else {
      console.log('\nNo overlap. Gap:', afterScroll.footerViewportTop - afterScroll.mapViewportBottom, 'px');
    }
    
    await page.screenshot({ path: '/tmp/max-scroll-test.png' });
  } else {
    console.log('\nCannot scroll far enough to trigger sticky stop');
  }
  
  await browser.close();
})();