app.js

/**
 * Runback - 运动轨迹回放
 * 基于 comparison_player.js 原型重构
 */

// ========================================
// CoordTransform - WGS-84 到 GCJ-02 坐标转换
// 用于修正中国地图（高德、百度等）的坐标偏移
// ========================================
const CoordTransform = {
    // 常量
    PI: Math.PI,
    X_PI: Math.PI * 3000.0 / 180.0,
    A: 6378245.0, // 长半轴
    EE: 0.00669342162296594323, // 偏心率平方

    /**
     * 判断坐标是否在中国境内
     */
    outOfChina(lng, lat) {
        return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
    },

    /**
     * 转换纬度
     */
    transformLat(lng, lat) {
        let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat +
            0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
        ret += (20.0 * Math.sin(6.0 * lng * this.PI) + 20.0 * Math.sin(2.0 * lng * this.PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(lat * this.PI) + 40.0 * Math.sin(lat / 3.0 * this.PI)) * 2.0 / 3.0;
        ret += (160.0 * Math.sin(lat / 12.0 * this.PI) + 320 * Math.sin(lat * this.PI / 30.0)) * 2.0 / 3.0;
        return ret;
    },

    /**
     * 转换经度
     */
    transformLng(lng, lat) {
        let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng +
            0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
        ret += (20.0 * Math.sin(6.0 * lng * this.PI) + 20.0 * Math.sin(2.0 * lng * this.PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(lng * this.PI) + 40.0 * Math.sin(lng / 3.0 * this.PI)) * 2.0 / 3.0;
        ret += (150.0 * Math.sin(lng / 12.0 * this.PI) + 300.0 * Math.sin(lng / 30.0 * this.PI)) * 2.0 / 3.0;
        return ret;
    },

    /**
     * WGS-84 转 GCJ-02 (火星坐标系)
     * @param {number} wgsLng WGS-84 经度
     * @param {number} wgsLat WGS-84 纬度
     * @returns {Object} {lng, lat} GCJ-02 坐标
     */
    wgs84ToGcj02(wgsLng, wgsLat) {
        if (this.outOfChina(wgsLng, wgsLat)) {
            return { lng: wgsLng, lat: wgsLat };
        }

        let dLat = this.transformLat(wgsLng - 105.0, wgsLat - 35.0);
        let dLng = this.transformLng(wgsLng - 105.0, wgsLat - 35.0);
        const radLat = wgsLat / 180.0 * this.PI;
        let magic = Math.sin(radLat);
        magic = 1 - this.EE * magic * magic;
        const sqrtMagic = Math.sqrt(magic);
        dLat = (dLat * 180.0) / ((this.A * (1 - this.EE)) / (magic * sqrtMagic) * this.PI);
        dLng = (dLng * 180.0) / (this.A / sqrtMagic * Math.cos(radLat) * this.PI);

        return {
            lng: wgsLng + dLng,
            lat: wgsLat + dLat
        };
    }
};

// ========================================
// 多用户配置 - 支持最多 4 个用户同时对比
// ========================================
const MAX_FILES = 4;
const USER_STYLES = [
    { color: '#3b82f6', label: '用户 1', avatarBg: '#2563eb', textColor: '#ffffff' }, // 蓝色
    { color: '#ef4444', label: '用户 2', avatarBg: '#dc2626', textColor: '#ffffff' }, // 红色
    { color: '#10b981', label: '用户 3', avatarBg: '#059669', textColor: '#ffffff' }, // 绿色
    { color: '#f59e0b', label: '用户 4', avatarBg: '#d97706', textColor: '#ffffff' }  // 橙色
];

// ========================================
// ElevationCalculator - 统一的累计爬升计算工具
// 确保所有文件格式（FIT/TCX/GPX）使用相同的计算逻辑
// ========================================
const ElevationCalculator = {
    SMOOTHING_WINDOW: 15,       // 滑动窗口大小（增加平滑度）
    MIN_SEGMENT_GAIN: 2.0,      // 最小分段爬升阈值（米，增加以过滤 GPX 噪声）
    ALTITUDE_PRECISION: 0.2,    // 海拔精度（米），与FIT格式一致

    /**
     * 将海拔值四舍五入到统一精度
     * @param {number} altitude 原始海拔值
     * @returns {number} 四舍五入后的海拔值
     */
    roundAltitude(altitude) {
        if (altitude === undefined || altitude === null) return undefined;
        return Math.round(altitude / this.ALTITUDE_PRECISION) * this.ALTITUDE_PRECISION;
    },

    /**
     * 计算累计爬升并添加到每个点
     * @param {Array} points 轨迹点数组，每个点需要有altitude属性
     */
    calculateElevationGain(points) {
        if (!points || points.length === 0) return;

        // 第一步：将所有海拔值四舍五入到统一精度
        const altitudes = points.map(p => this.roundAltitude(p.altitude));

        // 第二步：滑动窗口平滑
        const smoothedAltitudes = [];
        const halfWindow = Math.floor(this.SMOOTHING_WINDOW / 2);

        for (let i = 0; i < points.length; i++) {
            if (altitudes[i] === undefined) {
                smoothedAltitudes[i] = undefined;
                continue;
            }

            const start = Math.max(0, i - halfWindow);
            const end = Math.min(points.length - 1, i + halfWindow);
            let sum = 0, count = 0;

            for (let j = start; j <= end; j++) {
                if (altitudes[j] !== undefined) {
                    sum += altitudes[j];
                    count++;
                }
            }
            smoothedAltitudes[i] = count > 0 ? sum / count : altitudes[i];
        }

        // 第三步：分段累积计算爬升
        let cumulativeGain = 0;
        let tempGain = 0;

        points[0].elevationGain = 0;

        for (let i = 1; i < points.length; i++) {
            if (smoothedAltitudes[i] === undefined || smoothedAltitudes[i - 1] === undefined) {
                points[i].elevationGain = cumulativeGain;
                continue;
            }

            const diff = smoothedAltitudes[i] - smoothedAltitudes[i - 1];

            if (diff > 0) {
                tempGain += diff;
            } else if (diff < 0) {
                if (tempGain >= this.MIN_SEGMENT_GAIN) {
                    cumulativeGain += tempGain;
                }
                tempGain = 0;
            }

            points[i].elevationGain = cumulativeGain + tempGain;
        }
    }
};

/**
 * 生成用户头像 SVG 图标
 * @param {number} userIndex 用户索引 (0-3)
 * @param {number} size 图标尺寸
 * @returns {string} SVG 数据 URL
 */
function generateAvatarIcon(userIndex, size = 32) {
    const style = USER_STYLES[userIndex] || USER_STYLES[0];
    const label = userIndex + 1;
    const svg = `
        <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
            <circle cx="${size / 2}" cy="${size / 2}" r="${size / 2 - 2}" fill="${style.avatarBg}" stroke="white" stroke-width="2"/>
            <text x="${size / 2}" y="${size / 2 + 5}" text-anchor="middle" fill="${style.textColor}" font-size="${size * 0.45}" font-weight="bold" font-family="Inter, sans-serif">${label}</text>
        </svg>
    `;
    return 'data:image/svg+xml,' + encodeURIComponent(svg.trim());
}

// ========================================
// Theme Manager - 主题管理器
// ========================================
class ThemeManager {
    constructor() {
        this.theme = localStorage.getItem('fit-player-theme') || 'light';
        this.toggleBtn = document.getElementById('theme-toggle');
        this.init();
    }

    init() {
        this.applyTheme(this.theme);
        this.toggleBtn.addEventListener('click', () => this.toggle());
    }

    applyTheme(theme) {
        document.documentElement.setAttribute('data-theme', theme);
        const icon = this.toggleBtn.querySelector('i');
        if (theme === 'dark') {
            icon.classList.remove('fa-moon');
            icon.classList.add('fa-sun');
        } else {
            icon.classList.remove('fa-sun');
            icon.classList.add('fa-moon');
        }
        localStorage.setItem('fit-player-theme', theme);
    }

    toggle() {
        this.theme = this.theme === 'light' ? 'dark' : 'light';
        this.applyTheme(this.theme);
    }
}

// ========================================
// FIT Parser - FIT 文件解析器 (原生实现)
// ========================================
class FitParser {
    constructor() {
        // FIT 文件常量
        this.SEMICIRCLES_TO_DEGREES = 180 / Math.pow(2, 31);

        // FIT 消息类型
        this.MESG_NUM = {
            FILE_ID: 0,
            SESSION: 18,
            LAP: 19,
            RECORD: 20,
            EVENT: 21,
            ACTIVITY: 34,
        };

        // 字段单位缩放因子
        this.SCALES = {
            altitude: 5,
            speed: 1000,
            distance: 100000,
        };

        // 字段偏移量
        this.OFFSETS = {
            altitude: 500,
        };

        // 基准时间戳 (1989-12-31 00:00:00 UTC)
        this.FIT_EPOCH = 631065600000;
    }

    async parse(arrayBuffer) {
        try {
            const dataView = new DataView(arrayBuffer);
            const records = [];
            this.sessions = []; // 重置会话数据
            let offset = 0;

            // 解析文件头
            const headerSize = dataView.getUint8(0);
            const protocolVersion = dataView.getUint8(1);
            const profileVersion = dataView.getUint16(2, true);
            const dataSize = dataView.getUint32(4, true);

            // 验证 FIT 标识
            const signature = String.fromCharCode(
                dataView.getUint8(8),
                dataView.getUint8(9),
                dataView.getUint8(10),
                dataView.getUint8(11)
            );

            if (signature !== '.FIT') {
                throw new Error('无效的 FIT 文件格式');
            }

            console.log('FIT Header:', { headerSize, protocolVersion, profileVersion, dataSize, signature });

            offset = headerSize;
            const endOffset = headerSize + dataSize;

            // 存储字段定义
            const definitions = {};

            // 解析数据记录
            while (offset < endOffset && offset < arrayBuffer.byteLength - 2) {
                try {
                    const recordHeader = dataView.getUint8(offset);
                    offset++;

                    // 检查是否是压缩时间戳头 (高位为1)
                    const isCompressedTimestamp = (recordHeader & 0x80) !== 0;

                    if (isCompressedTimestamp) {
                        // 压缩时间戳数据消息
                        const localMessageType = (recordHeader >> 5) & 0x03;
                        const definition = definitions[localMessageType];

                        if (definition) {
                            const record = this.parseDataRecord(dataView, offset, definition);
                            offset = record.newOffset;

                            if (definition.globalMessageNumber === this.MESG_NUM.RECORD) {
                                records.push(record.data);
                            } else if (definition.globalMessageNumber === this.MESG_NUM.SESSION) {
                                if (!this.sessions) this.sessions = [];
                                this.sessions.push(record.data);
                            }
                        }
                        continue;
                    }

                    const isDefinition = (recordHeader & 0x40) !== 0;
                    const hasDeveloperData = (recordHeader & 0x20) !== 0;
                    const localMessageType = recordHeader & 0x0F;

                    if (isDefinition) {
                        // 定义消息
                        offset++; // 保留字节
                        const architecture = dataView.getUint8(offset);
                        offset++;
                        const isLittleEndian = architecture === 0;

                        const globalMessageNumber = dataView.getUint16(offset, isLittleEndian);
                        offset += 2;

                        const numFields = dataView.getUint8(offset);
                        offset++;

                        const fields = [];
                        for (let i = 0; i < numFields; i++) {
                            fields.push({
                                fieldDefNum: dataView.getUint8(offset),
                                size: dataView.getUint8(offset + 1),
                                baseType: dataView.getUint8(offset + 2),
                            });
                            offset += 3;
                        }

                        // 处理开发者数据字段
                        let devFields = [];
                        if (hasDeveloperData) {
                            const numDevFields = dataView.getUint8(offset);
                            offset++;
                            for (let i = 0; i < numDevFields; i++) {
                                devFields.push({
                                    fieldNum: dataView.getUint8(offset),
                                    size: dataView.getUint8(offset + 1),
                                    devDataIndex: dataView.getUint8(offset + 2),
                                });
                                offset += 3;
                            }
                        }

                        definitions[localMessageType] = {
                            globalMessageNumber,
                            isLittleEndian,
                            fields,
                            devFields,
                        };
                    } else {
                        // 普通数据消息
                        const definition = definitions[localMessageType];
                        if (!definition) {
                            console.warn('未找到消息定义:', localMessageType);
                            continue;
                        }

                        const record = this.parseDataRecord(dataView, offset, definition);
                        offset = record.newOffset;

                        if (definition.globalMessageNumber === this.MESG_NUM.RECORD) {
                            records.push(record.data);
                        } else if (definition.globalMessageNumber === this.MESG_NUM.SESSION) {
                            if (!this.sessions) this.sessions = [];
                            this.sessions.push(record.data);
                        }
                    }
                } catch (e) {
                    console.warn('解析记录时出错:', e.message, 'offset:', offset);
                    offset++;
                }
            }

            console.log('Parsed records:', records.length);
            return this.processData({ records, sessions: this.sessions || [] });

        } catch (error) {
            console.error('FIT 解析错误:', error);
            throw error;
        }
    }

    parseDataRecord(dataView, offset, definition) {
        const data = { messageType: definition.globalMessageNumber };
        let newOffset = offset;

        // 解析标准字段
        for (const field of definition.fields) {
            const value = this.readFieldValue(dataView, newOffset, field, definition.isLittleEndian);
            newOffset += field.size;

            // 解析 RECORD 消息中的字段
            if (definition.globalMessageNumber === this.MESG_NUM.RECORD) {
                switch (field.fieldDefNum) {
                    case 253: // timestamp
                        if (value !== null && value !== 0xFFFFFFFF) {
                            data.timestamp = new Date(this.FIT_EPOCH + value * 1000);
                        }
                        break;
                    case 0: // position_lat (sint32)
                        if (value !== null && value !== 0x7FFFFFFF && value !== -0x80000000) {
                            data.position_lat = value * this.SEMICIRCLES_TO_DEGREES;
                        }
                        break;
                    case 1: // position_long (sint32)
                        if (value !== null && value !== 0x7FFFFFFF && value !== -0x80000000) {
                            data.position_long = value * this.SEMICIRCLES_TO_DEGREES;
                        }
                        break;
                    case 2: // altitude (带偏移)
                        if (value !== null && value !== 0xFFFF) {
                            data.altitude = (value / 5) - 500;
                        }
                        break;
                    case 3: // heart_rate
                        if (value !== null && value !== 0xFF) {
                            data.heart_rate = value;
                        }
                        break;
                    case 4: // cadence
                        if (value !== null && value !== 0xFF) {
                            data.cadence = value;
                        }
                        break;
                    case 5: // distance (单位: 1/100 m)
                        if (value !== null && value !== 0xFFFFFFFF) {
                            data.distance = value / 100000; // 转换为 km
                        }
                        break;
                    case 6: // speed (单位: 1/1000 m/s)
                        if (value !== null && value !== 0xFFFF) {
                            data.speed = (value / 1000) * 3.6; // 转换为 km/h
                        }
                        break;
                    case 73: // enhanced_speed
                        if (value !== null && value !== 0xFFFFFFFF) {
                            data.speed = (value / 1000) * 3.6; // 转换为 km/h
                        }
                        break;
                    case 78: // enhanced_altitude
                        if (value !== null && value !== 0xFFFFFFFF) {
                            data.enhanced_altitude = (value / 5) - 500;
                        }
                        break;
                }
            } else if (definition.globalMessageNumber === this.MESG_NUM.SESSION) {
                // 解析 SESSION 消息中的字段
                switch (field.fieldDefNum) {
                    case 22: // total_ascent (uint16)
                        if (value !== null && value !== 0xFFFF) {
                            data.total_ascent = value;
                        }
                        break;
                    case 23: // total_descent (uint16)
                        if (value !== null && value !== 0xFFFF) {
                            data.total_descent = value;
                        }
                        break;
                }
            }
        }

        // 跳过开发者数据字段
        if (definition.devFields) {
            for (const devField of definition.devFields) {
                newOffset += devField.size;
            }
        }

        return { data, newOffset };
    }

    readFieldValue(dataView, offset, field, isLittleEndian) {
        const baseType = field.baseType & 0x1F;

        try {
            // 确保不越界
            if (offset + field.size > dataView.byteLength) {
                return null;
            }

            switch (baseType) {
                case 0: // enum
                    return dataView.getUint8(offset);
                case 1: // sint8
                    return dataView.getInt8(offset);
                case 2: // uint8
                    return dataView.getUint8(offset);
                case 3: // sint16
                    return dataView.getInt16(offset, isLittleEndian);
                case 4: // uint16
                    return dataView.getUint16(offset, isLittleEndian);
                case 5: // sint32
                    return dataView.getInt32(offset, isLittleEndian);
                case 6: // uint32
                    return dataView.getUint32(offset, isLittleEndian);
                case 7: // string
                    // 读取字符串，直到遇到 null 终止符或达到字段大小
                    let str = '';
                    for (let i = 0; i < field.size; i++) {
                        const charCode = dataView.getUint8(offset + i);
                        if (charCode === 0) break; // Null terminator
                        str += String.fromCharCode(charCode);
                    }
                    return str;
                case 8: // float32
                    return dataView.getFloat32(offset, isLittleEndian);
                case 9: // float64
                    return dataView.getFloat64(offset, isLittleEndian);
                case 10: // uint8z
                    return dataView.getUint8(offset);
                case 11: // uint16z
                    return dataView.getUint16(offset, isLittleEndian);
                case 12: // uint32z
                    return dataView.getUint32(offset, isLittleEndian);
                case 13: // byte array
                    // 返回一个 Uint8Array
                    return new Uint8Array(dataView.buffer, offset, field.size);
                case 14: // sint64
                    // 读取为两个32位整数
                    const low = dataView.getUint32(offset, isLittleEndian);
                    const high = dataView.getInt32(offset + 4, isLittleEndian);
                    return isLittleEndian ? low + high * 0x100000000 : high * 0x100000000 + low;
                case 15: // uint64
                case 16: // uint64z
                    // 对于 JavaScript，64位整数可能超出安全整数范围，这里只读取低32位作为近似值
                    // 或者可以实现 BigInt 逻辑，但为了兼容性，暂时只取低位
                    return dataView.getUint32(offset, isLittleEndian);
                default:
                    return null;
            }
        } catch (e) {
            console.warn(`Error reading field value (baseType: ${baseType}, offset: ${offset}, size: ${field.size}):`, e.message);
            return null;
        }
    }

    processData(data) {
        const records = data.records || [];

        // 计算起始时间
        const startTime = records.find(r => r.timestamp)?.timestamp || new Date();

        // 提取有效的 GPS 记录
        const points = records
            .filter(r => r.position_lat !== undefined && r.position_long !== undefined)
            .filter(r => Math.abs(r.position_lat) <= 90 && Math.abs(r.position_long) <= 180) // 过滤无效坐标
            .map((r, index) => {
                // 计算 elapsed_time
                const elapsed_time = r.timestamp
                    ? (r.timestamp.getTime() - startTime.getTime()) / 1000
                    : index;

                // WGS-84 转 GCJ-02 (适配高德地图)
                const gcj02 = CoordTransform.wgs84ToGcj02(r.position_long, r.position_lat);

                return {
                    index,
                    lat: gcj02.lat,
                    lng: gcj02.lng,
                    // 保留原始 WGS-84 坐标用于调试
                    wgs84_lat: r.position_lat,
                    wgs84_lng: r.position_long,
                    timestamp: r.timestamp,
                    elapsed_time,
                    heart_rate: r.heart_rate,
                    speed: r.speed,
                    altitude: r.altitude || r.enhanced_altitude,
                    distance: r.distance,
                    cadence: r.cadence,
                };
            });

        console.log('Valid GPS points:', points.length);
        if (points.length > 0) {
            console.log('First point:', points[0]);
            console.log('Last point:', points[points.length - 1]);
        }

        // 使用统一的累计爬升计算
        ElevationCalculator.calculateElevationGain(points);

        // 如果存在 SESSION 元数据中的 total_ascent，使用它来校准计算值
        // 这是"Metadata First"策略的核心：设备记录的值永远是最准的
        const session = data.sessions && data.sessions.length > 0 ? data.sessions[0] : null;
        if (session && session.total_ascent !== undefined && session.total_ascent > 0) {
            const calculatedTotal = points.length > 0 ? points[points.length - 1].elevationGain : 0;
            const metadataTotal = session.total_ascent;

            console.log(`Elevation Calibration: Metadata=${metadataTotal}m, Calculated=${calculatedTotal.toFixed(1)}m`);

            if (calculatedTotal > 0) {
                const ratio = metadataTotal / calculatedTotal;
                // 校准每个点的累计爬升值
                points.forEach(p => {
                    if (p.elevationGain !== undefined) {
                        p.elevationGain *= ratio;
                    }
                });
            } else {
                // 如果计算值为0但元数据有值（极罕见），强制线性分配？
                // 暂时不做复杂处理，直接设最后一个点
                if (points.length > 0) {
                    points[points.length - 1].elevationGain = metadataTotal;
                }
            }
        }

        // 计算总时长
        const totalSeconds = points.length > 0
            ? Math.max(...points.map(p => p.elapsed_time || 0))
            : 0;

        // 创建按秒索引的点数组
        const indexedPoints = this.createIndexedPoints(points, totalSeconds);

        return {
            points,
            indexedPoints,
            totalSeconds: Math.ceil(totalSeconds),
            startTime: points[0]?.timestamp,
            endTime: points[points.length - 1]?.timestamp,
            summary: {},
        };
    }

    createIndexedPoints(points, totalSeconds) {
        if (points.length === 0) return [];

        const indexed = [];
        let pointIndex = 0;

        for (let second = 0; second <= totalSeconds; second++) {
            // 找到最接近当前秒数的点
            while (pointIndex < points.length - 1 &&
                points[pointIndex + 1].elapsed_time <= second) {
                pointIndex++;
            }
            indexed[second] = points[pointIndex];
        }

        return indexed;
    }
}

// ========================================
// TCX Parser - TCX 文件解析器 (XML 格式)
// ========================================
class TcxParser {
    async parse(arrayBuffer) {
        try {
            const text = new TextDecoder('utf-8').decode(arrayBuffer);
            const parser = new DOMParser();
            const doc = parser.parseFromString(text, 'text/xml');

            // 检查解析错误
            const parseError = doc.querySelector('parsererror');
            if (parseError) {
                throw new Error('无效的 TCX 文件格式');
            }

            // 获取所有 Trackpoint 元素
            const trackpoints = doc.querySelectorAll('Trackpoint');
            if (trackpoints.length === 0) {
                throw new Error('TCX 文件中没有找到轨迹点');
            }

            const points = [];
            let startTime = null;

            trackpoints.forEach((tp, index) => {
                const timeEl = tp.querySelector('Time');
                const posEl = tp.querySelector('Position');
                const hrEl = tp.querySelector('HeartRateBpm Value');
                const altEl = tp.querySelector('AltitudeMeters');
                const distEl = tp.querySelector('DistanceMeters');
                const cadenceEl = tp.querySelector('Cadence') || tp.querySelector('RunCadence');

                // 必须有位置信息
                if (!posEl) return;

                const latEl = posEl.querySelector('LatitudeDegrees');
                const lngEl = posEl.querySelector('LongitudeDegrees');

                if (!latEl || !lngEl) return;

                const lat = parseFloat(latEl.textContent);
                const lng = parseFloat(lngEl.textContent);

                // 验证坐标有效性
                if (isNaN(lat) || isNaN(lng) || Math.abs(lat) > 90 || Math.abs(lng) > 180) return;

                const timestamp = timeEl ? new Date(timeEl.textContent) : null;
                if (!startTime && timestamp) startTime = timestamp;

                const elapsed_time = (startTime && timestamp)
                    ? (timestamp.getTime() - startTime.getTime()) / 1000
                    : index;

                // WGS-84 转 GCJ-02 (适配高德地图)
                const gcj02 = CoordTransform.wgs84ToGcj02(lng, lat);

                // 解析速度（从扩展中获取）
                let speed = null;
                const speedEl = tp.querySelector('Extensions Speed') || tp.querySelector('ns3\\:Speed') || tp.querySelector('Speed');
                if (speedEl) {
                    speed = parseFloat(speedEl.textContent);
                }

                points.push({
                    index: points.length,
                    lat: gcj02.lat,
                    lng: gcj02.lng,
                    wgs84_lat: lat,
                    wgs84_lng: lng,
                    timestamp,
                    elapsed_time,
                    heart_rate: hrEl ? parseInt(hrEl.textContent) : undefined,
                    speed,
                    altitude: altEl ? parseFloat(altEl.textContent) : undefined,
                    distance: distEl ? parseFloat(distEl.textContent) / 1000 : undefined, // 转换为公里
                    cadence: cadenceEl ? parseInt(cadenceEl.textContent) : undefined,
                });
            });

            console.log('TCX - Valid GPS points:', points.length);
            if (points.length > 0) {
                console.log('First point:', points[0]);
                console.log('Last point:', points[points.length - 1]);
            }

            // 使用统一的累计爬升计算
            ElevationCalculator.calculateElevationGain(points);

            // 计算总时长
            const totalSeconds = points.length > 0
                ? Math.max(...points.map(p => p.elapsed_time || 0))
                : 0;

            // 创建按秒索引的点数组
            const indexedPoints = this.createIndexedPoints(points, totalSeconds);

            return {
                points,
                indexedPoints,
                totalSeconds: Math.ceil(totalSeconds),
                startTime: points[0]?.timestamp,
                endTime: points[points.length - 1]?.timestamp,
                summary: {},
            };

        } catch (error) {
            console.error('TCX 解析错误:', error);
            throw error;
        }
    }

    createIndexedPoints(points, totalSeconds) {
        if (points.length === 0) return [];

        const indexed = [];
        let pointIndex = 0;

        for (let second = 0; second <= totalSeconds; second++) {
            while (pointIndex < points.length - 1 &&
                points[pointIndex + 1].elapsed_time <= second) {
                pointIndex++;
            }
            indexed[second] = points[pointIndex];
        }

        return indexed;
    }
}

// ========================================
// GPX Parser - GPX 文件解析器 (XML 格式)
// ========================================
class GpxParser {
    async parse(arrayBuffer) {
        try {
            const text = new TextDecoder('utf-8').decode(arrayBuffer);
            const parser = new DOMParser();
            const doc = parser.parseFromString(text, 'text/xml');

            // 检查解析错误
            const parseError = doc.querySelector('parsererror');
            if (parseError) {
                throw new Error('无效的 GPX 文件格式');
            }

            // 获取所有轨迹点 (trkpt)
            const trkpts = doc.querySelectorAll('trkpt');
            if (trkpts.length === 0) {
                throw new Error('GPX 文件中没有找到轨迹点');
            }

            const points = [];
            let startTime = null;
            let totalDistance = 0;
            let prevPoint = null;

            trkpts.forEach((trkpt, index) => {
                const lat = parseFloat(trkpt.getAttribute('lat'));
                const lng = parseFloat(trkpt.getAttribute('lon'));

                // 验证坐标有效性
                if (isNaN(lat) || isNaN(lng) || Math.abs(lat) > 90 || Math.abs(lng) > 180) return;

                const timeEl = trkpt.querySelector('time');
                const eleEl = trkpt.querySelector('ele');
                const hrEl = trkpt.querySelector('hr') || trkpt.querySelector('gpxtpx\\:hr') || trkpt.querySelector('ns3\\:hr');
                const cadenceEl = trkpt.querySelector('cad') || trkpt.querySelector('gpxtpx\\:cad') || trkpt.querySelector('ns3\\:cad');

                const timestamp = timeEl ? new Date(timeEl.textContent) : null;
                if (!startTime && timestamp) startTime = timestamp;

                const elapsed_time = (startTime && timestamp)
                    ? (timestamp.getTime() - startTime.getTime()) / 1000
                    : index;

                // WGS-84 转 GCJ-02 (适配高德地图)
                const gcj02 = CoordTransform.wgs84ToGcj02(lng, lat);

                // 计算距离（使用 Haversine 公式）
                if (prevPoint) {
                    const dist = this.haversineDistance(prevPoint.wgs84_lat, prevPoint.wgs84_lng, lat, lng);
                    totalDistance += dist;
                }

                // 计算速度（米/秒转公里/小时）
                let speed = null;
                if (prevPoint && timestamp && prevPoint.timestamp) {
                    const timeDiff = (timestamp.getTime() - prevPoint.timestamp.getTime()) / 1000; // 秒
                    if (timeDiff > 0) {
                        const dist = this.haversineDistance(prevPoint.wgs84_lat, prevPoint.wgs84_lng, lat, lng);
                        speed = (dist / timeDiff) * 3.6; // 转换为 km/h
                    }
                }

                const point = {
                    index: points.length,
                    lat: gcj02.lat,
                    lng: gcj02.lng,
                    wgs84_lat: lat,
                    wgs84_lng: lng,
                    timestamp,
                    elapsed_time,
                    heart_rate: hrEl ? parseInt(hrEl.textContent) : undefined,
                    speed,
                    altitude: eleEl ? parseFloat(eleEl.textContent) : undefined,
                    distance: totalDistance / 1000, // 转换为公里
                    cadence: cadenceEl ? parseInt(cadenceEl.textContent) : undefined,
                };

                points.push(point);
                prevPoint = point;
            });

            console.log('GPX - Valid GPS points:', points.length);
            if (points.length > 0) {
                console.log('First point:', points[0]);
                console.log('Last point:', points[points.length - 1]);
            }

            // 使用统一的累计爬升计算
            ElevationCalculator.calculateElevationGain(points);

            // 计算总时长
            const totalSeconds = points.length > 0
                ? Math.max(...points.map(p => p.elapsed_time || 0))
                : 0;

            // 创建按秒索引的点数组
            const indexedPoints = this.createIndexedPoints(points, totalSeconds);

            return {
                points,
                indexedPoints,
                totalSeconds: Math.ceil(totalSeconds),
                startTime: points[0]?.timestamp,
                endTime: points[points.length - 1]?.timestamp,
                summary: {},
            };

        } catch (error) {
            console.error('GPX 解析错误:', error);
            throw error;
        }
    }

    // Haversine 公式计算两点间距离（米）
    haversineDistance(lat1, lon1, lat2, lon2) {
        const R = 6371000; // 地球半径（米）
        const dLat = (lat2 - lat1) * Math.PI / 180;
        const dLon = (lon2 - lon1) * Math.PI / 180;
        const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
            Math.sin(dLon / 2) * Math.sin(dLon / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        return R * c;
    }

    createIndexedPoints(points, totalSeconds) {
        if (points.length === 0) return [];

        const indexed = [];
        let pointIndex = 0;

        for (let second = 0; second <= totalSeconds; second++) {
            while (pointIndex < points.length - 1 &&
                points[pointIndex + 1].elapsed_time <= second) {
                pointIndex++;
            }
            indexed[second] = points[pointIndex];
        }

        return indexed;
    }
}

// ========================================
// KML Parser - KML 文件解析器 (增强版)
// ========================================
class KmlParser {
    async parse(arrayBuffer) {
        try {
            const text = new TextDecoder('utf-8').decode(arrayBuffer);
            const parser = new DOMParser();
            const doc = parser.parseFromString(text, 'text/xml');

            const parseError = doc.querySelector('parsererror');
            if (parseError) {
                throw new Error('无效的 KML 文件格式');
            }

            let points = [];

            // 策略 1: 尝试解析带时间戳的轨迹 (gx:Track 或 Track)
            // 这是最佳情况，包含真实的时间信息
            points = this.parseTrack(doc);

            // 策略 2: 如果没有时间戳轨迹，尝试解析 LineString
            // 这是一个降级方案，我们将生成模拟时间戳以便回放
            if (points.length === 0) {
                points = this.parseLineString(doc);
                if (points.length > 0) {
                    console.warn('KML: 未找到时间戳，已启用 LineString 模拟模式');
                }
            }

            if (points.length === 0) {
                throw new Error('KML 文件中未找到有效的轨迹数据 (Track 或 LineString)');
            }

            console.log('KML - Valid points:', points.length);

            // 使用统一的累计爬升计算
            ElevationCalculator.calculateElevationGain(points);

            // 计算总时长
            const totalSeconds = points.length > 0
                ? Math.max(...points.map(p => p.elapsed_time || 0))
                : 0;

            // 创建索引点
            const indexedPoints = this.createIndexedPoints(points, totalSeconds);

            return {
                points,
                indexedPoints,
                totalSeconds: Math.ceil(totalSeconds),
                startTime: points[0]?.timestamp || new Date(),
                endTime: points[points.length - 1]?.timestamp || new Date(),
                summary: {},
            };

        } catch (error) {
            console.error('KML 解析错误:', error);
            throw error;
        }
    }

    /**
     * 解析 gx:Track 或 Track 元素 (包含 when 和 coord/gx:coord)
     */
    parseTrack(doc) {
        const points = [];
        const tracks = this.getElementsByLocalName(doc, 'Track');

        let startTime = null;
        let totalDistance = 0;
        let prevPoint = null;

        tracks.forEach((track) => {
            const whens = this.getElementsByLocalName(track, 'when');
            // 同时查找 coord (通常空格分隔) 和 gx:coord
            let coords = this.getElementsByLocalName(track, 'coord');
            if (coords.length === 0) {
                // 尝试带前缀的查找，虽然 getElementsByLocalName 应该已经覆盖
                // 但有些结构可能不同，保持现状
            }

            // 确保时间和坐标数量匹配
            const count = Math.min(whens.length, coords.length);

            for (let i = 0; i < count; i++) {
                const timeStr = whens[i].textContent;
                // gx:coord 格式通常是: lon lat alt (空格分隔)
                const coordText = coords[i].textContent.trim();
                const coordParts = coordText.split(/\s+/);

                if (coordParts.length < 2) continue;

                const lng = parseFloat(coordParts[0]);
                const lat = parseFloat(coordParts[1]);
                const alt = coordParts.length > 2 ? parseFloat(coordParts[2]) : undefined;

                if (isNaN(lat) || isNaN(lng)) continue;

                const timestamp = new Date(timeStr);
                if (!startTime) startTime = timestamp;

                // 计算 elapsed_time
                const elapsed_time = (startTime && timestamp)
                    ? (timestamp.getTime() - startTime.getTime()) / 1000
                    : points.length;

                // WGS-84 转 GCJ-02
                const gcj02 = CoordTransform.wgs84ToGcj02(lng, lat);

                // 计算距离
                if (prevPoint) {
                    const dist = this.haversineDistance(prevPoint.wgs84_lat, prevPoint.wgs84_lng, lat, lng);
                    totalDistance += dist;
                }

                // 计算速度
                let speed = null;
                if (prevPoint && timestamp && prevPoint.timestamp) {
                    const timeDiff = (timestamp.getTime() - prevPoint.timestamp.getTime()) / 1000;
                    if (timeDiff > 0) {
                        const dist = this.haversineDistance(prevPoint.wgs84_lat, prevPoint.wgs84_lng, lat, lng);
                        speed = (dist / timeDiff) * 3.6; // km/h
                    }
                }

                const point = {
                    index: points.length,
                    lat: gcj02.lat,
                    lng: gcj02.lng,
                    wgs84_lat: lat,
                    wgs84_lng: lng,
                    timestamp,
                    elapsed_time,
                    speed,
                    altitude: alt,
                    distance: totalDistance / 1000,
                };

                points.push(point);
                prevPoint = point;
            }
        });

        return points;
    }

    /**
     * 解析 LineString (Coordinates 逗号分隔，无时间戳)
     * 生成模拟时间戳
     */
    parseLineString(doc) {
        const points = [];
        const lineStrings = this.getElementsByLocalName(doc, 'LineString');

        const SIMULATED_SPEED_KMH = 10.0; // 模拟速度 10 km/h
        const MPS = SIMULATED_SPEED_KMH / 3.6; // 米/秒

        let totalDistance = 0;
        let prevPoint = null;
        // 使用当前时间作为模拟开始时间
        const startTime = new Date();

        lineStrings.forEach(ls => {
            const coordinatesTags = this.getElementsByLocalName(ls, 'coordinates');

            coordinatesTags.forEach(coordTag => {
                // 格式: lon,lat,alt lon,lat,alt ... (空格或换行分隔元组，逗号分隔值)
                const rawText = coordTag.textContent.trim();
                const tuples = rawText.split(/\s+/);

                tuples.forEach(tuple => {
                    const parts = tuple.split(',');
                    if (parts.length < 2) return;

                    const lng = parseFloat(parts[0]);
                    const lat = parseFloat(parts[1]);
                    const alt = parts.length > 2 ? parseFloat(parts[2]) : undefined;

                    if (isNaN(lat) || isNaN(lng)) return;

                    // WGS-84 转 GCJ-02
                    const gcj02 = CoordTransform.wgs84ToGcj02(lng, lat);

                    // 计算距离
                    let dist = 0;
                    if (prevPoint) {
                        dist = this.haversineDistance(prevPoint.wgs84_lat, prevPoint.wgs84_lng, lat, lng);
                        totalDistance += dist;
                    }

                    // 模拟时间: 距离 / 速度
                    // 累计时间 = 总距离 / 速度
                    const elapsed_time = totalDistance / MPS;
                    const timestamp = new Date(startTime.getTime() + elapsed_time * 1000);

                    const point = {
                        index: points.length,
                        lat: gcj02.lat,
                        lng: gcj02.lng,
                        wgs84_lat: lat,
                        wgs84_lng: lng,
                        timestamp,
                        elapsed_time,
                        speed: SIMULATED_SPEED_KMH, // 恒定速度
                        altitude: alt,
                        distance: totalDistance / 1000,
                    };

                    points.push(point);
                    prevPoint = point;
                });
            });
        });

        return points;
    }

    // 辅助：忽略命名空间获取元素
    getElementsByLocalName(parent, localName) {
        const result = [];
        const elements = parent.getElementsByTagName('*');
        const target = localName.toLowerCase();
        for (let i = 0; i < elements.length; i++) {
            // 兼容 localName (标准) 和 baseName (IE古老属性) 或 nodeName
            const elName = elements[i].localName || elements[i].nodeName.split(':').pop();
            if (elName.toLowerCase() === target) {
                result.push(elements[i]);
            }
        }
        return result;
    }

    haversineDistance(lat1, lon1, lat2, lon2) {
        const R = 6371000;
        const dLat = (lat2 - lat1) * Math.PI / 180;
        const dLon = (lon2 - lon1) * Math.PI / 180;
        const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
            Math.sin(dLon / 2) * Math.sin(dLon / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        return R * c;
    }

    createIndexedPoints(points, totalSeconds) {
        if (points.length === 0) return [];
        const indexed = [];
        let pointIndex = 0;
        for (let second = 0; second <= totalSeconds; second++) {
            while (pointIndex < points.length - 1 &&
                points[pointIndex + 1].elapsed_time <= second) {
                pointIndex++;
            }
            indexed[second] = points[pointIndex];
        }
        return indexed;
    }
}

// ========================================
// Map Renderer - 地图渲染器 (高德地图) - 多用户支持
// ========================================
class MapRenderer {
    constructor(containerId) {
        this.containerId = containerId;
        this.map = null;
        // 多用户支持：存储每个会话的图层元素
        this.sessions = []; // { polyline, startMarker, endMarker, marker, points }
    }

    async init() {
        return new Promise((resolve) => {
            const initMap = () => {
                // 检查高德地图是否加载
                if (typeof AMap === 'undefined') {
                    console.warn('AMap not loaded, map features will be limited');
                    resolve();
                    return;
                }

                this.map = new AMap.Map(this.containerId, {
                    zoom: 14,
                    center: [118.79, 32.06], // 默认南京
                    mapStyle: 'amap://styles/normal',
                    // 截图功能必需参数
                    WebGLParams: { preserveDrawingBuffer: true },
                });

                // 添加地图控件
                AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
                    this.map.addControl(new AMap.Scale());
                });

                resolve();
            };

            // 如果 AMap 已加载，直接初始化
            if (typeof AMap !== 'undefined') {
                initMap();
            } else {
                // 否则等待 AMapLoaded 事件
                window.addEventListener('AMapLoaded', initMap, { once: true });
                // 设置超时（10秒后放弃等待）
                setTimeout(() => {
                    if (typeof AMap === 'undefined') {
                        console.error('AMap API loading timeout');
                        resolve();
                    }
                }, 10000);
            }
        });
    }

    /**
     * 清除所有会话的地图元素
     */
    clearAll() {
        if (!this.map) return;

        this.sessions.forEach(session => {
            if (session.polyline) this.map.remove(session.polyline);
            if (session.startMarker) this.map.remove(session.startMarker);
            if (session.endMarker) this.map.remove(session.endMarker);
            if (session.marker) this.map.remove(session.marker);
        });
        this.sessions = [];
    }

    /**
     * 绘制多个会话的轨迹
     * @param {Array} sessionsData - 会话数据数组 [{ points, fileName, ... }, ...]
     */
    drawTracks(sessionsData) {
        if (!this.map) return;

        // 清除旧数据
        this.clearAll();

        sessionsData.forEach((sessionData, index) => {
            const points = sessionData.points;
            if (!points || points.length === 0) return;

            const style = USER_STYLES[index] || USER_STYLES[0];
            const path = points.map(p => [p.lng, p.lat]);

            // 创建轨迹线
            const polyline = new AMap.Polyline({
                path: path,
                strokeColor: style.color,
                strokeWeight: 4,
                strokeOpacity: 0.8,
                lineJoin: 'round',
                lineCap: 'round',
            });
            this.map.add(polyline);

            // 起点标记（使用用户颜色的小圆点）
            const startMarker = new AMap.Marker({
                position: path[0],
                icon: new AMap.Icon({
                    size: new AMap.Size(16, 16),
                    image: 'data:image/svg+xml,' + encodeURIComponent(`
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                            <circle cx="8" cy="8" r="6" fill="${style.color}" stroke="white" stroke-width="2"/>
                        </svg>
                    `),
                    imageSize: new AMap.Size(16, 16),
                }),
                offset: new AMap.Pixel(-8, -8),
                zIndex: 50 + index,
            });
            this.map.add(startMarker);

            // 终点标记
            const endMarker = new AMap.Marker({
                position: path[path.length - 1],
                icon: new AMap.Icon({
                    size: new AMap.Size(16, 16),
                    image: 'data:image/svg+xml,' + encodeURIComponent(`
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                            <rect x="2" y="2" width="12" height="12" rx="2" fill="${style.color}" stroke="white" stroke-width="2"/>
                        </svg>
                    `),
                    imageSize: new AMap.Size(16, 16),
                }),
                offset: new AMap.Pixel(-8, -8),
                zIndex: 50 + index,
            });
            this.map.add(endMarker);

            // 当前位置标记（使用 HTML 内容，包含头像和数据徽章）- 水滴形状
            const marker = new AMap.Marker({
                position: path[0],
                content: this.createAvatarContent(index, style),
                offset: new AMap.Pixel(-20, -50), // 修正偏移：(-20, -50) 对应 40x52 水滴的尖端指向位置（SVG path 尖端在 y=50）
                zIndex: 100 + index,
            });
            this.map.add(marker);

            // 存储会话信息
            this.sessions.push({
                polyline,
                startMarker,
                endMarker,
                marker,
                points,
            });
        });

        // 适应所有轨迹范围
        this.fitBounds();
    }

    /**
     * 创建头像 HTML 内容（包含数据徽章）- 水滴形状 Pin
     * @param {number} userIndex 用户索引
     * @param {Object} style 用户样式
     * @returns {string} HTML 字符串
     */
    createAvatarContent(userIndex, style) {
        const label = userIndex + 1;
        // 单个徽章包含心率+配速,位置由 data-position 控制（默认下方）
        return `
            <div class="avatar-marker-container" id="avatar-marker-${userIndex}" data-theme-color="${style.color}" data-position="top">
                <div class="stat-badge" style="background-color: ${style.color};">
                    <span class="hr-data"><span class="icon">❤️</span><span class="value hr-value">--</span></span>
                    <span class="separator">·</span>
                    <span class="pace-data"><span class="icon">⚡</span><span class="value pace-value">--</span></span>
                </div>
                <svg class="avatar-svg" xmlns="http://www.w3.org/2000/svg" width="40" height="52" viewBox="0 0 40 52">
                    <defs>
                        <filter id="pin-shadow-${userIndex}" x="-50%" y="-50%" width="200%" height="200%">
                            <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
                            <feOffset dx="0" dy="2" result="offsetblur"/>
                            <feComponentTransfer>
                                <feFuncA type="linear" slope="0.3"/>
                            </feComponentTransfer>
                            <feMerge>
                                <feMergeNode/>
                                <feMergeNode in="SourceGraphic"/>
                            </feMerge>
                        </filter>
                    </defs>
                    <!-- Teardrop/Waterdrop Pin Shape -->
                    <path d="M 20,4 C 11,4 4,11 4,20 C 4,28 12,38 20,50 C 28,38 36,28 36,20 C 36,11 29,4 20,4 Z" 
                          fill="${style.avatarBg}" 
                          stroke="white" 
                          stroke-width="2.5"
                          filter="url(#pin-shadow-${userIndex})"/>
                    <!-- User Label centered in the bulb -->
                    <text x="20" y="24" text-anchor="middle" fill="${style.textColor}" font-size="16" font-weight="bold" font-family="Inter, sans-serif">${label}</text>
                </svg>
            </div>
        `;
    }
    /**
     * 更新多个会话的标记位置
     * @param {Array} pointsArray - 各会话当前点位数组 [point1, point2, ...]
     */
    updateMarkerPositions(pointsArray) {
        if (!this.map) return;

        // 1. 更新位置并收集屏幕坐标
        const markersWithPixels = [];
        pointsArray.forEach((point, index) => {
            const session = this.sessions[index];
            if (!session || !session.marker || !point) return;

            // 使用已转换的 GCJ-02 坐标
            const position = [point.lng, point.lat];
            session.marker.setPosition(position);
            session.marker.show(); // 确保显示

            // 更新徽章数据 (DOM 操作) - 单个组合徽章
            const container = document.getElementById(`avatar-marker-${index}`);
            if (container) {
                const badge = container.querySelector('.stat-badge');
                if (badge) {
                    // 更新心率
                    const hrValue = container.querySelector('.hr-value');
                    const hrData = container.querySelector('.hr-data');
                    if (hrValue && hrData) {
                        if (point.heart_rate && point.heart_rate > 0) {
                            hrValue.textContent = point.heart_rate;
                            hrData.style.display = 'inline-flex';
                        } else {
                            hrData.style.display = 'none';
                        }
                    }

                    // 更新配速
                    const paceValue = container.querySelector('.pace-value');
                    const paceData = container.querySelector('.pace-data');
                    const speedKmh = point.speed || point.enhanced_speed || 0;
                    if (paceValue && paceData) {
                        if (speedKmh > 0) {
                            if (speedKmh < 30) {
                                const pace = 60 / speedKmh;
                                const min = Math.floor(pace);
                                const sec = Math.floor((pace - min) * 60);
                                paceValue.textContent = `${min}'${sec.toString().padStart(2, '0')}"`;
                            } else {
                                paceValue.textContent = `${speedKmh.toFixed(1)}`;
                            }
                            paceData.style.display = 'inline-flex';
                        } else {
                            paceData.style.display = 'none';
                        }
                    }

                    // 更新分隔符显示
                    const separator = container.querySelector('.separator');
                    const hasHr = point.heart_rate && point.heart_rate > 0;
                    const hasPace = speedKmh > 0;
                    if (separator) {
                        separator.style.display = (hasHr && hasPace) ? 'inline' : 'none';
                    }

                    // 显示/隐藏整个徽章
                    badge.style.display = (hasHr || hasPace) ? 'flex' : 'none';
                }
            }

            // 计算屏幕像素坐标用于碰撞检测
            const pixel = this.map.lngLatToContainer(position);
            markersWithPixels.push({
                index: index,
                marker: session.marker,
                pixel: pixel,
                container: container
            });
        });

        // 2. 碰撞检测和垂直堆叠处理 (用户头像保持在轨迹上，数据垂直堆叠)
        const threshold = 40; // 检测阈值
        const visited = new Set();

        markersWithPixels.forEach((item, i) => {
            if (visited.has(i)) return;

            const cluster = [item];
            visited.add(i);

            // 查找所有重叠的标记
            for (let j = i + 1; j < markersWithPixels.length; j++) {
                if (visited.has(j)) continue;

                const other = markersWithPixels[j];
                const dx = item.pixel.x - other.pixel.x;
                const dy = item.pixel.y - other.pixel.y;
                const dist = Math.sqrt(dx * dx + dy * dy);

                if (dist < threshold) {
                    cluster.push(other);
                    visited.add(j);
                }
            }

            // 对重叠的标记组应用堆叠处理:
            // 1. 头像做轻微偏移确保都可见
            // 2. 数据垂直堆叠，用颜色区分用户
            // 3. 根据Y坐标决定数据显示在上方还是下方
            if (cluster.length > 1) {
                // 按 Y 坐标排序 (Y 小的在前 = 屏幕上方)
                cluster.sort((a, b) => a.pixel.y - b.pixel.y);

                const offsetStep = 0; // 水滴形状必须保持精确对齐，不做偏移
                const midIndex = Math.floor(cluster.length / 2);

                // 计算每个方向的局部堆叠计数
                let topCount = 0;
                let bottomCount = 0;

                cluster.forEach((clusterItem, k) => {
                    if (clusterItem.container) {
                        // 水滴形状不偏移位置，保持尖端对齐轨迹
                        const shiftX = k * offsetStep;
                        const shiftY = k * -offsetStep;
                        clusterItem.container.style.transform = `translate(${shiftX}px, ${shiftY}px)`;

                        // 智能定位
                        const isTopHalf = k < midIndex;
                        clusterItem.container.setAttribute('data-position', isTopHalf ? 'top' : 'bottom');

                        // 设置局部堆叠索引（同方向内的索引）
                        clusterItem.container.classList.add('stacked');
                        const localStackIndex = isTopHalf ? topCount++ : bottomCount++;
                        clusterItem.container.style.setProperty('--stack-index', localStackIndex);
                    }
                    // Z-index 控制层叠顺序 (后面的在上面)
                    clusterItem.marker.setzIndex(200 + k);
                });
            } else {
                // 无重叠，恢复默认 (数据显示在下方)
                if (item.container) {
                    item.container.classList.remove('stacked');
                    item.container.style.removeProperty('--stack-index');
                    item.container.style.transform = '';
                    item.container.setAttribute('data-position', 'bottom');
                }
                item.marker.setzIndex(100 + item.index);
            }
        });
    }

    /**
     * 单个会话的兼容方法（向后兼容）
     */
    drawTrack(points) {
        this.drawTracks([{ points }]);
    }

    updateMarkerPosition(point) {
        this.updateMarkerPositions([point]);
    }

    fitBounds() {
        if (!this.map || this.sessions.length === 0) return;
        const polylines = this.sessions.map(s => s.polyline).filter(Boolean);
        if (polylines.length > 0) {
            this.map.setFitView(polylines, false, [50, 50, 50, 50]);
        }
    }

    zoomIn() {
        if (this.map) this.map.zoomIn();
    }

    zoomOut() {
        if (this.map) this.map.zoomOut();
    }
}

// ========================================
// Player - 播放控制器 - 多用户支持
// ========================================
class Player {
    constructor(options = {}) {
        this.currentSecond = 0;
        this.totalSeconds = 0;
        this.playing = false;
        this.speed = 120;
        this.speed = 120;
        this.animationFrameId = null;
        this.lastTime = 0;
        // 多用户支持：存储多个会话的索引点
        this.sessions = []; // [{ indexedPoints, totalSeconds, fileName }, ...]

        this.onPositionChange = options.onPositionChange || (() => { });
        this.onTimeUpdate = options.onTimeUpdate || (() => { });
        this.onPlayStateChange = options.onPlayStateChange || (() => { });

        this.initControls();
    }

    initControls() {
        // 播放/暂停按钮
        this.$btnPlay = document.getElementById('btn-play');
        this.$btnBegin = document.getElementById('btn-begin');
        this.$btnEnd = document.getElementById('btn-end');
        this.$speedSelect = document.getElementById('speed-select');
        this.$timeline = document.getElementById('timeline');
        this.$timelineProgress = document.getElementById('timeline-progress');
        this.$timelineHandle = document.getElementById('timeline-handle');
        this.$currentTime = document.getElementById('current-time');
        this.$totalTime = document.getElementById('total-time');

        console.log('[Player] initControls - Elements found:', {
            btnPlay: !!this.$btnPlay,
            btnBegin: !!this.$btnBegin,
            btnEnd: !!this.$btnEnd,
            speedSelect: !!this.$speedSelect,
            timeline: !!this.$timeline
        });

        // 事件绑定
        if (this.$btnPlay) {
            this.$btnPlay.addEventListener('click', () => {
                console.log('[Player] Play button clicked');
                this.togglePlay();
            });
        }
        if (this.$btnBegin) {
            this.$btnBegin.addEventListener('click', () => this.seekTo(0));
        }
        if (this.$btnEnd) {
            this.$btnEnd.addEventListener('click', () => this.seekTo(this.totalSeconds));
        }
        if (this.$speedSelect) {
            this.$speedSelect.addEventListener('change', (e) => this.setSpeed(parseInt(e.target.value)));
        }

        // 时间线点击
        if (this.$timeline) {
            this.$timeline.addEventListener('click', (e) => {
                const rect = this.$timeline.getBoundingClientRect();
                const percent = (e.clientX - rect.left) / rect.width;
                this.seekTo(Math.floor(percent * this.totalSeconds));
            });
        }

        // 时间线拖拽
        let isDragging = false;
        if (this.$timelineHandle) {
            this.$timelineHandle.addEventListener('mousedown', () => {
                isDragging = true;
                document.body.style.cursor = 'grabbing';
            });
        }

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            const rect = this.$timeline.getBoundingClientRect();
            const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
            this.seekTo(Math.floor(percent * this.totalSeconds));
        });

        document.addEventListener('mouseup', () => {
            if (isDragging) {
                isDragging = false;
                document.body.style.cursor = '';
            }
        });
    }

    /**
     * 设置多个会话数据
     * @param {Array} sessions - 会话数组 [{ indexedPoints, totalSeconds, fileName }, ...]
     * @param {number} globalTotalSeconds - 全局最大时长
     */
    setSessionsData(sessions, globalTotalSeconds) {
        this.sessions = sessions;
        this.totalSeconds = globalTotalSeconds;
        this.currentSecond = 0;
        this.$totalTime.textContent = this.formatTime(globalTotalSeconds);

        console.log('[Player] setSessionsData:', {
            sessionsCount: sessions.length,
            globalTotalSeconds,
            formattedTotal: this.formatTime(globalTotalSeconds)
        });

        this.updateUI();
    }

    /**
     * 向后兼容：单会话数据
     */
    setData(indexedPoints, totalSeconds) {
        this.setSessionsData([{ indexedPoints, totalSeconds }], totalSeconds);
    }

    play() {
        console.log('[Player] play() called', {
            playing: this.playing,
            currentSecond: this.currentSecond,
            totalSeconds: this.totalSeconds
        });

        if (this.playing) return;

        // 如果已经播放完毕，从头开始
        if (this.currentSecond >= this.totalSeconds) {
            this.currentSecond = 0;
        }

        this.playing = true;
        this.onPlayStateChange(true);
        this.$btnPlay.innerHTML = '<i class="fas fa-pause"></i>';

        console.log('[Player] Starting playback loop (RAF)');
        this.lastTime = performance.now();
        this.loop();
    }

    loop() {
        if (!this.playing) return;

        const now = performance.now();
        const deltaTime = (now - this.lastTime) / 1000; // seconds
        this.lastTime = now;

        // 累加时间: 真实流逝时间 * 倍速
        this.currentSecond += deltaTime * this.speed;

        if (this.currentSecond >= this.totalSeconds) {
            this.currentSecond = this.totalSeconds;
            this.updateUI();
            this.notifyPositionChange();
            this.pause();
            return;
        }

        this.updateUI();
        this.notifyPositionChange();

        this.animationFrameId = requestAnimationFrame(() => this.loop());
    }

    pause() {
        console.log('[Player] pause() called');
        if (!this.playing) return;

        this.playing = false;
        this.onPlayStateChange(false);
        if (this.animationFrameId) {
            cancelAnimationFrame(this.animationFrameId);
            this.animationFrameId = null;
        }

        this.$btnPlay.innerHTML = '<i class="fas fa-play"></i>';
    }

    togglePlay() {
        console.log('[Player] togglePlay() called, current state:', this.playing);
        if (this.playing) {
            this.pause();
        } else {
            this.play();
        }
    }

    seekTo(second) {
        this.currentSecond = Math.max(0, Math.min(second, this.totalSeconds));
        this.updateUI();
        this.notifyPositionChange();
    }

    setSpeed(speed) {
        this.speed = speed;
        // 如果正在播放，重置 lastTime 防止速度突变导致的时间跳跃
        if (this.playing) {
            this.lastTime = performance.now();
        }
    }

    updateUI() {
        const percent = this.totalSeconds > 0 ? (this.currentSecond / this.totalSeconds) * 100 : 0;

        this.$timelineProgress.style.width = `${percent}%`;
        this.$timelineHandle.style.left = `${percent}%`;
        this.$currentTime.textContent = this.formatTime(this.currentSecond);

        this.onTimeUpdate(this.currentSecond, this.totalSeconds);
    }

    updatePlayButton() {
        const icon = this.$btnPlay.querySelector('i');
        if (this.playing) {
            icon.classList.remove('fa-play');
            icon.classList.add('fa-pause');
            this.$btnPlay.title = '暂停';
        } else {
            icon.classList.remove('fa-pause');
            icon.classList.add('fa-play');
            this.$btnPlay.title = '播放';
        }
    }

    /**
     * 通知位置变化（多用户版本）
     * 返回每个会话当前时间点的数据
     * 当会话已结束时，返回 null 以表示数据应显示为 0
     */
    notifyPositionChange() {
        // 关键修复：必须取整才能作为数组下标
        const secondIndex = Math.floor(this.currentSecond);

        const pointsArray = this.sessions.map(session => {
            // 如果当前时间超过该会话的时长，返回最后一个点（保持在终点状态）
            if (secondIndex >= session.totalSeconds) {
                return session.indexedPoints[session.totalSeconds] || session.indexedPoints[session.indexedPoints.length - 1];
            }
            return session.indexedPoints[secondIndex] || null;
        });

        this.onPositionChange(pointsArray, this.currentSecond);
    }

    formatTime(seconds) {
        const hrs = Math.floor(seconds / 3600);
        const mins = Math.floor((seconds % 3600) / 60);
        const secs = Math.floor(seconds % 60);
        return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    }

    /**
     * 获取所有会话的当前点
     * 当会话已结束时，返回最后一个点
     */
    getCurrentPoints() {
        return this.sessions.map(session => {
            // 如果当前时间超过该会话的时长，返回最后一个点
            if (this.currentSecond >= session.totalSeconds) {
                return session.indexedPoints[session.totalSeconds] || session.indexedPoints[session.indexedPoints.length - 1];
            }
            return session.indexedPoints[this.currentSecond] || null;
        });
    }

    /**
     * 向后兼容：获取单个点
     */
    getCurrentPoint() {
        const points = this.getCurrentPoints();
        return points[0] || null;
    }
}

