from playwright.sync_api import sync_playwright
import time
import os

def dismiss_vite_error(page):
    try:
        page.evaluate("document.querySelector('vite-error-overlay')?.remove()")
        time.sleep(0.3)
    except:
        pass

def test_modal_css():
    os.makedirs('/tmp/frontend_test', exist_ok=True)

    with sync_playwright() as p:
        browser = p.chromium.launch(headless=True)
        context = browser.new_context(viewport={"width": 1400, "height": 900})
        page = context.new_page()

        print("=" * 60)
        print("测试二维码美化弹窗CSS样式")
        print("=" * 60)

        # 导航到二维码生成器
        page.goto('http://localhost:5173/qrcode-generator', wait_until='load', timeout=15000)
        time.sleep(2)
        dismiss_vite_error(page)

        # 填写输入内容
        textarea = page.locator('textarea').or_(page.locator('input[type="text"]'))
        if textarea.count() > 0:
            textarea.first.fill("https://example.com/test")
            time.sleep(0.5)

        # 点击生成按钮
        generate_btn = page.locator('button:has-text("生成二维码")')
        if generate_btn.count() > 0:
            generate_btn.first.click()
            time.sleep(2)

        # 切换到暗色模式
        theme_toggle = page.locator('[class*="theme"]').or_(page.locator('[data-theme]'))
        if theme_toggle.count() > 0:
            theme_toggle.first.click()
            time.sleep(1)

        # 打开美化弹窗
        beautify_btn = page.locator('button:has-text("二维码美化")')
        if beautify_btn.count() > 0:
            beautify_btn.first.click()
            time.sleep(1)
            page.screenshot(path='/tmp/frontend_test/modal_dark_mode.png', full_page=True)
            print("  ✓ 暗色模式弹窗截图已保存")

            # 检查弹窗容器背景色
            container = page.locator('.ant-modal-container')
            if container.count() > 0:
                bg_color = container.first.evaluate("el => window.getComputedStyle(el).backgroundColor")
                print(f"  弹窗容器背景色: {bg_color}")

        # 切换回亮色模式
        theme_toggle = page.locator('[class*="theme"]').or_(page.locator('[data-theme]'))
        if theme_toggle.count() > 0:
            theme_toggle.first.click()
            time.sleep(1)

            # 再次打开美化弹窗
            beautify_btn = page.locator('button:has-text("二维码美化")')
            if beautify_btn.count() > 0:
                beautify_btn.first.click()
                time.sleep(1)
                page.screenshot(path='/tmp/frontend_test/modal_light_mode.png', full_page=True)
                print("  ✓ 亮色模式弹窗截图已保存")

                container = page.locator('.ant-modal-container')
                if container.count() > 0:
                    bg_color = container.first.evaluate("el => window.getComputedStyle(el).backgroundColor")
                    print(f"  弹窗容器背景色: {bg_color}")

        browser.close()
        print("\n" + "=" * 60)
        print("测试完成！")
        print("=" * 60)

if __name__ == "__main__":
    test_modal_css()