"""Test navbar at different viewport widths."""
from playwright.sync_api import sync_playwright
import os

SCREENSHOT_DIR = r"c:\Users\12914\Desktop\vscode\shots"
os.makedirs(SCREENSHOT_DIR, exist_ok=True)

# Key widths to test: (width, height, label)
VIEWPORTS = [
    (1920, 1080, "1920_full_hd"),
    (1440, 900, "1440_qhd"),
    (1280, 800, "1280_upper_boundary"),
    (1226, 800, "1226_problem_width"),
    (1100, 800, "1100_compact_range"),
    (992, 768, "992_lower_boundary"),
    (768, 1024, "768_tablet"),
]

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    
    for width, height, label in VIEWPORTS:
        page = browser.new_page(viewport={"width": width, "height": height})
        page.goto("http://localhost:5173/")
        page.wait_for_load_state("networkidle")
        page.wait_for_timeout(500)  # Wait for resize event to fire
        
        # Screenshot the full page (navbar is at the top)
        screenshot_path = os.path.join(SCREENSHOT_DIR, f"navbar_{label}.png")
        page.screenshot(path=screenshot_path)
        
        # Also get the navbar element dimensions
        nav_info = page.evaluate("""() => {
            const navbar = document.querySelector('.navbar-container');
            const center = document.querySelector('.navbar-center');
            const compactBtn = document.querySelector('.navbar-compact-search-btn');
            const searchInput = document.querySelector('.navbar-search-input');
            return {
                navbarExists: !!navbar,
                navbarWidth: navbar ? navbar.offsetWidth : 0,
                centerExists: !!center,
                centerWidth: center ? center.offsetWidth : 0,
                compactBtnExists: !!compactBtn,
                searchInputExists: !!searchInput,
                searchInputWidth: searchInput ? searchInput.offsetWidth : 0,
                windowWidth: window.innerWidth,
            };
        }""")
        
        print(f"\n=== {label} (viewport: {width}x{height}) ===")
        print(f"  window.innerWidth: {nav_info['windowWidth']}")
        print(f"  navbar width: {nav_info['navbarWidth']}px")
        print(f"  navbar-center width: {nav_info['centerWidth']}px")
        print(f"  compact btn exists: {nav_info['compactBtnExists']}")
        print(f"  search input exists: {nav_info['searchInputExists']}")
        if nav_info['searchInputExists']:
            print(f"  search input width: {nav_info['searchInputWidth']}px")
        print(f"  screenshot: {screenshot_path}")
        
        page.close()
    
    browser.close()
    print("\nDone! All screenshots saved to", SCREENSHOT_DIR)