// ========================================
// Data Panel - 数据面板（支持展开图表）- 多用户支持
// ========================================
class DataPanel {
    constructor() {
        this.$panel = document.getElementById('data-panel');
        this.$summary = document.getElementById('data-summary');
        this.$chartsContainer = document.getElementById('charts-container');

        // 多用户图表数值容器
        this.$chartPaceValues = document.getElementById('chart-pace-values');
        this.$chartHeartrateValues = document.getElementById('chart-heartrate-values');
        this.$chartAltitudeValues = document.getElementById('chart-altitude-values');

        this.expanded = false;          // 图表区是否展开
        this.chartManager = null;
        this.sessions = [];             // 存储会话信息

        // 点击摘要区域展开/收起图表
        if (this.$summary) {
            this.$summary.style.cursor = 'pointer';
            this.$summary.addEventListener('click', () => this.toggleExpand());
        }

        // 默认展开状态
        this.expanded = true;
        if (this.$panel) this.$panel.classList.add('expanded');
        if (this.$chartsContainer) this.$chartsContainer.classList.remove('collapsed');
    }

    toggleExpand() {
        this.expanded = !this.expanded;
        this.$panel.classList.toggle('expanded', this.expanded);
        this.$chartsContainer.classList.toggle('collapsed', !this.expanded);

        // 首次展开时初始化图表
        if (this.expanded && this.chartManager) {
            this.chartManager.resize();
        }
    }

