// ==UserScript==
// @name         IEEE Xplore界面优化窄屏观看 (摘要固定150% + 白底边框阴影)
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  摘要固定150%、白底、带边框阴影；全文可通过滑块调整(100%-200%)。<1100px生效。自动修复display:inline问题。
// @author       You
// @match        https://ieeexplore.ieee.org/abstract/document/*
// @match        https://ieeexplore.ieee.org/document/*
//@icon https://ts4.tc.mm.bing.net/th/id/ODF.st2M3UrP2epEwu9ow2yxyA?w=32&h=32&qlt=90&pcl=fffffc&o=6&pid=1.2
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    // 全文相关选择器（受滑块控制）
    const FULL_TEXT_SELECTORS = [
        'xpl-document-full-text',
        'section[_ngcontent-ng-c630968424]',   // 内部 section
        '#toc-wrapper',
        '.trail-content > div:first-child'
    ];

    // 摘要选择器（固定 150% + 样式美化）
    const ABSTRACT_SELECTOR = 'xpl-document-abstract';

    const MAX_WIDTH_TRIGGER = 1100;
    const DEFAULT_SCALE = 130;   // 全文默认比例
    const MIN_SCALE = 100;
    const MAX_SCALE = 200;
    const ABSTRACT_FIXED_SCALE = 150; // 摘要固定比例

    let currentScale = DEFAULT_SCALE;

    function loadSavedScale() {
        const saved = localStorage.getItem('ieee_width_scale');
        if (saved) {
            const num = parseInt(saved, 10);
            if (!isNaN(num) && num >= MIN_SCALE && num <= MAX_SCALE) {
                currentScale = num;
            }
        }
    }

    function saveScale(scale) {
        localStorage.setItem('ieee_width_scale', scale.toString());
    }

    // 应用全文宽度（受滑块控制）
    function applyFullTextWidth(scale) {
        if (window.innerWidth >= MAX_WIDTH_TRIGGER) return;

        FULL_TEXT_SELECTORS.forEach(selector => {
            const elements = document.querySelectorAll(selector);
            elements.forEach(el => {
                el.style.setProperty('width', `${scale}%`, 'important');
                el.style.setProperty('max-width', 'none', 'important');
                el.style.setProperty('display', 'block', 'important');
            });
        });
    }

    // 应用摘要宽度 + 样式（固定 150% + 白底 + 边框 + 阴影）
    function applyAbstractStyle() {
        if (window.innerWidth >= MAX_WIDTH_TRIGGER) return;

        const abstractEl = document.querySelector(ABSTRACT_SELECTOR);
        if (abstractEl) {
            abstractEl.style.setProperty('width', `${ABSTRACT_FIXED_SCALE}%`, 'important');
            abstractEl.style.setProperty('max-width', 'none', 'important');
            abstractEl.style.setProperty('display', 'block', 'important');

            // 🎨 新增：背景色、边框、阴影
            abstractEl.style.setProperty('background-color', '#ffffff', 'important');
            abstractEl.style.setProperty('border', '1px solid #ddd', 'important');
            abstractEl.style.setProperty('box-shadow', '0 2px 8px rgba(0,0,0,0.1)', 'important');
            abstractEl.style.setProperty('padding', '16px', 'important'); // 可选：增加内边距更美观
            abstractEl.style.setProperty('border-radius', '8px', 'important'); // 可选：圆角
        }
    }

    // 重置全文样式
    function resetFullTextWidth() {
        FULL_TEXT_SELECTORS.forEach(selector => {
            const elements = document.querySelectorAll(selector);
            elements.forEach(el => {
                el.style.removeProperty('width');
                el.style.removeProperty('max-width');
                el.style.removeProperty('display');
            });
        });
    }

    // 重置摘要样式（包括新增的装饰样式）
    function resetAbstractStyle() {
        const abstractEl = document.querySelector(ABSTRACT_SELECTOR);
        if (abstractEl) {
            abstractEl.style.removeProperty('width');
            abstractEl.style.removeProperty('max-width');
            abstractEl.style.removeProperty('display');
            abstractEl.style.removeProperty('background-color');
            abstractEl.style.removeProperty('border');
            abstractEl.style.removeProperty('box-shadow');
            abstractEl.style.removeProperty('padding');
            abstractEl.style.removeProperty('border-radius');
        }
    }

    // 综合应用函数
    function applyWidthFix(scale) {
        applyFullTextWidth(scale);
        applyAbstractStyle();
    }

    // 综合重置函数
    function resetWidthFix() {
        resetFullTextWidth();
        resetAbstractStyle();
    }

    function createControlPanel() {
        const panel = document.createElement('div');
        panel.id = 'ieee-width-control-panel';
        panel.style.cssText = `
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 99999;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            font-family: Arial, sans-serif;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            backdrop-filter: blur(4px);
        `;

        const label = document.createElement('label');
        label.textContent = 'Full Width:';
        label.style.fontWeight = 'bold';

        const slider = document.createElement('input');
        slider.type = 'range';
        slider.min = MIN_SCALE;
        slider.max = MAX_SCALE;
        slider.value = currentScale;
        slider.style.width = '100px';
        slider.title = `Current: ${currentScale}%`;

        const valueDisplay = document.createElement('span');
        valueDisplay.textContent = `${currentScale}%`;
        valueDisplay.style.minWidth = '40px';
        valueDisplay.style.textAlign = 'right';

        slider.addEventListener('input', () => {
            const newScale = parseInt(slider.value, 10);
            valueDisplay.textContent = `${newScale}%`;
            currentScale = newScale;
            saveScale(newScale);
            applyFullTextWidth(newScale); // ← 只更新全文，不动摘要
        });

        // 初始应用
        applyWidthFix(currentScale);

        panel.appendChild(label);
        panel.appendChild(slider);
        panel.appendChild(valueDisplay);

        document.body.appendChild(panel);

        const closeBtn = document.createElement('button');
        closeBtn.innerHTML = '&times;';
        closeBtn.style.cssText = `
            margin-left: 8px;
            background: transparent;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            opacity: 0.7;
        `;
        closeBtn.onclick = () => {
            panel.style.display = 'none';
        };
        panel.appendChild(closeBtn);

        return panel;
    }

    loadSavedScale();
    createControlPanel();

    let resizeTimer;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
            if (window.innerWidth < MAX_WIDTH_TRIGGER) {
                applyWidthFix(currentScale);
            } else {
                resetWidthFix();
            }
        }, 200);
    });

    const observer = new MutationObserver(() => {
        setTimeout(() => {
            if (window.innerWidth < MAX_WIDTH_TRIGGER) {
                applyWidthFix(currentScale);
            }
        }, 500);
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

})();