/**
 * 数据管理应用主逻辑
 * 包含主题切换、侧边栏管理、搜索功能、视图控制等
 */

class AppState {
    constructor() {
        this.searchTimeout = null;
        this.currentView = 'table';
        this.exportMenuOpen = false;
        this.isMobile = false;
        this.init();
    }

    init() {
        this.setupThemeToggle();
        this.setupSidebarToggle();
        this.setupSearch();
        this.setupKeyboardShortcuts();
        this.setupAccessibility();
        this.setupResponsive();
        this.setupViewControls();
        this.setupExport();
        this.setupPagination();
        this.restoreUserPreferences();
    }

    // 主题切换
    setupThemeToggle() {
        const themeToggle = document.querySelector('.theme-toggle');
        if (themeToggle) {
            themeToggle.addEventListener('click', () => this.toggleTheme());
        }

        // 初始化主题
        const savedTheme = localStorage.getItem('theme') || this.detectSystemTheme();
        this.setTheme(savedTheme);

        // 监听系统主题变化
        if (window.matchMedia) {
            const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
            darkModeQuery.addEventListener('change', (e) => {
                if (!localStorage.getItem('theme')) {
                    this.setTheme(e.matches ? 'dark' : 'light');
                }
            });
        }
    }

    detectSystemTheme() {
        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }

    toggleTheme() {
        const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
        this.setTheme(newTheme);
        localStorage.setItem('theme', newTheme);
    }

    setTheme(theme) {
        document.documentElement.setAttribute('data-theme', theme);
        
        // 更新主题切换按钮文本
        const themeToggle = document.querySelector('.theme-toggle');
        if (themeToggle) {
            themeToggle.setAttribute('aria-label', 
                theme === 'light' ? '切换到暗色主题' : '切换到亮色主题');
        }
    }

    // 侧边栏管理
    setupSidebarToggle() {
        const toggle = document.querySelector('.mobile-menu-toggle');
        const sidebar = document.querySelector('.sidebar');
        const backdrop = document.querySelector('.sidebar-backdrop');

        if (toggle) {
            toggle.addEventListener('click', () => this.toggleSidebar());
        }

        if (backdrop) {
            backdrop.addEventListener('click', () => this.closeSidebar());
        }

        // 响应式处理
        window.addEventListener('resize', () => this.handleResize());
        this.handleResize(); // 初始化
    }

    handleResize() {
        const wasMobile = this.isMobile;
        this.isMobile = window.innerWidth <= 768;

        if (wasMobile !== this.isMobile) {
            if (!this.isMobile) {
                this.closeSidebar();
            }
        }
    }

    toggleSidebar() {
        const sidebar = document.querySelector('.sidebar');
        const toggle = document.querySelector('.mobile-menu-toggle');
        const isOpen = sidebar.classList.contains('open');

        if (isOpen) {
            this.closeSidebar();
        } else {
            this.openSidebar();
        }
    }

    openSidebar() {
        const sidebar = document.querySelector('.sidebar');
        const toggle = document.querySelector('.mobile-menu-toggle');
        const backdrop = document.querySelector('.sidebar-backdrop');
        
        sidebar.classList.add('open');
        if (toggle) toggle.setAttribute('aria-expanded', 'true');
        if (backdrop) backdrop.style.display = 'block';
        document.body.style.overflow = 'hidden';

        // 聚焦到第一个可聚焦元素
        const firstFocusable = sidebar.querySelector('a, button, input');
        if (firstFocusable) {
            setTimeout(() => firstFocusable.focus(), 100);
        }
    }

    closeSidebar() {
        const sidebar = document.querySelector('.sidebar');
        const toggle = document.querySelector('.mobile-menu-toggle');
        const backdrop = document.querySelector('.sidebar-backdrop');
        
        sidebar.classList.remove('open');
        if (toggle) toggle.setAttribute('aria-expanded', 'false');
        if (backdrop) backdrop.style.display = 'none';
        document.body.style.overflow = '';

        // 将焦点返回到菜单按钮
        if (toggle) toggle.focus();
    }

