// ==UserScript==
// @name         Kone.gg 썸네일 크기조정 및 허용 서브 관리
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  본문 썸네일 + 미리보기 호버 썸네일 크기 통합 조정, SPA 대응, 서브별 미리보기/본문이미지 허용 관리
// @author       cloud67p
// @match        https://kone.gg/*
// @grant        GM_getValue
// @grant        GM_setValue
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    /* =========================
       설정
    ========================= */
    const STORAGE_KEY_WIDTH    = 'thumbnail-width';
    const STORAGE_KEY_HEIGHT   = 'thumbnail-height';
    const STORAGE_KEY_ALLOWED  = 'preview-allowed-subs';
    const DEFAULT_WIDTH  = 500;
    const DEFAULT_HEIGHT = 500;
    const PREVIEW_MARGIN = 12;
    const MIN_SCALE = 0.55;
    const MAX_SCALE = 1.2;
    const SCALE_MIN_VIEWPORT_WIDTH = 360;
    const SCALE_MAX_VIEWPORT_WIDTH = 1920;
    const SWITCH_ID = 'kone-preview-switch-container';
    const ALLOWED_CHANGE_EVENT = 'kone-allowed-subs-changed'; // ★ 추가
    let cachedScale = null;
    const BLUR_AMOUNT = '20px'; // ★ 여기서 통합 조절

    function getViewportScale() {
        if (cachedScale !== null) return cachedScale;
        const vpW = window.innerWidth || SCALE_MIN_VIEWPORT_WIDTH;
        const normalized = (vpW - SCALE_MIN_VIEWPORT_WIDTH) / (SCALE_MAX_VIEWPORT_WIDTH - SCALE_MIN_VIEWPORT_WIDTH);
        const t = Math.max(0, Math.min(1, normalized));
        cachedScale = MIN_SCALE + (MAX_SCALE - MIN_SCALE) * t;
        return cachedScale;
    }

    /* =========================
       서브 허용 목록 관리
    ========================= */
    function getAllowedSubs() {
        try { return JSON.parse(GM_getValue(STORAGE_KEY_ALLOWED, '[]')); }
        catch (e) { return []; }
    }

    function isSubAllowed(subName) {
        if (!subName) return false;
        return getAllowedSubs().includes(subName.toLowerCase());
    }

    // ★ setSubAllowed: 저장 후 커스텀 이벤트 발행
    function setSubAllowed(subName, allowed) {
        const list = getAllowedSubs();
        const name = subName.toLowerCase();
        const idx  = list.indexOf(name);
        if (allowed && idx === -1)  list.push(name);
        if (!allowed && idx !== -1) list.splice(idx, 1);
        GM_setValue(STORAGE_KEY_ALLOWED, JSON.stringify(list));

        // 변경 이벤트 발행 → 구독 중인 UI가 즉시 갱신
        window.dispatchEvent(new CustomEvent(ALLOWED_CHANGE_EVENT, {
            detail: { sub: name, allowed }
        }));
    }

    function getCurrentSub() {
        const match = location.pathname.match(/^\/s\/([^/]+)/);
        if (!match) return null;
        const sub = match[1].toLowerCase();
        return sub === 'all' ? null : sub;
    }

    function getSubFromCard(postWrapper) {
        const links = postWrapper.querySelectorAll('a[href*="/s/"]');
        for (const link of links) {
            const m = link.getAttribute('href').match(/\/s\/([^/]+)/);
            if (m && m[1].toLowerCase() !== 'all') return m[1].toLowerCase();
        }
        return null;
    }

/* =========================
   본문 이미지 차단/복원 (Shadow DOM 대응)
========================= */
const EARLY_BLOCK_STYLE_ID = 'kone-early-post-block';
const EARLY_BLOCK_RELEASE_ID = 'kone-early-post-block-release';
const SHADOW_STYLE_ID = 'kone-shadow-img-block';

