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);
  
  // Check grid layout and cell sizes
  const gridInfo = await page.evaluate(() => {
    const mapLayout = document.querySelector('.property-map-layout');
    const mapContainer = document.querySelector('.property-map-container');
    const listContainer = document.querySelector('.property-list-container');
    
    return {
      mapLayoutHeight: mapLayout ? mapLayout.getBoundingClientRect().height : null,
      mapContainerHeight: mapContainer ? mapContainer.getBoundingClientRect().height : null,
      listContainerHeight: listContainer ? listContainer.getBoundingClientRect().height : null,
      mapContainerStyle: mapContainer ? {
        display: window.getComputedStyle(mapContainer).display,
        position: window.getComputedStyle(mapContainer).position,
        alignSelf: window.getComputedStyle(mapContainer).alignSelf
      } : null
    };
  });
  
  console.log('Grid layout info:', JSON.stringify(gridInfo, null, 2));
  
  // The map container should be as tall as the grid row (which equals list container height)
  // If alignSelf is "start" or the container has explicit height, it won't fill the grid cell
  
  // Now scroll to the very bottom and check CSS sticky behavior
  await page.evaluate(() => window.scrollTo(0, 999999));
  await page.waitForTimeout(1000);
  
  const scrolledInfo = await page.evaluate(() => {
    const mapContainer = document.querySelector('.property-map-container');
    const listContainer = document.querySelector('.property-list-container');
    const footer = document.querySelector('footer.site-footer');
    
    // Check if CSS sticky naturally stopped
    return {
      scrollY: window.scrollY,
      mapContainerViewport: mapContainer ? mapContainer.getBoundingClientRect() : null,
      listContainerBottom: listContainer ? listContainer.getBoundingClientRect().bottom : null,
      footerTop: footer ? footer.getBoundingClientRect().top : null,
      mapPositionComputed: mapContainer ? window.getComputedStyle(mapContainer).position : null
    };
  });
  
  console.log('\nAfter max scroll:', JSON.stringify(scrolledInfo, null, 2));
  
  if (scrolledInfo.mapContainerViewport && scrolledInfo.listContainerBottom) {
    const mapBottom = scrolledInfo.mapContainerViewport.y + scrolledInfo.mapContainerViewport.height;
    console.log('\nMap viewport bottom:', mapBottom);
    console.log('List container viewport bottom:', scrolledInfo.listContainerBottom);
    console.log('Footer viewport top:', scrolledInfo.footerTop);
    
    // With proper CSS sticky, map should stop when grid cell ends (at list container bottom)
    // Not when footer starts
    if (mapBottom > scrolledInfo.listContainerBottom) {
      console.log('\nMap extends past its grid sibling - CSS sticky NOT constraining properly');
    } else {
      console.log('\nCSS sticky is working - map stops at grid cell boundary');
    }
  }
  
  await page.screenshot({ path: '/tmp/grid-test.png' });
  
  await browser.close();
})();