    setChartManager(chartManager) {
        this.chartManager = chartManager;
    }

    /**
     * 初始化多用户数据摘要区
     * @param {Array} sessions - 会话数组
     */
    initSummaries(sessions) {
        this.sessions = sessions;

        if (!this.$summary) return;

        // 清空现有内容
        this.$summary.innerHTML = '';

        sessions.forEach((session, index) => {
            const style = USER_STYLES[index] || USER_STYLES[0];
            const fileName = session.fileName || `用户 ${index + 1}`;

            // 获取总时间、总距离和累计爬升
            const totalTime = this.formatTime(session.totalSeconds || 0);
            const lastPoint = session.points && session.points.length > 0
                ? session.points[session.points.length - 1]
                : null;
            const totalDistance = lastPoint && lastPoint.distance !== undefined
                ? lastPoint.distance.toFixed(2)
                : '0.00';
            const totalElevationGain = lastPoint && lastPoint.elevationGain !== undefined
                ? Math.round(lastPoint.elevationGain)
                : 0;

            // 创建用户行
            const row = document.createElement('div');
            row.className = 'data-user-row';
            row.dataset.userIndex = index;

            row.innerHTML = `
                <div class="user-avatar" style="background-color: ${style.avatarBg}">
                    ${index + 1}
                </div>
                <div class="user-data">
                    <span class="user-name" title="${fileName}">${this.truncateFileName(fileName)}</span>
                    <div class="user-stats">
                        <span class="stat-item">
                            <span class="stat-value" data-field="time">${totalTime}</span>
                        </span>
                        <span class="stat-item">
                            <span class="stat-value" data-field="distance">${totalDistance}</span>
                            <span class="stat-unit">km</span>
                        </span>
                        <span class="stat-item">
                            <span class="stat-value" data-field="elevation-gain">${totalElevationGain}</span>
                            <span class="stat-unit">m</span>
                        </span>
                    </div>
                </div>
            `;

            this.$summary.appendChild(row);
        });

        // 初始化图表值显示区
        this.initChartValues(sessions);
    }

