script.js

// WinDesk - Chrome Extension JavaScript
const GRID_COLUMNS = 22;
const GRID_ROWS = 12;
const GRID_CELLS = GRID_COLUMNS * GRID_ROWS;

class WinDesk {
    constructor() {
        this.currentDesktopId = 'default';
        this.currentPageByDesktop = {};
        this.desktops = {};
        this.desktopOrder = [];
        this.folders = {};
        this.folderOrder = [];
        this.notes = [];
        this.noteFolders = [];
        this.unfiledNotesCollapsed = false;
        this.activeNoteFolderId = null;
        this.activeNoteId = null;
        this.selectedIcons = new Set();
        this.copyClipboard = null;
        this.isSelecting = false;
        this.selectionStart = null;
        this.isBatchDragging = false;
        this.init();
    }

    async init() {
        console.log('WinDesk initializing...');
        try {
            await this.loadData();
            console.log('Data loaded, desktops:', Object.keys(this.desktops), 'current:', this.currentDesktopId);

            this.setupEventListeners();
            console.log('Event listeners set up');

            this.renderDesktops();
            console.log('Desktops rendered');

            this.renderCurrentDesktop();
            console.log('Current desktop rendered');

            console.log('WinDesk initialization complete');
        } catch (error) {
            console.error('Failed to initialize WinDesk:', error);
            // 緊急恢復
            this.desktops = {
                'default': {
                    name: '主桌面',
                    websites: [],
                    background: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'
                }
            };
            this.currentDesktopId = 'default';
            this.setupEventListeners();
            this.renderDesktops();
            this.renderCurrentDesktop();
        }
    }

    // 數據管理
    async loadData() {
        let dataLoaded = false;
        let storedGridColumns = 20;

        try {
            // 優先從本地儲存載入（更可靠）
            const localData = await chrome.storage.local.get(['windesk_data']);
            if (localData.windesk_data && localData.windesk_data.desktops) {
                storedGridColumns = localData.windesk_data.gridColumns || 20;
                this.desktops = localData.windesk_data.desktops;
                this.currentDesktopId = localData.windesk_data.currentDesktopId || 'default';
                this.desktopOrder = localData.windesk_data.desktopOrder || Object.keys(this.desktops);
                this.folders = localData.windesk_data.folders || {};
                this.folderOrder = localData.windesk_data.folderOrder || [];
                this.notes = Array.isArray(localData.windesk_data.notes) ? localData.windesk_data.notes : [];
                this.noteFolders = Array.isArray(localData.windesk_data.noteFolders) ? localData.windesk_data.noteFolders : [];
                this.unfiledNotesCollapsed = !!localData.windesk_data.unfiledNotesCollapsed;
                this.topLevelOrder = localData.windesk_data.topLevelOrder || null;
                this.currentPageByDesktop = localData.windesk_data.currentPageByDesktop || {};
                dataLoaded = true;
                console.log('Data loaded from local storage');
            }
        } catch (localError) {
            console.warn('Failed to load from local storage:', localError);
        }

        // 如果本地儲存失敗，嘗試從同步儲存載入
        if (!dataLoaded) {
            try {
                const syncData = await chrome.storage.sync.get(['windesk_data']);
                if (syncData.windesk_data && syncData.windesk_data.desktops) {
                    storedGridColumns = syncData.windesk_data.gridColumns || 20;
                    this.desktops = syncData.windesk_data.desktops;
                    this.currentDesktopId = syncData.windesk_data.currentDesktopId || 'default';
                    this.desktopOrder = syncData.windesk_data.desktopOrder || Object.keys(this.desktops);
                    this.folders = syncData.windesk_data.folders || {};
                    this.folderOrder = syncData.windesk_data.folderOrder || [];
                    this.notes = Array.isArray(syncData.windesk_data.notes) ? syncData.windesk_data.notes : [];
                    this.noteFolders = Array.isArray(syncData.windesk_data.noteFolders) ? syncData.windesk_data.noteFolders : [];
                    this.unfiledNotesCollapsed = !!syncData.windesk_data.unfiledNotesCollapsed;
                    this.topLevelOrder = syncData.windesk_data.topLevelOrder || null;
                    this.currentPageByDesktop = syncData.windesk_data.currentPageByDesktop || {};
                    dataLoaded = true;
                    console.log('Data loaded from sync storage');
                    // 將同步數據備份到本地儲存
                    await chrome.storage.local.set({
                        windesk_data: {
                            desktops: this.desktops,
                            currentDesktopId: this.currentDesktopId,
                            desktopOrder: this.desktopOrder,
                            notes: this.notes,
                            noteFolders: this.noteFolders,
                            unfiledNotesCollapsed: this.unfiledNotesCollapsed,
                            lastSaveTime: Date.now()
                        }
                    });
                }
            } catch (syncError) {
                console.warn('Failed to load from sync storage:', syncError);
            }
        }

        // 確保桌面數據完整性
        if (!dataLoaded || !this.desktops || Object.keys(this.desktops).length === 0) {
            // 如果沒有任何桌面，創建預設桌面
            this.desktops = {
                'default': {
                    name: '主桌面',
                    websites: [],
                    background: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'
                }
            };
            this.currentDesktopId = 'default';
            this.desktopOrder = ['default'];
            console.log('Created default desktop');
        } else if (!this.desktops[this.currentDesktopId]) {
            // 如果當前桌面不存在，使用第一個可用的桌面或創建新的
            const availableDesktopIds = Object.keys(this.desktops);
            if (availableDesktopIds.length > 0) {
                this.currentDesktopId = availableDesktopIds[0];
                console.log('Switched to available desktop:', this.currentDesktopId);
            } else {
                // 如果沒有可用桌面，創建預設桌面
                this.desktops['default'] = {
                    name: '主桌面',
                    websites: [],
                    background: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'
                };
                this.currentDesktopId = 'default';
                this.desktopOrder = ['default'];
                console.log('Created fallback desktop');
            }
        }

        // 立即保存修復後的數據
        this.migrateGridPositions(this.desktops, storedGridColumns);
        Object.values(this.desktops).forEach(desktop => {
            if (!Array.isArray(desktop.pages) || desktop.pages.length === 0) {
                desktop.pages = [{ websites: Array.isArray(desktop.websites) ? desktop.websites : [] }];
            }
            desktop.pages = desktop.pages.slice(0, 10).map(page => ({ websites: Array.isArray(page.websites) ? page.websites : [] }));
            desktop.websites = desktop.pages[0].websites;
        });
        this.noteFolders.forEach(folder => { folder.parentId = null; });
        if (!this.currentPageByDesktop) this.currentPageByDesktop = {};
        Object.keys(this.desktops).forEach(id => {
            const maxPage = this.desktops[id].pages.length - 1;
            const savedPage = Number(this.currentPageByDesktop[id]) || 0;
            this.currentPageByDesktop[id] = Math.max(0, Math.min(savedPage, maxPage));
        });
        await this.saveData();
    }

    migrateGridPositions(desktops, sourceColumns) {
        if (sourceColumns === GRID_COLUMNS) return;
        const migrated = new WeakSet();
        Object.values(desktops).forEach(desktop => {
            const lists = [desktop.websites, ...(desktop.pages || []).map(page => page.websites)];
            lists.forEach(websites => {
                if (!Array.isArray(websites)) return;
                websites.forEach(website => {
                    if (migrated.has(website) || !Number.isInteger(website.gridPosition)) return;
                    const row = Math.floor(website.gridPosition / sourceColumns);
                    const col = website.gridPosition % sourceColumns;
                    website.gridPosition = row * GRID_COLUMNS + col;
                    migrated.add(website);
                });
            });
        });
    }

    async saveData() {
        try {
            // 驗證數據完整性
            if (!this.desktops || Object.keys(this.desktops).length === 0 || !this.currentDesktopId) {
                console.warn('Invalid data detected, skipping save');
                return;
            }

            const dataToSave = {
                desktops: this.desktops,
                gridColumns: GRID_COLUMNS,
                currentDesktopId: this.currentDesktopId,
                desktopOrder: this.desktopOrder,
                folders: this.folders,
                folderOrder: this.folderOrder,
                notes: this.notes,
                noteFolders: this.noteFolders,
                unfiledNotesCollapsed: this.unfiledNotesCollapsed,
                topLevelOrder: this.topLevelOrder || null,
                currentPageByDesktop: this.currentPageByDesktop || {},
                lastSaveTime: Date.now()
            };

            // 優先使用本地儲存（立即生效，更可靠）
            await chrome.storage.local.set({ windesk_data: dataToSave });
            console.log('Data saved to local storage successfully');

            // 同時嘗試同步儲存（跨裝置同步）
            try {
                await chrome.storage.sync.set({ windesk_data: dataToSave });
                console.log('Data synced successfully');
            } catch (syncError) {
                console.warn('Sync storage failed, but local storage succeeded:', syncError);
            }

        } catch (error) {
            console.error('Failed to save data to local storage:', error);

            // 本地儲存失敗時，嘗試同步儲存作為備份
            try {
                const dataToSave = {
                    desktops: this.desktops,
                    gridColumns: GRID_COLUMNS,
                    currentDesktopId: this.currentDesktopId,
                    desktopOrder: this.desktopOrder,
                    folders: this.folders,
                    folderOrder: this.folderOrder,
                    notes: this.notes,
                    noteFolders: this.noteFolders,
                    unfiledNotesCollapsed: this.unfiledNotesCollapsed,
                    topLevelOrder: this.topLevelOrder || null,
                    currentPageByDesktop: this.currentPageByDesktop || {},
                    lastSaveTime: Date.now()
                };
                await chrome.storage.sync.set({ windesk_data: dataToSave });
                console.log('Data saved to sync storage as fallback');
            } catch (fallbackError) {
                console.error('All storage methods failed:', fallbackError);
                alert('無法保存設定，請檢查瀏覽器權限設定');
            }
        }
    }