    // 智能搜索
    setupSearch() {
        const searchInput = document.getElementById('searchInput');
        const searchClear = document.querySelector('.search-clear');
        const sidebarSearchInput = document.querySelector('.sidebar-search-input');

        if (searchInput) {
            searchInput.addEventListener('input', (e) => {
                this.handleSearchInput(e.target.value);
                this.updateClearButton(e.target.value);
            });

            searchInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    this.performSearch(e.target.value);
                }
            });
        }

        if (searchClear) {
            searchClear.addEventListener('click', () => this.clearSearch());
        }

        if (sidebarSearchInput) {
            sidebarSearchInput.addEventListener('input', (e) => {
                this.filterTables(e.target.value);
            });
        }
    }

    handleSearchInput(query) {
        clearTimeout(this.searchTimeout);
        this.searchTimeout = setTimeout(() => {
            this.performSearch(query);
        }, 300);
    }

    updateClearButton(value) {
        const searchClear = document.querySelector('.search-clear');
        if (searchClear) {
            searchClear.style.display = value ? 'block' : 'none';
        }
    }

    performSearch(query) {
        const params = new URLSearchParams(window.location.search);
        const table = params.get('table') || this.getCurrentTable();
        
        if (query.trim()) {
            params.set('search', query.trim());
        } else {
            params.delete('search');
        }
        params.set('page', '1');
        
        window.location.href = `/?${params.toString()}`;
    }

    clearSearch() {
        const searchInput = document.getElementById('searchInput');
        if (searchInput) {
            searchInput.value = '';
            this.updateClearButton('');
            this.performSearch('');
        }
    }

    filterTables(query) {
        const navLinks = document.querySelectorAll('.nav-link');
        const searchTerm = query.toLowerCase();

        navLinks.forEach(link => {
            const title = link.querySelector('.nav-title').textContent.toLowerCase();
            const subtitle = link.querySelector('.nav-subtitle').textContent.toLowerCase();
            const description = link.querySelector('.nav-description').textContent.toLowerCase();
            
            const matches = title.includes(searchTerm) || 
                          subtitle.includes(searchTerm) || 
                          description.includes(searchTerm);
            
            link.style.display = matches ? 'flex' : 'none';
            link.parentElement.style.display = matches ? 'block' : 'none';
        });

        // 显示搜索结果提示
        const visibleLinks = Array.from(navLinks).filter(link => 
            link.style.display !== 'none');
        
        if (visibleLinks.length === 0 && query.trim()) {
            this.showNotification('没有找到匹配的表格', 'info');
        }
    }

    // 视图控制
    setupViewControls() {
        const viewButtons = document.querySelectorAll('.view-button');
        viewButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                const mode = e.currentTarget.getAttribute('onclick')
                    .match(/setViewMode\('(\w+)'\)/)[1];
                this.setViewMode(mode);
            });
        });
    }

    setViewMode(mode) {
        this.currentView = mode;
        
        // 更新按钮状态
        document.querySelectorAll('.view-button').forEach(btn => {
            btn.classList.remove('active');
        });
        
        const activeButton = document.querySelector(`[onclick*="setViewMode('${mode}')"]`);
        if (activeButton) {
            activeButton.classList.add('active');
        }

        // 保存用户偏好
        localStorage.setItem('viewMode', mode);
        
        // 切换视图显示
        const contentContainer = document.querySelector('.content-main');
        if (contentContainer) {
            contentContainer.setAttribute('data-view', mode);
        }

        // 切换数据展示方式
        this.switchDataDisplay(mode);
    }

    switchDataDisplay(mode) {
        const tableView = document.querySelector('.data-table-container');
        const cardView = document.querySelector('.data-cards-container');
        
        if (tableView && cardView) {
            if (mode === 'table') {
                tableView.style.display = 'block';
                cardView.style.display = 'none';
            } else {
                tableView.style.display = 'none';
                cardView.style.display = 'grid';
            }
        }
    }

    // 导出功能
    setupExport() {
        const exportButton = document.querySelector('.export-button');
        if (exportButton) {
            exportButton.addEventListener('click', () => this.toggleExportMenu());
        }

        const exportOptions = document.querySelectorAll('.export-option');
        exportOptions.forEach(option => {
            option.addEventListener('click', (e) => {
                const format = e.target.getAttribute('onclick')
                    .match(/exportData\('(\w+)'\)/)[1];
                this.exportData(format);
            });
        });
    }

    toggleExportMenu() {
        const menu = document.querySelector('.export-menu');
        const button = document.querySelector('.export-button');
        
        if (!menu || !button) return;

        if (menu.classList.contains('show')) {
            this.closeExportMenu();
        } else {
            this.openExportMenu();
        }
    }

    openExportMenu() {
        const menu = document.querySelector('.export-menu');
        const button = document.querySelector('.export-button');
        
        if (!menu || !button) return;

        menu.classList.add('show');
        button.setAttribute('aria-expanded', 'true');
        
        // 点击外部关闭
        setTimeout(() => {
            document.addEventListener('click', this.handleExportClickOutside, true);
        }, 0);
    }

    closeExportMenu() {
        const menu = document.querySelector('.export-menu');
        const button = document.querySelector('.export-button');
        
        if (!menu || !button) return;

        menu.classList.remove('show');
        button.setAttribute('aria-expanded', 'false');
        document.removeEventListener('click', this.handleExportClickOutside, true);
    }

    handleExportClickOutside = (e) => {
        const menu = document.querySelector('.export-menu');
        const button = document.querySelector('.export-button');
        
        if (!button.contains(e.target) && !menu.contains(e.target)) {
            this.closeExportMenu();
        }
    }

    exportData(format) {
        const params = new URLSearchParams(window.location.search);
        const table = params.get('table') || this.getCurrentTable();
        
        params.set('format', format);
        
        window.location.href = `/api/export/${table}?${params.toString()}`;
        this.closeExportMenu();
    }

    // 分页控制
    setupPagination() {
        const perPageSelect = document.querySelector('.per-page-select');
        if (perPageSelect) {
            perPageSelect.addEventListener('change', (e) => {
                this.changePerPage(e.target.value);
            });
        }
    }

    changePerPage(perPage) {
        const params = new URLSearchParams(window.location.search);
        params.set('per_page', perPage);
        params.set('page', '1');
        window.location.href = `/?${params.toString()}`;
    }

    // 键盘快捷键
    setupKeyboardShortcuts() {
        document.addEventListener('keydown', (e) => {
            // Ctrl/Cmd + K 聚焦搜索
            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                e.preventDefault();
                const searchInput = document.getElementById('searchInput');
                if (searchInput) {
                    searchInput.focus();
                    searchInput.select();
                }
            }

            // Esc 关闭侧边栏/菜单
            if (e.key === 'Escape') {
                this.closeSidebar();
                this.closeExportMenu();
                
                // 关闭模态框
                const modal = document.getElementById('detailModal');
                if (modal && !modal.classList.contains('hidden')) {
                    this.closeModal();
                }
            }

            // Ctrl/Cmd + , 打开设置
            if ((e.ctrlKey || e.metaKey) && e.key === ',') {
                e.preventDefault();
                this.openSettings();
            }

            // 方向键导航
            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
                this.handleArrowNavigation(e);
            }
        });
    }

    handleArrowNavigation(e) {
        // 添加键盘导航支持
        const activeNav = document.querySelector('.nav-link.active');
        if (activeNav && document.activeElement === activeNav) {
            e.preventDefault();
            // 这里可以添加更复杂的键盘导航逻辑
        }
    }

    // 无障碍支持
    setupAccessibility() {
        // 焦点管理
        document.addEventListener('focusin', (e) => {
            const sidebar = document.querySelector('.sidebar');
            if (!sidebar) return;
            
            const isInSidebar = sidebar.contains(e.target);
            const isMobile = window.innerWidth <= 768;
            
            if (isMobile && !isInSidebar && sidebar.classList.contains('open')) {
                this.closeSidebar();
            }
        });

        // 添加ARIA实时区域
        this.setupAriaLiveRegions();
    }

    setupAriaLiveRegions() {
        // 创建屏幕阅读器通知区域
        const liveRegion = document.createElement('div');
        liveRegion.setAttribute('aria-live', 'polite');
        liveRegion.setAttribute('aria-atomic', 'true');
        liveRegion.className = 'sr-only';
        document.body.appendChild(liveRegion);
    }

    // 响应式处理
    setupResponsive() {
        const handleResize = () => {
            const isMobile = window.innerWidth <= 768;
            
            if (isMobile !== this.isMobile) {
                this.isMobile = isMobile;
                this.handleResponsiveChange(isMobile);
            }
        };

        window.addEventListener('resize', this.debounce(handleResize, 250));
        handleResize(); // 初始化
    }

    handleResponsiveChange(isMobile) {
        if (!isMobile) {
            this.closeSidebar();
        }
        
        // 更新断点属性
        document.documentElement.setAttribute('data-breakpoint', 
            isMobile ? 'mobile' : 'desktop');
    }

    // 模态框控制
    setupModal() {
        const modal = document.getElementById('detailModal');
        if (modal) {
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    this.closeModal();
                }
            });
        }
    }

    showDetail(id) {
        const table = this.getCurrentTable();
        this.showLoading();
        
        fetch(`/api/data/${table}/detail/${id}`)
            .then(response => response.json())
            .then(data => {
                this.hideLoading();
                this.renderDetailModal(data);
            })
            .catch(error => {
                this.hideLoading();
                this.showNotification('加载详情失败', 'error');
                console.error('Error loading detail:', error);
            });
    }

    renderDetailModal(data) {
        const modal = document.getElementById('detailModal');
        const content = document.getElementById('detailContent');
        
        if (!modal || !content) return;

        let html = '';
        for (const [key, value] of Object.entries(data.data || {})) {
            html += `
                <div class="detail-item">
                    <div class="detail-label">${key}</div>
                    <div class="detail-value">${value || ''}</div>
                </div>
            `;
        }
        
        content.innerHTML = html;
        modal.classList.remove('hidden');
        
        // 聚焦到模态框
        const firstFocusable = modal.querySelector('button, [href], [tabindex]:not([tabindex="-1"])');
        if (firstFocusable) {
            firstFocusable.focus();
        }
    }

    closeModal() {
        const modal = document.getElementById('detailModal');
        if (modal) {
            modal.classList.add('hidden');
        }
    }

    // 工具函数
    getCurrentTable() {
        const params = new URLSearchParams(window.location.search);
        return params.get('table') || '';
    }

    showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.setAttribute('role', 'alert');
        notification.setAttribute('aria-live', 'polite');
        notification.textContent = message;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.remove();
        }, 5000);
    }

    showLoading() {
        const loading = document.createElement('div');
        loading.className = 'loading-overlay';
        loading.innerHTML = '<div class="loading-spinner"></div>';
        document.body.appendChild(loading);
    }

    hideLoading() {
        const loading = document.querySelector('.loading-overlay');
        if (loading) {
            loading.remove();
        }
    }

    restoreUserPreferences() {
        // 恢复视图模式
        const savedViewMode = localStorage.getItem('viewMode') || 'table';
        this.setViewMode(savedViewMode);

        // 恢复每页显示数量
        const savedPerPage = localStorage.getItem('perPage');
        if (savedPerPage) {
            const perPageSelect = document.querySelector('.per-page-select');
            if (perPageSelect) {
                perPageSelect.value = savedPerPage;
            }
        }
    }

    openSettings() {
        this.showNotification('设置功能开发中...', 'info');
    }

    debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
}

