/**
 * 核心卡片配置对象
 */
export interface CardConfig {
    version: string;        // 配置文件版本，例如 "1.0.0"
    id: string;             // 唯一标识符
    metadata: {
        name: string;         // 卡片名称（内部管理用）
        createdAt: number;    // 创建时间戳
    };

    // 1. 基础内容配置
    content: {
        imageUrl: string;     // 图片资源地址（支持 base64 或 URL）
        imageFit: 'cover' | 'contain' | 'fill';
        imageScale: number;   // 图片内部缩放 (1.0 = 原大)
        imageOffset: { x: number; y: number }; // 图片在容器内的偏移
    };

    // 2. 容器样式配置
    appearance: {
        width: number;        // 卡片宽度
        aspectRatio: number;  // 宽高比 (例如 0.714)
        borderRadius: number; // 圆角大小 (px)
        backgroundColor: string; // 兜底背景色
        border: {
            width: number;
            color: string;
            style: 'solid' | 'double' | 'groove';
        };
        shadow: {
            x: number;
            y: number;
            blur: number;
            spread: number;
            color: string;
            opacity: number;
        };
    };

    // 3. 交互逻辑配置 (Hover-tilt 映射)
    interaction: {
        // 基础交互参数
        tiltMax: number;      // 最大倾斜角度
        perspective: number;  // 透视距离
        scaleOnHover: number; // 悬停时的放大倍数
        speed: number;        // 过渡动画速度
        gyroscope: boolean;   // 是否开启移动端陀螺仪
        
        // Hover-tilt 特定选项
        tiltFactor: number;           // 水平倾斜强度
        tiltFactorY: number;        // 垂直倾斜强度
        scaleFactor: number;         // 缩放系数
        enterDelay: number;          // 进入延迟 (毫秒)
        exitDelay: number;           // 退出延迟 (毫秒)
        
        // vanilla-tilt.js 属性
        reverse: boolean;            // 反转倾斜方向
        startX: number;              // X轴起始倾斜角度
        startY: number;              // Y轴起始倾斜角度
        scale: number;               // 缩放比例
        transition: boolean;         // 是否设置进入/退出过渡
        axis: 'x' | 'y' | 'xy';           // 启用哪个轴（xy表示无限制）
        reset: boolean;              // 退出时是否重置倾斜效果
        resetToStart: boolean;       // 退出重置是否回到起始位置
        easing: string;              // 进入/退出缓动函数
        
        // 眩光效果
        glare: boolean;              // 是否启用眩光效果
        maxGlare: number;            // 最大眩光透明度
        glarePrerender: boolean;     // 是否预先渲染眩光元素
        
        // 事件监听
        mouseEventElement: string;  // 监听鼠标事件的元素选择器
        fullPageListening: boolean;  // 是否在整个文档上监听鼠标事件
        
        // 陀螺仪设置
        gyroscopeMinAngleX: number;  // X轴陀螺仪最小角度
        gyroscopeMaxAngleX: number;  // X轴陀螺仪最大角度
        gyroscopeMinAngleY: number;  // Y轴陀螺仪最小角度
        gyroscopeMaxAngleY: number;  // Y轴陀螺仪最大角度
        gyroscopeSamples: number;    // 陀螺仪采样数量
        
        // 弹簧物理选项
        springOptions: {
            stiffness: number;       // 刚度
            damping: number;         // 阻尼
        };
        tiltSpringOptions: {
            stiffness: number;       // 倾斜动画的刚度
            damping: number;        // 倾斜动画的阻尼
        };
    };
    
    // 4. 视觉效果配置
    visualEffects: {
        holo: {
            type: 'none' | 'rainbow' | 'sparkle' | 'galaxy' | 'glass';
            intensity: number;  // 0-1 强度
            blendMode: string;  // 例如 'color-dodge', 'screen'
            opacity: number;    // 全息层透明度
            colorShift: boolean; // 是否随角度色相旋转
        };
        glare: {
            enabled: boolean;
            opacity: number;
            blendMode: string;
        };
        
        // Hover-tilt 视觉效果
        hoverTiltVisual: {
            shadow: boolean;              // 是否启用动态阴影
            shadowBlur: number;          // 阴影模糊半径
            blendMode: string;          // 晕影效果混合模式
            glareIntensity: number;      // 晕影效果强度
            glareHue: number;           // 晕影色调值 (0-360)
            glareMask: string;          // 晕影遮罩
            glareMaskMode: 'match-source' | 'luminance' | 'alpha' | 'none'; // 遮罩模式
            glareMaskComposite: 'add' | 'subtract' | 'exclude' | 'intersect'; // 遮罩合成
            
            // vanilla-tilt.js 眩光相关
            glareEnable: boolean;         // 启用眩光效果
            glarePosition: string;        // 眩光位置
            glareBorderRadius: string;    // 眩光圆角
            glareOpacity: number;         // 眩光透明度
        };
        overlayTexture?: string; // 可选的纹理贴图（如磨砂、拉丝）
    };
}