"""
探索国自然页面结构，找到可靠的详情ID获取方式
"""
import asyncio
import re
from playwright.async_api import async_playwright


async def explore():
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=False)
        page = await browser.new_page()
        
        # 访问搜索页面
        print("=" * 60)
        print("1. 访问搜索页面")
        print("=" * 60)
        await page.goto("https://kd.nsfc.cn/finalSearchList?s=人工智能")
        await page.wait_for_timeout(3000)
        
        # 点击检索
        try:
            await page.click('button:has-text("检索")')
            await page.wait_for_timeout(3000)
        except:
            pass
        
        # 分析页面结构
        print("\n" + "=" * 60)
        print("2. 分析列表页HTML结构")
        print("=" * 60)
        
        # 获取所有可能包含项目的元素
        html_structure = await page.evaluate('''() => {
            const result = {
                // 查找所有带 onclick 的元素
                onclick_elements: [],
                // 查找所有 a 标签
                a_tags: [],
                // 查找所有 data-* 属性
                data_attrs: [],
                // 查找 Vue 数据
                vue_data: null,
                // 项目卡片结构
                card_structure: []
            };
            
            // 1. onclick 元素
            document.querySelectorAll('[onclick]').forEach(el => {
                result.onclick_elements.push({
                    tag: el.tagName,
                    onclick: el.getAttribute('onclick'),
                    text: el.innerText.substring(0, 50)
                });
            });
            
            // 2. a 标签
            document.querySelectorAll('a').forEach(el => {
                const href = el.getAttribute('href') || '';
                if (href.includes('final') || href.includes('detail') || href.includes('id=')) {
                    result.a_tags.push({
                        href: href,
                        text: el.innerText.substring(0, 50)
                    });
                }
            });
            
            // 3. data-* 属性
            document.querySelectorAll('[data-id], [data-project], [data-item]').forEach(el => {
                result.data_attrs.push({
                    tag: el.tagName,
                    attrs: Object.fromEntries(
                        Array.from(el.attributes)
                            .filter(a => a.name.startsWith('data-'))
                            .map(a => [a.name, a.value])
                    )
                });
            });
            
            // 4. 尝试获取 Vue 实例数据
            try {
                const app = document.querySelector('#app');
                if (app && app.__vue__) {
                    const vm = app.__vue__;
                    if (vm.$data) {
                        result.vue_data = JSON.stringify(vm.$data).substring(0, 500);
                    }
                }
            } catch(e) {}
            
            // 5. 分析项目卡片结构
            const cards = document.querySelectorAll('.info-warp');
            if (cards.length > 0) {
                const card = cards[0];
                result.card_structure.push({
                    outerHTML: card.outerHTML.substring(0, 1000),
                    children: Array.from(card.children).map(c => ({
                        tag: c.tagName,
                        class: c.className,
                        id: c.id
                    }))
                });
            }
            
            return result;
        }''')
        
        print(f"\nonclick 元素数量: {len(html_structure['onclick_elements'])}")
        for item in html_structure['onclick_elements'][:5]:
            print(f"  - {item['tag']}: {item['onclick'][:80] if item['onclick'] else 'N/A'}")
        
        print(f"\na 标签数量: {len(html_structure['a_tags'])}")
        for item in html_structure['a_tags'][:5]:
            print(f"  - href: {item['href'][:80]}")
        
        print(f"\ndata-* 属性元素: {len(html_structure['data_attrs'])}")
        for item in html_structure['data_attrs'][:3]:
            print(f"  - {item}")
        
        print(f"\nVue 数据: {html_structure['vue_data'][:200] if html_structure['vue_data'] else 'N/A'}")
        
        # 分析项目卡片
        print("\n" + "=" * 60)
        print("3. 分析项目卡片内部结构")
        print("=" * 60)
        
        card_analysis = await page.evaluate('''() => {
            const cards = document.querySelectorAll('.info-warp');
            const results = [];
            
            cards.forEach((card, idx) => {
                if (idx >= 2) return;  // 只分析前2个
                
                const info = {
                    index: idx,
                    all_attrs: {},
                    clickable_elements: [],
                    links: []
                };
                
                // 获取卡片所有属性
                Array.from(card.attributes).forEach(attr => {
                    info.all_attrs[attr.name] = attr.value;
                });
                
                // 获取可点击元素
                card.querySelectorAll('a, [onclick], [role="button"], button').forEach(el => {
                    info.clickable_elements.push({
                        tag: el.tagName,
                        class: el.className,
                        href: el.getAttribute('href'),
                        onclick: el.getAttribute('onclick'),
                        text: el.innerText.substring(0, 30)
                    });
                });
                
                // 获取所有链接
                card.querySelectorAll('a').forEach(a => {
                    info.links.push({
                        href: a.getAttribute('href'),
                        text: a.innerText.substring(0, 30)
                    });
                });
                
                results.push(info);
            });
            
            return results;
        }''')
        
        for card in card_analysis:
            print(f"\n卡片 {card['index']}:")
            print(f"  属性: {card['all_attrs']}")
            print(f"  可点击元素: {len(card['clickable_elements'])}")
            for el in card['clickable_elements']:
                print(f"    - {el['tag']}.{el['class'][:30]}: {el.get('href', 'N/A')}")
            print(f"  链接: {card['links']}")
        
        # 尝试点击第一个项目，观察行为
        print("\n" + "=" * 60)
        print("4. 点击项目标题，分析跳转行为")
        print("=" * 60)
        
        # 监听新页面
        ctx = browser.contexts[0]
        new_pages = []
        
        def on_page(p):
            new_pages.append(p)
        
        ctx.on('page', on_page)
        
        # 找到第一个项目标题并点击
        first_link = await page.query_selector('.info-warp a')
        if first_link:
            print("点击第一个项目链接...")
            await first_link.click()
            await page.wait_for_timeout(3000)
            
            if new_pages:
                new_page = new_pages[0]
                print(f"新页面 URL: {new_page.url}")
                
                # 分析 URL 中的 ID
                id_match = re.search(r'id=([a-f0-9]+)', new_page.url)
                if id_match:
                    print(f"详情 ID: {id_match.group(1)}")
                
                await new_page.close()
            else:
                print("没有打开新页面，可能是同页面跳转")
                print(f"当前 URL: {page.url}")
        
        ctx.remove_listener('page', on_page)
        
        # 检查网络请求
        print("\n" + "=" * 60)
        print("5. 分析网络请求获取数据")
        print("=" * 60)
        
        # 回到列表页
        await page.goto("https://kd.nsfc.cn/finalSearchList?s=人工智能")
        await page.wait_for_timeout(2000)
        
        # 监听网络请求
        api_responses = []
        
        async def handle_response(response):
            url = response.url
            if 'api' in url or 'search' in url or 'list' in url:
                try:
                    if response.status == 200:
                        content_type = response.headers.get('content-type', '')
                        if 'json' in content_type:
                            body = await response.json()
                            api_responses.append({
                                'url': url,
                                'body_preview': str(body)[:500]
                            })
                except:
                    pass
        
        page.on('response', handle_response)
        
        # 触发搜索
        try:
            await page.click('button:has-text("检索")')
            await page.wait_for_timeout(3000)
        except:
            pass
        
        print(f"捕获到 {len(api_responses)} 个 API 响应:")
        for resp in api_responses:
            print(f"\nURL: {resp['url']}")
            print(f"Body: {resp['body_preview']}")
        
        # 保持浏览器打开供手动检查
        print("\n" + "=" * 60)
        print("探索完成！浏览器保持打开，按 Enter 关闭...")
        print("=" * 60)
        input()
        
        await browser.close()


if __name__ == "__main__":
    asyncio.run(explore())
