(function (global) {
    'use strict';

    /**
     * 资源面板（壳侧）：枚举在 Agent，仅订阅可见时刷新。
     * @constructor
     */
    function AssetsPanel() {
        this.el = null;
        this._bridge = null;
        this._rows = [];
        this._bundles = [];
        this._bundleFilter = '';
        this._typeFilter = '';
        this._query = '';
        this._sort = 'mem';
        this._selected = null;
    }

    AssetsPanel.prototype.setBridge = function (bridge) {
        this._bridge = bridge;
    };

    AssetsPanel.prototype.mount = function () {
        var self = this;
        var root = document.createElement('div');
        root.className = 'pw-panel-inner';
        root.style.height = '100%';
        root.style.display = 'flex';
        root.style.flexDirection = 'column';
        root.innerHTML =
            '<div class="pw-panel-head">' +
            '<span class="pw-panel-title">资源</span>' +
            '<div class="pw-panel-tools">' +
            '<select id="pw-asset-bundle" class="pw-select"><option value="">分包：全部</option></select>' +
            '<select id="pw-asset-type" class="pw-select">' +
            '<option value="">类型：全部</option>' +
            '<option value="Texture2D">纹理 Texture2D</option>' +
            '<option value="SpriteFrame">图集帧 SpriteFrame</option>' +
            '<option value="Prefab">预制体 Prefab</option>' +
            '<option value="sp.SkeletonData">Spine</option>' +
            '<option value="AudioClip">音频</option>' +
            '<option value="JsonAsset">JSON</option>' +
            '<option value="Other">其他</option>' +
            '</select>' +
            '<input id="pw-asset-q" class="pw-input" placeholder="搜索" style="width:90px" />' +
            '<select id="pw-asset-sort" class="pw-select">' +
            '<option value="mem">按内存↓</option>' +
            '<option value="name">按名称</option>' +
            '<option value="ref">按引用↓</option>' +
            '<option value="type">按类型</option>' +
            '</select>' +
            '<button type="button" id="pw-asset-refresh" class="pw-btn">刷新</button>' +
            '</div></div>' +
            '<div class="pw-panel-body">' +
            '<div id="pw-asset-summary" class="pw-summary"></div>' +
            '<div id="pw-asset-bundles" class="pw-muted" style="margin-bottom:6px"></div>' +
            '<div style="display:flex;gap:8px;min-height:0;flex:1">' +
            '<div style="flex:1;overflow:auto;min-width:0"><table class="pw-table" id="pw-asset-table"><thead><tr>' +
            '<th>名称</th><th>类型</th><th>分包</th><th>内存</th><th>引用</th>' +
            '</tr></thead><tbody></tbody></table></div>' +
            '<div style="width:180px;flex-shrink:0"><div class="pw-muted">预览</div><div class="pw-preview-box" id="pw-asset-preview"></div><div id="pw-asset-meta" class="pw-muted" style="margin-top:4px"></div></div>' +
            '</div></div>';
        this.el = root;
        root.querySelector('#pw-asset-bundle').addEventListener('change', function (ev) {
            self._bundleFilter = ev.target.value;
            self.renderList();
        });
        root.querySelector('#pw-asset-type').addEventListener('change', function (ev) {
            self._typeFilter = ev.target.value;
            self.renderList();
        });
        root.querySelector('#pw-asset-q').addEventListener('input', function (ev) {
            self._query = (ev.target.value || '').toLowerCase();
            self.renderList();
        });
        root.querySelector('#pw-asset-sort').addEventListener('change', function (ev) {
            self._sort = ev.target.value;
            self.renderList();
        });
        root.querySelector('#pw-asset-refresh').addEventListener('click', function () {
            if (!self._bridge) return;
            self._bridge.call('assets.list').then(function (d) { self.applyData(d); });
        });
        return root;
    };

    AssetsPanel.prototype.applyData = function (data) {
        this._rows = (data && data.rows) || [];
        this._bundles = (data && data.bundles) || [];
        var sel = this.el && this.el.querySelector('#pw-asset-bundle');
        if (sel) {
            var cur = this._bundleFilter;
            var html = '<option value="">分包：全部</option>';
            for (var i = 0; i < this._bundles.length; i++) {
                var b = this._bundles[i];
                if (!b) continue;
                html += '<option value="' + escapeAttr(b) + '"' + (b === cur ? ' selected' : '') + '>' + escapeHtml(b) + '</option>';
            }
            sel.innerHTML = html;
        }
        this.renderList();
    };

    AssetsPanel.prototype.renderList = function () {
        if (!this.el) return;
        var rows = this._rows.slice();
        var q = this._query;
        var bf = this._bundleFilter;
        var tf = this._typeFilter;
        rows = rows.filter(function (r) {
            if (bf && r.bundle !== bf) return false;
            if (tf && tf !== 'Other' && r.type !== tf) return false;
            if (tf === 'Other' && /Texture2D|SpriteFrame|Prefab|SkeletonData|AudioClip|JsonAsset/.test(r.type)) return false;
            if (q && String(r.name).toLowerCase().indexOf(q) < 0 && String(r.type).toLowerCase().indexOf(q) < 0) return false;
            return true;
        });
        var sort = this._sort;
        rows.sort(function (a, b) {
            if (sort === 'name') return String(a.name).localeCompare(String(b.name));
            if (sort === 'type') return String(a.type).localeCompare(String(b.type));
            if (sort === 'ref') return (b.ref || 0) - (a.ref || 0);
            return (b.mem || 0) - (a.mem || 0);
        });

        var memTotal = 0;
        for (var i = 0; i < this._rows.length; i++) memTotal += this._rows[i].mem || 0;
        var sum = this.el.querySelector('#pw-asset-summary');
        if (sum) {
            sum.innerHTML = '<span>共 <b>' + this._rows.length + '</b> 资源</span><span>筛选 <b>' + rows.length +
                '</b></span><span>估算纹理 <b>' + (Math.round(memTotal * 100) / 100) + ' MB</b></span>';
        }
        var bundlesEl = this.el.querySelector('#pw-asset-bundles');
        if (bundlesEl) bundlesEl.textContent = this._bundles.length ? ('分包：' + this._bundles.join(', ')) : '';

        var tbody = this.el.querySelector('#pw-asset-table tbody');
        if (!tbody) return;
        var html = '';
        for (var j = 0; j < Math.min(rows.length, 500); j++) {
            var r = rows[j];
            html += '<tr data-i="' + j + '"><td>' + escapeHtml(r.name) + '</td><td>' + escapeHtml(r.type) +
                '</td><td>' + escapeHtml(r.bundle || '-') + '</td><td>' + (r.mem ? r.mem.toFixed(2) + 'MB' : 'n/a') +
                '</td><td>' + (r.ref || 0) + '</td></tr>';
        }
        tbody.innerHTML = html || '<tr><td colspan="5" class="pw-muted">无</td></tr>';
    };

    function escapeHtml(s) {
        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }
    function escapeAttr(s) {
        return escapeHtml(s).replace(/"/g, '&quot;');
    }

    global.PWAssetsPanel = AssetsPanel;
})(window);