// ==UserScript==
// @name         kone.gg 댓글 정렬 버튼 분리
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  kone.gg의 원래 정렬 버튼 UI로 최신순/등록순 버튼을 분리해서 추가
// @match        https://kone.gg/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    function getOriginalSortButton() {
        const buttons = document.querySelectorAll('button[data-slot="button"]');
        return Array.from(buttons).find(btn =>
            btn.textContent.includes('최신순') || btn.textContent.includes('등록순')
        );
    }

    function clickToForceSort(targetSort) {
        const sortBtn = getOriginalSortButton();
        if (!sortBtn) return;

        const isAlreadyTarget = sortBtn.textContent.includes(targetSort);
        const oppositeSort = targetSort === '최신순' ? '등록순' : '최신순';

        if (isAlreadyTarget) {
            sortBtn.click();
            setTimeout(() => {
                const newSortBtn = getOriginalSortButton();
                if (newSortBtn) newSortBtn.click();
            }, 150);
        } else {
            sortBtn.click();
        }
    }

    function createSortBtn(id, label, iconPathD, targetSort) {
        const btn = document.createElement('button');
        btn.id = id;
        btn.setAttribute('data-slot', 'button');
        btn.className = `
            border-0 justify-center whitespace-nowrap text-sm font-medium transition-all
            disabled:pointer-events-none disabled:opacity-50
            [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4
            shrink-0 [&_svg]:shrink-0 outline-none
            aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
            aria-invalid:border-destructive hover:bg-accent dark:hover:bg-accent/50
            h-8 px-3 rounded-full -[>svg]:px-2.5 flex items-center gap-1.5
            text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-200 cursor-pointer
        `.trim();

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
        svg.setAttribute('width', '24');
        svg.setAttribute('height', '24');
        svg.setAttribute('viewBox', '0 0 24 24');
        svg.setAttribute('fill', 'none');
        svg.setAttribute('stroke', 'currentColor');
        svg.setAttribute('stroke-width', '2');
        svg.setAttribute('stroke-linecap', 'round');
        svg.setAttribute('stroke-linejoin', 'round');
        svg.classList.add('lucide', 'size-4');
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', iconPathD);
        svg.appendChild(path);

        btn.appendChild(svg);
        btn.appendChild(document.createTextNode(` ${label}`));
        btn.style.marginLeft = '8px';

        btn.addEventListener('click', () => {
            clickToForceSort(targetSort);
        });

        return btn;
    }

    function addSortButtons() {
        const commentHeader = document.querySelector('.p-4.md\\:px-6.flex.justify-between.items-center');
        if (!commentHeader) return;

        const leftSection = commentHeader.querySelector('.flex.gap-4.items-center');
        if (!leftSection) return;

        if (document.querySelector('#sort-newest-btn')) return;

        // 최신순 (화살표 아래로)
        const newestPath = "m3 16 4 4 4-4 M7 20V4 M11 4h10 M11 8h7 M11 12h4";
        const newestBtn = createSortBtn('sort-newest-btn', '최신순', newestPath, '최신순');

        // 등록순 (화살표 위로)
        const oldestPath = "m3 8 4-4 4 4 M7 4v16 M11 12h4 M11 16h7 M11 20h10";
        const oldestBtn = createSortBtn('sort-oldest-btn', '등록순', oldestPath, '등록순');

        leftSection.appendChild(newestBtn);
        leftSection.appendChild(oldestBtn);

        const original = getOriginalSortButton();
        if (original) original.style.display = 'none';
    }

    const observer = new MutationObserver(addSortButtons);
    observer.observe(document.body, { childList: true, subtree: true });

    addSortButtons();
})();