function applyEarlyPostBlock() {
    if (document.getElementById(EARLY_BLOCK_STYLE_ID)) return;
    const style = document.createElement('style');
    style.id = EARLY_BLOCK_STYLE_ID;
    style.textContent = `
        #post_content,
        #post_content + *,
        main,
        .grow.flex.flex-col,
        article {
            filter: blur(${BLUR_AMOUNT}) !important;
            transition: none !important;
            pointer-events: none !important;
            user-select: none !important;
        }
    `;
    document.head.appendChild(style);
}

function removeEarlyPostBlock() {
    const style = document.getElementById(EARLY_BLOCK_STYLE_ID);
    if (!style) return;
    const releaseStyle = document.createElement('style');
    releaseStyle.id = EARLY_BLOCK_RELEASE_ID;
    releaseStyle.textContent = `
        #post_content,
        #post_content + *,
        main,
        .grow.flex.flex-col,
        article {
            filter: none !important;
            transition: filter 0.15s ease !important;
        }
    `;
    document.head.appendChild(releaseStyle);
    style.remove();
    setTimeout(() => {
        document.getElementById(EARLY_BLOCK_RELEASE_ID)?.remove();
    }, 200);
}

// ★ display:none 버전 제거하고 blur 버전으로 통합
function applyPostImageBlock(allowed) {
    const postContent = document.getElementById('post_content');
    if (!postContent) return;
    const shadow = postContent.shadowRoot;
    if (!shadow) return;

    const existing = shadow.querySelector(`#${SHADOW_STYLE_ID}`);
    if (existing) existing.remove();

    if (!allowed) {
        const style = document.createElement('style');
        style.id = SHADOW_STYLE_ID;
        style.textContent = `
            img {
                filter: blur(${BLUR_AMOUNT}) !important;
                transition: none !important;
            }
            .image-wrapper {
                filter: blur(${BLUR_AMOUNT}) !important;
                transition: none !important;
            }
        `;
        shadow.appendChild(style);
    }
}

function applyPostImageForCurrentPage() {
    const sub = getCurrentSub();
    const isPostPage = /^\/s\/[^/]+\/.+/.test(location.pathname);
    if (!isPostPage) {
        removeEarlyPostBlock();
        return;
    }

    const allowed = sub ? isSubAllowed(sub) : false;

    if (!allowed) {
        applyEarlyPostBlock();
    } else {
        // 허용: 전체 블러 해제 + shadow 이미지 blur도 즉시 제거
        removeEarlyPostBlock();
        const postContent = document.getElementById('post_content');
        postContent?.shadowRoot?.querySelector(`#${SHADOW_STYLE_ID}`)?.remove();
        return;
    }

    let tries = 0;
    const tryApply = () => {
        const postContent = document.getElementById('post_content');
        if (postContent && postContent.shadowRoot) {
            applyPostImageBlock(allowed);
            removeEarlyPostBlock();
        } else if (tries++ < 20) {
            setTimeout(tryApply, 200);
        } else {
            removeEarlyPostBlock();
        }
    };
    tryApply();
}