    /**
     * 初始化图表值显示（多用户）
     */
    initChartValues(sessions) {
        const containers = [
            { el: this.$chartPaceValues, unit: '/km' },
            { el: this.$chartHeartrateValues, unit: 'bpm' },
            { el: this.$chartAltitudeValues, unit: 'm' }
        ];

        containers.forEach(container => {
            if (!container.el) return;
            container.el.innerHTML = '';

            sessions.forEach((session, index) => {
                const style = USER_STYLES[index] || USER_STYLES[0];
                const span = document.createElement('span');
                span.className = 'chart-value';
                span.dataset.userIndex = index;
                span.style.color = style.color;
                span.innerHTML = `<span class="value">0</span><span class="chart-unit">${container.unit}</span>`;
                container.el.appendChild(span);
            });
        });
    }

    /**
     * 更新多用户数据
     * @param {Array} pointsArray - 各用户当前点位数组
     * @param {number} currentSecond - 当前时间（秒）
     */
    updateMultiple(pointsArray, currentSecond) {
        if (!pointsArray || pointsArray.length === 0) return;

        pointsArray.forEach((point, index) => {
            this.updateUserRow(index, point, currentSecond);
            this.updateChartValues(index, point);
        });

        // 更新图表当前位置指示线
        if (this.chartManager) {
            this.chartManager.updateIndicator(currentSecond);
        }
    }

