// 查詢當(dāng)前歷史棧的長(zhǎng)度
console.log('History length:', history.length); // 例如：1, 2, 3...

// 獲取當(dāng)前條目關(guān)聯(lián)的狀態(tài)對(duì)象
// 初始頁(yè)面或通過(guò)傳統(tǒng)鏈接訪問(wèn)的頁(yè)面，state通常為null
console.log('Current state:', history.state); // null

// 執(zhí)行后退操作（等同于點(diǎn)擊后退按鈕）
// history.back();

// 執(zhí)行前進(jìn)操作（等同于點(diǎn)擊前進(jìn)按鈕）
// history.forward();

// 相對(duì)導(dǎo)航
// history.go(-1); // 后退一頁(yè)，等同于 back()
// history.go(1);  // 前進(jìn)一頁(yè)，等同于 forward()
// history.go(0);  // 重新加載當(dāng)前頁(yè)面

// 監(jiān)聽popstate事件 - 當(dāng)激活的歷史條目發(fā)生變化時(shí)觸發(fā)
// 這是SPA響應(yīng)瀏覽器導(dǎo)航按鈕的核心
window.addEventListener('popstate', function(event) {
    console.log('popstate event triggered');
    console.log('Event state:', event.state); // 與當(dāng)前條目關(guān)聯(lián)的狀態(tài)對(duì)象
    console.log('Current URL:', window.location.href);
    console.log('Current state (via history.state):', history.state);
    
    // 在SPA中，通常在此處根據(jù)新的URL和state更新UI
    // navigateToPage(window.location.pathname, event.state);
});

// 模擬SPA中的頁(yè)面切換
function navigateToUserProfile(userId) {
    const newState = {
        page: 'userProfile',
        userId: userId,
        timestamp: Date.now()
    };
    const newTitle = `User Profile: ${userId}`;
    const newUrl = `/user/${userId}`; // 相對(duì)URL

    try {
        // 將新狀態(tài)推入歷史棧
        // 注意：title參數(shù)在現(xiàn)代瀏覽器中通常被忽略，但必須提供（可為空字符串）
        history.pushState(newState, newTitle, newUrl);
        
        console.log('New entry pushed to history');
        console.log('New history length:', history.length);
        console.log('Current state:', history.state); // 應(yīng)等于newState
        console.log('Current URL:', window.location.href); // URL已更新
        
        // 更新UI以反映新頁(yè)面
        // renderUserProfile(userId);
    } catch (error) {
        console.error('Failed to push state:', error);
        // 可能因跨域或URL格式問(wèn)題失敗
        // 回退到傳統(tǒng)導(dǎo)航
        // window.location.href = newUrl;
    }
}

// 使用示例
navigateToUserProfile(123);
navigateToUserProfile(456);

// 用戶點(diǎn)擊后退按鈕時(shí)，popstate事件會(huì)觸發(fā)
// 應(yīng)用需要監(jiān)聽并恢復(fù)到前一個(gè)狀態(tài)

// 模擬表單提交后的URL更新
function updateSearchQuery(query, filters = {}) {
    const currentState = history.state || {}; // 獲取當(dāng)前狀態(tài)，若無(wú)則為空對(duì)象
    const updatedState = {
        ...currentState,
        query: query,
        filters: filters,
        lastUpdated: Date.now()
    };
    const newTitle = `Search: ${query}`;
    const newUrl = `/search?q=${encodeURIComponent(query)}&filters=${encodeURIComponent(JSON.stringify(filters))}`;

    try {
        // 替換當(dāng)前歷史條目
        history.replaceState(updatedState, newTitle, newUrl);
        
        console.log('Current entry replaced');
        console.log('History length unchanged:', history.length);
        console.log('Updated state:', history.state);
        console.log('Updated URL:', window.location.href);
        
        // 執(zhí)行搜索邏輯
        // performSearch(query, filters);
    } catch (error) {
        console.error('Failed to replace state:', error);
        // 回退策略
    }
}

// 使用場(chǎng)景：用戶在搜索框中輸入并按回車
// updateSearchQuery('laptop', { category: 'electronics', price: '500-1000' });

// 另一個(gè)場(chǎng)景：初始化SPA時(shí)，清理可能存在的初始狀態(tài)
// 如果應(yīng)用從服務(wù)端渲染或傳統(tǒng)頁(yè)面加載，初始state可能為null
// 在SPA接管后，可以使用replaceState設(shè)置一個(gè)初始state
function initializeApp() {
    if (!history.state) {
        const initialState = { page: 'home', initialized: true };
        history.replaceState(initialState, 'Home', window.location.pathname);
    }
    // 然后根據(jù)當(dāng)前URL和state渲染初始頁(yè)面
    // renderPage(history.state.page);
}
initializeApp();

// SPA路由處理器
class Router {
    constructor() {
        this.routes = new Map();
        this.currentPage = null;
        // 綁定事件處理器
        window.addEventListener('popstate', this.handlePopState.bind(this));
    }

    // 注冊(cè)路由
    addRoute(path, handler) {
        this.routes.set(path, handler);
    }

    // 處理popstate事件
    handlePopState(event) {
        const state = event.state;
        const path = window.location.pathname;

        console.log('Router handling popstate:', path, state);

        // 根據(jù)state和path決定如何渲染
        if (state && state.page) {
            // 優(yōu)先使用state中的信息
            this.renderPage(state.page, state);
        } else {
            // 若無(wú)state，根據(jù)path進(jìn)行路由（兼容直接訪問(wèn)或刷新）
            this.fallbackRoute(path);
        }
    }

