from playwright.sync_api import sync_playwright

def verify_comments_layout():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=True)
        # Use a mobile viewport to check the sticky bar
        context = browser.new_context(viewport={'width': 375, 'height': 812})
        page = context.new_page()

        # Go to the home page first to ensure DB is init
        page.goto("http://127.0.0.1:5000/")

        # Navigate to a board
        page.click("text=Général")

        # Create a thread so we have something to comment on
        # Open the modal first
        page.click("#fab-button")

        page.fill("textarea[name='content']", "Hello World Thread")

        # The submit button text comes from the WTF SubmitField('Envoyer')
        page.click("input[value='Envoyer']")

        # Now click the "Répondre" button on the thread in the board view to go to thread detail
        # Or just click the "No X" link
        # The page reloads, so we should see the new thread
        page.click(".text-blue-500", strict=False) # Click the first link like "N° 1"

        # Now we are in the thread view.
        # 1. Check if the sticky bottom bar is visible
        page.wait_for_selector("#sticky-form")

        # 2. Add a comment
        page.fill("#sticky-form textarea[name='content']", "First reply!")
        # The thread view uses a custom icon button for submit, not the WTForms 'Envoyer' input
        page.click("#sticky-form button[type='submit']")

        # 3. Add another comment
        page.fill("#sticky-form textarea[name='content']", "Second reply!")
        page.click("#sticky-form button[type='submit']")

        # 4. Check if comments are displayed in bubbles
        page.wait_for_selector("#comments-list")

        # Take a screenshot of the thread with comments and the sticky bar
        page.screenshot(path="verification/thread_view.png", full_page=False)

        browser.close()

if __name__ == "__main__":
    verify_comments_layout()