    /**
     * 更新单个用户行
     * 当 point 为 null 时，表示该会话已结束，显示 0
     */
    updateUserRow(index, point, currentSecond) {
        const row = this.$summary?.querySelector(`[data-user-index="${index}"]`);
        if (!row) return;

        const timeEl = row.querySelector('[data-field="time"]');
        const distanceEl = row.querySelector('[data-field="distance"]');
        const elevationGainEl = row.querySelector('[data-field="elevation-gain"]');

        // 如果 point 为 null，表示会话已结束，显示 0
        if (!point) {
            if (timeEl) timeEl.textContent = '00:00:00';
            if (distanceEl) distanceEl.textContent = '0.00';
            if (elevationGainEl) elevationGainEl.textContent = '0';
            return;
        }

        const session = this.sessions[index];

        // 智能显示策略：
        // 1. 如果回到起点 (0秒)，显示总数据以便预览
        // 2. 否则，随播放进度显示当前累计数据
        if (currentSecond === 0 && session) {
            const lastPoint = session.points && session.points.length > 0 ? session.points[session.points.length - 1] : null;

            if (timeEl) timeEl.textContent = this.formatTime(session.totalSeconds || 0);
            if (distanceEl) distanceEl.textContent = lastPoint && lastPoint.distance !== undefined ? lastPoint.distance.toFixed(2) : '0.00';
            if (elevationGainEl) elevationGainEl.textContent = lastPoint && lastPoint.elevationGain !== undefined ? Math.round(lastPoint.elevationGain) : 0;
            return;
        }

        const second = session ? Math.min(currentSecond, session.totalSeconds) : currentSecond;

        if (timeEl) timeEl.textContent = this.formatTime(second);
        if (distanceEl) distanceEl.textContent = point.distance !== undefined ? point.distance.toFixed(2) : '0.00';
        if (elevationGainEl) elevationGainEl.textContent = point.elevationGain !== undefined ? Math.round(point.elevationGain) : 0;
    }

    /**
     * 更新图表值显示
     * 当 point 为 null 时，表示该会话已结束，显示 0
     */
    updateChartValues(index, point) {
        const paceEl = this.$chartPaceValues?.querySelector(`[data-user-index="${index}"] .value`);
        const hrEl = this.$chartHeartrateValues?.querySelector(`[data-user-index="${index}"] .value`);
        const altEl = this.$chartAltitudeValues?.querySelector(`[data-user-index="${index}"] .value`);

        // 如果 point 为 null，表示会话已结束，显示 0
        if (!point) {
            if (paceEl) paceEl.textContent = '0';
            if (hrEl) hrEl.textContent = '0';
            if (altEl) altEl.textContent = '0';
            return;
        }

        // 配速
        if (paceEl) {
            let paceStr = '0';
            if (point.speed !== undefined && point.speed > 0) {
                const pace = 60 / point.speed;
                const paceMin = Math.floor(pace);
                const paceSec = Math.floor((pace - paceMin) * 60);
                paceStr = `${paceMin}'${paceSec.toString().padStart(2, '0')}"`;
            }
            paceEl.textContent = paceStr;
        }

        // 心率
        if (hrEl) {
            const hr = (point.heart_rate !== undefined && point.heart_rate > 0)
                ? Math.round(point.heart_rate) : 0;
            hrEl.textContent = hr;
        }

        // 海拔
        if (altEl) {
            const alt = point.altitude !== undefined ? Math.round(point.altitude) : 0;
            altEl.textContent = alt;
        }
    }

    /**
     * 向后兼容：单用户更新
     */
    update(point, currentSecond) {
        this.updateMultiple([point], currentSecond);
    }

    truncateFileName(name) {
        // 移除文件扩展名
        const baseName = name.replace(/\.(fit|tcx|gpx)$/i, '');
        if (baseName.length > 15) {
            return baseName.substring(0, 12) + '...';
        }
        return baseName;
    }

    formatTime(seconds) {
        const hrs = Math.floor(seconds / 3600);
        const mins = Math.floor((seconds % 3600) / 60);
        const secs = Math.floor(seconds % 60);
        return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    }

    reset() {
        // 清空摘要区
        if (this.$summary) {
            this.$summary.innerHTML = '';
        }

        // 清空图表值
        if (this.$chartPaceValues) this.$chartPaceValues.innerHTML = '';
        if (this.$chartHeartrateValues) this.$chartHeartrateValues.innerHTML = '';
        if (this.$chartAltitudeValues) this.$chartAltitudeValues.innerHTML = '';

        this.sessions = [];

        // 收起面板
        this.expanded = false;
        if (this.$panel) this.$panel.classList.remove('expanded', 'collapsed');
        if (this.$chartsContainer) this.$chartsContainer.classList.add('collapsed');
    }
}

