/**
 * Z-Index 层级规范
 * ==================
 * 
 * 本文件定义了项目中所有 z-index 的使用规范，确保层级关系清晰、一致。
 * 
 * 层级划分原则：
 * - 每层之间预留足够的空间（至少 100），方便后续插入新层级
 * - 同层级的元素使用相近的 z-index 值
 * - 避免使用过大的数值（如 99999），保持可读性
 */

export const Z_INDEX = {
  // ==================== 基础层 (0-99) ====================
  // 用于页面背景、基础布局等
  
  /** 最底层 - 背景装饰 */
  BACKGROUND: 0,
  
  /** 基础内容层 - 普通文本、图片等 */
  BASE_CONTENT: 1,
  
  /** 分割线、边框装饰 */
  DIVIDER: 10,
  
  
  // ==================== 组件层 (100-999) ====================
  // 用于常规 UI 组件，如下拉菜单、悬浮提示等
  
  /** TopBar 导航栏 */
  TOP_BAR: 100,
  
  /** 侧边栏容器 */
  SIDEBAR: 100,
  
  /** 下拉菜单 - 预设操作菜单、世界书选择菜单等 */
  DROPDOWN_MENU: 1000,
  
  /** 排序设置面板 */
  SORT_PANEL: 1100,
  
  /** 悬浮提示 Tooltip */
  TOOLTIP: 1200,
  
  /** 聊天消息操作按钮 */
  CHAT_ACTIONS: 1000,
  
  /** 角色卡预览弹窗 */
  CHARACTER_PREVIEW: 1000,
  
  
  // ==================== 弹窗层 (10000-19999) ====================
  // 用于模态对话框、编辑面板等需要覆盖整个页面的元素
  
  /** 对话框遮罩层背景 */
  MODAL_OVERLAY: 10000,
  
  /** TopBar 面板遮罩 */
  MODAL_BACKDROP: 10000,
  
  /** 对话框内容 - API 配置对话框、预设保存对话框等 */
  MODAL_CONTENT: 10100,
  
  /** 世界书编辑面板遮罩层 */
  EDIT_PANEL_OVERLAY: 10200,
  
  /** 世界书编辑面板内容 */
  EDIT_PANEL_CONTENT: 10300,
  
  
  // ==================== 通知层 (20000-29999) ====================
  // 用于全局通知、Toast 提示等
  
  /** Toast 通知容器 */
  TOAST_CONTAINER: 20000,
  
  /** Toast 通知项 */
  TOAST_ITEM: 20100,
  
  
  // ==================== 系统层 (30000+) ====================
  // 用于系统级元素，如加载动画、错误边界等
  
  /** 全局加载动画 */
  LOADING_SPINNER: 30000,
  
  /** 错误边界覆盖层 */
  ERROR_BOUNDARY: 30100,
} as const;

/**
 * 使用示例：
 * 
 * import { Z_INDEX } from '../styles/z-index';
 * 
 * .dropdown-menu {
 *   z-index: ${Z_INDEX.DROPDOWN_MENU};
 * }
 * 
 * .modal-overlay {
 *   z-index: ${Z_INDEX.MODAL_OVERLAY};
 * }
 * 
 * .edit-panel {
 *   z-index: ${Z_INDEX.EDIT_PANEL_CONTENT};
 * }
 */

export default Z_INDEX;