// 全局函数
window.toggleSidebar = () => app.toggleSidebar();
window.closeSidebar = () => app.closeSidebar();
window.toggleTheme = () => app.toggleTheme();
window.debounceSearch = (query) => app.handleSearchInput(query);
window.performSearch = () => {
    const searchInput = document.getElementById('searchInput');
    if (searchInput) app.performSearch(searchInput.value);
};
window.clearSearch = () => app.clearSearch();
window.filterTables = (query) => app.filterTables(query);
window.setViewMode = (mode) => app.setViewMode(mode);
window.toggleExportMenu = () => app.toggleExportMenu();
window.exportData = (format) => app.exportData(format);
window.changePerPage = (perPage) => app.changePerPage(perPage);
window.showDetail = (id) => app.showDetail(id);
window.closeModal = () => app.closeModal();
window.openSettings = () => app.openSettings();

// 初始化应用
const app = new AppState();

// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', () => {
    console.log('数据管理应用已初始化');
    
    // 添加初始化完成事件
    const initEvent = new CustomEvent('app:initialized');
    document.dispatchEvent(initEvent);
});

// 处理回退按钮
window.addEventListener('popstate', () => {
    // 重新加载页面数据
    location.reload();
});

// 错误处理
window.addEventListener('error', (e) => {
    console.error('应用错误:', e.error);
    app.showNotification('发生错误，请重试', 'error');
});

// 未捕获的Promise错误
window.addEventListener('unhandledrejection', (e) => {
    console.error('未处理的Promise错误:', e.reason);
    app.showNotification('网络错误，请检查连接', 'error');
});