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);
  
  // Disable infinite scroll before any scrolling
  await page.evaluate(() => {
    // Stop the observer
    if (window.PropertyFilters && window.PropertyFilters.infiniteScrollObserver) {
      window.PropertyFilters.infiniteScrollObserver.disconnect();
      window.PropertyFilters.infiniteScrollEnabled = false;
    }
    // Remove infinite scroll elements
    document.querySelectorAll('.infinite-scroll-sentinel, .infinite-scroll-loader, .infinite-scroll-padding')
      .forEach(el => el.remove());
    // Remove the enabled class
    const results = document.querySelector('#property-results');
    if (results) results.classList.remove('infinite-scroll-enabled');
  });
  
  console.log('Infinite scroll disabled');
  
  // Get positions now
  const positions = await page.evaluate(() => {
    const mapLayout = document.querySelector('.property-map-layout');
    const footer = document.querySelector('footer.site-footer');
    const mapContainer = document.querySelector('.property-map-container');
    
    return {
      mapLayoutBottom: mapLayout ? mapLayout.getBoundingClientRect().bottom + window.scrollY : null,
      footerTop: footer ? footer.getBoundingClientRect().top + window.scrollY : null,
      mapHeight: mapContainer ? mapContainer.getBoundingClientRect().height : null,
      scrollHeight: document.documentElement.scrollHeight,
      maxScroll: document.documentElement.scrollHeight - 800
    };
  });
  
  console.log('Positions:', JSON.stringify(positions, null, 2));
  
  // Calculate where sticky would stop
  const stickyStop = positions.mapLayoutBottom - 100 - positions.mapHeight;
  console.log('Sticky stops at scrollY:', stickyStop);
  console.log('Max scroll:', positions.maxScroll);
  
  // Scroll to max
  console.log('\nScrolling to max...');
  await page.evaluate(() => window.scrollTo(0, document.documentElement.scrollHeight));
  await page.waitForTimeout(500);
  
  // Check final state
  const finalState = await page.evaluate(() => {
    const mapContainer = document.querySelector('.property-map-container');
    const footer = document.querySelector('footer.site-footer');
    
    return {
      scrollY: window.scrollY,
      newScrollHeight: document.documentElement.scrollHeight,
      mapViewportY: mapContainer ? mapContainer.getBoundingClientRect().top : null,
      mapViewportBottom: mapContainer ? mapContainer.getBoundingClientRect().bottom : null,
      footerViewportTop: footer ? footer.getBoundingClientRect().top : null,
      hasStoppedClass: mapContainer ? mapContainer.classList.contains('sticky-stopped') : null
    };
  });
  
  console.log('\nFinal state:', JSON.stringify(finalState, null, 2));
  
  if (finalState.mapViewportBottom > finalState.footerViewportTop) {
    console.log('\n*** OVERLAP:', finalState.mapViewportBottom - finalState.footerViewportTop, 'px');
  } else {
    console.log('\nNo overlap. Gap:', finalState.footerViewportTop - finalState.mapViewportBottom, 'px');
  }
  
  await page.screenshot({ path: '/tmp/no-infinite-test.png' });
  
  await browser.close();
})();