// ==UserScript==
// @name          Deepseek Awesome Code
// @namespace     http://tampermonkey.net/
// @version       V1.0
// @description   Transforming Deepseek Codeblock into a specialized artifact similar to Claude.
// @author        Reda Elsayed
// @match         https://chat.deepseek.com/
// @match         https://chat.deepseek.com/*
// @match         https://chat.deepseek.com/*/chat/*/*
// @icon          https://www.deepseek.com/path/to/icon.png
// @grant        GM_addStyle
// @grant        GM_notification
// @grant        GM_getResourceText
// @grant        GM_xmlhttpRequest
// @downloadURL https://update.greasyfork.icu/scripts/525195/Deepseek%20Awesome%20Code.user.js
// @updateURL https://update.greasyfork.icu/scripts/525195/Deepseek%20Awesome%20Code.meta.js
// ==/UserScript==

(function () {
    'use strict';

    const SCRIPT_ID = 'code-artifact-pro-enterprise';
    const config = {
        panelHeightRatio: 0.8, debounceTimeout: 150, maxCodeSize: 100000, // 100KB
        mobileBreakpoint: 768, zIndex: 2147483647
    };

    let artifactPanel, observer, mutationDebounce;
    const processedNodes = new WeakSet();
    const mutationQueue = [];
    const state = {
        isPanelOpen: false, lastFocusedElement: null, prismLoaded: false, isInitialized: false
    };

    // ==================== PRISM LOADER ====================
    function loadPrism() {
        return new Promise((resolve, reject) => {
            if (typeof Prism !== 'undefined') {
                state.prismLoaded = true;
                return resolve();
            }

            GM_xmlhttpRequest({
                method: 'GET',
                url: 'https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.29.0/prism.min.js',
                onload: function (response) {
                    if (response.status === 200) {
                        try {
                            eval(response.responseText);
                            state.prismLoaded = true;
                            resolve();
                        } catch (e) {
                            reject(e);
                        }
                    } else {
                        reject(new Error(`Prism load failed: ${response.status}`));
                    }
                },
                onerror: reject
            });
        });
    }

    // ==================== STYLE MANAGEMENT ====================
    function ensureStyles() {
        const existing = document.querySelector(`style[data-css="${SCRIPT_ID}"]`);
        if (existing) return;

        const style = document.createElement('style');
        style.dataset.css = SCRIPT_ID;
        style.textContent = GM_getResourceText('prismCSS') + getDynamicStyles();
        document.head.appendChild(style);
    }

    function getDynamicStyles() {
        return `
        .md-code-block-banner-wrap,
        .md-code-block-banner,
        .md-code-block-infostring,
        .md-code-block-action,
        .ds-markdown-code-copy-button {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            height: 0 !important;
            width: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            pointer-events: none !important;
        }

        .md-code-block-banner-wrap {
            position: absolute !important;
            top: -9999px !important;
            left: -9999px !important;
        }

            :root {
                --artifact-bg: #1e1e1e;
                --artifact-header: #252526;
                --artifact-accent: #007acc;
                --artifact-text: #d4d4d4;
            }

            .artifact-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0,0,0,0.95);
                z-index: ${config.zIndex};
                display: flex;
                justify-content: center;
                align-items: center;
                touch-action: none;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s ease;
            }

            .artifact-overlay.visible {
                opacity: 1;
                pointer-events: auto;
            }

            .artifact-panel {
                width: min(95%, 1200px);
                height: ${config.panelHeightRatio * 100}vh;
                background: var(--artifact-bg);
                border-radius: 12px;
                box-shadow: 0 12px 24px rgba(0,0,0,0.3);
                overflow: hidden;
                display: flex;
                flex-direction: column;
                transform: scale(0.98);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .artifact-panel.active {
                transform: scale(1);
            }

            .artifact-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 14px 20px;
                background: var(--artifact-header);
                border-bottom: 1px solid rgba(255,255,255,0.1);
            }

            .artifact-title {
                color: #fff;
                font: 500 16px/1.4 system-ui, sans-serif;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .artifact-buttons {
                display: flex;
                gap: 8px;
            }

            .artifact-btn {
                background: rgba(255,255,255,0.08);
                border: none;
                color: #fff;
                padding: 8px 16px;
                border-radius: 6px;
                font: 13px/1 system-ui, sans-serif;
                display: flex;
                align-items: center;
                gap: 6px;
                cursor: pointer;
                transition: all 0.2s ease;
                min-width: 80px;
                justify-content: center;
            }

            .artifact-btn:hover {
                background: rgba(255,255,255,0.15);
            }

            .artifact-btn:focus {
                outline: 2px solid var(--artifact-accent);
                outline-offset: 2px;
            }

            .artifact-content {
                flex: 1;
                overflow: auto;
                position: relative;
                -webkit-overflow-scrolling: touch;
            }

            .artifact-code {
                font-family: 'Fira Code', 'Consolas', monospace;
                font-size: 14px;
                tab-size: 4;
                margin: 0;
                padding: 20px !important;
                background: transparent !important;
            }

            .artifact-placeholder {
                position: relative;
                background: rgba(0,122,204,0.1);
                color: var(--artifact-accent);
                padding: 12px 20px;
                border-radius: 8px;
                border: 1px solid rgba(0,122,204,0.3);
                font: 500 14px/1.4 system-ui, sans-serif;
                cursor: pointer;
                transition: all 0.2s ease;
                margin: 8px 0;
                user-select: none;
            }

            .artifact-placeholder:hover {
                background: rgba(0,122,204,0.2);
            }

            @media (max-width: ${config.mobileBreakpoint}px) {
                .artifact-panel {
                    width: 100%;
                    height: 95vh !important;
                    border-radius: 0;
                }

                .artifact-btn {
                    padding: 12px 18px;
                    min-width: auto;
                }

                .artifact-placeholder {
                    padding: 10px 16px;
                    font-size: 13px;
                }
            }

            pre[class*="language-"] {
                background: transparent !important;
                margin: 0 !important;
            }
        `;
    }

    // ==================== CORE COMPONENTS ====================
    function createArtifactPanel() {
        const overlay = document.createElement('div');
        overlay.className = `artifact-overlay ${SCRIPT_ID}-overlay`;
        overlay.setAttribute('role', 'dialog');
        overlay.setAttribute('aria-modal', 'true');
        overlay.setAttribute('aria-labelledby', 'artifact-title');

        overlay.innerHTML = `
            <div class="artifact-panel">
                <div class="artifact-header">
                    <div class="artifact-title" id="artifact-title">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M14 3v4a1 1 0 0 0 1 1h4l-5-5m-2 14H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5v5a2 2 0 0 0 2 2h5v6a2 2 0 0 1-2 2h-4m-8-4h2m0 0h2m-2 0v-2m0 2v2"/>
                        </svg>
                        Awesome Code
                    </div>
                    <div class="artifact-buttons">
                        <button class="artifact-btn artifact-copy" aria-label="Copy code">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="9" y="9" width="13" height="13" rx="2"/>
                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                            </svg>
                            Copy
                        </button>
                        <button class="artifact-btn artifact-close" aria-label="Close viewer">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <line x1="18" y1="6" x2="6" y2="18"/>
                                <line x1="6" y1="6" x2="18" y2="18"/>
                            </svg>
                            Close
                        </button>
                    </div>
                </div>
                <div class="artifact-content">
                    <pre class="artifact-code"><code class="language-plaintext"></code></pre>
                </div>
            </div>
        `;

        return overlay;
    }

    // ==================== DOM PROCESSING ====================
    function processMutations() {
        mutationQueue.forEach(({addedNodes}) => {
            addedNodes.forEach(node => {
                if (node.nodeType === 1) {
                    if (node.matches('pre')) processPreElement(node);
                    node.querySelectorAll('pre').forEach(processPreElement);
                }
            });
        });
        mutationQueue.length = 0;
    }

    function initObserver() {
        if (observer) observer.disconnect();

        observer = new MutationObserver(mutations => {
            mutations.forEach(mutation => {
                if (mutation.addedNodes.length) {
                    mutationQueue.push(mutation);
                    clearTimeout(mutationDebounce);
                    mutationDebounce = setTimeout(processMutations, config.debounceTimeout);
                }
            });
        });

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

    function processPreElement(pre) {
        if (processedNodes.has(pre) || pre.closest(`.${SCRIPT_ID}-overlay`)) return;
        processedNodes.add(pre);

        const placeholder = document.createElement('div');
        placeholder.className = 'artifact-placeholder';
        placeholder.textContent = 'View Code';
        pre.style.display = 'none';
        pre.parentNode.insertBefore(placeholder, pre);
    }

    // ==================== PANEL CONTROLS ====================
    async function showCode(pre) {
        if (!state.prismLoaded) {
            showNotification('Syntax highlighter not ready yet. Please try again.', true);
            return;
        }

        if (pre.textContent.length > config.maxCodeSize) {
            showNotification('Code exceeds maximum display size (100KB)', true);
            return;
        }

        state.lastFocusedElement = document.activeElement;
        const codeBlock = artifactPanel.querySelector('code');
        const language = detectLanguage(pre);

        codeBlock.className = `language-${language}`;
        codeBlock.textContent = pre.textContent.trim();

        try {
            Prism.highlightElement(codeBlock);
        } catch (error) {
            codeBlock.className = 'language-plaintext';
            console.warn('Prism highlighting failed:', error);
        }

        showPanel();
    }

    function showPanel() {
        artifactPanel.classList.add('visible');
        artifactPanel.querySelector('.artifact-panel').classList.add('active');
        document.documentElement.style.overflow = 'hidden';
        document.addEventListener('keydown', handleKeyPress);
        adjustPanelHeight();
        state.isPanelOpen = true;
    }

    function hidePanel() {
        artifactPanel.classList.remove('visible');
        artifactPanel.querySelector('.artifact-panel').classList.remove('active');
        document.documentElement.style.overflow = '';
        document.removeEventListener('keydown', handleKeyPress);
        artifactPanel.querySelector('code').textContent = '';

        if (state.lastFocusedElement) {
            state.lastFocusedElement.focus({preventScroll: true});
        }
        state.isPanelOpen = false;
    }

    function handleKeyPress(event) {
        if (event.key === 'Escape') hidePanel();
        if (event.key === 'Tab') maintainFocus(event);
    }

    function maintainFocus(event) {
        const focusable = [...artifactPanel.querySelectorAll('button')];
        const first = focusable[0];
        const last = focusable[focusable.length - 1];

        if (event.shiftKey && document.activeElement === first) {
            last.focus();
            event.preventDefault();
        } else if (!event.shiftKey && document.activeElement === last) {
            first.focus();
            event.preventDefault();
        }
    }

    // ==================== UTILITIES ====================
    function detectLanguage(pre) {
        let languageElement = pre.closest('.md-code-block-banner-wrap')?.querySelector('.md-code-block-infostring');
        let parent = pre.parentElement;

        while (parent && !languageElement) {
            languageElement = parent.querySelector('.md-code-block-infostring');
            parent = parent.parentElement;
        }

        const lang = languageElement?.textContent.trim().toLowerCase() || Array.from(pre.classList).find(c => c.startsWith('language-'))?.split('-')[1] || 'plaintext';

        return Prism.languages[lang] ? lang : 'plaintext';
    }

    async function handleCopy() {
        const code = artifactPanel.querySelector('code').textContent;
        try {
            await navigator.clipboard.writeText(code);
            showNotification('Code copied to clipboard!');
        } catch (err) {
            legacyCopy(code);
        }
    }

    function legacyCopy(text) {
        const textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed';
        document.body.appendChild(textarea);
        textarea.select();

        try {
            const success = document.execCommand('copy');
            if (!success) throw new Error('Copy failed');
            showNotification('Code copied to clipboard!');
        } catch (err) {
            showNotification('Failed to copy! Please copy manually.', true);
        } finally {
            document.body.removeChild(textarea);
        }
    }

    function showNotification(message, isError = false) {
        if (typeof GM_notification === 'function') {
            GM_notification({
                title: isError ? 'Error' : 'Success', text: message, timeout: 2000
            });
        } else {
            const notification = document.createElement('div');
            notification.className = `artifact-notification ${isError ? 'error' : 'success'}`;
            notification.textContent = message;
            document.body.appendChild(notification);

            setTimeout(() => {
                notification.remove();
            }, 2000);
        }
    }

    function adjustPanelHeight() {
        const panel = artifactPanel.querySelector('.artifact-panel');
        panel.style.height = `${window.innerHeight * config.panelHeightRatio}px`;
    }

    // ==================== LIFECYCLE MANAGEMENT ====================
    function cleanup(fullCleanup = false) {
        if (observer) observer.disconnect();

        if (fullCleanup) {
            artifactPanel?.remove();
            document.querySelector(`style[data-css="${SCRIPT_ID}"]`)?.remove();
            window.removeEventListener('resize', adjustPanelHeight);
            document.removeEventListener('keydown', handleKeyPress);
            state.isInitialized = false;
        }
    }

    async function handleVisibilityChange() {
        if (document.visibilityState === 'visible' && !state.isInitialized) {
            await init();
        } else if (document.visibilityState === 'hidden') {
            cleanup(false);
        }
    }

    async function init() {
        if (state.isInitialized) return;

        try {
            await loadPrism();
            ensureStyles();

            if (!artifactPanel) {
                artifactPanel = createArtifactPanel();
                document.body.appendChild(artifactPanel);
            }

            document.body.addEventListener('click', event => {
                const target = event.target;

                if (target.closest('.artifact-placeholder')) {
                    showCode(target.closest('.artifact-placeholder').nextElementSibling);
                } else if (target.closest('.artifact-close')) {
                    hidePanel();
                } else if (target.closest('.artifact-copy')) {
                    handleCopy();
                }
            });

            initObserver();
            document.querySelectorAll('pre').forEach(processPreElement);
            window.addEventListener('resize', adjustPanelHeight);
            state.isInitialized = true;
        } catch (error) {
            console.error('Initialization error:', error);
            showNotification('Failed to initialize code viewer!', true);
        }
    }

    // Initialize script
    if (!window[SCRIPT_ID]) {
        window[SCRIPT_ID] = true;

        const run = async () => {
            if (document.readyState === 'complete') {
                await init();
            } else {
                window.addEventListener('load', async () => {
                    await init();
                });
            }
        };

        run().catch(error => {
            console.error('Error initializing script:', error);
            showNotification('Failed to load code viewer!', true);
        });

        window.addEventListener('unload', () => cleanup(true));
        document.addEventListener('visibilitychange', handleVisibilityChange);
    }
})();