// ========================================
// Chart Manager - 图表管理器 - 多用户支持
// ========================================
class ChartManager {
    constructor() {
        this.charts = {};
        this.totalSeconds = 0;
        this.initialized = false;
        this.sessionsCount = 0;
    }

    /**
     * 初始化多用户图表
     * @param {Array} sessions - 会话数组 [{ points, totalSeconds, ... }, ...]
     * @param {number} globalTotalSeconds - 全局最大时长
     */
    initMultiCharts(sessions, globalTotalSeconds) {
        if (!window.Chart) {
            console.warn('Chart.js not loaded');
            return;
        }

        // 先销毁已有图表
        this.destroy();

        this.totalSeconds = globalTotalSeconds;
        this.sessionsCount = sessions.length;

        // 创建统一的全局时间标签（基于最大时长）
        // 采样200个点用于显示
        const sampleCount = 200;
        const globalLabels = [];
        for (let i = 0; i <= sampleCount; i++) {
            globalLabels.push(Math.round((i / sampleCount) * globalTotalSeconds));
        }

        // 通用图表配置
        const commonOptions = {
            responsive: true,
            maintainAspectRatio: false,
            animation: { duration: 0 },
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: { display: false },
                tooltip: { enabled: false }
            },
            scales: {
                x: {
                    display: false,
                    grid: { display: false }
                },
                y: {
                    display: false,
                    grid: { display: false }
                }
            },
            elements: {
                point: { radius: 0 },
                line: {
                    tension: 0.4,
                    borderWidth: 2,
                    spanGaps: false  // 不连接 null 值之间的间隙
                }
            }
        };

        // 为每类图表准备多用户数据集
        const paceDatasets = [];
        const heartrateDatasets = [];
        const altitudeDatasets = [];

        // 判断是否为单用户模式（使用渐变填充效果）
        const isSingleUser = sessions.length === 1;

        // 单用户模式的渐变颜色配置（与原设计一致）
        const chartColors = {
            pace: {
                border: '#34d399',
                fill: 'rgba(52, 211, 153, 0.3)',
                gradient: ['rgba(52, 211, 153, 0.5)', 'rgba(52, 211, 153, 0.05)']
            },
            heartrate: {
                border: '#f472b6',
                fill: 'rgba(244, 114, 182, 0.3)',
                gradient: ['rgba(244, 114, 182, 0.5)', 'rgba(244, 114, 182, 0.05)']
            },
            altitude: {
                border: '#60a5fa',
                fill: 'rgba(96, 165, 250, 0.3)',
                gradient: ['rgba(96, 165, 250, 0.5)', 'rgba(96, 165, 250, 0.05)']
            }
        };

        sessions.forEach((session, index) => {
            const points = session.points;
            if (!points || points.length === 0) return;

            const style = USER_STYLES[index] || USER_STYLES[0];
            const sessionTotalSeconds = session.totalSeconds;

            // 为该用户创建对齐到全局时间轴的数据点
            // 超过用户自身时长的部分填充 null
            const paceData = [];
            const heartrateData = [];
            const altitudeData = [];

            globalLabels.forEach(globalSecond => {
                if (globalSecond > sessionTotalSeconds) {
                    // 超过该用户的时长，填充 null
                    paceData.push(null);
                    heartrateData.push(null);
                    altitudeData.push(null);
                } else {
                    // 找到该时间点对应的数据
                    // 使用线性插值或最近点
                    const point = this.findPointAtTime(points, globalSecond);
                    if (point) {
                        paceData.push(point.speed || 0);
                        heartrateData.push(point.heart_rate || 0);
                        altitudeData.push(point.altitude || 0);
                    } else {
                        paceData.push(null);
                        heartrateData.push(null);
                        altitudeData.push(null);
                    }
                }
            });

            // 配速数据
            paceDatasets.push({
                label: style.label,
                data: paceData,
                borderColor: isSingleUser ? chartColors.pace.border : style.color,
                backgroundColor: isSingleUser ? chartColors.pace.fill : 'transparent',
                fill: isSingleUser ? 'origin' : false,
                pointRadius: 0,
                borderWidth: 2,
                spanGaps: false,
            });

            // 心率数据
            heartrateDatasets.push({
                label: style.label,
                data: heartrateData,
                borderColor: isSingleUser ? chartColors.heartrate.border : style.color,
                backgroundColor: isSingleUser ? chartColors.heartrate.fill : 'transparent',
                fill: isSingleUser ? 'origin' : false,
                pointRadius: 0,
                borderWidth: 2,
                spanGaps: false,
            });

            // 海拔数据
            altitudeDatasets.push({
                label: style.label,
                data: altitudeData,
                borderColor: isSingleUser ? chartColors.altitude.border : style.color,
                backgroundColor: isSingleUser ? chartColors.altitude.fill : 'transparent',
                fill: isSingleUser ? 'origin' : false,
                pointRadius: 0,
                borderWidth: 2,
                spanGaps: false,
            });
        });

        // 创建图表
        this.createMultiChart('pace-chart', globalLabels, paceDatasets, commonOptions);
        this.createMultiChart('heartrate-chart', globalLabels, heartrateDatasets, commonOptions);
        this.createMultiChart('altitude-chart', globalLabels, altitudeDatasets, commonOptions);

        this.initialized = true;
        console.log('Multi-user charts initialized with', sessions.length, 'sessions, globalTotalSeconds:', globalTotalSeconds);
    }

    /**
     * 根据时间查找最近的数据点
     * @param {Array} points - 数据点数组
     * @param {number} targetSecond - 目标时间（秒）
     * @returns {Object|null} - 找到的数据点
     */
    findPointAtTime(points, targetSecond) {
        if (!points || points.length === 0) return null;

        // 二分查找最接近的点
        let left = 0;
        let right = points.length - 1;

        while (left < right) {
            const mid = Math.floor((left + right) / 2);
            if (points[mid].elapsed_time < targetSecond) {
                left = mid + 1;
            } else {
                right = mid;
            }
        }

        // 检查左边的点是否更接近
        if (left > 0) {
            const leftDiff = Math.abs(points[left - 1].elapsed_time - targetSecond);
            const rightDiff = Math.abs(points[left].elapsed_time - targetSecond);
            if (leftDiff < rightDiff) {
                return points[left - 1];
            }
        }

        return points[left];
    }

    /**
     * 向后兼容：单会话图表
     */
    initCharts(points, totalSeconds) {
        this.initMultiCharts([{ points, totalSeconds }], totalSeconds);
    }

    createMultiChart(canvasId, labels, datasets, options) {
        const canvas = document.getElementById(canvasId);
        if (!canvas) return;

        // 销毁已存在的图表
        if (this.charts[canvasId]) {
            this.charts[canvasId].destroy();
        }

        const ctx = canvas.getContext('2d');

        this.charts[canvasId] = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: datasets
            },
            options: options,
            plugins: [{
                id: 'verticalIndicator',
                afterDraw: (chart) => {
                    if (chart.indicatorX !== undefined && chart.indicatorIndex !== undefined) {
                        const ctx = chart.ctx;
                        const chartArea = chart.chartArea;

                        // 获取主题颜色
                        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
                        const lineColor = isDark ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.6)';

                        ctx.save();

                        // 绘制垂直指示线
                        ctx.beginPath();
                        ctx.moveTo(chart.indicatorX, chartArea.top);
                        ctx.lineTo(chart.indicatorX, chartArea.bottom);
                        ctx.strokeStyle = lineColor;
                        ctx.lineWidth = 2;
                        ctx.stroke();

                        // 为每个数据集绘制高亮圆点
                        chart.data.datasets.forEach((dataset, datasetIndex) => {
                            // 检查该位置的数据是否为 null（会话已结束）
                            const dataValue = dataset.data[chart.indicatorIndex];
                            if (dataValue === null || dataValue === undefined) {
                                // 会话已结束，不绘制圆点
                                return;
                            }

                            const meta = chart.getDatasetMeta(datasetIndex);
                            if (meta.data[chart.indicatorIndex]) {
                                const point = meta.data[chart.indicatorIndex];
                                ctx.beginPath();
                                ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
                                ctx.fillStyle = dataset.borderColor;
                                ctx.fill();
                                ctx.strokeStyle = 'white';
                                ctx.lineWidth = 2;
                                ctx.stroke();
                            }
                        });

                        ctx.restore();
                    }
                }
            }]
        });
    }

    updateIndicator(currentSecond) {
        if (!this.initialized || this.totalSeconds === 0) return;

        // 使用总时间百分比（与播放进度条一致）
        const percent = Math.max(0, Math.min(1, currentSecond / this.totalSeconds));

        Object.values(this.charts).forEach(chart => {
            const chartArea = chart.chartArea;
            const dataLength = chart.data.labels.length;

            if (chartArea && dataLength > 0) {
                // 直接使用时间百分比计算 X 坐标位置
                chart.indicatorX = chartArea.left + (chartArea.right - chartArea.left) * percent;
                // 根据百分比计算对应的数据点索引
                chart.indicatorIndex = Math.min(Math.floor(percent * dataLength), dataLength - 1);
                chart.update('none');
            }
        });
    }

    resize() {
        Object.values(this.charts).forEach(chart => {
            chart.resize();
        });
    }

    destroy() {
        Object.values(this.charts).forEach(chart => {
            chart.destroy();
        });
        this.charts = {};
        this.initialized = false;
    }
}

// ========================================
// Video Exporter - 视频导出器
// 使用 @amap/screenshot 截图 + Canvas 合成 + MediaRecorder
// ========================================
// ========================================
// Video Exporter - 视频导出器
// 使用 Canvas 组合 + MediaRecorder (高性能/MP4)
// ========================================
class VideoExporter {
    constructor(options = {}) {
        this.mapRenderer = options.mapRenderer || null;
        this.chartManager = options.chartManager || null;
        this.player = options.player || null;

        // 会话数据 (用于手动绘制 Avatar)
        this.sessions = [];

        this.compositeCanvas = null;
        this.ctx = null;
        this.mediaRecorder = null;
        this.recordedChunks = [];
        this.isRecording = false;
        this.animationFrameId = null;

        // 输出规格
        this.outputWidth = 1920;  // 1080p
        this.outputHeight = 1080;
        this.bitRate = 3500000;   // 3.5 Mbps - 提高到 3.5M 以保证 60FPS 质量

        this.onRecordingStart = options.onRecordingStart || (() => { });
        this.onRecordingStop = options.onRecordingStop || (() => { });
        this.onError = options.onError || ((err) => console.error('[VideoExporter] Error:', err));

        // 菜单元素 (Removed)
        // this.$btnExport = document.getElementById('btn-export-mp4'); // Removed

        this.initControls();
    }

    initControls() {
        // 录制按钮点击
        this.$btnRecord = document.getElementById('btn-record');
        if (this.$btnRecord) {
            this.$btnRecord.addEventListener('click', () => {
                if (this.isRecording) {
                    // 如果正在录制，点击则是停止
                    this.stop();
                } else {
                    // 开始录制
                    this.start();
                }
            });
        }
    }

    updateSessions(sessions) {
        this.sessions = sessions || [];
    }

    /**
     * 查找地图 Canvas
     */
    findMapCanvas() {
        if (!this.mapRenderer || !this.mapRenderer.map) return null;
        const container = this.mapRenderer.map.getContainer();
        // 尝试获取地图底层的 Canvas (通常是第一个 Canvas)
        const canvas = container.querySelector('canvas.amap-layer') || container.querySelector('canvas');
        return canvas;
    }

    async start() {
        if (this.isRecording) return;

        // 1. 检查地图 Canvas
        const mapCanvas = this.findMapCanvas();
        if (!mapCanvas) {
            this.onError(new Error('Cannot find Map Canvas for recording'));
            alert('无法找到地图 Canvas，录制失败。请确保地图已完全加载。');
            return;
        }

        try {
            console.log('[VideoExporter] Starting high-performance video export...');

            // 2. 创建合成 Canvas
            this.compositeCanvas = document.createElement('canvas');
            this.compositeCanvas.width = this.outputWidth;
            this.compositeCanvas.height = this.outputHeight;
            this.ctx = this.compositeCanvas.getContext('2d', { alpha: false }); // 优化性能

            // 3. 获取 Canvas 流 (默认为 25FPS)
            const stream = this.compositeCanvas.captureStream(25);

            // 4. 选择最佳 MIME 类型 (优先 MP4)
            let mimeType = 'video/webm;codecs=vp9';
            if (MediaRecorder.isTypeSupported('video/mp4;codecs=avc1.42E01E,mp4a.40.2')) {
                mimeType = 'video/mp4;codecs=avc1.42E01E,mp4a.40.2';
            } else if (MediaRecorder.isTypeSupported('video/mp4')) {
                mimeType = 'video/mp4';
            }

            console.log('[VideoExporter] Using MIME type:', mimeType);

            this.recordedChunks = [];
            this.mediaRecorder = new MediaRecorder(stream, {
                mimeType: mimeType,
                videoBitsPerSecond: this.bitRate,
            });

            this.mediaRecorder.ondataavailable = (event) => {
                if (event.data.size > 0) {
                    this.recordedChunks.push(event.data);
                }
            };

            this.mediaRecorder.onstop = () => {
                this.exportVideo(mimeType);
            };

            // 5. 设置播放速度并开始
            if (this.player) {
                this.originalSpeed = this.player.speed; // 保存原始速度
                this.player.seekTo(0);
                this.player.play();

                // 设置为 240x 倍速录制
                setTimeout(() => {
                    this.player.setSpeed(240);
                    // 更新 UI 为了直观（可选）
                    const speedSelect = document.getElementById('speed-select');
                    if (speedSelect) speedSelect.value = '240';
                }, 100);
            }

            // 6. 启动录制
            this.mediaRecorder.start();
            this.isRecording = true;

            // UI update handled by toggleControls(false) below

            // 禁用播放控制，防止干扰
            this.toggleControls(false);

            console.log('[VideoExporter] Recording started');
            this.onRecordingStart();

            // 7. 开始帧循环 (使用 requestAnimationFrame 实现流畅录制)
            this.lastTime = Date.now();
            this.captureLoop(mapCanvas);

        } catch (error) {
            console.error('[VideoExporter] Failed to start:', error);
            this.onError(error);
            this.resetUI();
        }
    }