    // 渲染頁(yè)面
    renderPage(pageName, state = {}) {
        // 清理當(dāng)前頁(yè)面
        if (this.currentPage) {
            this.currentPage.cleanup();
        }

        // 查找并執(zhí)行路由處理器
        const handler = this.routes.get(pageName);
        if (handler) {
            this.currentPage = handler;
            handler.render(state);
        } else {
            this.renderNotFound();
        }
    }

    // 回退路由（無(wú)state時(shí)）
    fallbackRoute(path) {
        if (path.startsWith('/user/')) {
            const userId = path.split('/').pop();
            this.renderPage('userProfile', { page: 'userProfile', userId });
        } else if (path === '/search') {
            // 解析查詢參數(shù)
            const params = new URLSearchParams(window.location.search);
            const query = params.get('q') || '';
            const filters = params.get('filters') ? JSON.parse(decodeURIComponent(params.get('filters'))) : {};
            this.renderPage('searchResults', { page: 'searchResults', query, filters });
        } else {
            this.renderPage('home');
        }
    }

    renderNotFound() {
        document.body.innerHTML = '<h1>404 - Page Not Found</h1>';
    }

    // 導(dǎo)航到新頁(yè)面（封裝pushState）
    navigateTo(path, state, title = '') {
        history.pushState(state, title, path);
        this.renderPage(state.page, state);
    }
}

// 初始化路由器
const router = new Router();

// 定義路由處理器
const homeHandler = {
    render: function(state) {
        document.body.innerHTML = `<h1>Home Page</h1><p>Visited: ${new Date(state.timestamp || Date.now()).toLocaleString()}</p>`;
    },
    cleanup: function() { /* 清理邏輯 */ }
};

const userProfileHandler = {
    render: function(state) {
        document.body.innerHTML = `<h1>User Profile: ${state.userId}</h1>`;
    },
    cleanup: function() { /* 清理邏輯 */ }
};

// 注冊(cè)路由
router.addRoute('home', homeHandler);
router.addRoute('userProfile', userProfileHandler);

// 初始渲染
router.handlePopState({ state: history.state }); // 觸發(fā)初始渲染

// 1. 處理前進(jìn)/后退時(shí)的平滑滾動(dòng)
window.addEventListener('popstate', function(event) {
    // 防止瀏覽器自動(dòng)滾動(dòng)到歷史記錄中的錨點(diǎn)位置
    // event.preventDefault(); // 不能阻止popstate
    // 而是在狀態(tài)恢復(fù)后手動(dòng)控制滾動(dòng)
    setTimeout(() => {
        window.scrollTo(0, 0); // 滾動(dòng)到頂部
        // 或根據(jù)state恢復(fù)到之前的滾動(dòng)位置
        // if (event.state && event.state.scrollY !== undefined) {
        //     window.scrollTo(0, event.state.scrollY);
        // }
    }, 0);
});

// 2. 與瀏覽器前進(jìn)/后退按鈕的視覺(jué)反饋
// 監(jiān)聽canGoBack和canGoForward（非標(biāo)準(zhǔn)，但Chrome支持）
// setInterval(() => {
//     console.log('Can go back:', window.history.canGoBack);
//     console.log('Can go forward:', window.history.canGoForward);
//     // 更新UI按鈕的禁用狀態(tài)
//     // backButton.disabled = !window.history.canGoBack;
//     // forwardButton.disabled = !window.history.canGoForward;
// }, 100);

// 3. 處理hash變化（傳統(tǒng)錨點(diǎn)導(dǎo)航）
// hashchange事件獨(dú)立于popstate
window.addEventListener('hashchange', function(event) {
    console.log('Hash changed from:', event.oldURL, 'to:', event.newURL);
    // 更新UI以顯示對(duì)應(yīng)錨點(diǎn)內(nèi)容
    // scrollToSection(window.location.hash);
});

// 4. 頁(yè)面可見(jiàn)性與歷史記錄
// 當(dāng)頁(yè)面被切換到后臺(tái)時(shí)，暫停某些操作
document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
        console.log('Page is now hidden');
        // 可以暫停定時(shí)器或動(dòng)畫
    } else {
        console.log('Page is now visible');
        // 恢復(fù)操作
    }
});

// 5. 服務(wù)端渲染（SSR）與客戶端激活
// 在SSR應(yīng)用中，客戶端需要“激活”歷史記錄
// 假設(shè)服務(wù)端渲染時(shí)注入了初始狀態(tài)
// const initialState = window.__INITIAL_STATE__ || {};
// if (!history.state) {
//     // 使用replaceState將服務(wù)端狀態(tài)注入客戶端歷史
//     history.replaceState(initialState, document.title, window.location.pathname);
// }
// 然后進(jìn)行客戶端路由初始化

// 6. 性能考量：避免過(guò)度使用pushState
// 頻繁調(diào)用pushState可能影響性能和用戶體驗(yàn)
// 使用節(jié)流或合并狀態(tài)
let pendingStateUpdate = null;
let pendingTimeout = null;

function deferredPushState(state, title, url) {
    if (pendingTimeout) {
        clearTimeout(pendingTimeout);
    }
    pendingStateUpdate = { state, title, url };
    pendingTimeout = setTimeout(() => {
        history.pushState(pendingStateUpdate.state, pendingStateUpdate.title, pendingStateUpdate.url);
        pendingStateUpdate = null;
        pendingTimeout = null;
    }, 100); // 延遲100ms，合并快速連續(xù)的更新
}