import pytest
from playwright.sync_api import Page, expect

# Since we don't have a full running environment with auth easily mockable in pure Python Playwright 
# without starting the server, I will write a test that can be run if the server is up.
# For CI/CD, we'd use a fixture to start the uvicorn server.

@pytest.mark.skip(reason="Requires running server and complex auth mock")
def test_tab_navigation(page: Page):
    # Navigate to the app
    page.goto("http://localhost:3000/web")
    
    # Mock authentication state in localStorage and Alpine
    page.evaluate("""() => {
        localStorage.setItem('auth_token', 'mock-token');
        document.body.__x.$data.isAuthenticated = true;
        document.body.__x.$data.username = 'TestUser';
    }""")
    
    # Reload or wait for Alpine to react
    page.reload()
    
    # Verify Home tab is active by default
    expect(page.locator("#tab-home")).to_be_visible()
    expect(page.locator("button.tab:has-text('Accueil')")).to_have_class(/active/)
    
    # Click on Anime tab
    page.click("button.tab:has-text('Anime')")
    
    # Verify Anime tab is shown and Home is hidden
    expect(page.locator("#tab-anime")).to_be_visible()
    expect(page.locator("#tab-home")).to_be_hidden()
    expect(page.locator("button.tab:has-text('Anime')")).to_have_class(/active/)
    
    # Click on Watchlist tab
    page.click("button.tab:has-text('Watchlist')")
    
    # Verify Watchlist tab is shown
    expect(page.locator("#tab-watchlist")).to_be_visible()
    expect(page.locator("#tab-anime")).to_be_hidden()
    expect(page.locator("button.tab:has-text('Watchlist')")).to_have_class(/active/)