(function immediatePostBlock() {
    const isPostPage = /^\/s\/[^/]+\/.+/.test(location.pathname);
    if (!isPostPage) return;
    const sub = location.pathname.match(/^\/s\/([^/]+)/)?.[1]?.toLowerCase();
    if (!sub || sub === 'all') return;
    try {
        const allowed = JSON.parse(GM_getValue('preview-allowed-subs', '[]'));
        if (!allowed.includes(sub)) {
            applyEarlyPostBlock();
        }
    } catch (e) {
        applyEarlyPostBlock();
    }
})();
    /* =========================
       사이드바 스위치
    ========================= */
    function tryInsertSwitch() {
        const isAll = /^\/s\/all(\/|$)/.test(location.pathname);
        const subName = getCurrentSub();

        const existing = document.getElementById(SWITCH_ID);
        if (existing) existing.remove();

        if (!subName && !isAll) return;

        const subText =
            [...document.querySelectorAll('*')].find(el =>
                el.children.length === 0 && el.textContent.includes('관리 로그')
            ) ||
            [...document.querySelectorAll('*')].find(el =>
                el.children.length === 0 && el.textContent.includes('구독중')
            );
        const innerPad = subText?.closest('div[class]')?.parentElement;
        if (!innerPad) return;

        const container = document.createElement('div');
        container.id = SWITCH_ID;
        container.style.cssText = 'margin-top:12px; padding-top:12px; border-top:1px solid #d4d4d8;';

        const isDark = document.documentElement.classList.contains('dark');
        if (isDark) container.style.borderTopColor = '#52525b';

        innerPad.appendChild(container);
        updateSwitchUI(container, subName, isAll);

// ★ 전역 단일 리스너 — 컨테이너 교체와 무관하게 항상 유효
window.addEventListener(ALLOWED_CHANGE_EVENT, () => {
    const container = document.getElementById(SWITCH_ID);
    if (!container) return;
    const isAll   = /^\/s\/all(\/|$)/.test(location.pathname);
    const subName = getCurrentSub();
    updateSwitchUI(container, subName, isAll);
    if (isAll) cleanupPreview();
});
    }

    function updateSwitchUI(container, subName, isAll) {
        container.innerHTML = '';

        const title = document.createElement('div');
        title.style.cssText = 'font-size:13px; margin-bottom:8px;';
        title.className = 'text-zinc-600 dark:text-zinc-400';
        title.textContent = '이미지 미리보기 / 본문';
        container.appendChild(title);

        if (isAll) {
            // ★ 매번 최신 목록을 읽어서 렌더링
            const allowedSubs = getAllowedSubs().sort();
            if (allowedSubs.length === 0) {
                const empty = document.createElement('div');
                empty.style.cssText = 'font-size:11px; color:#a1a1aa;';
                empty.textContent = '허용된 서브가 없습니다.';
                container.appendChild(empty);
            } else {
                allowedSubs.forEach(sub => container.appendChild(makeSubRow(sub, container, true)));
            }
        } else {
            container.appendChild(makeSubRow(subName, container, false));

            const labelEl = document.createElement('div');
            labelEl.id = 'kone-preview-label';
            labelEl.style.cssText = 'font-size:11px; margin-top:4px; color:#a1a1aa;';
            labelEl.textContent = isSubAllowed(subName)
                ? '허용됨 — 미리보기 및 본문 이미지가 표시됩니다.'
                : '비허용 — 미리보기 및 본문 이미지가 차단됩니다.';
            container.appendChild(labelEl);
        }
    }

    function makeSubRow(sub, container, isAll) {
        const row = document.createElement('div');
        row.style.cssText = 'display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px;';

        const label = document.createElement('span');
        label.style.cssText = 'font-size:12px;';
        label.className = 'text-zinc-500 dark:text-zinc-400';
        label.textContent = `s/${sub}`;

        const btn = document.createElement('button');
        btn.style.cssText = `
            position:relative; display:inline-flex; align-items:center;
            width:40px; height:22px; border-radius:9999px; border:none;
            cursor:pointer; transition:background 0.2s; flex-shrink:0; padding:0;
        `;
        btn.setAttribute('aria-label', `${sub} 이미지 허용 토글`);

        const knob = document.createElement('span');
        knob.style.cssText = `
            position:absolute; width:16px; height:16px; border-radius:50%;
            background:white; box-shadow:0 1px 3px rgba(0,0,0,0.3); transition:left 0.2s;
        `;
        btn.appendChild(knob);

        const applyState = () => {
            const allowed = isSubAllowed(sub);
            btn.style.background = allowed ? '#f97316' : '#a1a1aa';
            knob.style.left = allowed ? '21px' : '3px';

            if (!isAll) {
                const labelEl = container.querySelector('#kone-preview-label');
                if (labelEl) labelEl.textContent = allowed
                    ? '허용됨 — 미리보기 및 본문 이미지가 표시됩니다.'
                    : '비허용 — 미리보기 및 본문 이미지가 차단됩니다.';
            }
        };
        applyState();

btn.addEventListener('click', () => {
    const nowAllowed = isSubAllowed(sub);
    setSubAllowed(sub, !nowAllowed);
    cleanupPreview();
    applyPostImageForCurrentPage();
});

        row.appendChild(label);
        row.appendChild(btn);
        return row;
    }

    /* =========================
       본문 썸네일 조정
    ========================= */
    function applyThumbnailStyle(w, h) {
        const existing = document.getElementById('custom-thumbnail-style');
        if (existing) existing.remove();

        const scale = getViewportScale();
        const scaledW = Math.round(w * scale);
        const scaledH = Math.round(h * scale);

        const style = document.createElement('style');
        style.id = 'custom-thumbnail-style';
        style.textContent = `
            img.max-w-50.max-h-40 {
                width: auto !important;
                height: auto !important;
                max-width: ${scaledW}px !important;
                max-height: ${scaledH}px !important;
                object-fit: unset !important;
                display: block;
            }
        `;
        document.head.appendChild(style);
    }

    function resizeThumbnails() {
        const w = GM_getValue(STORAGE_KEY_WIDTH,  DEFAULT_WIDTH);
        const h = GM_getValue(STORAGE_KEY_HEIGHT, DEFAULT_HEIGHT);
        applyThumbnailStyle(w, h);
    }

    /* =========================
       호버 미리보기 위치 계산
    ========================= */
    function calcPreviewPosition(e, postWrapper, previewEl) {
        const cardRect = postWrapper.getBoundingClientRect();
        const vpW      = window.innerWidth;
        const vpH      = window.innerHeight;
        const prevW    = previewEl.offsetWidth;
        const prevH    = previewEl.offsetHeight;
        const mouseOnLeft = e.clientX < vpW / 2;

        let left;
        if (mouseOnLeft) {
            left = cardRect.right + PREVIEW_MARGIN;
            left = Math.min(left, vpW - prevW - PREVIEW_MARGIN);
        } else {
            left = cardRect.left - prevW - PREVIEW_MARGIN;
            left = Math.max(left, PREVIEW_MARGIN);
        }

        let top = cardRect.top - 200;
        top = Math.max(PREVIEW_MARGIN, Math.min(top, vpH - prevH - PREVIEW_MARGIN));
        return { left, top };
    }

    /* =========================
       호버 미리보기 관리
    ========================= */
    let activePreview  = null;
    let hiddenOriginal = null;

    function cleanupPreview() {
        if (activePreview) { activePreview.remove(); activePreview = null; }
        if (hiddenOriginal) {
            hiddenOriginal.style.display = '';
            hiddenOriginal = null;
        }
    }

    function onUrlChange() {
        cleanupPreview();
        applyPostImageForCurrentPage();
        const snapUrl = location.href;

        let attempts = 0;
        const doInsert = () => {
    if (location.href !== snapUrl) return;
    tryInsertSwitch();
    if (!document.getElementById(SWITCH_ID) && attempts++ < 10) {
        setTimeout(doInsert, 300);
    }
};

        setTimeout(doInsert, 300);
    }