    // 同步保存方法（用於頁面關閉前）
    saveDataSync() {
        try {
            // 驗證數據完整性
            if (!this.desktops || Object.keys(this.desktops).length === 0 || !this.currentDesktopId) {
                console.warn('Invalid data detected, skipping sync save');
                return;
            }

            const dataToSave = {
                desktops: this.desktops,
                gridColumns: GRID_COLUMNS,
                currentDesktopId: this.currentDesktopId,
                desktopOrder: this.desktopOrder,
                folders: this.folders,
                folderOrder: this.folderOrder,
                notes: this.notes,
                noteFolders: this.noteFolders,
                unfiledNotesCollapsed: this.unfiledNotesCollapsed,
                topLevelOrder: this.topLevelOrder || null,
                currentPageByDesktop: this.currentPageByDesktop || {},
                lastSaveTime: Date.now()
            };

            // 使用同步API確保立即保存
            chrome.storage.local.set({ windesk_data: dataToSave });

            // 也嘗試同步儲存
            try {
                chrome.storage.sync.set({ windesk_data: dataToSave });
            } catch (syncError) {
                console.warn('Sync save failed:', syncError);
            }

            console.log('Data saved synchronously before unload');
        } catch (error) {
            console.error('Failed to save data synchronously:', error);
        }
    }

