// ==UserScript==
// @name         Kone.gg 뷰어 확장 기능
// @namespace    https://kone.gg/
// @version      1.9
// @description  'i' 키/버튼으로 뷰어/전체화면 제어, 전체화면 나가기 버튼으로 뷰어 동시 닫기, 이미지 전환 애니메이션 제거 기능을 제공합니다.
// @author       AI Assistant & User
// @match        https://kone.gg/*
// @grant        GM_addStyle
// @run-at       document-idle
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    const SCRIPT_ID = 'konegg-ui-toggle-script';

    // === 스타일 주입 ===
    GM_addStyle(`
        /* UI 숨김 스타일 */
        .viewer-container.ui-hidden .viewer-header,
        .viewer-container.ui-hidden .viewer-footer {
            display: none !important;
        }

        /* Swiper 뷰어 슬라이드 애니메이션 제거 */
        .swiper-wrapper {
            transition-duration: 0.001s !important;
        }

        /* 전체화면 나가기 버튼 스타일 */
        #exit-fullscreen-button {
            position: fixed;
            top: 1rem;
            right: 1rem;
            z-index: 2147483647;
            display: none;
            width: 48px;
            height: 48px;
            background-color: rgba(0, 0, 0, 0.4);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            cursor: pointer;
            align-items: center;
            justify-content: center;
        }
        #exit-fullscreen-button:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }
    `);

    // === 기능 함수 ===
    const toggleUI = (container) => {
        if (container) {
            container.classList.toggle('ui-hidden');
        }
    };

    const setupViewer = (viewerContainer) => {
        if (viewerContainer.dataset.uiToggleSetup === 'true') return;
        viewerContainer.dataset.uiToggleSetup = 'true';
        viewerContainer.classList.add('viewer-container');

        const header = viewerContainer.querySelector('div.flex.w-full.justify-end');
        if (!header) return;

        header.classList.add('viewer-header');
        const footer = viewerContainer.querySelector('div.flex.flex-col.md\\:flex-row');
        if (footer) footer.classList.add('viewer-footer');

        // 전체화면 버튼 추가 (이미 있다면 추가하지 않음)
        if (!header.querySelector('.fullscreen-btn')) {
            const closeButton = header.querySelector('button:last-child');
            if (closeButton) {
                const fullscreenButton = document.createElement('button');
                fullscreenButton.className = `${closeButton.className} fullscreen-btn`;
                fullscreenButton.innerHTML = ``;
                fullscreenButton.onclick = (e) => {
                    e.stopPropagation();
                    if (!document.fullscreenElement) {
                        document.documentElement.requestFullscreen();
                    }
                };
                header.insertBefore(fullscreenButton, closeButton);
            }
        }

        // UI 토글 버튼 이벤트 설정
        const gridButton = header.querySelector('button');
        if (gridButton && !gridButton.dataset.uiToggleEvent) {
             gridButton.dataset.uiToggleEvent = 'true';
             gridButton.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                toggleUI(viewerContainer);
            }, true);
        }
    };

    // === 스크립트 초기 실행 로직 ===
    if (document.getElementById(SCRIPT_ID)) return;

    const scriptMarker = document.createElement('div');
    scriptMarker.id = SCRIPT_ID;
    scriptMarker.style.display = 'none';
    document.body.appendChild(scriptMarker);

    if (!document.getElementById('exit-fullscreen-button')) {
        const exitFullscreenButton = document.createElement('button');
        exitFullscreenButton.id = 'exit-fullscreen-button';
        exitFullscreenButton.innerHTML = ``;

        // [수정됨] 'X' 버튼 클릭 시 전체화면 해제 및 뷰어 닫기
        exitFullscreenButton.onclick = () => {
            if (document.fullscreenElement) {
                // 1. 전체화면 해제
                document.exitFullscreen();

                // 2. 뷰어를 찾아 닫기 버튼을 클릭
                const viewer = document.querySelector('.viewer-container');
                if (viewer) {
                    const closeButton = viewer.querySelector('.viewer-header button:last-child');
                    if (closeButton) {
                        closeButton.click();
                    }
                }
            }
        };
        document.body.appendChild(exitFullscreenButton);
    }


    // === 이벤트 리스너 ===
    const observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList) {
            if (mutation.addedNodes.length) {
                const viewerContainer = document.querySelector('div.fixed.z-50 div.swiper')?.closest('div.fixed.z-50');
                if (viewerContainer) {
                    setupViewer(viewerContainer);
                }
            }
        }
    });

    document.addEventListener('keydown', (e) => {
        const activeElement = document.activeElement;
        const isTyping = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable);
        if (isTyping) return;

        if (e.key.toLowerCase() === 'i') {
            e.preventDefault();
            const viewer = document.querySelector('.viewer-container:not([style*="display: none"])');

            if (viewer) { // 뷰어가 열려있을 때
                if (document.fullscreenElement) {
                    document.exitFullscreen();
                    const closeButton = viewer.querySelector('.viewer-header button:last-child');
                    if (closeButton) closeButton.click();
                } else {
                    document.documentElement.requestFullscreen();
                }
            } else { // 뷰어가 닫혀있을 때
                 const openViewerButton = Array.from(document.querySelectorAll('div[role="menuitem"]'))
                                             .find(item => item.textContent.trim() === '뷰어 열기');
                if (openViewerButton) {
                    openViewerButton.click();
                    setTimeout(() => {
                         if (!document.fullscreenElement) {
                             document.documentElement.requestFullscreen().catch(err => {});
                         }
                    }, 100);
                }
            }
        }
    });

    document.addEventListener('fullscreenchange', () => {
        const currentViewer = document.querySelector('.viewer-container');
        const exitBtn = document.getElementById('exit-fullscreen-button');

        if (document.fullscreenElement) {
            if (currentViewer) currentViewer.classList.add('ui-hidden');
            if (exitBtn) exitBtn.style.display = 'flex';
        } else {
            if (currentViewer) currentViewer.classList.remove('ui-hidden');
            if (exitBtn) exitBtn.style.display = 'none';
        }
    });

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