// ==UserScript==
// @name         TextClarity 清晰文本助手 Pro
// @namespace    灵感来源于https://github.com/syhyz1990/mactype
// @version      2.0.0
// @description  浏览器文字渲染深度优化，支持四种增强模式，特别优化 Edge/Chrome 显示效果
// @author       imiaox
// @license      MIT
// @match        *://*/*
// @run-at       document-start
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function () {
    'use strict';

    // ─── 常量 ───────────────────────────────────────────
    const VERSION = '2.0.0';
    const STORE_KEY = 'tc_pro_config';
    const STYLE_ID = 'tc-pro-text-styles';
    const PANEL_STYLE_ID = 'tc-pro-panel-styles';
    const PANEL_ID = 'tc-pro-panel';

    const MODES = {
        shadow: {
            label: '阴影增强',
            desc: '通过微偏移阴影提升文字边缘锐度，兼容性最好，推荐日常使用'
        },
        stroke: {
            label: '描边增强',
            desc: '通过细描边模拟字重增加，适合纤细字体或小字号场景'
        },
        combined: {
            label: '混合增强',
            desc: '阴影 + 描边同时作用，效果最强，适合高分屏或追求极致清晰'
        },
        weight: {
            label: '字重提升',
            desc: '直接增加 font-weight，最自然但可能影响布局'
        }
    };

    const DEFAULTS = {
        mode: 'shadow',
        intensity: 0.35,
        weightBoost: 80,
        letterSpacing: 0,
        smoothing: true,
        enableKerning: true,
        whitelist: []
    };

    // ─── 主类 ────────────────────────────────────────────
    class TextClarity {
        constructor() {
            this.cfg = this._load();
            this._rafId = 0;
            this._panelOpen = false;
            this._init();
        }

        // ── 配置 ──
        _load() {
            const raw = GM_getValue(STORE_KEY, null);
            return raw ? { ...DEFAULTS, ...raw, whitelist: raw.whitelist || [] } : { ...DEFAULTS };
        }

        _save() {
            GM_setValue(STORE_KEY, this.cfg);
        }

        _isEnabled() {
            return !this.cfg.whitelist.includes(location.host);
        }

        // ── 初始化 ──
        _init() {
            // 尽早注入样式
            if (this._isEnabled()) {
                this._injectTextCSS();
            }
            this._startObserver();
            this._registerMenu();
        }

        // ── CSS 生成引擎 ──
        _buildCSS() {
            const { mode, intensity, weightBoost, letterSpacing, smoothing, enableKerning } = this.cfg;
            const i = intensity;

            // 根据模式生成核心效果
            let effectCSS = '';
            switch (mode) {
                case 'shadow':
                    // 两层微阴影：外层提锐度，内层稳定边缘
                    effectCSS = `
                        text-shadow:
                            0 0 ${this._p(0.4 + i * 1.2)} currentColor,
                            0 0 ${this._p(i * 0.3)} currentColor;`;
                    break;

                case 'stroke':
                    effectCSS = `
                        -webkit-text-stroke: ${this._p(0.08 + i * 0.45)} currentColor;
                        paint-order: stroke fill;`;
                    break;

                case 'combined':
                    effectCSS = `
                        -webkit-text-stroke: ${this._p(0.05 + i * 0.2)} currentColor;
                        paint-order: stroke fill;
                        text-shadow:
                            0 0 ${this._p(0.3 + i * 0.6)} currentColor;`;
                    break;

                case 'weight':
                    // 纯字重模式不使用文本特效
                    break;
            }

            // 字重加粗
            const weightCSS = weightBoost > 0
                ? `font-weight: ${400 + weightBoost} !important;`
                : '';

            // 字间距
            const spacingCSS = letterSpacing > 0
                ? `letter-spacing: ${letterSpacing}em;`
                : '';

            // 抗锯齿策略
            const smoothingCSS = smoothing
                ? `-webkit-font-smoothing: antialiased;
                   -moz-osx-font-smoothing: grayscale;`
                : `-webkit-font-smoothing: subpixel-antialiased;`;

            // OpenType 排版特性
            const featureCSS = enableKerning
                ? `font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
                   font-variant-ligatures: common-ligatures contextual;
                   font-kerning: normal;`
                : '';

            return `/* TextClarity Pro v${VERSION} */
*:not(pre):not(code):not(kbd):not(samp):not(var):not(math):not(script):not(style):not(iframe):not(video):not(canvas):not(svg):not(img) {
    text-rendering: optimizeLegibility;
    font-synthesis: none;
    text-size-adjust: 100%;
    ${smoothingCSS}
    ${featureCSS}
    ${effectCSS}
    ${weightCSS}
    ${spacingCSS}
}
::selection {
    background: rgba(51, 143, 255, 0.3) !important;
}
::target-text {
    background: rgba(255, 213, 0, 0.35);
}`;
        }

        _p(v) {
            // 精简到两位小数，去除尾零
            return `${Math.round(v * 100) / 100}px`;
        }

        // ── 样式注入（复用 <style> 节点）──
        _injectTextCSS() {
            let el = document.getElementById(STYLE_ID);
            if (!el) {
                el = document.createElement('style');
                el.id = STYLE_ID;
                const target = document.head || document.documentElement;
                if (target) target.insertBefore(el, target.firstChild);
            }
            el.textContent = this._buildCSS();
        }

        _removeTextCSS() {
            document.getElementById(STYLE_ID)?.remove();
        }

        // ── DOM 观察器（rAF 合并，无丢失）──
        _startObserver() {
            let pending = false;

            const observer = new MutationObserver(() => {
                if (pending) return;
                pending = true;
                requestAnimationFrame(() => {
                    pending = false;
                    // 被页面脚本移除后自动恢复
                    if (this._isEnabled() && !document.getElementById(STYLE_ID)) {
                        this._injectTextCSS();
                    }
                });
            });

            const attach = () => {
                observer.observe(document.documentElement, {
                    childList: true,
                    subtree: true
                });
            };

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', attach, { once: true });
            } else {
                attach();
            }
        }

        // ── GM 菜单 ──
        _registerMenu() {
            const host = location.host;
            const on = this._isEnabled();

            GM_registerMenuCommand(
                `${on ? '✅' : '❌'} 当前网站: ${host}`,
                () => this._toggleSite()
            );
            GM_registerMenuCommand('⚙️ 打开设置面板', () => this.showPanel());
        }

        _toggleSite() {
            const host = location.host;
            const idx = this.cfg.whitelist.indexOf(host);
            if (idx > -1) this.cfg.whitelist.splice(idx, 1);
            else this.cfg.whitelist.push(host);
            this._save();
            location.reload();
        }

        // ═══════════════════════════════════════════════════
        //  设置面板（纯原生，无外部依赖）
        // ═══════════════════════════════════════════════════

        showPanel() {
            if (this._panelOpen) return;
            this._panelOpen = true;
            this._injectPanelCSS();

            const panel = document.createElement('div');
            panel.id = PANEL_ID;
            panel.innerHTML = this._panelHTML();
            document.body.appendChild(panel);

            requestAnimationFrame(() => panel.classList.add('tc-open'));
            this._bindPanel(panel);
        }

        _panelHTML() {
            const c = this.cfg;
            const modeBtns = Object.entries(MODES).map(
                ([k, v]) => `<button class="tc-mbtn${c.mode === k ? ' tc-on' : ''}" data-m="${k}">${v.label}</button>`
            ).join('');

            return `
            <div class="tc-bg"></div>
            <div class="tc-card">
                <div class="tc-head">
                    <div class="tc-title">TextClarity <span class="tc-ver">v${VERSION}</span></div>
                    <button class="tc-x" aria-label="关闭">&times;</button>
                </div>
                <div class="tc-scroll">
                    <div class="tc-sec">
                        <div class="tc-lbl">渲染模式</div>
                        <div class="tc-modes">${modeBtns}</div>
                        <div class="tc-desc" id="tcDesc">${MODES[c.mode].desc}</div>
                    </div>
                    <div class="tc-sec">
                        <div class="tc-lbl">增强强度 <b id="tcV_intensity">${c.intensity.toFixed(2)}</b></div>
                        <input type="range" class="tc-rng" id="tcR_intensity" min="0" max="1" step="0.05" value="${c.intensity}">
                    </div>
                    <div class="tc-sec">
                        <div class="tc-lbl">字重加粗 <b id="tcV_weight">${c.weightBoost}</b></div>
                        <input type="range" class="tc-rng" id="tcR_weight" min="0" max="300" step="10" value="${c.weightBoost}">
                    </div>
                    <div class="tc-sec">
                        <div class="tc-lbl">字间距 <b id="tcV_spacing">${c.letterSpacing.toFixed(3)}</b></div>
                        <input type="range" class="tc-rng" id="tcR_spacing" min="0" max="0.1" step="0.005" value="${c.letterSpacing}">
                    </div>
                    <div class="tc-sec tc-checks">
                        <label class="tc-ck"><input type="checkbox" id="tcC_smooth" ${c.smoothing ? 'checked' : ''}><span>强制灰度抗锯齿（消除 ClearType 彩边）</span></label>
                        <label class="tc-ck"><input type="checkbox" id="tcC_kern" ${c.enableKerning ? 'checked' : ''}><span>启用 OpenType 排版特性（字距、连字）</span></label>
                    </div>
                </div>
                <div class="tc-foot">
                    <button class="tc-btn tc-btn2" id="tcReset">还原默认</button>
                    <button class="tc-btn tc-btn1" id="tcSave">保存设置</button>
                </div>
            </div>`;
        }

        _bindPanel(panel) {
            const $ = (s) => panel.querySelector(s);
            const self = this;

            function close() {
                panel.classList.remove('tc-open');
                panel.addEventListener('transitionend', () => panel.remove(), { once: true });
                self._panelOpen = false;
                // 回滚未保存的实时预览
                if (self._isEnabled()) self._injectTextCSS();
            }

            // 关闭
            $('.tc-x').onclick = close;
            $('.tc-bg').onclick = close;
            const onEsc = (e) => { if (e.key === 'Escape') { close(); document.removeEventListener('keydown', onEsc); } };
            document.addEventListener('keydown', onEsc);

            // 模式切换
            panel.querySelectorAll('.tc-mbtn').forEach((btn) => {
                btn.onclick = () => {
                    panel.querySelectorAll('.tc-mbtn').forEach((b) => b.classList.remove('tc-on'));
                    btn.classList.add('tc-on');
                    self.cfg.mode = btn.dataset.m;
                    $('#tcDesc').textContent = MODES[btn.dataset.m].desc;
                    self._livePreview();
                };
            });

            // 滑杆实时预览
            const bind = (id, key, fmt) => {
                const el = $(`#tcR_${id}`);
                const lbl = $(`#tcV_${id}`);
                el.oninput = () => {
                    self.cfg[key] = parseFloat(el.value);
                    lbl.textContent = fmt ? fmt(self.cfg[key]) : el.value;
                    self._livePreview();
                };
            };
            bind('intensity', 'intensity', (v) => v.toFixed(2));
            bind('weight', 'weightBoost');
            bind('spacing', 'letterSpacing', (v) => v.toFixed(3));

            // 复选框
            $('#tcC_smooth').onchange = (e) => { self.cfg.smoothing = e.target.checked; self._livePreview(); };
            $('#tcC_kern').onchange = (e) => { self.cfg.enableKerning = e.target.checked; self._livePreview(); };

            // 保存
            $('#tcSave').onclick = () => { self._save(); close(); };

            // 还原
            $('#tcReset').onclick = () => {
                self.cfg = { ...DEFAULTS };
                self._save();
                close();
                setTimeout(() => self.showPanel(), 120);
            };
        }

        _livePreview() {
            cancelAnimationFrame(this._rafId);
            this._rafId = requestAnimationFrame(() => this._injectTextCSS());
        }

        // ── 面板样式（与文本样式隔离，只注入一次）──
        _injectPanelCSS() {
            if (document.getElementById(PANEL_STYLE_ID)) return;

            const css = `
/* ─── TextClarity Panel ─── */
#tc-pro-panel {
    position: fixed; inset: 0; z-index: 2147483647;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .25s ease;
    font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
    font-size: 14px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
#tc-pro-panel.tc-open { opacity: 1; }
.tc-bg {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.15);         /* 仅保留薄暗遮罩 */
}
.tc-card {
    position: relative; width: 440px; max-height: 85vh;
    background: #1a1b26; color: #c0caf5;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
    display: flex; flex-direction: column;
    transform: translateY(12px) scale(.97);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.tc-open .tc-card { transform: none; }
.tc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.tc-title {
    font-size: 16px; font-weight: 600; color: #e0e4ff;
    letter-spacing: .01em;
}
.tc-ver {
    font-size: 11px; font-weight: 400; color: #565c82;
    margin-left: 6px;
}
.tc-x {
    width: 28px; height: 28px; border: none; background: none;
    color: #565c82; font-size: 20px; cursor: pointer;
    border-radius: 6px; transition: all .15s;
    display: flex; align-items: center; justify-content: center;
}
.tc-x:hover { background: rgba(255,255,255,.08); color: #c0caf5; }
.tc-scroll { padding: 18px 22px; overflow-y: auto; flex: 1; }
.tc-sec { margin-bottom: 18px; }
.tc-sec:last-child { margin-bottom: 0; }
.tc-lbl {
    font-size: 12px; font-weight: 500; color: #7aa2f7;
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
}
.tc-lbl b {
    margin-left: auto; font-weight: 600; color: #c0caf5;
    font-size: 13px; font-variant-numeric: tabular-nums;
}
.tc-modes {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    margin-bottom: 8px;
}
.tc-mbtn {
    padding: 7px 4px; border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03); color: #9aa5ce;
    border-radius: 8px; cursor: pointer; font-size: 12px;
    transition: all .15s; font-family: inherit;
}
.tc-mbtn:hover { background: rgba(255,255,255,.07); color: #c0caf5; }
.tc-mbtn.tc-on {
    background: rgba(122,162,247,.15); color: #7aa2f7;
    border-color: rgba(122,162,247,.3);
    font-weight: 600;
}
.tc-desc {
    font-size: 11.5px; color: #565c82; line-height: 1.5;
    padding: 0 2px;
}
.tc-rng {
    width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
    background: rgba(255,255,255,.08); border-radius: 3px;
    outline: none; cursor: pointer;
}
.tc-rng::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: #7aa2f7; border: 2px solid #1a1b26;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    transition: transform .1s;
}
.tc-rng::-webkit-slider-thumb:hover { transform: scale(1.15); }
.tc-checks { display: flex; flex-direction: column; gap: 10px; }
.tc-ck {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; font-size: 13px; color: #9aa5ce;
}
.tc-ck input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: #7aa2f7;
    cursor: pointer; flex-shrink: 0;
}
.tc-foot {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 14px 22px 18px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.tc-btn {
    padding: 8px 20px; border: none; border-radius: 8px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    font-family: inherit; transition: all .15s;
}
.tc-btn1 { background: #7aa2f7; color: #1a1b26; }
.tc-btn1:hover { background: #89b4fa; }
.tc-btn2 { background: rgba(255,255,255,.06); color: #9aa5ce; }
.tc-btn2:hover { background: rgba(255,255,255,.1); color: #c0caf5; }
`;

            const style = document.createElement('style');
            style.id = PANEL_STYLE_ID;
            style.textContent = css;
            (document.head || document.documentElement).appendChild(style);
        }
    }

    // ─── 启动 ────────────────────────────────────────────
    const tc = new TextClarity();

    // 首次使用时自动弹出设置面板
    if (!GM_getValue(STORE_KEY)) {
        const open = () => setTimeout(() => tc.showPanel(), 600);
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', open, { once: true });
        } else if (document.body) {
            open();
        } else {
            new MutationObserver((_, obs) => {
                if (document.body) { obs.disconnect(); open(); }
            }).observe(document.documentElement, { childList: true, subtree: true });
        }
    }
})();