    captureLoop(mapCanvas) {
        if (!this.isRecording) return;

        try {
            this.renderFrame(mapCanvas);
        } catch (err) {
            console.warn('[VideoExporter] renderFrame error:', err);
        }

        this.animationFrameId = requestAnimationFrame(() => this.captureLoop(mapCanvas));
    }

    renderFrame(mapCanvas) {
        if (!this.ctx) return;

        // 1. 绘制黑色背景
        this.ctx.fillStyle = '#1a1a2e';
        this.ctx.fillRect(0, 0, this.outputWidth, this.outputHeight);

        // 2. 绘制地图 Canvas (直接从 DOM Canvas 复制，极快)
        // 计算保持比例的尺寸
        const mapAspect = mapCanvas.width / mapCanvas.height;
        const canvasAspect = this.outputWidth / this.outputHeight;
        let drawWidth, drawHeight, drawX, drawY;

        if (mapAspect > canvasAspect) {
            drawWidth = this.outputWidth;
            drawHeight = this.outputWidth / mapAspect;
            drawX = 0;
            drawY = (this.outputHeight - drawHeight) / 2;
        } else {
            drawHeight = this.outputHeight;
            drawWidth = this.outputHeight * mapAspect;
            drawX = (this.outputWidth - drawWidth) / 2;
            drawY = 0;
        }

        // 绘制地图底图
        this.ctx.drawImage(mapCanvas, 0, 0, mapCanvas.width, mapCanvas.height, drawX, drawY, drawWidth, drawHeight);

        // 3. 手动绘制 Avatar (因为 DOM 元素无法被 Canvas 捕获)
        this.drawAvatarOverlay(drawX, drawY, drawWidth, mapCanvas.width);

        // 4. 绘制图表叠加层
        if (this.chartManager) {
            this.drawChartsOverlay(drawX, drawY, drawWidth, drawHeight);
        }
    }

    drawAvatarOverlay(mapX, mapY, mapDrawWidth, mapSourceWidth) {
        if (!this.player || !this.mapRenderer || !this.mapRenderer.map) return;

        const currentSecond = this.player.currentSecond;
        const dpr = window.devicePixelRatio || 1;
        // 计算缩放比例
        const scale = mapDrawWidth / mapSourceWidth;

        // 1. 收集所有需要绘制的头像信息
        const avatarsToDraw = [];
        this.sessions.forEach((session, index) => {
            const point = this.findPointAtTime(session.points, currentSecond);
            if (point) {
                const pixel = this.mapRenderer.map.lngLatToContainer([point.lng, point.lat]);

                // 转换为 Canvas 坐标
                const x = mapX + (pixel.x * dpr) * scale;
                const y = mapY + (pixel.y * dpr) * scale;

                // 收集心率和配速数据
                let hrText = null;
                let speedText = null;

                if (point.heart_rate && point.heart_rate > 0) {
                    hrText = point.heart_rate.toString();
                }

                const speedKmh = point.speed || point.enhanced_speed || 0;
                if (speedKmh > 0) {
                    if (speedKmh < 30) {
                        const pace = 60 / speedKmh;
                        const min = Math.floor(pace);
                        const sec = Math.floor((pace - min) * 60);
                        speedText = `${min}'${sec.toString().padStart(2, '0')}"`;
                    } else {
                        speedText = `${speedKmh.toFixed(1)}`;
                    }
                }

                avatarsToDraw.push({ index, x, y, hrText, speedText });
            }
        });

        // 2. 碰撞检测和偏移处理 (与 MapRenderer 保持一致 - Fan-out)
        const threshold = 50 * scale * dpr;
        const visited = new Set();

        avatarsToDraw.forEach((item, i) => {
            if (visited.has(i)) return;

            const cluster = [item];
            visited.add(i);

            for (let j = i + 1; j < avatarsToDraw.length; j++) {
                if (visited.has(j)) continue;

                const other = avatarsToDraw[j];
                const dx = item.x - other.x;
                const dy = item.y - other.y;
                const dist = Math.sqrt(dx * dx + dy * dy);

                if (dist < threshold) {
                    cluster.push(other);
                    visited.add(j);
                }
            }

            if (cluster.length > 1) {
                // 堆叠处理：头像轻微偏移 + 数据垂直堆叠
                cluster.sort((a, b) => a.index - b.index);

                const offsetStep = 8 * scale * dpr; // 每个用户头像偏移量

                cluster.forEach((clusterItem, k) => {
                    clusterItem.offsetX = k * offsetStep;
                    clusterItem.offsetY = k * -offsetStep;
                    clusterItem.stackIndex = k; // 用于徽章垂直堆叠
                });
            } else {
                item.offsetX = 0;
                item.offsetY = 0;
                item.stackIndex = 0;
            }
        });

        // 3. 绘制头像和徽章
        // 首先按 Y 排序，然后决定每个用户的徽章位置
        avatarsToDraw.sort((a, b) => a.y - b.y);
        const midIndex = Math.floor(avatarsToDraw.length / 2);

        avatarsToDraw.forEach((item, idx) => {
            const x = item.x + (item.offsetX || 0);
            const y = item.y + (item.offsetY || 0);
            const style = USER_STYLES[item.index] || USER_STYLES[0];
            const scaledDpr = scale * dpr;

            // 绘制 Avatar
            this.drawAvatar(x, y, item.index, scaledDpr);

            // 绘制组合徽章 (心率 + 配速)
            const hasHr = item.hrText && item.hrText !== '--';
            const hasPace = item.speedText && item.speedText !== '--';
            if (!hasHr && !hasPace) return;

            // 构建徽章文本
            let badgeText = '';
            if (hasHr && hasPace) {
                badgeText = `❤️ ${item.hrText} · ⚡ ${item.speedText}`;
            } else if (hasHr) {
                badgeText = `❤️ ${item.hrText}`;
            } else {
                badgeText = `⚡ ${item.speedText}`;
            }

            const fontSize = 11 * scaledDpr;
            this.ctx.font = `600 ${fontSize}px Inter, sans-serif`;
            const paddingX = 10 * scaledDpr;
            const paddingY = 3 * scaledDpr;

            const textWidth = this.ctx.measureText(badgeText).width;
            const badgeWidth = textWidth + paddingX * 2;
            const badgeHeight = fontSize * 1.3 + paddingY * 2;

            const badgeX = x - badgeWidth / 2;
            const avatarRadius = 18 * scaledDpr;
            const gap = 2 * scaledDpr;

            // 智能定位：上半部分用户数据显示在上方，下半部分显示在下方
            const isTopHalf = idx < midIndex;

            // 计算同方向内的堆叠索引（不是全局索引）
            // 上方组: idx 0,1,2... → 堆叠索引 0,1,2...
            // 下方组: idx mid, mid+1... → 堆叠索引 0,1,2...
            const localStackIndex = isTopHalf ? idx : (idx - midIndex);
            const stackOffset = localStackIndex * 22 * scaledDpr;

            let badgeY;
            if (isTopHalf) {
                badgeY = y - avatarRadius - gap - badgeHeight - stackOffset;
            } else {
                badgeY = y + avatarRadius + gap + stackOffset;
            }

            // 绘制背景 (使用用户主题色，75% 透明度)
            this.ctx.beginPath();
            const borderRadius = 14 * scaledDpr;
            if (this.ctx.roundRect) {
                this.ctx.roundRect(badgeX, badgeY, badgeWidth, badgeHeight, borderRadius);
            } else {
                this.ctx.rect(badgeX, badgeY, badgeWidth, badgeHeight);
            }
            this.ctx.fillStyle = style.color;
            this.ctx.globalAlpha = 0.75;
            this.ctx.fill();
            this.ctx.globalAlpha = 1.0;

            // 绘制文字 (白色)
            this.ctx.fillStyle = '#ffffff';
            this.ctx.textAlign = 'left';
            this.ctx.textBaseline = 'middle';
            this.ctx.fillText(badgeText, badgeX + paddingX, badgeY + badgeHeight / 2);
        });
    }

    drawAvatar(x, y, index, scale) {
        const style = USER_STYLES[index] || USER_STYLES[0];
        const label = index + 1;
        const baseSize = 36; // 基础尺寸
        const radius = (baseSize / 2) * scale; // 缩放后的半径

        // 绘制背景圆
        this.ctx.beginPath();
        this.ctx.arc(x, y, radius, 0, Math.PI * 2);
        this.ctx.fillStyle = style.avatarBg;
        this.ctx.fill();

        // 绘制白边
        this.ctx.strokeStyle = '#ffffff';
        this.ctx.lineWidth = 2 * scale;
        this.ctx.stroke();

        // 绘制数字
        this.ctx.fillStyle = style.textColor;
        this.ctx.textAlign = 'center';
        this.ctx.textBaseline = 'middle';
        // 字体大小调整
        this.ctx.font = `bold ${baseSize * 0.45 * scale}px Inter, sans-serif`;
        this.ctx.fillText(label.toString(), x, y + (2 * scale));
    }

    // 简单的二分查找
    findPointAtTime(points, targetSecond) {
        if (!points || points.length === 0) return null;
        let left = 0;
        let right = points.length - 1;
        while (left < right) {
            const mid = Math.floor((left + right) / 2);
            if (points[mid].elapsed_time < targetSecond) {
                left = mid + 1;
            } else {
                right = mid;
            }
        }
        return points[left];
    }

    drawChartsOverlay(mapX, mapY, mapWidth, mapHeight) {
        // ... (与之前相同，直接绘制 DOM canvas) ...
        const chartCanvases = document.querySelectorAll('.chart-box canvas');
        if (chartCanvases.length === 0) return;

        const chartHeight = 120;
        const chartY = this.outputHeight - chartHeight - 40; // 稍微抬高一点
        const chartAreaWidth = this.outputWidth - 80;

        // 半透明背景
        this.ctx.fillStyle = 'rgba(26, 26, 46, 0.8)';
        this.ctx.fillRect(40, chartY, chartAreaWidth, chartHeight + 20);

        // 绘制每个图表
        const chartSlotWidth = chartAreaWidth / chartCanvases.length;
        chartCanvases.forEach((canvas, index) => {
            const x = 40 + index * chartSlotWidth;
            try {
                // 保持图表比例
                this.ctx.drawImage(canvas, x + 10, chartY + 10, chartSlotWidth - 20, chartHeight);
            } catch (e) { }
        });
    }

    stop() {
        if (!this.isRecording) return;

        console.log('[VideoExporter] Stopping...');
        this.isRecording = false;

        // 停止动画循环
        if (this.animationFrameId) {
            cancelAnimationFrame(this.animationFrameId);
            this.animationFrameId = null;
        }

        // 停止播放并恢复原始速度
        if (this.player) {
            this.player.pause();
            const originalSpeed = this.originalSpeed || 120; // 默认恢复到 120
            this.player.setSpeed(originalSpeed);

            const speedSelect = document.getElementById('speed-select');
            if (speedSelect) speedSelect.value = originalSpeed.toString();
        }

        // 停止录制
        if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
            this.mediaRecorder.stop();
        }

