// src/layouts/config/layoutConfig.js
/**
 * 布局配置文件
 * 集中管理所有布局相关的配置常量
 *
 * 优势：
 * - 配置集中，易于维护和调整
 * - 避免魔法数字分散在代码中
 * - 支持主题切换和自定义
 */

/**
 * Z-Index 层级管理
 * 统一管理 z-index，避免层级冲突
 *
 * 层级规则（从低到高）：
 * - 0-99: 页面内部元素（背景、卡片内部层级）
 * - 100-499: 页面级浮动元素（侧边栏、面板）
 * - 500-999: 全局固定元素（工具栏、返回顶部）
 * - 1000-1499: 导航相关（导航栏、状态栏）
 * - 1500-1999: 弹出层（下拉菜单、Popover）
 * - 2000-2999: 模态框（普通 Modal）
 * - 3000-8999: 特殊模态框（图表全屏、预览）
 * - 9000-9999: 全局提示（Toast、通知）
 * - 10000+: 系统级覆盖（第三方组件、客服系统）
 */
export const Z_INDEX = {
    // === 页面内部元素 (0-99) ===
    BACKGROUND: 0,          // 背景层
    CARD_CONTENT: 1,        // 卡片内容
    CARD_OVERLAY: 2,        // 卡片覆盖层

    // === 页面级浮动元素 (100-499) ===
    SIDEBAR: 100,           // 全局侧边栏
    STICKY_HEADER: 200,     // 粘性表头

    // === 全局固定元素 (500-999) ===
    BACK_TO_TOP: 900,       // 返回顶部按钮
    AUTH_MODAL_BG: 999,     // 认证模态框背景

    // === 导航相关 (1000-1499) ===
    NAVBAR: 1000,           // 顶部导航栏
    CONNECTION_STATUS: 1050, // 连接状态栏
    PROFILE_ALERT: 1100,    // 个人资料提示

    // === 弹出层 (1500-1999) ===
    DROPDOWN: 1500,         // 下拉菜单
    POPOVER: 1600,          // Popover 弹出
    TOOLTIP: 1700,          // 工具提示
    CITATION: 1800,         // 引用标记

    // === 模态框 (2000-2999) ===
    MODAL: 2000,            // 普通模态框
    MODAL_OVERLAY: 2001,    // 模态框遮罩
    STOCK_CHART_MODAL: 2500, // 股票图表模态框

    // === 特殊模态框 (3000-8999) ===
    FULLSCREEN: 3000,       // 全屏模式
    IMAGE_PREVIEW: 5000,    // 图片预览

    // === 全局提示 (9000-9999) ===
    NOTIFICATION: 9000,     // 通知容器
    TOAST: 9500,            // Toast 提示
    SEARCH_DROPDOWN: 9800,  // 搜索下拉框
    PERFORMANCE_PANEL: 9900, // 性能面板（开发用）

    // === 系统级覆盖 (10000+) ===
    KLINE_FULLSCREEN: 10000, // K线图全屏
    THIRD_PARTY: 99999,     // 第三方组件
    BYTEDESK: 999999,       // Bytedesk 客服系统
};

/**
 * 页面过渡动画配置
 * 控制页面切换时的动画效果
 */
export const ANIMATION_CONFIG = {
    // 默认配置：淡入淡出 + 轻微上下移动
    default: {
        initial: { opacity: 0, y: 20 },
        animate: { opacity: 1, y: 0 },
        exit: { opacity: 0, y: -20 },
        transition: { duration: 0.2 }
    },

    // 快速配置：更短的动画时间
    fast: {
        initial: { opacity: 0, y: 10 },
        animate: { opacity: 1, y: 0 },
        exit: { opacity: 0, y: -10 },
        transition: { duration: 0.1 }
    },

    // 慢速配置：更长的动画时间，更柔和
    slow: {
        initial: { opacity: 0, y: 30 },
        animate: { opacity: 1, y: 0 },
        exit: { opacity: 0, y: -30 },
        transition: { duration: 0.4 }
    },

    // 无动画：用于禁用动画的场景
    none: {
        initial: { opacity: 1, y: 0 },
        animate: { opacity: 1, y: 0 },
        exit: { opacity: 1, y: 0 },
        transition: { duration: 0 }
    },

    // 滑动配置：从右侧滑入
    slideRight: {
        initial: { opacity: 0, x: 100 },
        animate: { opacity: 1, x: 0 },
        exit: { opacity: 0, x: -100 },
        transition: { duration: 0.3 }
    }
};

/**
 * 返回顶部按钮配置
 */
export const BACK_TO_TOP_CONFIG = {
    // 显示按钮的滚动阈值（px）
    scrollThreshold: 300,

    // 按钮位置
    position: {
        bottom: '80px',
        right: {
            base: '16px',   // 移动端：右边距 16px
            md: '32px'      // 桌面端：右边距 32px
        }
    },

    // 按钮样式
    style: {
        size: 'lg',
        colorScheme: 'blue',
        borderRadius: 'full',
        boxShadow: 'lg'
    },

    // 悬停效果
    hover: {
        transform: 'translateY(-4px)',
        boxShadow: 'xl'
    },

    // z-index
    zIndex: Z_INDEX.BACK_TO_TOP,

    // 过渡时间
    transition: 'all 0.2s'
};

/**
 * 页面加载器配置
 */
export const PAGE_LOADER_CONFIG = {
    defaultMessage: '页面加载中...',
    minDisplayTime: 300,  // 最小显示时间（ms），避免闪烁
};

/**
 * 布局尺寸配置
 */
export const LAYOUT_SIZE = {
    navbarHeight: '60px',  // 导航栏统一高度
    footerHeight: 'auto',
    contentMinHeight: 'calc(100vh - 60px)',  // 100vh - navbar高度
};

/**
 * 响应式断点
 * 与 Chakra UI 断点保持一致
 */
export const BREAKPOINTS = {
    base: '0px',     // 0-479px
    sm: '480px',     // 480-767px
    md: '768px',     // 768-991px
    lg: '992px',     // 992-1279px
    xl: '1280px',    // 1280-1535px
    '2xl': '1536px'  // 1536px+
};

export default {
    Z_INDEX,
    ANIMATION_CONFIG,
    BACK_TO_TOP_CONFIG,
    PAGE_LOADER_CONFIG,
    LAYOUT_SIZE,
    BREAKPOINTS
};