// ==UserScript==
// @name         标注助手 - 框数统计/自动保存
// @namespace    https://dawnchan.online
// @version      1.0.0
// @description  直接读取平台标注数据，按类别统计当前帧/全部帧框数；紧凑悬浮窗；支持定时保存。
// @author       cc
// @match        *://*/*pointcloud*
// @match        *://*/w/pointcloud/*
// @grant        none
// @noframes
// @run-at       document-idle
// ==/UserScript==
(function () {
'use strict';

const LS_KEY = 'bch_widget_v2';
const MIN_SAVE_MS = 10000;
const MAX_SAVE_MS = 24 * 60 * 60 * 1000;
const DEFAULTS = {
    autoSave: true,
    interval: 5,
    unit: 'minutes',
    scope: 'all',
    collapsed: false,
    pos: null
};

let settings = loadSettings();

// ========== 设置 ==========
function loadSettings() {
    try {
        const raw = localStorage.getItem(LS_KEY);
        const parsed = raw ? JSON.parse(raw) : {};
        const s = Object.assign({}, DEFAULTS, parsed || {});
        s.interval = Math.round(Number(s.interval));
        if (!Number.isFinite(s.interval) || s.interval < 1) s.interval = DEFAULTS.interval;
        s.interval = Math.min(999, Math.max(1, s.interval));
        if (!['seconds', 'minutes', 'hours'].includes(s.unit)) s.unit = DEFAULTS.unit;
        if (!['frame', 'all'].includes(s.scope)) s.scope = DEFAULTS.scope;
        s.autoSave = !!s.autoSave;
        s.collapsed = !!s.collapsed;
        if (!s.pos || typeof s.pos.x !== 'number' || typeof s.pos.y !== 'number') s.pos = null;
        return s;
    } catch (e) {
        return Object.assign({}, DEFAULTS);
    }
}

function persist() {
    try {
        localStorage.setItem(LS_KEY, JSON.stringify(settings));
    } catch (e) {
        // localStorage 写入失败不影响统计
    }
}

function intervalMs() {
    const mult = settings.unit === 'seconds' ? 1000
        : settings.unit === 'minutes' ? 60000
        : 3600000;
    return Math.min(MAX_SAVE_MS, Math.max(MIN_SAVE_MS, Math.round(settings.interval * mult)));
}

// ========== 平台数据访问 ==========
function getInstance() {
    try {
        return window.instance || null;
    } catch (e) {
        return null;
    }
}

function getSM() {
    const inst = getInstance();
    try {
        return inst && inst.StoreManager ? inst.StoreManager : null;
    } catch (e) {
        return null;
    }
}

function canEdit() {
    const inst = getInstance();
    try {
        return !!(inst && inst.canEdit);
    } catch (e) {
        return false;
    }
}

function getStatusState() {
    const sm = getSM();
    if (!sm) return null;
    try {
        return sm.statusState();
    } catch (e) {
        return null;
    }
}

function getSnapshot() {
    const sm = getSM();
    if (!sm) return null;
    try {
        const cfgState = sm.configState();
        const markState = sm.marksState();
        const cfg = cfgState.config || {};
        const frames = Array.isArray(cfgState.frames) ? cfgState.frames : [];
        const frameIds = cfgState.frameIds || {};
        const curId = sm.getCurFrameId();
        const idx = frameIds[curId];
        return {
            sm,
            marks: markState.marks || {},
            versions: `${markState.curVer}|${markState.curMetaVer}`,
            config: cfg,
            frames,
            frameIds,
            curId,
            curIndex: typeof idx === 'number' ? idx : -1,
            taskKey: cfg.task_key || cfg.id || '',
            frameSetKey: frames.length
                ? String(frames[0] && frames[0].task_id) + '|' + String(frames[frames.length - 1] && frames[frames.length - 1].task_id)
                : ''
        };
    } catch (e) {
        return null;
    }
}

// ========== 统计 ==========
const TOOL_2D_MAP = {
    rect: 'volume',
    cuboid_2d: 'volume',
    line: 'line_3d',
    polygon: 'polygon_3d'
};

function frameHas2D(cams) {
    if (!cams) return false;
    if (Array.isArray(cams)) return cams.length > 0;
    if (typeof cams !== 'object') return false;
    for (const key in cams) {
        const arr = cams[key];
        if (Array.isArray(arr) && arr.length) return true;
    }
    return false;
}

function trackHasMark(track, frameId) {
    if (!track || !frameId) return false;
    const d3 = track['3d'];
    if (d3 && d3[frameId]) return true;
    const d2 = track['2d'];
    return !!(d2 && frameHas2D(d2[frameId]));
}

function first2DType(arr) {
    if (!arr) return null;
    if (Array.isArray(arr)) {
        return arr.length && arr[0] && arr[0].type ? arr[0].type : null;
    }
    for (const key in arr) {
        const sub = arr[key];
        if (Array.isArray(sub) && sub.length && sub[0] && sub[0].type) return sub[0].type;
    }
    return null;
}

function trackToolType(track, frameId) {
    if (!track) return null;
    const d3 = track['3d'];
    if (frameId && d3 && d3[frameId] && d3[frameId].type) return d3[frameId].type;
    if (d3) {
        for (const fid in d3) {
            const mark = d3[fid];
            if (mark && mark.type) return mark.type;
        }
    }
    const d2 = track['2d'];
    if (d2) {
        if (frameId) {
            const type = first2DType(d2[frameId]);
            if (type) return TOOL_2D_MAP[type] || type;
        }
        for (const fid in d2) {
            const type = first2DType(d2[fid]);
            if (type) return TOOL_2D_MAP[type] || type;
        }
    }
    return null;
}

function countFrame(snapshot) {
    const map = new Map();
    let total = 0;
    const frameId = snapshot.curId;
    if (!frameId) return { map, total };
    for (const trackId in snapshot.marks) {
        const track = snapshot.marks[trackId];
        if (!trackHasMark(track, frameId)) continue;
        const tool = trackToolType(track, frameId);
        if (!tool) continue;
        const key = tool + '|' + (track.class != null ? track.class : '?');
        map.set(key, (map.get(key) || 0) + 1);
        total++;
    }
    return { map, total };
}

function countAll(snapshot) {
    const map = new Map();
    let total = 0;
    const validFrames = new Set(
        snapshot.frames
            .map(function (f) { return f && f.task_id != null ? String(f.task_id) : null; })
            .filter(function (id) { return id != null; })
    );
    if (!validFrames.size) return { map, total };

    for (const trackId in snapshot.marks) {
        const track = snapshot.marks[trackId];
        if (!track) continue;
        const tool = trackToolType(track, null);
        if (!tool) continue;

        const counted = new Set();
        const d3 = track['3d'];
        if (d3) {
            for (const fid in d3) {
                if (validFrames.has(String(fid)) && d3[fid]) counted.add(fid);
            }
        }
        const d2 = track['2d'];
        if (d2) {
            for (const fid in d2) {
                if (!validFrames.has(String(fid)) || counted.has(fid)) continue;
                if (frameHas2D(d2[fid])) counted.add(fid);
            }
        }
        if (!counted.size) continue;

        const key = tool + '|' + (track.class != null ? track.class : '?');
        map.set(key, (map.get(key) || 0) + counted.size);
        total += counted.size;
    }
    return { map, total };
}

function classInfo(snapshot, toolType, classId) {
    let cls = null;
    const classes = snapshot.config && snapshot.config.classes;
    const group = classes && classes[toolType];
    if (group && group.listClass) cls = group.listClass[classId];

    if (!cls) {
        const props = snapshot.config && snapshot.config.properties;
        if (Array.isArray(props)) {
            const g = props.find(function (p) { return p && p.toolType === toolType; });
            if (g && g.listClass) cls = g.listClass[classId];
        }
    }

    let name = '';
    let color = '';
    if (cls) {
        name = cls.ptitle || cls.pname || '';
        color = cls.color || '';
    }
    if (!name) name = '类别 ' + classId;
    if (!/^#[0-9a-f]{3,8}$/i.test(color) && !/^rgba?\(/i.test(color)) color = '#7a7a7a';
    return { name: name, color: color, tool: toolType, id: classId };
}

// ========== 格式化 ==========
const NUM_FMT = (function () {
    try {
        return new Intl.NumberFormat('zh-CN');
    } catch (e) {
        return null;
    }
})();

function formatNum(n) {
    n = Number(n) || 0;
    return NUM_FMT ? NUM_FMT.format(n) : String(n);
}

function compactNum(n) {
    n = Number(n) || 0;
    if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'm';
    if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
    return String(n);
}

function formatDuration(sec) {
    sec = Math.max(0, Math.ceil(sec));
    const h = Math.floor(sec / 3600);
    const m = Math.floor((sec % 3600) / 60);
    const s = sec % 60;
    if (h > 0) return h + ':' + String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
    return m + ':' + String(s).padStart(2, '0');
}

function clamp(v, min, max) {
    return Math.max(min, Math.min(max, v));
}

// ========== 自动保存 ==========
let autoTimer = null;
let autoGeneration = 0;
let nextSaveAt = 0;
let savingUntil = 0;
let pendingSave = null;
let messageObserverStarted = false;
let flash = { text: '', kind: '', until: 0 };

function setStatus(text, kind, ms) {
    flash = { text: text, kind: kind || '', until: Date.now() + (ms || 2500) };
    updateFooter();
}

function isDirty() {
    const sm = getSM();
    if (!sm) return false;
    try {
        const marks = sm.marksState();
        if (marks.curVer !== marks.updatedVer || marks.curMetaVer !== marks.updatedMetaVer) return true;
        const seg = sm.segState();
        if (seg && (seg.curSegVer !== seg.updateSegVer ||
            seg.segProjectionVer !== seg.updateSegProjectionVer)) return true;
    } catch (e) {
        return true;
    }
    return false;
}

function triggerSave() {
    // 优先点击平台真实的保存按钮，让平台自己的“保存成功/失败”提示出现
    const button = findSaveButton();
    if (button) {
        try {
            button.click();
            return true;
        } catch (e) {
            console.error('[框数助手] 点击保存按钮失败', e);
        }
    }

    // 找不到按钮时退回平台保存快捷键 Ctrl+S
    const isMac = /Mac/.test(navigator.platform || '');
    try {
        document.dispatchEvent(new KeyboardEvent('keydown', {
            key: 's',
            code: 'KeyS',
            ctrlKey: !isMac,
            metaKey: isMac,
            bubbles: true,
            cancelable: true
        }));
        return true;
    } catch (e) {
        console.error('[框数助手] 保存快捷键派发失败', e);
        return false;
    }
}

function findSaveButton() {
    try {
        const top = document.getElementById('top');
        if (!top) return null;
        const groups = [];
        for (const child of top.children) {
            if (child.classList && child.classList.contains('top-item')) groups.push(child);
        }
        const group = groups[groups.length - 1];
        // 平台把保存按钮固定放在最后一个 top-item 组的最后一位
        if (!group || top.lastElementChild !== group) return null;
        const buttons = group.querySelectorAll('button');
        // 编辑权限下通常是 [通过, 保存]；超过 4 个说明结构变了，退回快捷键更安全
        if (buttons.length < 1 || buttons.length > 4) return null;
        const button = buttons[buttons.length - 1];
        if (!button || button.disabled) return null;
        return button;
    } catch (e) {
        return null;
    }
}

function tryAutoSave(manual) {
    const inst = getInstance();
    if (!inst) {
        if (manual) setStatus('平台未就绪', 'warn');
        return;
    }
    if (!inst.canEdit) {
        setStatus('只读账号，无法保存', 'warn');
        return;
    }
    const sm = getSM();
    if (!sm) {
        if (manual) setStatus('平台未就绪', 'warn');
        return;
    }

    let status = null;
    try {
        status = sm.statusState();
    } catch (e) {
        status = null;
    }
    if (status && status.isMarksObtained === false) {
        if (manual) setStatus('标注数据加载中…', 'warn');
        return;
    }
    if (status && status.multiFrame) {
        setStatus('多帧合并中，已跳过', 'warn');
        return;
    }
    if (status && status.disabledShortKey) {
        setStatus('弹窗打开中，已跳过', 'warn');
        return;
    }
    if (Date.now() < savingUntil) {
        if (manual) setStatus('正在保存…', 'warn');
        return;
    }

    const dirty = isDirty();
    // 自动保存只在有改动时触发，避免每隔几分钟弹一次“无需保存”
    // 手动保存即使没改动也触发，让平台给出“已同步至最新”的明确反馈
    if (!manual && !dirty) return;

    if (!triggerSave()) {
        setStatus('保存请求失败', 'error');
        return;
    }
    pendingSave = { at: Date.now(), baselineDirty: dirty };
    savingUntil = Date.now() + 4000;
    setStatus('正在保存…', 'info', 5000);
}

function scheduleAutoSave() {
    autoGeneration++;
    if (autoTimer) {
        clearTimeout(autoTimer);
        autoTimer = null;
    }
    if (!settings.autoSave) {
        nextSaveAt = 0;
        updateFooter();
        return;
    }

    const ms = intervalMs();
    nextSaveAt = Date.now() + ms;
    const generation = autoGeneration;

    const tick = function () {
        if (generation !== autoGeneration) return;
        try {
            if (!document.hidden) tryAutoSave(false);
        } catch (e) {
            console.error('[框数助手] 自动保存失败', e);
        }
        nextSaveAt = Date.now() + ms;
        autoTimer = setTimeout(tick, ms);
        updateFooter();
    };
    autoTimer = setTimeout(tick, ms);
    updateFooter();
}

function checkPendingSave() {
    if (!pendingSave) return;
    const elapsed = Date.now() - pendingSave.at;

    if (!pendingSave.baselineDirty) {
        // 手动保存但本来就没改动：平台通常会提示“已同步至最新”，没捕获到就在这里兜底
        if (elapsed > 1200) {
            setStatus('已同步至最新', 'success', 5000);
            pendingSave = null;
            savingUntil = 0;
        }
        return;
    }

    if (!isDirty()) {
        setStatus('保存成功', 'success', 6000);
        pendingSave = null;
        savingUntil = 0;
        return;
    }

    if (elapsed > 12000) {
        setStatus('保存状态未确认，请检查网络或平台提示', 'warn', 7000);
        pendingSave = null;
        savingUntil = 0;
    }
}

function setupMessageObserver() {
    if (messageObserverStarted || !document.body) return;
    messageObserverStarted = true;

    const observer = new MutationObserver(function (mutations) {
        for (const mutation of mutations) {
            for (const node of mutation.addedNodes) {
                if (node.nodeType !== 1) continue;
                const messages = [];
                if (node.matches && node.matches('.el-message')) messages.push(node);
                if (node.querySelectorAll) {
                    const nested = node.querySelectorAll('.el-message');
                    for (const el of nested) messages.push(el);
                }
                for (const el of messages) handlePlatformMessage(el);
            }
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });
}

function handlePlatformMessage(el) {
    const content = el.querySelector('.el-message__content') || el;
    const text = (content.textContent || '').trim();
    if (!text) return;

    const isError = el.classList.contains('el-message--error');
    const isSaveText = /保存成功|保存失败|无需保存|已同步至最新|保存出错/.test(text);
    const withinSave = pendingSave && Date.now() - pendingSave.at < 15000;
    if (!isSaveText && !(isError && withinSave)) return;

    pendingSave = null;
    savingUntil = 0;
    if (isError || /保存失败|保存出错/.test(text)) {
        setStatus(text, 'error', 8000);
    } else {
        setStatus(text, 'success', 6000);
    }
}

// ========== 界面 ==========
let els = null;
let refreshKey = '';
let booted = false;

function buildUI() {
    if (document.getElementById('bch-panel')) return false;

    if (!document.getElementById('bch-style')) {
        const style = document.createElement('style');
        style.id = 'bch-style';
        style.textContent = `
#bch-panel, #bch-ball, #bch-panel * { box-sizing: border-box; }
#bch-panel {
    position: fixed; top: 12px; right: 12px; width: 256px;
    display: flex; flex-direction: column;
    background: #232323; color: #e8e8e8;
    border: 1px solid #3a3a3a; border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.38);
    font: 12px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    z-index: 999999; overflow: hidden; user-select: none;
    max-height: calc(100vh - 8px);
}
#bch-panel .bch-head { display:flex; align-items:center; gap:4px; padding:7px 8px 7px 10px; border-bottom:1px solid #343434; cursor:move; }
#bch-panel .bch-title { flex:1; font-size:12.5px; font-weight:600; color:#f2f2f2; white-space:nowrap; letter-spacing:.2px; }
#bch-panel .bch-icon { width:24px; height:24px; padding:0; border:0; border-radius:5px; background:transparent; color:#a9a9a9; font-size:14px; line-height:24px; text-align:center; cursor:pointer; }
#bch-panel .bch-icon:hover { background:#343434; color:#fff; }
#bch-panel .bch-switch { position:relative; display:inline-block; width:34px; height:18px; flex:none; cursor:pointer; }
#bch-panel .bch-switch input { position:absolute; opacity:0; width:0; height:0; }
#bch-panel .bch-slider { position:absolute; inset:0; background:#5a5a5a; border-radius:10px; transition:background .2s; }
#bch-panel .bch-slider::before { content:""; position:absolute; width:14px; height:14px; left:2px; top:2px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.35); }
#bch-panel .bch-switch input:checked + .bch-slider { background:#2ecc71; }
#bch-panel .bch-switch input:checked + .bch-slider::before { transform:translateX(16px); }
#bch-panel .bch-switch input:disabled + .bch-slider { opacity:.45; cursor:not-allowed; }
#bch-panel .bch-settings { padding:8px 10px; background:#262626; border-bottom:1px solid #343434; }
#bch-panel .bch-set-row { display:flex; align-items:center; gap:6px; color:#bdbdbd; font-size:11px; }
#bch-panel .bch-set-row input, #bch-panel .bch-set-row select { background:#1a1a1a; color:#e8e8e8; border:1px solid #404040; border-radius:4px; padding:2px 4px; font-size:11px; outline:none; }
#bch-panel .bch-set-row input { width:52px; }
#bch-panel .bch-set-row select { flex:1; min-width:0; }
#bch-panel .bch-hint { margin-top:6px; font-size:10px; color:#777; line-height:1.4; }
#bch-panel .bch-tabs { display:flex; gap:2px; margin:8px 10px 0; padding:2px; background:#1b1b1b; border-radius:6px; }
#bch-panel .bch-tab { flex:1; text-align:center; padding:3px 0; border-radius:4px; color:#9a9a9a; font-size:11px; cursor:pointer; }
#bch-panel .bch-tab:hover { color:#ddd; }
#bch-panel .bch-tab.active { background:#383838; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); }
#bch-panel .bch-total { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; padding:8px 12px 2px; }
#bch-panel .bch-num { font-size:26px; font-weight:700; line-height:1; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
#bch-panel .bch-unit { margin-left:3px; font-size:11px; color:#8d8d8d; font-weight:400; }
#bch-panel .bch-sub { font-size:10px; color:#7d7d7d; white-space:nowrap; padding-bottom:2px; }
#bch-panel .bch-list { margin:4px 10px 8px; max-height:188px; overflow-y:auto; }
#bch-panel .bch-row { display:flex; align-items:center; gap:6px; padding:3px 2px; min-height:20px; }
#bch-panel .bch-row:hover { background:#2b2b2b; border-radius:4px; }
#bch-panel .bch-dot { width:7px; height:7px; border-radius:50%; flex:none; }
#bch-panel .bch-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#cfcfcf; font-size:11.5px; }
#bch-panel .bch-count { color:#fff; font-weight:600; font-size:11.5px; font-variant-numeric:tabular-nums; }
#bch-panel .bch-empty { padding:12px 0; text-align:center; color:#777; font-size:11px; }
#bch-panel .bch-foot { display:flex; align-items:center; gap:6px; padding:6px 10px; background:#202020; border-top:1px solid #343434; }
#bch-panel .bch-status-dot { width:6px; height:6px; border-radius:50%; background:#2ecc71; flex:none; }
#bch-panel .bch-foot-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8f8f8f; font-size:10px; }
#bch-panel .bch-save { border:1px solid #3c5a45; background:#28382d; color:#9fd6ae; border-radius:4px; padding:2px 7px; font-size:10px; cursor:pointer; }
#bch-panel .bch-save:hover { background:#324737; }
#bch-panel .bch-save:disabled { opacity:.4; cursor:not-allowed; }
#bch-panel .bch-list::-webkit-scrollbar { width:4px; }
#bch-panel .bch-list::-webkit-scrollbar-thumb { background:#4a4a4a; border-radius:2px; }
#bch-ball {
    position: fixed; width:46px; height:46px; display:none;
    flex-direction:column; align-items:center; justify-content:center;
    background:rgba(35,35,35,.94); border:1px solid #444; border-radius:50%;
    box-shadow:0 4px 14px rgba(0,0,0,.35); color:#fff; cursor:grab;
    z-index:999998; user-select:none; backdrop-filter:blur(4px);
}
#bch-ball:active { cursor:grabbing; }
#bch-ball .bch-ball-num { font-size:12px; font-weight:700; line-height:1.1; max-width:40px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#bch-ball .bch-ball-label { font-size:8px; color:#8f8f8f; line-height:1.1; }
#bch-ball .bch-ball-dot { position:absolute; top:3px; right:4px; width:6px; height:6px; border-radius:50%; background:#2ecc71; }
#bch-panel [hidden] { display:none !important; }
`;
        document.head.appendChild(style);
    }

    const panel = document.createElement('div');
    panel.id = 'bch-panel';
    panel.innerHTML = `
<div class="bch-head" id="bch-head">
    <span class="bch-title">框数助手</span>
    <label class="bch-switch" title="定时保存开关">
        <input type="checkbox" id="bch-auto">
        <span class="bch-slider"></span>
    </label>
    <button class="bch-icon" id="bch-gear" title="设置">&#9881;</button>
    <button class="bch-icon" id="bch-min" title="收起">&#8722;</button>
</div>
<div class="bch-settings" id="bch-settings" hidden>
    <div class="bch-set-row">
        <span>保存间隔</span>
        <input id="bch-interval" type="number" min="1" max="999" step="1">
        <select id="bch-unit">
            <option value="seconds">秒</option>
            <option value="minutes">分钟</option>
            <option value="hours">小时</option>
        </select>
    </div>
    <div class="bch-hint">仅触发平台保存，不会提交或通过任务。</div>
</div>
<div class="bch-tabs">
    <div class="bch-tab" data-scope="frame">当前帧</div>
    <div class="bch-tab" data-scope="all">全部帧</div>
</div>
<div class="bch-total" title="每帧按标注物去重后累加，与平台左栏口径一致">
    <div><span class="bch-num" id="bch-total">&#8212;</span><span class="bch-unit">框</span></div>
    <span class="bch-sub" id="bch-sub"></span>
</div>
<div class="bch-list" id="bch-list"><div class="bch-empty">等待平台数据&#8230;</div></div>
<div class="bch-foot">
    <span class="bch-status-dot" id="bch-foot-dot"></span>
    <span class="bch-foot-text" id="bch-foot-text">初始化&#8230;</span>
    <button class="bch-save" id="bch-save" title="立即保存">保存</button>
</div>`;
    document.body.appendChild(panel);

    const ball = document.createElement('div');
    ball.id = 'bch-ball';
    ball.title = '框数助手（点击展开）';
    ball.innerHTML = `
<span class="bch-ball-dot" id="bch-ball-dot"></span>
<span class="bch-ball-num" id="bch-ball-num">&#8212;</span>
<span class="bch-ball-label">框</span>`;
    document.body.appendChild(ball);

    els = {
        panel: panel,
        ball: ball,
        head: panel.querySelector('#bch-head'),
        auto: panel.querySelector('#bch-auto'),
        gear: panel.querySelector('#bch-gear'),
        min: panel.querySelector('#bch-min'),
        settings: panel.querySelector('#bch-settings'),
        interval: panel.querySelector('#bch-interval'),
        unit: panel.querySelector('#bch-unit'),
        tabs: Array.prototype.slice.call(panel.querySelectorAll('.bch-tab')),
        total: panel.querySelector('#bch-total'),
        sub: panel.querySelector('#bch-sub'),
        list: panel.querySelector('#bch-list'),
        footDot: panel.querySelector('#bch-foot-dot'),
        footText: panel.querySelector('#bch-foot-text'),
        save: panel.querySelector('#bch-save'),
        ballNum: ball.querySelector('#bch-ball-num'),
        ballDot: ball.querySelector('#bch-ball-dot')
    };
    return true;
}

function bindUI() {
    els.tabs.forEach(function (tab) {
        tab.addEventListener('click', function () {
            const scope = tab.dataset.scope;
            if (settings.scope === scope) return;
            settings.scope = scope;
            persist();
            updateTabs();
            refresh(true);
        });
    });

    els.auto.checked = settings.autoSave;
    els.auto.addEventListener('change', function () {
        if (!canEdit()) {
            els.auto.checked = false;
            setStatus('当前账号无编辑权限', 'warn');
            return;
        }
        settings.autoSave = els.auto.checked;
        persist();
        scheduleAutoSave();
    });

    els.gear.addEventListener('click', function (e) {
        e.stopPropagation();
        els.settings.hidden = !els.settings.hidden;
    });

    els.interval.value = settings.interval;
    els.unit.value = settings.unit;
    const applyInterval = function () {
        let value = Math.round(Number(els.interval.value));
        if (!Number.isFinite(value) || value < 1) value = DEFAULTS.interval;
        value = Math.min(999, Math.max(1, value));
        if (els.unit.value === 'seconds') value = Math.max(10, value);
        els.interval.value = value;
        settings.interval = value;
        settings.unit = els.unit.value;
        persist();
        scheduleAutoSave();
    };
    els.interval.addEventListener('change', applyInterval);
    els.unit.addEventListener('change', applyInterval);

    els.min.addEventListener('click', function (e) {
        e.stopPropagation();
        setCollapsed(true);
    });

    els.save.addEventListener('click', function (e) {
        e.stopPropagation();
        tryAutoSave(true);
        scheduleAutoSave();
    });

    document.addEventListener('pointerdown', function (e) {
        if (!els.settings.hidden && !els.settings.contains(e.target) && !els.gear.contains(e.target)) {
            els.settings.hidden = true;
        }
    });

    makeDraggable(els.head, els.panel, false);
    makeDraggable(els.ball, els.ball, true);
    window.addEventListener('resize', function () { clampCurrent(); });
    document.addEventListener('visibilitychange', function () {
        if (!document.hidden) {
            refresh(true);
            updateFooter();
        }
    });
}

function makeDraggable(handle, target, isBall) {
    let dragging = false;
    let moved = false;
    let startX = 0;
    let startY = 0;
    let originX = 0;
    let originY = 0;

    handle.addEventListener('pointerdown', function (e) {
        if (e.button !== 0) return;
        if (!isBall && e.target.closest('button, input, select, label')) return;
        dragging = true;
        moved = false;
        startX = e.clientX;
        startY = e.clientY;
        const rect = target.getBoundingClientRect();
        originX = rect.left;
        originY = rect.top;
        try { handle.setPointerCapture(e.pointerId); } catch (err) {}
        e.preventDefault();
    });

    handle.addEventListener('pointermove', function (e) {
        if (!dragging) return;
        const dx = e.clientX - startX;
        const dy = e.clientY - startY;
        if (Math.abs(dx) + Math.abs(dy) > 3) moved = true;
        placeWidget(target, originX + dx, originY + dy);
    });

    function finish(e) {
        if (!dragging) return;
        dragging = false;
        try { handle.releasePointerCapture(e.pointerId); } catch (err) {}
        if (moved) {
            settings.pos = { x: target.offsetLeft, y: target.offsetTop };
            persist();
        } else if (isBall) {
            setCollapsed(false);
        }
    }
    handle.addEventListener('pointerup', finish);
    handle.addEventListener('pointercancel', function (e) {
        if (!dragging) return;
        dragging = false;
        try { handle.releasePointerCapture(e.pointerId); } catch (err) {}
    });
}

function placeWidget(el, x, y) {
    const w = el.offsetWidth || 256;
    const h = el.offsetHeight || 120;
    const nx = clamp(x, 4, Math.max(4, window.innerWidth - w - 4));
    const ny = clamp(y, 4, Math.max(4, window.innerHeight - h - 4));
    el.style.left = nx + 'px';
    el.style.top = ny + 'px';
    el.style.right = 'auto';
    el.style.bottom = 'auto';
}

function defaultPlace(el, isBall) {
    if (isBall) {
        placeWidget(el, window.innerWidth - 62, Math.round(window.innerHeight * 0.45));
    } else {
        placeWidget(el, window.innerWidth - 268, 54);
    }
}

function clampCurrent() {
    if (!els) return;
    const el = settings.collapsed ? els.ball : els.panel;
    if (!el || el.style.display === 'none') return;
    const rect = el.getBoundingClientRect();
    placeWidget(el, rect.left, rect.top);
}

function setCollapsed(collapsed) {
    if (settings.collapsed === collapsed &&
        (collapsed ? els.panel.style.display === 'none' : els.panel.style.display !== 'none')) {
        return;
    }
    if (collapsed) {
        const rect = els.panel.getBoundingClientRect();
        els.panel.style.display = 'none';
        els.ball.style.display = 'flex';
        placeWidget(els.ball, rect.left, rect.top);
        settings.pos = { x: els.ball.offsetLeft, y: els.ball.offsetTop };
    } else {
        const rect = els.ball.getBoundingClientRect();
        els.ball.style.display = 'none';
        els.panel.style.display = 'flex';
        placeWidget(els.panel, rect.left, rect.top);
        settings.pos = { x: els.panel.offsetLeft, y: els.panel.offsetTop };
        refresh(true);
    }
    settings.collapsed = collapsed;
    persist();
    updateFooter();
}

function applyInitialState() {
    if (settings.collapsed) {
        els.panel.style.display = 'none';
        els.ball.style.display = 'flex';
        if (settings.pos) placeWidget(els.ball, settings.pos.x, settings.pos.y);
        else defaultPlace(els.ball, true);
    } else {
        els.ball.style.display = 'none';
        els.panel.style.display = 'flex';
        if (settings.pos) placeWidget(els.panel, settings.pos.x, settings.pos.y);
        else defaultPlace(els.panel, false);
    }
    updateTabs();
}

function updateTabs() {
    if (!els) return;
    els.tabs.forEach(function (tab) {
        tab.classList.toggle('active', tab.dataset.scope === settings.scope);
    });
}

function renderWaiting(text) {
    if (!els) return;
    els.total.textContent = '\u2014';
    els.sub.textContent = '';
    els.ballNum.textContent = '\u2014';
    const sig = 'wait:' + text;
    if (els.list.dataset.sig === sig) return;
    els.list.dataset.sig = sig;
    els.list.textContent = '';
    const empty = document.createElement('div');
    empty.className = 'bch-empty';
    empty.textContent = text;
    els.list.appendChild(empty);
}

function renderCounts(snapshot, result) {
    if (!els) return;
    const entries = [];
    const cache = new Map();
    result.map.forEach(function (count, key) {
        const idx = key.indexOf('|');
        const tool = key.slice(0, idx);
        const classId = key.slice(idx + 1);
        const infoKey = tool + '|' + classId;
        let info = cache.get(infoKey);
        if (!info) {
            info = classInfo(snapshot, tool, classId);
            cache.set(infoKey, info);
        }
        entries.push({ name: info.name, color: info.color, tool: info.tool, id: info.id, count: count });
    });
    entries.sort(function (a, b) {
        return b.count - a.count || a.name.localeCompare(b.name, 'zh-CN');
    });

    els.total.textContent = formatNum(result.total);
    els.sub.textContent = settings.scope === 'frame'
        ? (snapshot.curIndex >= 0
            ? '第 ' + (snapshot.curIndex + 1) + '/' + snapshot.frames.length + ' 帧'
            : '共 ' + snapshot.frames.length + ' 帧')
        : snapshot.frames.length + ' 帧';
    els.ballNum.textContent = compactNum(result.total);

    const sig = entries.map(function (e) {
        return e.tool + '|' + e.id + '|' + e.name + '|' + e.color + '|' + e.count;
    }).join(',');
    if (els.list.dataset.sig !== sig) {
        els.list.dataset.sig = sig;
        els.list.textContent = '';
        if (!entries.length) {
            const empty = document.createElement('div');
            empty.className = 'bch-empty';
            empty.textContent = '暂无标注';
            els.list.appendChild(empty);
        } else {
            const frag = document.createDocumentFragment();
            entries.forEach(function (entry) {
                const row = document.createElement('div');
                row.className = 'bch-row';
                row.title = entry.tool + ' · 类别 ' + entry.id;
                const dot = document.createElement('span');
                dot.className = 'bch-dot';
                dot.style.background = entry.color;
                const name = document.createElement('span');
                name.className = 'bch-name';
                name.textContent = entry.name;
                const count = document.createElement('span');
                count.className = 'bch-count';
                count.textContent = formatNum(entry.count);
                row.appendChild(dot);
                row.appendChild(name);
                row.appendChild(count);
                frag.appendChild(row);
            });
            els.list.appendChild(frag);
        }
    }
    updateTabs();
}

function updateFooter() {
    if (!els) return;
    const now = Date.now();
    const inst = getInstance();
    const status = getStatusState();
    let text = '';
    let dot = '#2ecc71';
    let saveDisabled = false;

    if (flash.until > now && flash.text) {
        text = flash.text;
        dot = flash.kind === 'warn' ? '#f0a04b' : flash.kind === 'error' ? '#e74c3c' : '#2ecc71';
    } else if (!inst) {
        text = '等待平台数据…';
        dot = '#666';
        saveDisabled = true;
    } else if (!inst.canEdit) {
        text = '只读账号 · 不自动保存';
        dot = '#f0a04b';
        saveDisabled = true;
    } else if (status && status.multiFrame) {
        text = '多帧合并中 · 暂停保存';
        dot = '#f0a04b';
        saveDisabled = true;
    } else if (!settings.autoSave) {
        text = '自动保存已关闭';
        dot = '#666';
    } else {
        const left = Math.max(0, Math.ceil((nextSaveAt - now) / 1000));
        text = '自动保存 · ' + formatDuration(left) + ' 后';
        dot = '#2ecc71';
    }

    els.footText.textContent = text;
    els.footText.title = text;
    els.footDot.style.background = dot;
    els.save.disabled = saveDisabled;
    els.auto.checked = settings.autoSave && !!inst && !!inst.canEdit;
    els.auto.disabled = !inst || !inst.canEdit;
    els.ballDot.style.background = settings.autoSave && !!inst && !!inst.canEdit ? '#2ecc71' : '#666';
}

function refresh(force) {
    if (!els) return;
    let snapshot;
    try {
        snapshot = getSnapshot();
    } catch (e) {
        snapshot = null;
    }
    if (!snapshot) {
        renderWaiting('等待平台数据…');
        return;
    }
    if (!snapshot.frames.length) {
        renderWaiting('正在加载任务…');
        return;
    }

    const key = settings.scope === 'frame'
        ? 'f|' + snapshot.curId + '|' + snapshot.versions + '|' + snapshot.frames.length + '|' + snapshot.taskKey
        : 'a|' + snapshot.versions + '|' + snapshot.frames.length + '|' + snapshot.taskKey + '|' + snapshot.frameSetKey;
    if (!force && key === refreshKey) return;
    refreshKey = key;

    try {
        const result = settings.scope === 'frame' ? countFrame(snapshot) : countAll(snapshot);
        renderCounts(snapshot, result);
    } catch (e) {
        console.error('[框数助手] 统计失败', e);
        renderWaiting('统计失败，请刷新页面');
    }
}

// ========== 初始化 ==========
function init() {
    if (booted) return;
    booted = true;
    if (!buildUI()) return;
    bindUI();
    setupMessageObserver();
    applyInitialState();
    els.interval.value = settings.interval;
    els.unit.value = settings.unit;
    els.auto.checked = settings.autoSave;
    scheduleAutoSave();
    refresh(true);
    updateFooter();

    setInterval(function () {
        if (document.hidden) return;
        checkPendingSave();
        refresh(false);
        updateFooter();
    }, 1000);
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function () {
        setTimeout(init, 300);
    });
} else {
    setTimeout(init, 300);
}
})();