        this.resetUI();
        this.toggleControls(true);
        this.onRecordingStop();
    }

    toggleControls(enabled) {
        const elements = [
            document.getElementById('btn-play'),
            document.getElementById('btn-begin'),
            document.getElementById('btn-end'),
            document.getElementById('speed-select'),
            document.getElementById('btn-new-file'),
            document.getElementById('landing-file-input')
        ];

        elements.forEach(el => {
            if (el) el.disabled = !enabled;
        });

        const timeline = document.getElementById('timeline');
        if (timeline) {
            timeline.style.pointerEvents = enabled ? 'auto' : 'none';
            timeline.style.opacity = enabled ? '1' : '0.5';
        }

        // 2. 切换播放控制的可见性
        const controlsToHide = [
            document.getElementById('btn-play'),
            document.getElementById('btn-begin'),
            document.getElementById('btn-end'),
            document.querySelector('.speed-control')
        ];

        controlsToHide.forEach(el => {
            if (el) {
                if (!enabled) el.classList.add('hidden');
                else el.classList.remove('hidden');
            }
        });

        // 3. 更新 REC 按钮状态
        if (this.$btnRecord) {
            if (!enabled) {
                this.$btnRecord.classList.add('recording');
                this.$btnRecord.innerHTML = '<i class="fas fa-square"></i>';
            } else {
                this.$btnRecord.classList.remove('recording');
                this.$btnRecord.innerHTML = '<i class="fas fa-circle"></i>';
            }
        }
    /*
        const playBtn = document.getElementById('btn-play');
        const container = playBtn ? playBtn.parentNode : null;

        if (container) {
            if (!enabled) {
                // 录制开始：隐藏播放控制，显示 REC
                document.getElementById('btn-play').classList.add('hidden');
                document.getElementById('btn-begin').classList.add('hidden');
                document.getElementById('btn-end').classList.add('hidden');

                let recIcon = document.getElementById('rec-indicator');
                if (!recIcon) {
                    recIcon = document.createElement('div');
                    recIcon.id = 'rec-indicator';
                    recIcon.innerHTML = '<i class="fas fa-circle" style="color: #ef4444; margin-right: 8px;"></i><span style="color: #ef4444; font-weight: bold; animation: pulse 1.5s infinite;">REC</span>';
                    recIcon.style.cssText = 'display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; background: rgba(239, 68, 68, 0.1); border-radius: 18px; border: 1px solid rgba(239, 68, 68, 0.3);';

                    // 添加闪烁动画样式
                    if (!document.getElementById('rec-style')) {
                        const style = document.createElement('style');
                        style.id = 'rec-style';
                        style.textContent = `
                            @keyframes pulse {
                                0% { opacity: 1; }
                                50% { opacity: 0.5; }
                                100% { opacity: 1; }
                            }
                        `;
                        document.head.appendChild(style);
                    }

                    // 插入到播放按钮位置
                    container.insertBefore(recIcon, playBtn);
                }
                recIcon.classList.remove('hidden');
            } else {
                // 录制结束：恢复播放控制，隐藏 REC
                document.getElementById('btn-play').classList.remove('hidden');
                document.getElementById('btn-begin').classList.remove('hidden');
                document.getElementById('btn-end').classList.remove('hidden');

                const recIcon = document.getElementById('rec-indicator');
                if (recIcon) {
                    recIcon.classList.add('hidden');
                }
            }
        }
    */ }

    async exportVideo(mimeType) {
        if (this.recordedChunks.length === 0) {
            console.warn('[VideoExporter] No data to export');
            return;
        }

        const blob = new Blob(this.recordedChunks, { type: mimeType });

        // 确定扩展名
        const ext = mimeType.includes('mp4') ? 'mp4' : 'webm';

        // 生成文件名: runback-yyyy-mm-ddThh-mm-ss.mp4
        const now = new Date();
        const pad = (n) => n.toString().padStart(2, '0');
        const timestamp = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`;
        const filename = `runback-${timestamp}.${ext}`;

        console.log('[VideoExporter] Video exported:', filename, 'Size:', (blob.size / 1024 / 1024).toFixed(2), 'MB');

        // 下载逻辑 (保持不变)
        if ('showSaveFilePicker' in window) {
            try {
                const handle = await window.showSaveFilePicker({
                    suggestedName: filename,
                    types: [{
                        description: ext.toUpperCase() + ' Video',
                        accept: { [mimeType.split(';')[0]]: ['.' + ext] }
                    }]
                });
                const writable = await handle.createWritable();
                await writable.write(blob);
                await writable.close();
                console.log(`视频已保存!\n文件大小: ${(blob.size / 1024 / 1024).toFixed(2)} MB`);
                alert(`视频已保存成功!\n文件大小: ${(blob.size / 1024 / 1024).toFixed(2)} MB`);
                return;
            } catch (e) {
                if (e.name !== 'AbortError') console.warn(e);
                else return;
            }
        }

        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();

        setTimeout(() => {
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }, 1000);

        // 只有在使用 Blob URL 下载时才提示，File System API 不需要
        console.log(`视频已下载: ${filename}`);
        alert(`视频已导出!\n文件: ${filename}`);
    }

    resetUI() {
        // UI reset is now handled in toggleControls via remove('recording')
    }
}

// ========================================
// App - 主应用 - 多用户支持
// ========================================
class App {
    constructor() {
        this.themeManager = new ThemeManager();
        this.fitParser = new FitParser();
        this.tcxParser = new TcxParser();
        this.gpxParser = new GpxParser();
        this.kmlParser = new KmlParser();
        this.mapRenderer = new MapRenderer('map');
        this.dataPanel = new DataPanel();
        this.chartManager = new ChartManager();

        // 多用户支持：存储会话数组
        this.sessions = [];

        // 连接 ChartManager 到 DataPanel
        this.dataPanel.setChartManager(this.chartManager);

        // 立即初始化播放器（不等待地图加载）
        this.player = new Player({
            onPositionChange: (pointsArray, second) => {
                // 多用户版本：pointsArray 是各用户当前点位数组
                if (this.mapRenderer) {
                    this.mapRenderer.updateMarkerPositions(pointsArray);
                }
                if (this.dataPanel) {
                    this.dataPanel.updateMultiple(pointsArray, second);
                }
            },
            onTimeUpdate: (current, total) => {
                // 如果正在录制且播放结束，自动停止录制
                if (this.videoExporter && this.videoExporter.isRecording) {
                    // 放宽结束判定条件，确保触发 (total - 0.5s)
                    if (current >= (total - 0.5) && total > 0) {
                        console.log('[App] Playback finished, auto-stopping recording');
                        this.videoExporter.stop();
                    }
                }
            },
            onPlayStateChange: (playing) => {
                // 可以添加播放状态变化逻辑
            },
        });

        // 初始化视频导出器
        this.videoExporter = new VideoExporter({
            mapRenderer: this.mapRenderer,
            chartManager: this.chartManager,
            player: this.player,
            onRecordingStart: () => {
                console.log('[App] Video export started');
            },
            onRecordingStop: () => {
                console.log('[App] Video export stopped');
            },
            onError: (err) => {
                console.error('[App] Video export error:', err);
            },
        });

        this.init();
    }

    async init() {
        // 初始化地图
        await this.mapRenderer.init();

        // 设置文件上传
        this.setupFileUpload();

        // 设置地图控制
        this.setupMapControls();

        // 设置新文件按钮 - 直接打开文件选择器
        const btnNewFile = document.getElementById('btn-new-file');
        const landingFileInput = document.getElementById('landing-file-input');

        if (btnNewFile && landingFileInput) {
            btnNewFile.addEventListener('click', () => {
                // 清空input value以允许重新选择同一文件
                landingFileInput.value = '';
                landingFileInput.click();
            });
        }
    }

    setupFileUpload() {
        const uploadOverlay = document.getElementById('upload-overlay');

        // 如果使用新的启动页，跳过旧的上传覆盖层设置
        if (!uploadOverlay) {
            console.log('Using landing page for file upload, skipping upload-overlay setup');
            return;
        }

        const uploadBox = uploadOverlay.querySelector('.upload-box');
        const fileInput = document.getElementById('file-input');
        const selectFileBtn = document.getElementById('select-file-btn');

        // 点击选择文件
        if (selectFileBtn && fileInput) {
            selectFileBtn.addEventListener('click', () => fileInput.click());
        }

        // 文件选择变化
        if (fileInput) {
            fileInput.addEventListener('change', (e) => {
                if (e.target.files.length > 0) {
                    this.loadFiles(Array.from(e.target.files));
                }
            });
        }

        // 拖拽上传
        if (uploadOverlay && uploadBox) {
            uploadOverlay.addEventListener('dragover', (e) => {
                e.preventDefault();
                uploadBox.classList.add('drag-over');
            });

            uploadOverlay.addEventListener('dragleave', (e) => {
                e.preventDefault();
                uploadBox.classList.remove('drag-over');
            });

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

                const files = Array.from(e.dataTransfer.files);
                this.loadFiles(files);
            });
        }
    }

    setupMapControls() {
        document.getElementById('zoom-in').addEventListener('click', () => {
            this.mapRenderer.zoomIn();
        });

        document.getElementById('zoom-out').addEventListener('click', () => {
            this.mapRenderer.zoomOut();
        });

        document.getElementById('fit-bounds').addEventListener('click', () => {
            this.mapRenderer.fitBounds();
        });
    }

    /**
     * 加载多个文件（新的多用户入口）
     * @param {Array<File>} files - 文件列表
     */
    async loadFiles(files) {
        // 验证文件数量
        if (files.length > MAX_FILES) {
            alert(`最多支持同时加载 ${MAX_FILES} 个文件，您选择了 ${files.length} 个文件。请减少选择的文件数量。`);
            return;
        }

        if (files.length === 0) {
            return;
        }

        try {
            console.log(`Loading ${files.length} file(s)...`);

            // 重置旧数据
            if (this.dataPanel) {
                this.dataPanel.reset();
            }
            if (this.chartManager) {
                this.chartManager.destroy();
            }
            if (this.player) {
                this.player.pause();
            }

            // 清空会话
            this.sessions = [];

            // 解析所有文件
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                console.log(`Parsing file ${i + 1}/${files.length}: ${file.name}`);

                try {
                    const arrayBuffer = await file.arrayBuffer();

                    // 根据文件扩展名选择解析器
                    const ext = file.name.split('.').pop().toLowerCase();
                    let parsedData;

                    if (ext === 'tcx') {
                        parsedData = await this.tcxParser.parse(arrayBuffer);
                    } else if (ext === 'gpx') {
                        parsedData = await this.gpxParser.parse(arrayBuffer);
                    } else if (ext === 'fit') {
                        parsedData = await this.fitParser.parse(arrayBuffer);
                    } else if (ext === 'kml') {
                        parsedData = await this.kmlParser.parse(arrayBuffer);
                    } else {
                        throw new Error(`不支持的文件格式: .${ext}`);
                    }

                    if (parsedData.points.length === 0) {
                        console.warn(`File ${file.name} has no GPS data, skipping.`);
                        continue;
                    }

                    this.sessions.push({
                        fileName: file.name,
                        points: parsedData.points,
                        indexedPoints: parsedData.indexedPoints,
                        totalSeconds: parsedData.totalSeconds,
                        startTime: parsedData.startTime,
                        endTime: parsedData.endTime,
                    });
                } catch (parseError) {
                    console.error(`Error parsing file ${file.name}:`, parseError);
                    // 继续处理其他文件
                }
            }

            if (this.sessions.length === 0) {
                alert('没有找到有效的 GPS 数据');
                return;
            }

            console.log(`Successfully loaded ${this.sessions.length} session(s)`);

            // 计算全局最大时长
            const globalTotalSeconds = Math.max(...this.sessions.map(s => s.totalSeconds));

            // 绘制所有轨迹
            if (this.mapRenderer) {
                this.mapRenderer.drawTracks(this.sessions);
            }

            // 初始化多用户图表
            if (this.chartManager) {
                this.chartManager.initMultiCharts(this.sessions, globalTotalSeconds);
            }

            // 更新视频导出器的会话数据
            if (this.videoExporter) {
                this.videoExporter.updateSessions(this.sessions);
            }

            // 初始化数据面板
            if (this.dataPanel) {
                this.dataPanel.initSummaries(this.sessions);
            }

            // 设置播放器数据
            if (this.player) {
                const playerSessions = this.sessions.map(s => ({
                    indexedPoints: s.indexedPoints,
                    totalSeconds: s.totalSeconds,
                    fileName: s.fileName,
                }));
                this.player.setSessionsData(playerSessions, globalTotalSeconds);
            }

            // initSummaries 已显示总数据，播放时再更新
            // （移除初始 updateMultiple 调用，避免覆盖总数据）

            // 隐藏上传覆盖层，显示控制面板
            this.hideUploadOverlay();
            this.showControls();

        } catch (error) {
            console.error('Error loading files:', error);
            alert('加载文件失败: ' + error.message);
        }
    }

    /**
     * 向后兼容：单文件加载
     */
    async loadFile(file) {
        await this.loadFiles([file]);
    }

    hideUploadOverlay() {
        // 隐藏启动页（如果存在）
        const landingPage = document.getElementById('landing-page');
        if (landingPage) {
            landingPage.classList.add('hidden');
        }

        // 隐藏旧的上传覆盖层（如果存在）
        const uploadOverlay = document.getElementById('upload-overlay');
        if (uploadOverlay) {
            uploadOverlay.classList.add('hidden');
        }
    }

    showUploadOverlay() {
        // 显示启动页（如果存在）
        const landingPage = document.getElementById('landing-page');
        if (landingPage) {
            landingPage.classList.remove('hidden');
        }

        // 显示旧的上传覆盖层（如果存在）
        const uploadOverlay = document.getElementById('upload-overlay');
        if (uploadOverlay) {
            uploadOverlay.classList.remove('hidden');
        }

        // 隐藏控制面板
        const playerControls = document.getElementById('player-controls');
        if (playerControls) {
            playerControls.classList.add('hidden');
        }

        const dataPanel = document.getElementById('data-panel');
        if (dataPanel) {
            dataPanel.classList.add('hidden');
        }
    }

    showControls() {
        const playerControls = document.getElementById('player-controls');
        if (playerControls) {
            playerControls.classList.remove('hidden');
        }

        const dataPanel = document.getElementById('data-panel');
        if (dataPanel) {
            dataPanel.classList.remove('hidden');
        }
    }
}

// ========================================
// Initialize App
// ========================================
document.addEventListener('DOMContentLoaded', () => {
    // ========== Landing Page Initialization ==========
    const landingPage = document.getElementById('landing-page');
    const landingFileInput = document.getElementById('landing-file-input');
    const landingUploadBtn = document.getElementById('landing-upload-btn');

    // File upload button click
    if (landingUploadBtn) {
        landingUploadBtn.addEventListener('click', () => {
            // 清空value以允许重选同一文件
            landingFileInput.value = '';
            landingFileInput.click();
        });
    }

    // File selection (multiple files supported)
    if (landingFileInput) {
        landingFileInput.addEventListener('change', (e) => {
            const files = Array.from(e.target.files);
            if (files.length > 0) {
                handleFilesUpload(files);
            }
        });
    }

    // Drag and drop support (multiple files)
    if (landingPage) {
        landingPage.addEventListener('dragover', (e) => {
            e.preventDefault();
            landingPage.style.opacity = '0.8';
        });

        landingPage.addEventListener('dragleave', () => {
            landingPage.style.opacity = '1';
        });

        landingPage.addEventListener('drop', (e) => {
            e.preventDefault();
            landingPage.style.opacity = '1';

            const files = Array.from(e.dataTransfer.files);
            if (files.length > 0) {
                handleFilesUpload(files);
            }
        });
    }

    // Handle multiple file upload
    function handleFilesUpload(files) {
        // Validate file count
        if (files.length > MAX_FILES) {
            alert(`最多支持同时加载 ${MAX_FILES} 个文件，您选择了 ${files.length} 个文件。请减少选择的文件数量。`);
            return;
        }

        // Hide landing page
        if (landingPage) {
            landingPage.classList.add('hidden');
        }

        // Process files using App instance
        if (window.app && window.app.loadFiles) {
            window.app.loadFiles(files);
        } else {
            console.error('App not initialized');
        }
    }

    // ========== Existing Initialization ==========
    window.app = new App();
});