    // 事件監聽器設置
    setupEventListeners() {
        document.getElementById('pageTabs').addEventListener('click', (e) => {
            const tab = e.target.closest('[data-page-index]');
            if (tab) this.switchPage(Number(tab.dataset.pageIndex));
            if (e.target.closest('.page-tab-add')) this.addPage();
            if (e.target.closest('.page-tab-delete')) this.deleteCurrentPage();
        });
        // 新增桌面按鈕
        document.querySelector('.add-desktop-btn').addEventListener('click', () => {
            this.addDesktop();
        });

        // 新增資料夾按鈕
        document.querySelector('.add-folder-btn').addEventListener('click', () => {
            this.addFolder();
        });

        // 右鍵選單
        document.addEventListener('contextmenu', (e) => {
            if (e.target.closest('.desktop-content')) {
                e.preventDefault();
                this.showContextMenu(e.pageX, e.pageY);
            }
        });

        // 隱藏選單
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.context-menu')) {
                this.hideContextMenu();
                this.hideIconContextMenu();
            }
        });

        // 右鍵選單項目
        document.getElementById('addWebsiteBtn').addEventListener('click', () => {
            this.showAddWebsiteModal();
            this.hideContextMenu();
        });

        document.getElementById('changeBackgroundBtn').addEventListener('click', () => {
            this.showChangeBackgroundModal();
            this.hideContextMenu();
        });

        // 模態對話框
        this.setupModalEvents();

        // 匯入匯出
        document.getElementById('importBtn').addEventListener('click', () => {
            this.importData();
        });

        document.getElementById('exportBtn').addEventListener('click', () => {
            this.exportData();
        });

        this.setupNotesEvents();
    }

    setupModalEvents() {
        // 新增網站模態
        document.getElementById('closeModal').addEventListener('click', () => {
            this.hideModal('addWebsiteModal');
        });

        document.getElementById('cancelAdd').addEventListener('click', () => {
            this.hideModal('addWebsiteModal');
        });

        document.getElementById('confirmAdd').addEventListener('click', () => {
            this.addWebsite();
        });

        // 更換背景模態
        document.getElementById('closeBackgroundModal').addEventListener('click', () => {
            this.hideModal('changeBackgroundModal');
        });

        document.getElementById('cancelBackground').addEventListener('click', () => {
            this.hideModal('changeBackgroundModal');
        });

        document.getElementById('confirmBackground').addEventListener('click', () => {
            this.changeBackground();
        });

        // 重命名桌面模態
        document.getElementById('closeRenameModal').addEventListener('click', () => {
            this.hideModal('renameDesktopModal');
        });

        document.getElementById('cancelRename').addEventListener('click', () => {
            this.hideModal('renameDesktopModal');
        });

        document.getElementById('confirmRename').addEventListener('click', () => {
            this.renameDesktop();
        });

        // 重命名資料夾模態
        document.getElementById('closeRenameFolderModal').addEventListener('click', () => {
            this.hideModal('renameFolderModal');
        });

        document.getElementById('cancelRenameFolder').addEventListener('click', () => {
            this.hideModal('renameFolderModal');
        });

        document.getElementById('confirmRenameFolder').addEventListener('click', () => {
            this.renameFolder();
        });

        // 文件選擇處理
        document.getElementById('backgroundFile').addEventListener('change', (e) => {
            this.handleBackgroundFileSelect(e);
        });

        document.getElementById('importFile').addEventListener('change', (e) => {
            this.handleImportFile(e);
        });

        // 圖示右鍵選單事件
        document.getElementById('editWebsiteBtn').addEventListener('click', () => {
            this.editCurrentWebsite();
            this.hideIconContextMenu();
        });

        document.getElementById('deleteWebsiteBtn').addEventListener('click', () => {
            this.deleteCurrentWebsite();
            this.hideIconContextMenu();
        });

        document.getElementById('deleteSelectedWebsitesBtn').addEventListener('click', () => {
            this.deleteSelectedWebsites();
            this.hideIconContextMenu();
        });

        // 編輯網站模態事件
        document.getElementById('closeEditModal').addEventListener('click', () => {
            this.hideModal('editWebsiteModal');
        });

        document.getElementById('cancelEdit').addEventListener('click', () => {
            this.hideModal('editWebsiteModal');
        });

        document.getElementById('confirmEdit').addEventListener('click', () => {
            this.updateWebsite();
        });

        // 多選功能事件
        this.setupMultiSelectEvents();
    }

    // 多選功能設置
    setupMultiSelectEvents() {
        const desktopContent = document.getElementById('desktopContent');

        desktopContent.addEventListener('mousedown', (e) => {
            // 只處理左鍵點擊，且不是在圖示上
            if (e.button !== 0 || e.target.closest('.website-icon')) return;

            this.startSelection(e);
        });

        document.addEventListener('mousemove', (e) => {
            if (this.isSelecting) {
                this.updateSelection(e);
            }
        });

        document.addEventListener('mouseup', (e) => {
            if (this.isSelecting) {
                this.endSelection(e);
            }
        });

        // 鍵盤事件
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                this.clearSelection();
            }
            if (!(e.ctrlKey || e.metaKey) || e.altKey) return;
            const key = e.key.toLowerCase();
            if (key === 'c' && this.selectedIcons.size > 0) {
                e.preventDefault();
                this.copySelectedIcons();
            } else if (key === 'v' && this.copyClipboard?.items?.length) {
                const target = e.target;
                if (target instanceof HTMLElement && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName))) return;
                e.preventDefault();
                this.pasteCopiedIcons();
            }
        });

        // 頁面關閉前確保資料保存
        window.addEventListener('beforeunload', (e) => {
            // 使用同步保存確保立即生效
            this.saveDataSync();
        });

        // 頁面隱藏時保存數據（例如切換到其他分頁）
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                this.saveData();
            }
        });

        // 定期自動保存（每30秒）
        setInterval(() => {
            this.saveData();
        }, 30000);
    }

    // 選取功能
    startSelection(e) {
        this.clearSelection();
        this.isSelecting = true;

        const desktopArea = document.getElementById('desktopArea');
        const rect = desktopArea.getBoundingClientRect();

        this.selectionStart = {
            x: e.clientX - rect.left,
            y: e.clientY - rect.top
        };

        const selectionBox = document.getElementById('selectionBox');
        selectionBox.style.display = 'block';
        selectionBox.style.left = this.selectionStart.x + 'px';
        selectionBox.style.top = this.selectionStart.y + 'px';
        selectionBox.style.width = '0px';
        selectionBox.style.height = '0px';

        e.preventDefault();
    }

    updateSelection(e) {
        if (!this.isSelecting || !this.selectionStart) return;

        const desktopArea = document.getElementById('desktopArea');
        const rect = desktopArea.getBoundingClientRect();

        const currentX = e.clientX - rect.left;
        const currentY = e.clientY - rect.top;

        const left = Math.min(this.selectionStart.x, currentX);
        const top = Math.min(this.selectionStart.y, currentY);
        const width = Math.abs(currentX - this.selectionStart.x);
        const height = Math.abs(currentY - this.selectionStart.y);

        const selectionBox = document.getElementById('selectionBox');
        selectionBox.style.left = left + 'px';
        selectionBox.style.top = top + 'px';
        selectionBox.style.width = width + 'px';
        selectionBox.style.height = height + 'px';

        // 檢查哪些圖示在選取範圍內
        this.updateSelectedIcons(left, top, width, height);
    }

    updateSelectedIcons(left, top, width, height) {
        const icons = document.querySelectorAll('.website-icon');
        const selectionRect = { left, top, right: left + width, bottom: top + height };

        this.selectedIcons.clear();

        icons.forEach(icon => {
            const iconRect = icon.getBoundingClientRect();
            const desktopArea = document.getElementById('desktopArea');
            const desktopRect = desktopArea.getBoundingClientRect();

            const iconRelativeRect = {
                left: iconRect.left - desktopRect.left,
                top: iconRect.top - desktopRect.top,
                right: iconRect.right - desktopRect.left,
                bottom: iconRect.bottom - desktopRect.top
            };

            // 檢查是否相交
            const intersects = !(
                iconRelativeRect.right < selectionRect.left ||
                iconRelativeRect.left > selectionRect.right ||
                iconRelativeRect.bottom < selectionRect.top ||
                iconRelativeRect.top > selectionRect.bottom
            );

            if (intersects) {
                const websiteId = icon.dataset.websiteId;
                this.selectedIcons.add(websiteId);
                icon.classList.add('selected');
            } else {
                icon.classList.remove('selected');
            }
        });
    }

    endSelection(e) {
        this.isSelecting = false;

        const selectionBox = document.getElementById('selectionBox');
        selectionBox.style.display = 'none';

        // 如果有選中的圖示，設置批量拖拽
        if (this.selectedIcons.size > 0) {
            this.setupBatchDrag();
        }
    }

    clearSelection() {
        this.selectedIcons.clear();
        const icons = document.querySelectorAll('.website-icon');
        icons.forEach(icon => {
            icon.classList.remove('selected', 'batch-dragging');
        });

        const selectionBox = document.getElementById('selectionBox');
        selectionBox.style.display = 'none';
        this.isBatchDragging = false;
    }

    copySelectedIcons() {
        const sourceDesktopId = this.currentDesktopId;
        const sourcePageIndex = this.getCurrentPageIndex();
        const sourceWebsites = this.getCurrentWebsites();
        const items = sourceWebsites
            .filter(website => this.selectedIcons.has(website.id))
            .map(website => ({ ...website, gridPosition: website.gridPosition || 0 }));
        if (!items.length) return;

        const minRow = Math.min(...items.map(item => Math.floor(item.gridPosition / GRID_COLUMNS)));
        const minCol = Math.min(...items.map(item => item.gridPosition % GRID_COLUMNS));
        this.copyClipboard = {
            items: items.map(item => ({
                ...item,
                rowOffset: Math.floor(item.gridPosition / GRID_COLUMNS) - minRow,
                colOffset: (item.gridPosition % GRID_COLUMNS) - minCol
            }))
        };
    }

    pasteCopiedIcons() {
        const clipboard = this.copyClipboard;
        if (!clipboard?.items?.length) return;

        const targetWebsites = this.getCurrentWebsites();
        const pasteItems = clipboard.items;

        const usedPositions = new Set(targetWebsites.map(website => website.gridPosition || 0));
        const maxRowOffset = Math.max(...pasteItems.map(item => item.rowOffset));
        const maxColOffset = Math.max(...pasteItems.map(item => item.colOffset));
        let basePosition = -1;

        for (let base = 0; base < GRID_CELLS; base++) {
            const baseRow = Math.floor(base / GRID_COLUMNS);
            const baseCol = base % GRID_COLUMNS;
            if (baseRow + maxRowOffset >= GRID_ROWS || baseCol + maxColOffset >= GRID_COLUMNS) continue;
            const fits = pasteItems.every(item =>
                !usedPositions.has((baseRow + item.rowOffset) * GRID_COLUMNS + baseCol + item.colOffset)
            );
            if (fits) {
                basePosition = base;
                break;
            }
        }

        if (basePosition === -1) {
            alert('目前頁面沒有足夠的空間可以貼上這些圖示。');
            return;
        }

        const baseRow = Math.floor(basePosition / GRID_COLUMNS);
        const baseCol = basePosition % GRID_COLUMNS;
        pasteItems.forEach((item, index) => {
            targetWebsites.push({
                name: item.name,
                url: item.url,
                icon: item.icon,
                id: `website_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`,
                gridPosition: (baseRow + item.rowOffset) * GRID_COLUMNS + baseCol + item.colOffset
            });
        });
        this.saveData();
        this.renderCurrentDesktop();
    }

    setupBatchDrag() {
        const selectedIcons = document.querySelectorAll('.website-icon.selected');

        selectedIcons.forEach(icon => {
            // 暫時移除原有的拖拽事件，添加批量拖拽
            icon.addEventListener('dragstart', (e) => {
                if (this.selectedIcons.has(icon.dataset.websiteId)) {
                    this.isBatchDragging = true;
                    e.dataTransfer.setData('text/plain', 'batch:' + Array.from(this.selectedIcons).join(','));

                    // 為所有選中的圖示添加拖拽樣式
                    this.selectedIcons.forEach(websiteId => {
                        const selectedIcon = document.querySelector(`[data-website-id="${websiteId}"]`);
                        if (selectedIcon) {
                            selectedIcon.classList.add('batch-dragging');
                        }
                    });
                }
            });

            icon.addEventListener('dragend', (e) => {
                // 移除拖拽樣式
                this.selectedIcons.forEach(websiteId => {
                    const selectedIcon = document.querySelector(`[data-website-id="${websiteId}"]`);
                    if (selectedIcon) {
                        selectedIcon.classList.remove('batch-dragging');
                    }
                });
                this.isBatchDragging = false;
            });
        });
    }

    // 資料夾管理
    addFolder() {
        const id = 'folder_' + Date.now();
        const name = `資料夾 ${Object.keys(this.folders).length + 1}`;
        this.folders[id] = { name, desktopIds: [], collapsed: false };
        this.folderOrder.push(id);
        this.saveData();
        this.renderDesktops();
    }

    deleteFolder(folderId) {
        if (!confirm('確定要刪除這個資料夾嗎？（資料夾內的桌面將移到頂層）')) return;
        const folder = this.folders[folderId];
        if (folder) {
            // 把資料夾內的桌面移到頂層
            folder.desktopIds.forEach(did => {
                if (!this.desktopOrder.includes(did)) {
                    this.desktopOrder.push(did);
                }
                if (this.desktops[did]) {
                    delete this.desktops[did].folderId;
                }
            });
        }
        delete this.folders[folderId];
        const idx = this.folderOrder.indexOf(folderId);
        if (idx > -1) this.folderOrder.splice(idx, 1);
        this.saveData();
        this.renderDesktops();
    }

    showRenameFolderModal(folderId) {
        const modal = document.getElementById('renameFolderModal');
        document.getElementById('folderName').value = this.folders[folderId].name;
        modal.dataset.folderId = folderId;
        this.showModal('renameFolderModal');
    }

    renameFolder() {
        const modal = document.getElementById('renameFolderModal');
        const folderId = modal.dataset.folderId;
        const newName = document.getElementById('folderName').value.trim();
        if (newName && this.folders[folderId]) {
            this.folders[folderId].name = newName;
            this.saveData();
            this.renderDesktops();
            this.hideModal('renameFolderModal');
        }
    }

    toggleFolder(folderId) {
        if (this.folders[folderId]) {
            this.folders[folderId].collapsed = !this.folders[folderId].collapsed;
            this.saveData();
            this.renderDesktops();
        }
    }

    addDesktopToFolder(folderId) {
        const id = 'desktop_' + Date.now();
        const folder = this.folders[folderId];
        const name = `桌面 ${Object.keys(this.desktops).length + 1}`;
        this.desktops[id] = {
            name,
            websites: [],
            background: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80',
            folderId
        };
        folder.desktopIds.push(id);
        this.saveData();
        this.renderDesktops();
        this.switchDesktop(id);
    }

    // 桌面管理
    addDesktop() {
        const id = 'desktop_' + Date.now();
        const name = `桌面 ${Object.keys(this.desktops).length + 1}`;

        this.desktops[id] = {
            name: name,
            websites: [],
            background: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'
        };

        // 將新桌面添加到順序列表的末尾
        if (!this.desktopOrder) {
            this.desktopOrder = Object.keys(this.desktops);
        } else {
            this.desktopOrder.push(id);
        }

        this.saveData();
        this.renderDesktops();
    }

    switchDesktop(desktopId) {
        this.currentDesktopId = desktopId;
        this.saveData();
        this.renderDesktops();
        this.renderCurrentDesktop();
        this.updateBackground();
    }

    getCurrentPageIndex() {
        return Number(this.currentPageByDesktop?.[this.currentDesktopId]) || 0;
    }

    getCurrentWebsites() {
        const desktop = this.desktops[this.currentDesktopId];
        const page = desktop?.pages?.[this.getCurrentPageIndex()];
        return page ? page.websites : (desktop?.websites || []);
    }

    switchPage(pageIndex) {
        const desktop = this.desktops[this.currentDesktopId];
        if (!desktop || !Number.isInteger(pageIndex) || pageIndex < 0 || pageIndex >= desktop.pages.length) return;
        this.currentPageByDesktop[this.currentDesktopId] = pageIndex;
        this.saveData();
        this.renderCurrentDesktop();
    }

    addPage() {
        const desktop = this.desktops[this.currentDesktopId];
        if (!desktop || desktop.pages.length >= 10) return;
        desktop.pages.push({ websites: [] });
        this.currentPageByDesktop[this.currentDesktopId] = desktop.pages.length - 1;
        this.saveData();
        this.renderCurrentDesktop();
    }

    deleteCurrentPage() {
        const desktop = this.desktops[this.currentDesktopId];
        if (!desktop || desktop.pages.length <= 1) {
            alert('每個桌面至少需要保留一個子頁面。');
            return;
        }

        const pageIndex = this.getCurrentPageIndex();
        const page = desktop.pages[pageIndex];
        const websiteCount = page?.websites?.length || 0;
        const detail = websiteCount > 0 ? `此頁的 ${websiteCount} 個捷徑也會一併刪除。` : '此頁將會被永久刪除。';
        if (!confirm(`確定要刪除第 ${pageIndex + 1} 頁嗎？\n${detail}`)) return;

        desktop.pages.splice(pageIndex, 1);
        this.currentPageByDesktop[this.currentDesktopId] = Math.min(pageIndex, desktop.pages.length - 1);
        desktop.websites = desktop.pages[0].websites;
        this.saveData();
        this.renderCurrentDesktop();
    }

    renderPageTabs() {
        const container = document.getElementById('pageTabs');
        const desktop = this.desktops[this.currentDesktopId];
        if (!container || !desktop) return;
        const activeIndex = this.getCurrentPageIndex();
        container.innerHTML = desktop.pages.map((_, index) =>
            `<button class="page-tab ${index === activeIndex ? 'active' : ''}" data-page-index="${index}" aria-label="第 ${index + 1} 頁" aria-current="${index === activeIndex ? 'page' : 'false'}">${index + 1}</button>`
        ).join('') + `<button class="page-tab page-tab-add" aria-label="新增子頁面" title="新增子頁面" ${desktop.pages.length >= 10 ? 'disabled' : ''}>+</button><button class="page-tab page-tab-delete" aria-label="刪除目前子頁面" title="刪除目前子頁面" ${desktop.pages.length <= 1 ? 'disabled' : ''}>−</button><span class="page-tab-count">${desktop.pages.length}/10</span>`;
    }

    deleteDesktop(desktopId) {
        if (Object.keys(this.desktops).length <= 1) {
            alert('至少需要保留一個桌面！');
            return;
        }

        if (confirm('確定要刪除這個桌面嗎？')) {
            delete this.desktops[desktopId];

            // 從頂層順序列表中移除
            if (this.desktopOrder) {
                const index = this.desktopOrder.indexOf(desktopId);
                if (index > -1) this.desktopOrder.splice(index, 1);
            }

            // 從資料夾中移除
            if (this.folders) {
                Object.keys(this.folders).forEach(fid => {
                    const idx = this.folders[fid].desktopIds.indexOf(desktopId);
                    if (idx > -1) this.folders[fid].desktopIds.splice(idx, 1);
                });
            }

            // 如果刪除的是當前桌面，切換到第一個可用桌面
            if (this.currentDesktopId === desktopId) {
                const availableDesktops = Object.keys(this.desktops);
                if (availableDesktops.length > 0) {
                    this.currentDesktopId = availableDesktops[0];
                } else {
                    // 緊急情況：沒有可用桌面，創建新的預設桌面
                    console.error('No available desktops after deletion, creating default');
                    this.desktops['default'] = {
                        name: '主桌面',
                        websites: [],
                        background: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'
                    };
                    this.currentDesktopId = 'default';
                    this.desktopOrder = ['default'];
                }
            }

            this.saveData();
            this.renderDesktops();
            this.renderCurrentDesktop();
            this.updateBackground();
        }
    }

    showRenameDesktopModal(desktopId) {
        const modal = document.getElementById('renameDesktopModal');
        const input = document.getElementById('desktopName');
        input.value = this.desktops[desktopId].name;
        modal.dataset.desktopId = desktopId;
        this.showModal('renameDesktopModal');
    }

    renameDesktop() {
        const modal = document.getElementById('renameDesktopModal');
        const desktopId = modal.dataset.desktopId;
        const newName = document.getElementById('desktopName').value.trim();

        if (newName) {
            this.desktops[desktopId].name = newName;
            this.saveData();
            this.renderDesktops();
            this.hideModal('renameDesktopModal');
        }
    }

    renderDesktops() {
        const desktopList = document.getElementById('desktopList');
        desktopList.innerHTML = '';

        // 確保至少有一個桌面
        if (!this.desktops || Object.keys(this.desktops).length === 0) {
            this.desktops = {
                'default': {
                    name: '主桌面',
                    websites: [],
                    background: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'
                }
            };
            this.currentDesktopId = 'default';
            this.saveData();
        }

        // 初始化資料夾結構
        if (!this.folders) this.folders = {};
        if (!this.folderOrder) this.folderOrder = [];

        // 整理 desktopOrder：加入遺漏的、移除不存在的
        const allDesktopIds = Object.keys(this.desktops);
        allDesktopIds.forEach(id => {
            const inFolder = Object.values(this.folders).some(f => f.desktopIds.includes(id));
            if (!inFolder && !this.desktopOrder.includes(id)) {
                this.desktopOrder.push(id);
            }
        });
        this.desktopOrder = this.desktopOrder.filter(id => this.desktops[id] && !this.desktops[id].folderId);

        // 整理資料夾的 desktopIds
        this.folderOrder = this.folderOrder.filter(fid => this.folders[fid]);
        Object.keys(this.folders).forEach(fid => {
            if (!this.folderOrder.includes(fid)) this.folderOrder.push(fid);
            this.folders[fid].desktopIds = this.folders[fid].desktopIds.filter(did => this.desktops[did]);
        });

        // 合併 folderOrder 和 desktopOrder 成統一頂層順序
        if (!this.topLevelOrder) {
            this.topLevelOrder = [];
            for (const fid of this.folderOrder) this.topLevelOrder.push({ type: 'folder', id: fid });
            for (const did of this.desktopOrder) this.topLevelOrder.push({ type: 'desktop', id: did });
        } else {
            // 補上新加入的
            for (const fid of this.folderOrder) {
                if (!this.topLevelOrder.find(x => x.type === 'folder' && x.id === fid))
                    this.topLevelOrder.push({ type: 'folder', id: fid });
            }
            for (const did of this.desktopOrder) {
                if (!this.topLevelOrder.find(x => x.type === 'desktop' && x.id === did))
                    this.topLevelOrder.push({ type: 'desktop', id: did });
            }
            // 移除不存在的
            this.topLevelOrder = this.topLevelOrder.filter(x =>
                (x.type === 'folder' && this.folders[x.id]) ||
                (x.type === 'desktop' && this.desktops[x.id] && !this.desktops[x.id].folderId)
            );
        }
        // 同步回 folderOrder / desktopOrder
        this.folderOrder = this.topLevelOrder.filter(x => x.type === 'folder').map(x => x.id);
        this.desktopOrder = this.topLevelOrder.filter(x => x.type === 'desktop').map(x => x.id);

        // 按統一順序渲染
        for (const item of this.topLevelOrder) {
            if (item.type === 'folder') {
                const folder = this.folders[item.id];
                if (!folder) continue;
                const folderEl = this._createFolderElement(item.id, folder);
                desktopList.appendChild(folderEl);
            } else {
                const desktop = this.desktops[item.id];
                if (!desktop) continue;
                const desktopElement = this._createDesktopElement(item.id, desktop);
                desktopElement.classList.add('root-level');
                desktopList.appendChild(desktopElement);
            }
        }

        // 統一在 desktopList 層處理所有拖曳
        desktopList.addEventListener('dragover', (e) => {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';

            const draggingEl = desktopList.querySelector('.dragging');
            if (!draggingEl) return;

            // 若拖曳的是桌面，且滑鼠在 folder-header 上 → 顯示「移入資料夾」
            const onFolderHeader = e.target.closest('.folder-header');
            if (draggingEl.dataset.desktopId && onFolderHeader) {
                this._clearInsertLine();
                document.querySelectorAll('.folder-header.drag-over').forEach(el => el.classList.remove('drag-over'));
                onFolderHeader.classList.add('drag-over');
                return;
            }
            document.querySelectorAll('.folder-header.drag-over').forEach(el => el.classList.remove('drag-over'));

            // 滑鼠在資料夾內的子桌面上 → 資料夾內排序
            const inFolderDesktop = e.target.closest('.folder-children .desktop-item');
            if (inFolderDesktop && inFolderDesktop !== draggingEl) {
                const pos = this._getDropPosition(e, inFolderDesktop);
                this._showInsertLine(inFolderDesktop, pos);
                return;
            }

            // 頂層排序：folder-item 或 root-level desktop-item
            const topTarget = e.target.closest('.folder-item, .desktop-item.root-level');
            if (!topTarget || topTarget === draggingEl || topTarget.closest('.folder-children')) {
                // 不清除插入線，保持最後一個位置
                return;
            }

            const pos = this._getDropPosition(e, topTarget);
            this._showInsertLine(topTarget, pos);
        });

        desktopList.addEventListener('dragleave', (e) => {
            if (!desktopList.contains(e.relatedTarget)) {
                this._clearInsertLine();
                document.querySelectorAll('.folder-header.drag-over').forEach(el => el.classList.remove('drag-over'));
            }
        });

        desktopList.addEventListener('drop', (e) => {
            e.preventDefault();
            const transferData = e.dataTransfer.getData('text/plain');
            if (!transferData) return;

            const onFolderHeader = e.target.closest('.folder-header');
            document.querySelectorAll('.folder-header.drag-over').forEach(el => el.classList.remove('drag-over'));

            // 拖曳桌面到資料夾 header → 移入資料夾
            if (onFolderHeader && transferData.startsWith('desktop:')) {
                this._clearInsertLine();
                const folderId = onFolderHeader.closest('.folder-item').dataset.folderId;
                const draggedId = transferData.replace('desktop:', '');
                this._moveDesktopToFolder(draggedId, folderId);
                return;
            }

            // 先讀取插入線位置，再移除
            const insertLine = desktopList.querySelector('.drag-insert-line');
            if (!insertLine) return;

            const nextEl = insertLine.nextElementSibling;
            const prevEl = insertLine.previousElementSibling;
            this._clearInsertLine();

            // 移除插入線（已讀完位置）
            // nextEl 或 prevEl 就是插入目標
            const refEl = nextEl || prevEl;
            const insertBefore = !!nextEl; // true = 插到 refEl 前面

            if (!refEl) return;

            const refFolderId = refEl.dataset.folderId;
            const refDesktopId = refEl.dataset.desktopId;

            if (transferData.startsWith('desktop:')) {
                const draggedId = transferData.replace('desktop:', '');
                if (refDesktopId) {
                    this.reorderDesktop(draggedId, refDesktopId, insertBefore ? 'before' : 'after');
                } else if (refFolderId) {
                    // 插到資料夾旁邊 → 移到頂層，排在資料夾前後
                    this.reorderFolderOrDesktop(draggedId, 'desktop', refFolderId, 'folder', insertBefore ? 'before' : 'after');
                }
            } else if (transferData.startsWith('folder:')) {
                const draggedFolderId = transferData.replace('folder:', '');
                if (refFolderId && draggedFolderId !== refFolderId) {
                    this.reorderFolderOrDesktop(draggedFolderId, 'folder', refFolderId, 'folder', insertBefore ? 'before' : 'after');
                } else if (refDesktopId) {
                    this.reorderFolderOrDesktop(draggedFolderId, 'folder', refDesktopId, 'desktop', insertBefore ? 'before' : 'after');
                }
            }
        });
    }

    _createFolderElement(folderId, folder) {
        const folderEl = document.createElement('div');
        folderEl.className = 'folder-item';
        folderEl.dataset.folderId = folderId;

        const expanded = !folder.collapsed;
        const header = document.createElement('div');
        header.className = 'folder-header';
        header.innerHTML = `
            <span class="folder-toggle ${expanded ? 'expanded' : ''}">▶</span>
            <span class="folder-icon">📁</span>
            <span class="folder-name">${folder.name}</span>
            <div class="folder-actions">
                <button class="folder-action-btn add-to-folder-btn" title="在此資料夾新增桌面">+</button>
                <button class="folder-action-btn rename-folder-btn" title="重命名資料夾">✏️</button>
                <button class="folder-action-btn delete-folder-btn" title="刪除資料夾">🗑️</button>
            </div>
        `;

        // 折疊/展開
        header.addEventListener('click', (e) => {
            if (!e.target.closest('.folder-actions')) {
                this.toggleFolder(folderId);
            }
        });

        header.querySelector('.add-to-folder-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            this.addDesktopToFolder(folderId);
        });

        header.querySelector('.rename-folder-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            this.showRenameFolderModal(folderId);
        });

        header.querySelector('.delete-folder-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            this.deleteFolder(folderId);
        });

        // 資料夾本身可拖曳排序
        folderEl.draggable = true;
        folderEl.addEventListener('dragstart', (e) => {
            if (e.target.closest('.folder-actions')) {
                e.preventDefault();
                return;
            }
            // 若拖曳來源是內部的桌面項目，不由資料夾接管
            if (e.target.closest('.desktop-item')) {
                return;
            }
            e.dataTransfer.setData('text/plain', `folder:${folderId}`);
            e.dataTransfer.effectAllowed = 'move';
            folderEl.classList.add('dragging');
        });
        folderEl.addEventListener('dragend', (e) => {
            if (!e.target.closest('.desktop-item')) {
                folderEl.classList.remove('dragging');
            }
            this._clearInsertLine();
        });

        folderEl.appendChild(header);

        const children = document.createElement('div');
        children.className = `folder-children ${folder.collapsed ? 'collapsed' : ''}`;

        for (const did of folder.desktopIds) {
            const desktop = this.desktops[did];
            if (!desktop) continue;
            const desktopEl = this._createDesktopElement(did, desktop);
            children.appendChild(desktopEl);
        }

        folderEl.appendChild(children);
        return folderEl;
    }

    _createDesktopElement(id, desktop) {
        const desktopElement = document.createElement('div');
        desktopElement.className = `desktop-item ${id === this.currentDesktopId ? 'active' : ''}`;
        desktopElement.draggable = true;
        desktopElement.dataset.desktopId = id;
        desktopElement.innerHTML = `
            <div class="desktop-name">${desktop.name}</div>
            <div class="desktop-actions">
                <button class="desktop-action-btn rename-btn" title="重命名">✏️</button>
                <button class="desktop-action-btn delete-btn" title="刪除">🗑️</button>
            </div>
        `;

        this.setupDesktopDragEvents(desktopElement);

        desktopElement.querySelector('.rename-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            this.showRenameDesktopModal(id);
        });

        desktopElement.querySelector('.delete-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            this.deleteDesktop(id);
        });

        desktopElement.addEventListener('click', (e) => {
            if (!e.target.closest('.desktop-actions')) {
                this.switchDesktop(id);
            }
        });

        return desktopElement;
    }

    _moveDesktopToFolder(desktopId, folderId) {
        // 從舊資料夾移出
        Object.keys(this.folders).forEach(fid => {
            const idx = this.folders[fid].desktopIds.indexOf(desktopId);
            if (idx > -1) this.folders[fid].desktopIds.splice(idx, 1);
        });
        // 從頂層移出
        const rootIdx = this.desktopOrder.indexOf(desktopId);
        if (rootIdx > -1) this.desktopOrder.splice(rootIdx, 1);

        if (folderId && this.folders[folderId]) {
            // 加入新資料夾
            if (this.desktops[desktopId]) this.desktops[desktopId].folderId = folderId;
            if (!this.folders[folderId].desktopIds.includes(desktopId)) {
                this.folders[folderId].desktopIds.push(desktopId);
            }
        } else {
            // 移到頂層
            if (this.desktops[desktopId]) delete this.desktops[desktopId].folderId;
            if (!this.desktopOrder.includes(desktopId)) {
                this.desktopOrder.push(desktopId);
            }
        }
    }

    // 網站管理
    getFaviconUrl(url) {
        try {
            const urlObj = new URL(url);
            const domain = urlObj.hostname;

            // 返回Google的favicon服務作為主要來源
            return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
        } catch (error) {
            console.warn('Failed to parse URL for favicon:', url, error);
            // 如果URL解析失敗，使用預設圖示
            return 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>';
        }
    }

    setupFaviconFallback(imgElement, websiteUrl) {
        try {
            const urlObj = new URL(websiteUrl);
            const domain = urlObj.hostname;

            // 定義多個favicon來源的優先級列表
            const faviconSources = [
                `https://www.google.com/s2/favicons?domain=${domain}&sz=32`,
                `${urlObj.protocol}//${domain}/favicon.ico`,
                `${urlObj.protocol}//${domain}/favicon.png`,
                `${urlObj.protocol}//${domain}/apple-touch-icon.png`,
                // 最後的預設圖示
                'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>'
            ];

            let currentSourceIndex = 0;

            const tryNextSource = () => {
                if (currentSourceIndex < faviconSources.length - 1) {
                    currentSourceIndex++;
                    imgElement.src = faviconSources[currentSourceIndex];
                }
            };

            imgElement.addEventListener('error', tryNextSource);

        } catch (error) {
            console.warn('Failed to setup favicon fallback:', error);
            imgElement.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>';
        }
    }

    addWebsite() {
        const name = document.getElementById('websiteName').value.trim();
        const url = document.getElementById('websiteUrl').value.trim();
        const icon = document.getElementById('websiteIcon').value.trim();

        if (!name || !url) {
            alert('請填寫網站名稱和網址！');
            return;
        }

        const finalUrl = url.startsWith('http') ? url : 'https://' + url;
        const website = {
            id: 'website_' + Date.now(),
            name: name,
            url: finalUrl,
            icon: icon || this.getFaviconUrl(finalUrl),
            gridPosition: this.findNextAvailableGrid()
        };

        this.getCurrentWebsites().push(website);
        this.saveData();
        this.renderCurrentDesktop();
        this.hideModal('addWebsiteModal');

        // 清空表單
        document.getElementById('websiteName').value = '';
        document.getElementById('websiteUrl').value = '';
        document.getElementById('websiteIcon').value = '';
    }

    deleteWebsite(websiteId) {
        if (confirm('確定要刪除這個網站嗎？')) {
            const websites = this.getCurrentWebsites();
            const index = websites.findIndex(w => w.id === websiteId);
            if (index !== -1) {
                websites.splice(index, 1);
                this.saveData();
                this.renderCurrentDesktop();
            }
        }
    }

    deleteSelectedWebsites() {
        const selectedIds = new Set(this.selectedIcons);
        const websites = this.getCurrentWebsites();
        const selectedCount = websites.filter(website => selectedIds.has(website.id)).length;
        if (!selectedCount) return;

        if (!confirm(`確定要刪除所選取的 ${selectedCount} 個圖示嗎？`)) return;

        const remainingWebsites = websites.filter(website => !selectedIds.has(website.id));
        websites.splice(0, websites.length, ...remainingWebsites);
        this.saveData();
        this.renderCurrentDesktop();
    }

    renderCurrentDesktop() {
        const desktopContent = document.getElementById('desktopContent');

        // 確保當前桌面存在，如果不存在則重新初始化
        if (!this.desktops[this.currentDesktopId]) {
            console.warn('Current desktop not found, recreating...');
            this.desktops[this.currentDesktopId] = {
                name: '主桌面',
                websites: [],
                background: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'
            };
            this.saveData();
        }

        const currentDesktop = this.desktops[this.currentDesktopId];
        if (!Array.isArray(currentDesktop.pages) || currentDesktop.pages.length === 0) {
            currentDesktop.pages = [{ websites: Array.isArray(currentDesktop.websites) ? currentDesktop.websites : [] }];
        }
        this.currentPageByDesktop[this.currentDesktopId] = Math.min(this.getCurrentPageIndex(), currentDesktop.pages.length - 1);
        const currentWebsites = this.getCurrentWebsites();
        currentDesktop.websites = currentDesktop.pages[0].websites;

        if (!currentDesktop) {
            console.error('Failed to get current desktop, creating emergency desktop');
            desktopContent.innerHTML = '<div style="color: white; text-align: center; padding: 20px;">正在重新載入桌面...</div>';
            // 重新初始化
            this.currentDesktopId = 'default';
            this.desktops['default'] = {
                name: '主桌面',
                websites: [],
                background: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'
            };
            this.saveData().then(() => {
                this.renderCurrentDesktop();
                this.renderDesktops();
            });
            return;
        }

        // 建立22x12的網格
        desktopContent.innerHTML = '';

        // 建立264個網格單元格 (22 columns x 12 rows)
        for (let i = 0; i < GRID_CELLS; i++) {
            const gridCell = document.createElement('div');
            gridCell.className = 'grid-cell';
            gridCell.dataset.gridIndex = i;
            desktopContent.appendChild(gridCell);
        }

        // 放置網站圖示到對應位置
        currentWebsites.forEach(website => {
            const gridIndex = website.gridPosition || 0;
            const gridCell = desktopContent.querySelector(`[data-grid-index="${gridIndex}"]`);

            if (gridCell && !gridCell.querySelector('.website-icon')) {
                const websiteElement = document.createElement('div');
                websiteElement.className = 'website-icon';
                websiteElement.draggable = true;
                websiteElement.dataset.websiteId = website.id;
                websiteElement.dataset.websiteUrl = website.url;
                const imgElement = document.createElement('img');
                imgElement.src = website.icon;
                imgElement.alt = website.name;

                // 為圖片添加錯誤處理，嘗試多個favicon來源
                this.setupFaviconFallback(imgElement, website.url);

                websiteElement.innerHTML = `
                    <div class="name">${website.name}</div>
                    <button class="delete-btn" title="刪除">×</button>
                `;

                // 將圖片插入到第一個位置
                websiteElement.insertBefore(imgElement, websiteElement.firstChild);

                // 添加點擊打開網站事件
                websiteElement.addEventListener('click', (e) => {
                    if (!e.target.closest('.delete-btn') && !websiteElement.classList.contains('dragging')) {
                        window.open(website.url, '_blank');
                    }
                });

                // 添加刪除按鈕事件
                const deleteBtn = websiteElement.querySelector('.delete-btn');
                deleteBtn.addEventListener('click', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    this.deleteWebsite(website.id);
                });

                // 添加拖曳事件
                this.setupDragEvents(websiteElement);

                // 添加右鍵選單事件
                this.setupIconContextMenu(websiteElement, website);

                gridCell.appendChild(websiteElement);
            }
        });

        // 設置放置區域事件
        this.setupDropEvents();
        this.updateBackground();
        this.renderPageTabs();

        // 清除任何現有的選取狀態
        this.clearSelection();
    }

    // 拖曳功能
    setupDragEvents(websiteElement) {
        let isDragging = false;

        websiteElement.addEventListener('mousedown', (e) => {
            if (e.target.closest('.delete-btn')) return;
            isDragging = false;
        });

        websiteElement.addEventListener('dragstart', (e) => {
            isDragging = true;
            console.log('Drag start:', websiteElement.dataset.websiteId);
            e.dataTransfer.setData('text/plain', websiteElement.dataset.websiteId);
            e.dataTransfer.effectAllowed = 'move';
            websiteElement.classList.add('dragging');
        });

        websiteElement.addEventListener('dragend', (e) => {
            console.log('Drag end');
            websiteElement.classList.remove('dragging');
            setTimeout(() => {
                isDragging = false;
            }, 100);
        });

        // 防止拖曳時觸發點擊事件
        websiteElement.addEventListener('click', (e) => {
            if (isDragging) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            }
        });
    }

    setupDropEvents() {
        const gridCells = document.querySelectorAll('.grid-cell');

        gridCells.forEach(cell => {
            // 清除之前的事件監聽器
            cell.removeEventListener('dragover', this.handleDragOver);
            cell.removeEventListener('dragleave', this.handleDragLeave);
            cell.removeEventListener('drop', this.handleDrop);

            cell.addEventListener('dragover', (e) => {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
                cell.classList.add('drag-over');
                console.log('Drag over grid:', cell.dataset.gridIndex);
            });

            cell.addEventListener('dragleave', (e) => {
                // 只有當離開的是cell本身而不是子元素時才移除樣式
                if (!cell.contains(e.relatedTarget)) {
                    cell.classList.remove('drag-over');
                }
            });

            cell.addEventListener('drop', (e) => {
                e.preventDefault();
                cell.classList.remove('drag-over');

                const transferData = e.dataTransfer.getData('text/plain');
                const newGridIndex = parseInt(cell.dataset.gridIndex);

                console.log('Drop on grid:', newGridIndex, 'data:', transferData);

                if (transferData && !isNaN(newGridIndex)) {
                    if (transferData.startsWith('batch:')) {
                        // 批量移動
                        const websiteIds = transferData.replace('batch:', '').split(',');
                        this.moveBatchToGrid(websiteIds, newGridIndex);
                        this.clearSelection();
                    } else {
                        // 單個移動
                        this.moveWebsiteToGrid(transferData, newGridIndex);
                    }
                }
            });
        });
    }

    moveWebsiteToGrid(websiteId, newGridIndex) {
        console.log('Moving website:', websiteId, 'to grid:', newGridIndex);

        const currentDesktop = this.desktops[this.currentDesktopId];
        const websitesOnPage = this.getCurrentWebsites();
        const website = websitesOnPage.find(w => w.id === websiteId);

        if (!website) {
            console.error('Website not found:', websiteId);
            return;
        }

        // 檢查目標位置是否已被佔用
        const existingWebsite = websitesOnPage.find(w =>
            w.gridPosition === newGridIndex && w.id !== websiteId
        );

        if (existingWebsite) {
            // 交換位置
            const oldGridIndex = website.gridPosition || 0;
            existingWebsite.gridPosition = oldGridIndex;
            console.log('Swapping positions with website:', existingWebsite.id);
        }

        // 更新位置
        const oldPosition = website.gridPosition;
        website.gridPosition = newGridIndex;

        console.log('Updated position from', oldPosition, 'to', newGridIndex);

        this.saveData();
        this.renderCurrentDesktop();
    }

    moveBatchToGrid(websiteIds, dropGridIndex) {
        console.log('Moving batch:', websiteIds, 'to grid:', dropGridIndex);

        const currentDesktop = this.desktops[this.currentDesktopId];
        const websites = websiteIds.map(id =>
            this.getCurrentWebsites().find(w => w.id === id)
        ).filter(Boolean);

        if (websites.length === 0) return;

        // 計算所有選中圖示的相對位置（以最小位置為基準）
        const positions = websites.map(w => w.gridPosition || 0);
        const minPosition = Math.min(...positions);

        // 計算相對偏移量
        const relativeOffsets = websites.map(website => {
            const currentPos = website.gridPosition || 0;
            const row = Math.floor(currentPos / GRID_COLUMNS);
            const col = currentPos % GRID_COLUMNS;
            const minRow = Math.floor(minPosition / GRID_COLUMNS);
            const minCol = minPosition % GRID_COLUMNS;

            return {
                website: website,
                rowOffset: row - minRow,
                colOffset: col - minCol,
                originalPosition: currentPos
            };
        });

        // 計算新的基準位置
        const newBaseRow = Math.floor(dropGridIndex / GRID_COLUMNS);
        const newBaseCol = dropGridIndex % GRID_COLUMNS;

        // 暫時記錄需要移動的圖示的原始位置
        const originalPositions = new Map();
        websites.forEach(website => {
            originalPositions.set(website.id, website.gridPosition);
        });

        // 計算新位置並處理位置衝突
        const newPositions = new Map();
        const conflictedWebsites = [];

        relativeOffsets.forEach(({ website, rowOffset, colOffset }) => {
            const newRow = newBaseRow + rowOffset;
            const newCol = newBaseCol + colOffset;
            const newPosition = newRow * GRID_COLUMNS + newCol;

            // 檢查新位置是否在邊界內
            if (newRow >= 0 && newRow < GRID_ROWS && newCol >= 0 && newCol < GRID_COLUMNS) {
                // 檢查目標位置是否被其他圖示佔用（不包括正在移動的圖示）
                const existingWebsite = this.getCurrentWebsites().find(w =>
                    w.gridPosition === newPosition && !websiteIds.includes(w.id)
                );

                if (existingWebsite) {
                    conflictedWebsites.push(existingWebsite);
                }

                newPositions.set(website.id, newPosition);
            } else {
                // 如果超出邊界，保持原位置
                newPositions.set(website.id, website.gridPosition);
            }
        });

        // 將被衝突的圖示移動到空位
        // Plan every position before changing data. Moving icons free their old cells.
        const reservedPositions = new Set(newPositions.values());
        const occupiedPositions = new Set(this.getCurrentWebsites()
            .filter(website => !websiteIds.includes(website.id) && !conflictedWebsites.includes(website))
            .map(website => website.gridPosition ?? 0));
        const displacedPositions = new Map();
        for (const website of conflictedWebsites) {
            const emptyPosition = Array.from({ length: GRID_CELLS }, (_, i) => i)
                .find(i => !reservedPositions.has(i) && !occupiedPositions.has(i));
            if (emptyPosition === undefined) return;
            displacedPositions.set(website.id, emptyPosition);
            reservedPositions.add(emptyPosition);
        }

        conflictedWebsites.forEach(website => {
            website.gridPosition = displacedPositions.get(website.id);
        });

        // 應用新位置
        websites.forEach(website => {
            const newPosition = newPositions.get(website.id);
            if (newPosition !== undefined) {
                website.gridPosition = newPosition;
            }
        });

        this.saveData();
        this.renderCurrentDesktop();
    }

    findAvailablePositions(count, startIndex, excludedWebsiteIds = []) {
        const currentDesktop = this.desktops[this.currentDesktopId];
        const excludedIds = new Set(excludedWebsiteIds);
        const usedPositions = new Set(this.getCurrentWebsites()
            .filter(website => !excludedIds.has(website.id))
            .map(w => w.gridPosition || 0));
        const positions = [];

        // 嘗試從起始位置開始找連續位置
        let currentIndex = startIndex;
        let found = 0;

        while (found < count && currentIndex < GRID_CELLS) {
            if (!usedPositions.has(currentIndex)) {
                positions.push(currentIndex);
                found++;
            } else {
                // 如果遇到已佔用的位置，重新開始尋找
                positions.length = 0;
                found = 0;
            }
            currentIndex++;
        }

        // 如果找不到足夠的連續位置，就分散放置
        if (positions.length < count) {
            positions.length = 0;
            for (let i = 0; i < GRID_CELLS && positions.length < count; i++) {
                if (!usedPositions.has(i)) {
                    positions.push(i);
                }
            }
        }

        return positions;
    }

    findNextAvailableGrid() {
        const currentDesktop = this.desktops[this.currentDesktopId];
        const usedPositions = this.getCurrentWebsites().map(w => w.gridPosition || 0);

        for (let i = 0; i < GRID_CELLS; i++) {
            if (!usedPositions.includes(i)) {
                return i;
            }
        }
        return 0;
    }

    findNextAvailableGridExcluding(excludePositions) {
        const currentDesktop = this.desktops[this.currentDesktopId];
        const usedPositions = new Set(this.getCurrentWebsites().map(w => w.gridPosition || 0));

        // 合併已使用位置和需要排除的位置
        const allExcluded = new Set([...usedPositions, ...excludePositions]);

        for (let i = 0; i < GRID_CELLS; i++) {
            if (!allExcluded.has(i)) {
                return i;
            }
        }
        return 0;
    }

    // 拖曳插入線 helper
    _getDropPosition(e, element) {
        const rect = element.getBoundingClientRect();
        return e.clientY < rect.top + rect.height / 2 ? 'before' : 'after';
    }

    _clearInsertLine() {
        const line = document.querySelector('.drag-insert-line');
        if (line) line.remove();
    }

    _showInsertLine(referenceEl, position) {
        this._clearInsertLine();
        const line = document.createElement('div');
        line.className = 'drag-insert-line';
        if (position === 'before') {
            referenceEl.parentNode.insertBefore(line, referenceEl);
        } else {
            referenceEl.parentNode.insertBefore(line, referenceEl.nextSibling);
        }
    }

    // 桌面拖拽功能
    setupDesktopDragEvents(desktopElement) {
        const desktopId = desktopElement.dataset.desktopId;

        desktopElement.addEventListener('dragstart', (e) => {
            // 防止在按鈕上拖拽
            if (e.target.closest('.desktop-actions')) {
                e.preventDefault();
                return;
            }

            // 阻止事件冒泡到父層資料夾元素，防止資料夾被誤觸發拖曳
            e.stopPropagation();

            console.log('Desktop drag start:', desktopId);
            e.dataTransfer.setData('text/plain', `desktop:${desktopId}`);
            e.dataTransfer.effectAllowed = 'move';
            desktopElement.classList.add('dragging');
        });

        desktopElement.addEventListener('dragend', (e) => {
            console.log('Desktop drag end');
            desktopElement.classList.remove('dragging');
            this._clearInsertLine();
        });
    }

    reorderDesktop(draggedDesktopId, dropTargetId, dropPos = 'before') {
        // 找出拖曳來源的資料夾（若有）
        const getDraggedFolder = (id) => {
            for (const [fid, folder] of Object.entries(this.folders)) {
                if (folder.desktopIds.includes(id)) return fid;
            }
            return null;
        };

        const draggedFolderId = getDraggedFolder(draggedDesktopId);
        const dropTargetFolderId = getDraggedFolder(dropTargetId);

        const insertInArray = (arr, draggedId, targetId, pos) => {
            const di = arr.indexOf(draggedId);
            arr.splice(di, 1);
            let ti = arr.indexOf(targetId);
            if (pos === 'after') ti += 1;
            arr.splice(ti, 0, draggedId);
        };

        // 如果同一個資料夾內排序
        if (draggedFolderId && draggedFolderId === dropTargetFolderId) {
            const arr = this.folders[draggedFolderId].desktopIds;
            insertInArray(arr, draggedDesktopId, dropTargetId, dropPos);
        } else if (!draggedFolderId && !dropTargetFolderId) {
            // 都在頂層
            this.reorderFolderOrDesktop(draggedDesktopId, 'desktop', dropTargetId, 'desktop', dropPos);
            return;
        } else {
            // 跨資料夾移動：移到目標桌面所在的資料夾（或頂層）
            if (dropTargetFolderId) {
                this._moveDesktopToFolder(draggedDesktopId, dropTargetFolderId);
                const arr = this.folders[dropTargetFolderId].desktopIds;
                insertInArray(arr, draggedDesktopId, dropTargetId, dropPos);
            } else {
                // 移到頂層，並排在目標桌面旁邊
                this._moveDesktopToFolder(draggedDesktopId, null);
                if (!this.topLevelOrder) this.topLevelOrder = [];
                const draggedEntry = { type: 'desktop', id: draggedDesktopId };
                const existingIdx = this.topLevelOrder.findIndex(x => x.type === 'desktop' && x.id === draggedDesktopId);
                if (existingIdx > -1) this.topLevelOrder.splice(existingIdx, 1);
                let targetIdx = this.topLevelOrder.findIndex(x => x.type === 'desktop' && x.id === dropTargetId);
                if (targetIdx > -1) {
                    if (dropPos === 'after') targetIdx += 1;
                    this.topLevelOrder.splice(targetIdx, 0, draggedEntry);
                } else {
                    this.topLevelOrder.push(draggedEntry);
                }
                this.folderOrder = this.topLevelOrder.filter(x => x.type === 'folder').map(x => x.id);
                this.desktopOrder = this.topLevelOrder.filter(x => x.type === 'desktop').map(x => x.id);
            }
        }

        this.saveData();
        this.renderDesktops();
    }

    // 重排資料夾或桌面在頂層列表中的位置
    reorderFolderOrDesktop(draggedId, draggedType, targetId, targetType, dropPos = 'before') {
        const topOrder = this.topLevelOrder ? [...this.topLevelOrder] : [];
        const draggedIdx = topOrder.findIndex(x => x.type === draggedType && x.id === draggedId);
        const targetIdx = topOrder.findIndex(x => x.type === targetType && x.id === targetId);
        if (draggedIdx === -1 || targetIdx === -1) return;

        const [removed] = topOrder.splice(draggedIdx, 1);
        let newTargetIdx = topOrder.findIndex(x => x.type === targetType && x.id === targetId);
        if (dropPos === 'after') newTargetIdx += 1;
        topOrder.splice(newTargetIdx, 0, removed);

        this.topLevelOrder = topOrder;
        this.folderOrder = topOrder.filter(x => x.type === 'folder').map(x => x.id);
        this.desktopOrder = topOrder.filter(x => x.type === 'desktop').map(x => x.id);

        this.saveData();
        this.renderDesktops();
    }

    // 背景管理
    updateBackground() {
        const desktopArea = document.getElementById('desktopArea');
        const currentDesktop = this.desktops[this.currentDesktopId];
        if (currentDesktop && currentDesktop.background) {
            desktopArea.style.backgroundImage = `url('${currentDesktop.background}')`;
        }
    }

    changeBackground() {
        const url = document.getElementById('backgroundUrl').value.trim();
        const file = document.getElementById('backgroundFile').files[0];

        if (url) {
            this.desktops[this.currentDesktopId].background = url;
            this.saveData();
            this.updateBackground();
            this.hideModal('changeBackgroundModal');
        } else if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                this.desktops[this.currentDesktopId].background = e.target.result;
                this.saveData();
                this.updateBackground();
                this.hideModal('changeBackgroundModal');
            };
            reader.readAsDataURL(file);
        } else {
            alert('請輸入背景圖片網址或選擇本地圖片！');
        }

        // 清空表單
        document.getElementById('backgroundUrl').value = '';
        document.getElementById('backgroundFile').value = '';
    }

    handleBackgroundFileSelect(e) {
        const file = e.target.files[0];
        if (file && file.type.startsWith('image/')) {
            document.getElementById('backgroundUrl').value = '';
        }
    }

    // 右鍵選單
    showContextMenu(x, y) {
        const contextMenu = document.getElementById('contextMenu');
        contextMenu.style.display = 'block';
        contextMenu.style.left = Math.min(x, window.innerWidth - contextMenu.offsetWidth) + 'px';
        contextMenu.style.top = Math.min(y, window.innerHeight - contextMenu.offsetHeight) + 'px';
    }

    hideContextMenu() {
        document.getElementById('contextMenu').style.display = 'none';
    }

    // 圖示右鍵選單
    setupIconContextMenu(websiteElement, website) {
        websiteElement.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            this.currentEditingWebsite = website;
            this.hideContextMenu();
            this.showIconContextMenu(e.pageX, e.pageY);
        });
    }

    showIconContextMenu(x, y) {
        const iconContextMenu = document.getElementById('iconContextMenu');
        const hasMultipleSelection = this.selectedIcons.size > 1;
        document.getElementById('deleteWebsiteBtn').style.display = hasMultipleSelection ? 'none' : '';
        document.getElementById('deleteSelectedWebsitesBtn').style.display = hasMultipleSelection ? '' : 'flex';
        iconContextMenu.style.display = 'block';
        iconContextMenu.style.left = Math.min(x, window.innerWidth - iconContextMenu.offsetWidth) + 'px';
        iconContextMenu.style.top = Math.min(y, window.innerHeight - iconContextMenu.offsetHeight) + 'px';
    }

    hideIconContextMenu() {
        document.getElementById('iconContextMenu').style.display = 'none';
    }

    // 模態對話框
    showModal(modalId) {
        document.getElementById(modalId).classList.add('show');
    }

    hideModal(modalId) {
        document.getElementById(modalId).classList.remove('show');
    }

    showAddWebsiteModal() {
        this.showModal('addWebsiteModal');
    }

    showChangeBackgroundModal() {
        this.showModal('changeBackgroundModal');
    }

    // 編輯網站功能
    editCurrentWebsite() {
        if (!this.currentEditingWebsite) return;

        const website = this.currentEditingWebsite;
        document.getElementById('editWebsiteName').value = website.name;
        document.getElementById('editWebsiteUrl').value = website.url;
        document.getElementById('editWebsiteIcon').value = website.icon.startsWith('data:') ? '' : website.icon;

        this.showModal('editWebsiteModal');
    }

    deleteCurrentWebsite() {
        if (!this.currentEditingWebsite) return;
        this.deleteWebsite(this.currentEditingWebsite.id);
    }

    updateWebsite() {
        if (!this.currentEditingWebsite) return;

        const name = document.getElementById('editWebsiteName').value.trim();
        const url = document.getElementById('editWebsiteUrl').value.trim();
        const icon = document.getElementById('editWebsiteIcon').value.trim();

        if (!name || !url) {
            alert('請填寫網站名稱和網址！');
            return;
        }

        const currentDesktop = this.desktops[this.currentDesktopId];
        const website = this.getCurrentWebsites().find(w => w.id === this.currentEditingWebsite.id);

        if (website) {
            const finalUrl = url.startsWith('http') ? url : 'https://' + url;
            website.name = name;
            website.url = finalUrl;
            website.icon = icon || this.getFaviconUrl(finalUrl);

            this.saveData();
            this.renderCurrentDesktop();
            this.hideModal('editWebsiteModal');

            // 清空表單
            document.getElementById('editWebsiteName').value = '';
            document.getElementById('editWebsiteUrl').value = '';
            document.getElementById('editWebsiteIcon').value = '';
        }
    }

    // OneNote 筆記與資料夾
    setupNotesEvents() {
        document.getElementById('oneNoteBtn').addEventListener('click', () => {
            this.renderNotes();
            this.showModal('oneNoteModal');
        });
        document.getElementById('closeOneNote').addEventListener('click', () => this.hideModal('oneNoteModal'));
        document.getElementById('oneNoteModal').addEventListener('click', (event) => {
            if (event.target.id === 'oneNoteModal') this.hideModal('oneNoteModal');
        });
        document.getElementById('addNoteBtn').addEventListener('click', () => {
            if (this.activeNoteFolderId) {
                const folder = this.noteFolders.find(item => item.id === this.activeNoteFolderId);
                if (folder) folder.collapsed = false;
            } else {
                this.unfiledNotesCollapsed = false;
            }
            const note = { id: crypto.randomUUID(), title: '', content: '', folderId: this.activeNoteFolderId, updatedAt: new Date().toISOString() };
            this.notes.unshift(note);
            this.activeNoteId = note.id;
            this.renderNotes();
            document.getElementById('noteTitle').focus();
            this.saveData();
        });
        document.getElementById('addNoteFolderBtn').addEventListener('click', () => this.addNoteFolder());
        const notesList = document.getElementById('notesList');
        notesList.addEventListener('dragstart', (event) => {
            const row = event.target.closest('[data-drag-type]');
            if (!row || event.target.closest('.note-folder-action')) return;
            event.dataTransfer.setData('text/plain', `${row.dataset.dragType}:${row.dataset.dragId}`);
            event.dataTransfer.effectAllowed = 'move';
            row.classList.add('dragging');
        });
        notesList.addEventListener('dragend', () => {
            notesList.querySelectorAll('.dragging, .drop-before, .drop-after, .drop-into').forEach(row =>
                row.classList.remove('dragging', 'drop-before', 'drop-after', 'drop-into'));
        });
        notesList.addEventListener('dragover', (event) => {
            const target = event.target.closest('[data-drag-type], [data-unfiled]');
            const source = notesList.querySelector('.dragging');
            notesList.querySelectorAll('.drop-before, .drop-after, .drop-into').forEach(row =>
                row.classList.remove('drop-before', 'drop-after', 'drop-into'));
            if (!target || !source || target === source) return;
            const sourceType = source.dataset.dragType;
            if (sourceType === 'folder' && target.dataset.dragType !== 'folder') return;
            event.preventDefault();
            event.dataTransfer.dropEffect = 'move';
            const into = sourceType === 'note' && target.dataset.dragType !== 'note';
            target.classList.add(into ? 'drop-into' : event.clientY < target.getBoundingClientRect().top + target.offsetHeight / 2 ? 'drop-before' : 'drop-after');
        });
        notesList.addEventListener('drop', (event) => {
            const target = event.target.closest('[data-drag-type], [data-unfiled]');
            const source = notesList.querySelector('.dragging');
            if (!target || !source || target === source) return;
            const type = source.dataset.dragType;
            if (type === 'folder' && target.dataset.dragType !== 'folder') return;
            event.preventDefault();
            const sourceId = source.dataset.dragId;
            if (type === 'folder') {
                const from = this.noteFolders.findIndex(folder => folder.id === sourceId);
                const [folder] = this.noteFolders.splice(from, 1);
                const index = this.noteFolders.findIndex(item => item.id === target.dataset.dragId);
                this.noteFolders.splice(index + (event.clientY >= target.getBoundingClientRect().top + target.offsetHeight / 2 ? 1 : 0), 0, folder);
            } else {
                const from = this.notes.findIndex(note => note.id === sourceId);
                const [note] = this.notes.splice(from, 1);
                if (target.dataset.dragType === 'note') {
                    const targetNote = this.notes.find(item => item.id === target.dataset.dragId);
                    note.folderId = targetNote.folderId || null;
                    const index = this.notes.indexOf(targetNote);
                    this.notes.splice(index + (event.clientY >= target.getBoundingClientRect().top + target.offsetHeight / 2 ? 1 : 0), 0, note);
                } else {
                    note.folderId = target.dataset.dragId || null;
                    const folder = this.noteFolders.find(item => item.id === note.folderId);
                    if (folder) folder.collapsed = false;
                    else this.unfiledNotesCollapsed = false;
                    const last = this.notes.findLastIndex(item => (item.folderId || null) === note.folderId);
                    this.notes.splice(last + 1, 0, note);
                }
                if (this.activeNoteId === note.id) this.activeNoteFolderId = note.folderId;
            }
            this.renderNotes();
            this.saveData();
        });
        document.getElementById('notesList').addEventListener('click', (event) => {
            const action = event.target.closest('[data-folder-action]');
            if (action) {
                if (action.dataset.folderAction === 'rename') this.renameNoteFolder(action.dataset.folderId);
                if (action.dataset.folderAction === 'delete') this.deleteNoteFolder(action.dataset.folderId);
                return;
            }
            const deleteNote = event.target.closest('[data-delete-note-id]');
            if (deleteNote) {
                this.deleteNote(deleteNote.dataset.deleteNoteId);
                return;
            }
            const folder = event.target.closest('[data-select-folder]');
            if (folder) {
                this.activeNoteFolderId = folder.dataset.selectFolder || null;
                this.activeNoteId = null;
                if (this.activeNoteFolderId) {
                    const selected = this.noteFolders.find(item => item.id === this.activeNoteFolderId);
                    if (selected) selected.collapsed = !selected.collapsed;
                } else {
                    this.unfiledNotesCollapsed = !this.unfiledNotesCollapsed;
                }
                this.renderNotes();
                this.saveData();
                return;
            }
            const button = event.target.closest('[data-note-id]');
            if (button) {
                this.activeNoteId = button.dataset.noteId;
                this.activeNoteFolderId = this.notes.find(note => note.id === this.activeNoteId)?.folderId || null;
                this.renderNotes();
            }
        });
        for (const [field, key] of [['noteTitle', 'title'], ['noteContent', 'content']]) {
            document.getElementById(field).addEventListener('input', (event) => {
                const note = this.notes.find(item => item.id === this.activeNoteId);
                if (!note) return;
                note[key] = event.target.value;
                note.updatedAt = new Date().toISOString();
                this.renderNoteList();
                this.saveData();
            });
        }
    }

    deleteNote(id) {
        if (!this.notes.some(note => note.id === id) || !confirm('確定刪除這則筆記？')) return;
        this.notes = this.notes.filter(note => note.id !== id);
        if (this.activeNoteId === id) this.activeNoteId = null;
        this.renderNotes();
        this.saveData();
    }

    addNoteFolder() {
        const name = prompt('資料夾名稱：');
        if (!name?.trim()) return;
        const folder = { id: crypto.randomUUID(), name: name.trim(), collapsed: false };
        this.noteFolders.push(folder);
        this.activeNoteFolderId = folder.id;
        this.activeNoteId = null;
        this.renderNotes();
        this.saveData();
    }

    renameNoteFolder(id) {
        const folder = this.noteFolders.find(item => item.id === id);
        if (!folder) return;
        const name = prompt('新的資料夾名稱：', folder.name);
        if (!name?.trim()) return;
        folder.name = name.trim();
        this.renderNotes();
        this.saveData();
    }

    deleteNoteFolder(id) {
        const folder = this.noteFolders.find(item => item.id === id);
        if (!folder || !confirm(`確定刪除「${folder.name}」？其中的筆記會移到未分類。`)) return;
        this.noteFolders = this.noteFolders.filter(item => item.id !== id);
        this.notes.forEach(note => {
            if (note.folderId === id) note.folderId = null;
        });
        if (this.activeNoteFolderId === id) this.activeNoteFolderId = null;
        this.unfiledNotesCollapsed = false;
        this.renderNotes();
        this.saveData();
    }

    renderNoteList() {
        const list = document.getElementById('notesList');
        list.replaceChildren();
        const addFolderRow = (folder) => {
            const row = document.createElement('div');
            row.className = 'note-folder-row' + (this.activeNoteFolderId === folder?.id && !this.activeNoteId ? ' active' : '');
            if (folder) {
                row.draggable = true;
                row.dataset.dragType = 'folder';
                row.dataset.dragId = folder.id;
            } else {
                row.dataset.unfiled = '';
            }
            const select = document.createElement('button');
            select.type = 'button';
            select.dataset.selectFolder = folder?.id || '';
            select.className = 'note-folder-name';
            const collapsed = folder ? !!folder.collapsed : this.unfiledNotesCollapsed;
            select.textContent = `${collapsed ? '▸' : '▾'} ${folder ? `📁 ${folder.name}` : '未分類'}`;
            select.setAttribute('aria-expanded', String(!collapsed));
            row.appendChild(select);
            if (folder) {
                for (const [action, label] of [['rename', '更名'], ['delete', '刪除']]) {
                    const button = document.createElement('button');
                    button.type = 'button';
                    button.className = 'note-folder-action';
                    button.dataset.folderAction = action;
                    button.dataset.folderId = folder.id;
                    button.title = `${label}資料夾`;
                    button.setAttribute('aria-label', `${label}資料夾 ${folder.name}`);
                    button.textContent = action === 'rename' ? '✎' : '×';
                    row.appendChild(button);
                }
            }
            list.appendChild(row);
        };
        const addNotes = (folderId) => {
            for (const note of this.notes.filter(item => (item.folderId || null) === folderId)) {
                const row = document.createElement('div');
                row.className = 'note-item-row' + (note.id === this.activeNoteId ? ' active' : '');
                row.draggable = true;
                row.dataset.dragType = 'note';
                row.dataset.dragId = note.id;
                const button = document.createElement('button');
                button.type = 'button';
                button.dataset.noteId = note.id;
                button.className = 'note-list-item';
                button.textContent = note.title.trim() || '未命名筆記';
                row.appendChild(button);
                const deleteButton = document.createElement('button');
                deleteButton.type = 'button';
                deleteButton.className = 'note-folder-action';
                deleteButton.dataset.deleteNoteId = note.id;
                deleteButton.title = '刪除筆記';
                deleteButton.setAttribute('aria-label', `刪除筆記 ${note.title.trim() || '未命名筆記'}`);
                deleteButton.textContent = '×';
                row.appendChild(deleteButton);
                list.appendChild(row);
            }
        };
        addFolderRow(null);
        if (!this.unfiledNotesCollapsed) addNotes(null);
        for (const folder of this.noteFolders) {
            addFolderRow(folder);
            if (!folder.collapsed) addNotes(folder.id);
        }
    }

    renderNotes() {
        if (!this.notes.some(note => note.id === this.activeNoteId)) {
            this.activeNoteId = null;
        }
        this.renderNoteList();
        const note = this.notes.find(item => item.id === this.activeNoteId);
        const title = document.getElementById('noteTitle');
        const content = document.getElementById('noteContent');
        title.value = note?.title || '';
        content.value = note?.content || '';
        title.disabled = content.disabled = !note;
    }

    handleSearch(query = '') {
        if (!query) return;

        // 如果輸入看起來像URL，直接跳轉
        if (query.includes('.') && !query.includes(' ')) {
            this.performSearch(query);
        }
    }

    performSearch(query) {
        if (query.startsWith('http://') || query.startsWith('https://')) {
            window.location.href = query;
        } else if (query.includes('.') && !query.includes(' ')) {
            window.location.href = 'https://' + query;
        } else {
            window.location.href = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
        }
    }

    // 匯入匯出功能
    exportData() {
        const data = {
            desktops: this.desktops,
            gridColumns: GRID_COLUMNS,
            currentDesktopId: this.currentDesktopId,
            folders: this.folders,
            folderOrder: this.folderOrder,
            topLevelOrder: this.topLevelOrder,
            desktopOrder: this.desktopOrder,
            exportDate: new Date().toISOString(),
            notes: this.notes,
            noteFolders: this.noteFolders,
            unfiledNotesCollapsed: this.unfiledNotesCollapsed,
            version: '2.0'
        };

        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `windesk-backup-${new Date().toISOString().split('T')[0]}.json`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }

    importData() {
        document.getElementById('importFile').click();
    }

    handleImportFile(e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = (e) => {
            try {
                const data = JSON.parse(e.target.result);

                if (data.desktops && typeof data.desktops === 'object') {
                    if (confirm('確定要匯入這個設定嗎？這將會覆蓋當前的所有桌面設定。')) {
                        this.migrateGridPositions(data.desktops, data.gridColumns || 20);
                        this.desktops = data.desktops;
                        this.currentDesktopId = data.currentDesktopId || Object.keys(data.desktops)[0];
                        this.folders = data.folders || {};
                        this.folderOrder = data.folderOrder || [];
                        this.topLevelOrder = data.topLevelOrder || [];
                        this.desktopOrder = data.desktopOrder || Object.keys(data.desktops);
                        this.notes = Array.isArray(data.notes) ? data.notes : [];
                        this.noteFolders = Array.isArray(data.noteFolders) ? data.noteFolders : [];
                        this.noteFolders.forEach(folder => { folder.parentId = null; });
                        this.unfiledNotesCollapsed = !!data.unfiledNotesCollapsed;
                        this.activeNoteFolderId = null;
                        this.activeNoteId = null;
                        this.renderNotes();

                        // 確保當前桌面存在
                        if (!this.desktops[this.currentDesktopId]) {
                            this.currentDesktopId = Object.keys(this.desktops)[0];
                        }

                        this.saveData();
                        this.renderDesktops();
                        this.renderCurrentDesktop();
                        alert('匯入成功！');
                    }
                } else {
                    alert('無效的設定檔案格式！');
                }
            } catch (error) {
                alert('檔案解析失敗：' + error.message);
            }
        };
        reader.readAsText(file);

        // 重置文件輸入
        e.target.value = '';
    }
}

// 初始化應用程式
const windesk = new WinDesk();

// 全局變數供HTML onclick使用
window.windesk = windesk;