// ==UserScript==
// @name         Show Dimensions and Metadata (instant)
// @namespace    http://tampermonkey.net/
// @version      2.2
// @description  Мгновенно показывает размеры и данные Gender/Category в левой рамке
// @match        *://*/Admin/CompareBag/EditBag/*
// @match        *://*/Admin/MyCurrentTask/UpdateProduct*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const panelId = 'custom-info-panel';

    function createPanel() {
        if (document.getElementById(panelId)) return;

        const panel = document.createElement('div');
        panel.id = panelId;
        panel.style.position = 'absolute';
        panel.style.top = '90px';
        panel.style.left = '20px';
        panel.style.width = '340px';
        panel.style.minHeight = '150px';
        panel.style.background = '#fff';
        panel.style.border = '2px solid #444';
        panel.style.padding = '10px';
        panel.style.fontSize = '14px';
        panel.style.zIndex = '9999';
        panel.style.whiteSpace = 'pre-wrap';
        panel.style.lineHeight = '1.4';
        document.body.appendChild(panel);
        console.log('Panel created');
    }

    function extractFromDetails() {
        const text = document.body.textContent || '';
        const genderMatch = text.match(/Gender:\s*(Female|Male|Women)/i);
        const categoryMatch = text.match(/category:\s*(.+?)(?=\s|$)/i);
        return {
            gender: genderMatch ? genderMatch[1].trim() : 'N/A',
            category: categoryMatch ? categoryMatch[1].trim() : 'N/A'
        };
    }

    function getDimensionsFromUser() {
        const fields = ["Width", "Height", "Depth", "Length"];
        const values = {};

        fields.forEach(field => {
            const input = [...document.querySelectorAll('td')]
                .find(td => td.textContent.trim() === field)?.nextElementSibling?.querySelector('input');
            values[field.toLowerCase()] = input?.value?.trim() || null;
            if (!input) console.log(`Input for ${field} not found or blocked`);
        });

        console.log('Dimensions fetched:', values);
        return values;
    }

    function renderPanel() {
        createPanel();

        const { gender, category } = extractFromDetails();
        const dims = getDimensionsFromUser();

        let html = '';
        if (category !== 'N/A') html += `🔵 <b>Category:</b> ${category}\n`;
        if (gender !== 'N/A') html += `🟣 <b>Gender:</b> ${gender}\n`;

        if (dims.width) html += `\n📏 <b>Width:</b> ${dims.width}`;
        if (dims.height) html += `\n📐 <b>Height:</b> ${dims.height}`;
        if (dims.depth) html += `\n📦 <b>Depth:</b> ${dims.depth}`;
        if (dims.length) html += `\n📏 <b>Length:</b> ${dims.length}`;

        if (!dims.width && !dims.height && !dims.depth && !dims.length && category === 'N/A' && gender === 'N/A') {
            html += '⚠️ No data found';
        }

        document.getElementById(panelId).innerHTML = html;
        console.log('Panel rendered with:', html);
    }

    function setupPolling() {
        let lastUserDims = [];
        setInterval(() => {
            const userDims = getDimensionsFromUser();
            const newDims = JSON.stringify(userDims);
            if (newDims !== JSON.stringify(lastUserDims)) {
                lastUserDims = userDims;
                renderPanel();
            }
        }, 200); // Зменшено до 200 мс
    }

    function initScript() {
        console.log('Initializing script');
        renderPanel();
        setupPolling();
    }

    window.addEventListener('load', initScript);
})();

почему-то не отображается панель сбоку