// ==UserScript==
// @name         Pinterest Ultra Assistant V7.0 (Ultimate User Experience)
// @namespace    http://tampermonkey.net/
// @version      7.0
// @description  Adds a prominent Close button, ESC key support, and Fit-to-Screen view. Optimized for speed and comfort.
// @author       Pi Xiao
// @match        https://*.pinterest.com/*
// @grant        GM_openInTab
// @grant        GM_setClipboard
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    const BRIDGE_PAGE = "https://meishubiji.cn/ai-processing-center/";

    // --- 1. 获取原图地址 ---
    const getOriginalUrl = (url) => url.replace(/\/(236x|474x|564x|736x|1200x)\//, '/originals/').replace(/\.webp$/, '.jpg');

    // --- 2. 彻底关闭弹窗逻辑 ---
    function destroyOverlay() {
        const overlay = document.getElementById('px-ultimate-overlay');
        if (overlay) {
            overlay.remove();
            document.body.style.overflow = 'auto'; // 恢复页面滚动
            // 移除键盘监听
            document.removeEventListener('keydown', handleEsc);
        }
    }

    // 处理 ESC 键退出
    function handleEsc(e) {
        if (e.key === "Escape") destroyOverlay();
    }

    // --- 3. 2x HD 预览逻辑 ---
    async function processAndShow(imgUrl) {
        const originalUrl = getOriginalUrl(imgUrl);
        document.body.style.overflow = 'hidden'; // 禁止背景滚动

        // 创建全屏遮罩
        const overlay = document.createElement('div');
        overlay.id = "px-ultimate-overlay";
        overlay.style = `
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.98); z-index: 2147483647;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        `;

        // 点击黑色背景区域也能关闭
        overlay.onclick = (e) => { if (e.target === overlay) destroyOverlay(); };

        overlay.innerHTML = `
            <div id="px-loading-state" style="text-align:center; color:#00ffcc;">
                <div class="px-loader-ring"></div>
                <p style="margin-top:15px; font-weight:bold; letter-spacing:1px;">ENHANCING VIEW...</p>
            </div>
            
            <!-- 醒目的右上角退出按钮 -->
            <div id="px-close-btn" style="position:fixed; top:25px; right:25px; width:50px; height:50px; background:#E60023; color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:bold; cursor:pointer; z-index:2147483647; box-shadow:0 5px 20px rgba(0,0,0,0.5);">×</div>
            
            <style>
                .px-loader-ring { width:40px; height:40px; border:4px solid rgba(0,255,204,0.1); border-top:4px solid #00ffcc; border-radius:50%; animation:pxspin 0.8s linear infinite; margin:0 auto; }
                @keyframes pxspin { to { transform:rotate(360deg); } }
                #px-view-port::-webkit-scrollbar { width:8px; height:8px; }
                #px-view-port::-webkit-scrollbar-thumb { background:#333; border-radius:10px; }
                #px-view-port img { transition: transform 0.2s ease, max-width 0.2s ease; }
            </style>
        `;
        document.body.appendChild(overlay);
        
        // 绑定关闭事件
        document.getElementById('px-close-btn').onclick = destroyOverlay;
        document.addEventListener('keydown', handleEsc);

        const img = new Image();
        img.crossOrigin = "Anonymous";
        img.src = originalUrl;

        img.onload = function() {
            const loader = document.getElementById('px-loading-state');
            if (loader) loader.remove();

            // 图片视口容器
            const viewPort = document.createElement('div');
            viewPort.id = "px-view-port";
            viewPort.style = "width:90%; height:75vh; overflow:auto; display:flex; align-items:center; justify-content:center; background:#000; border:1px solid #222; border-radius:15px;";
            
            const pImg = document.createElement('img');
            pImg.src = originalUrl;
            // 【核心改进】：默认适应屏幕，保证图是完整的
            pImg.style = "max-width:95%; max-height:95%; object-fit:contain; cursor:zoom-in; image-rendering:-webkit-optimize-contrast;";
            
            // 点击切换：完整模式 <-> 2倍大图模式
            let isZoomed = false;
            pImg.onclick = (e) => {
                e.stopPropagation();
                isZoomed = !isZoomed;
                if (isZoomed) {
                    pImg.style.maxWidth = "none";
                    pImg.style.maxHeight = "none";
                    pImg.style.width = "200%"; // 强制2倍大
                    pImg.style.cursor = "zoom-out";
                    viewPort.style.alignItems = "flex-start"; // 允许从顶部开始滚动
                } else {
                    pImg.style.maxWidth = "95%";
                    pImg.style.maxHeight = "95%";
                    pImg.style.width = "auto";
                    pImg.style.cursor = "zoom-in";
                    viewPort.style.alignItems = "center";
                }
            };

            viewPort.appendChild(pImg);

            // 下方操作区
            const actionBar = document.createElement('div');
            actionBar.style = "width:100%; padding:25px 0; text-align:center;";
            actionBar.innerHTML = `
                <p style="color:#555; font-size:12px; margin-bottom:15px;">Click image to toggle 2x Details | Press ESC to Close</p>
                <button id="px-final-cta" style="background:linear-gradient(135deg,#6a11cb 0%,#2575fc 100%); color:white; border:none; padding:15px 50px; border-radius:50px; font-size:18px; font-weight:bold; cursor:pointer; box-shadow:0 10px 30px rgba(37,117,252,0.4); transition:0.3s;">🚀 LAUNCH AI 8K ENGINE</button>
            `;

            overlay.appendChild(viewPort);
            overlay.appendChild(actionBar);

            document.getElementById('px-final-cta').onclick = () => window.open(`${BRIDGE_PAGE}?url=${encodeURIComponent(originalUrl)}`, '_blank');
        };

        img.onerror = () => {
            window.open(originalUrl, '_blank');
            destroyOverlay();
        };
    }

    // --- 4. 轻量化注入逻辑 (保持稳定) ---
    function inject() {
        const images = document.querySelectorAll('img[src*="pinimg.com"]:not(.px-done)');
        images.forEach(img => {
            if (img.width < 150) return;
            img.classList.add('px-done');

            const container = img.closest('[data-test-id="pin-visual-wrapper"]') || 
                              img.closest('[data-test-id="visual-content-container"]') || 
                              img.parentElement;

            if (container) {
                const bar = document.createElement('div');
                bar.className = 'px-helper-bar';
                bar.style = "position:absolute; top:12px; left:12px; z-index:1000; display:flex; gap:6px; opacity:0; transition:0.3s; pointer-events:auto;";
                
                const btnS = 'color:white; border:none; border-radius:4px; cursor:pointer; padding:5px 10px; font-weight:bold; font-size:10px; box-shadow:0 2px 8px rgba(0,0,0,0.5); white-space:nowrap;';
                const b1 = document.createElement('button'); b1.innerHTML = '🪄 2x HD'; b1.style = btnS + 'background:#00BFFF;';
                b1.onclick = (e) => { e.preventDefault(); e.stopPropagation(); processAndShow(img.src); };
                const b2 = document.createElement('button'); b2.innerHTML = '🖼️ Originals'; b2.style = btnS + 'background:#E60023;';
                b2.onclick = (e) => { e.preventDefault(); e.stopPropagation(); window.open(img.src.replace(/\/(236x|474x|564x|736x)\//, '/originals/'), '_blank'); };

                bar.append(b1, b2);
                container.appendChild(bar);

                container.addEventListener('mouseenter', () => {
                    if (window.getComputedStyle(container).position === 'static') container.style.position = 'relative';
                    bar.style.opacity = "1";
                });
                container.addEventListener('mouseleave', () => bar.style.opacity = "0");
            }
        });
    }

    setInterval(inject, 2500);
    const obs = new MutationObserver(inject);
    obs.observe(document.body, { childList: true, subtree: true });

})();