let _onUrlChangeTimer = null;
function scheduleUrlChange() {
    if (_onUrlChangeTimer) clearTimeout(_onUrlChangeTimer);
    _onUrlChangeTimer = setTimeout(() => {
        _onUrlChangeTimer = null;
        onUrlChange();
    }, 50);
}

window.addEventListener('pageshow', scheduleUrlChange);
window.addEventListener('popstate', scheduleUrlChange);

const originalPushState    = history.pushState;
const originalReplaceState = history.replaceState;
history.pushState = function () {
    originalPushState.apply(history, arguments);
    scheduleUrlChange();
};
history.replaceState = function () {
    originalReplaceState.apply(history, arguments);
    scheduleUrlChange();
};

    document.addEventListener('mousedown', (e) => {
        if (e.target.closest('a') || e.target.closest('button') || e.target.closest('[role="button"]')) {
            if (activePreview) { activePreview.remove(); activePreview = null; }
            hiddenOriginal = null;
        }
    }, true);
    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') cleanupPreview(); });
    window.addEventListener('beforeunload', cleanupPreview);
    document.addEventListener('visibilitychange', () => { if (document.hidden) cleanupPreview(); });

    document.addEventListener('mouseover', (e) => {
        const postWrapper = e.target.closest('.group\\/post-wrapper');
        if (!postWrapper) return;

        const preview = postWrapper.querySelector('.group-hover\\/post-wrapper\\:block');
        if (!preview) return;

        const currentSub = getCurrentSub();
        const subToCheck = currentSub || getSubFromCard(postWrapper);

        if (!subToCheck || !isSubAllowed(subToCheck)) {
            cleanupPreview();
            preview.style.display = 'none';
            return;
        }

        cleanupPreview();
        preview.style.display = 'none';
        hiddenOriginal = preview;

        const clone = preview.cloneNode(true);
        const w = GM_getValue(STORAGE_KEY_WIDTH,  DEFAULT_WIDTH);
        const h = GM_getValue(STORAGE_KEY_HEIGHT, DEFAULT_HEIGHT);

        const img = clone.querySelector('img');
        if (img) {
            img.className       = '';
            img.style.objectFit = 'unset';
            img.style.display   = 'block';

            const recalcPosition = () => {
                if (!clone.isConnected) return;
                const { left, top } = calcPreviewPosition(e, postWrapper, clone);
                clone.style.left = left + 'px';
                clone.style.top  = top  + 'px';
            };

            const applySize = () => {
                const natW = img.naturalWidth;
                const natH = img.naturalHeight;
                const vpH  = window.innerHeight;
                const scale = getViewportScale();
                const scaledW = Math.round(w * scale);
                const scaledH = Math.round(h * scale);

                if (natW > 0 && natH > 0) {
                    const ratio = natW / natH;
                    if (ratio >= 1) {
                        img.style.width     = scaledW + 'px';
                        img.style.height    = 'auto';
                        img.style.maxWidth  = 'unset';
                        img.style.maxHeight = scaledH + 'px';
                    } else {
                        const targetH = Math.round(vpH * 0.85);
                        img.style.width     = 'auto';
                        img.style.height    = targetH + 'px';
                        img.style.maxWidth  = scaledW + 'px';
                        img.style.maxHeight = 'unset';
                    }
                } else {
                    img.style.width     = 'auto';
                    img.style.height    = 'auto';
                    img.style.maxWidth  = scaledW + 'px';
                    img.style.maxHeight = scaledH + 'px';
                }
                requestAnimationFrame(recalcPosition);
            };

            if (img.complete && img.naturalWidth > 0) {
                applySize();
            } else {
                const scale = getViewportScale();
                img.style.maxWidth  = Math.round(w * scale) + 'px';
                img.style.maxHeight = Math.round(h * scale) + 'px';
                img.addEventListener('load', applySize, { once: true });
            }
        }

        clone.style.width         = 'fit-content';
        clone.style.height        = 'fit-content';
        clone.style.position      = 'fixed';
        clone.style.zIndex        = '9999';
        clone.style.pointerEvents = 'none';
        clone.style.visibility    = 'hidden';
        clone.style.display       = 'block';
        clone.style.setProperty('inset',     'auto', 'important');
        clone.style.setProperty('right',     'auto', 'important');
        clone.style.setProperty('bottom',    'auto', 'important');
        clone.style.setProperty('transform', 'none', 'important');
        clone.style.left = '0px';
        clone.style.top  = '0px';

        document.body.appendChild(clone);

        const { left, top } = calcPreviewPosition(e, postWrapper, clone);
        clone.style.left       = left + 'px';
        clone.style.top        = top  + 'px';
        clone.style.visibility = 'visible';

        activePreview = clone;
    });

    document.addEventListener('mouseout', (e) => {
        const postWrapper = e.target.closest('.group\\/post-wrapper');
        const related     = e.relatedTarget?.closest?.('.group\\/post-wrapper');
        if (postWrapper && related !== postWrapper) {
            cleanupPreview();
            const preview = postWrapper.querySelector('.group-hover\\/post-wrapper\\:block');
            if (preview) preview.style.display = '';
        }
    });

    /* =========================
       초기화 및 DOM 감시
    ========================= */
    resizeThumbnails();
let _resizeTimer = null;
window.addEventListener('resize', () => {
    cachedScale = null;
    if (_resizeTimer) clearTimeout(_resizeTimer);
    _resizeTimer = setTimeout(() => {
        _resizeTimer = null;
        resizeThumbnails();
    }, 150);
});

    setTimeout(tryInsertSwitch, 500);

})();