// ==UserScript==
// @name        Lista
// @namespace   Violentmonkey Scripts
// @match       https://ylilauta.org/*
// @grant       none
// @version     1.4
// @description 6/27/2024, 8:22:20 PM
// ==/UserScript==

(function() {
    'use strict';

    const isCatalogView = window.location.hash.includes('#catalog');
    const threadCache = new Map();

    const boardPath = window.location.pathname.split('/').filter(Boolean)[0];
    const isUberboard = boardPath === 'thread';
    const listUrl = isUberboard ? `${window.location.origin}/thread/` : `${window.location.origin}/${boardPath}/`;

    function addCatalogButton() {
        const navRight = document.querySelector('nav.right');
        if (navRight) {
            const button = document.createElement('button');
            button.textContent = isCatalogView ? 'Takaisin' : 'Katalogi';
            button.classList.add('button-dropdown');
            button.style.fontSize = '14px';
            button.addEventListener('click', () => {
                const url = isCatalogView ? window.location.href.split('#')[0] : `${window.location.origin}${window.location.pathname}#catalog`;
                window.location.href = url;
                window.location.reload();
            });

            const sortButton = navRight.querySelector('.icon-sort-amount-desc');
            if (sortButton) {
                sortButton.before(button);
            } else {
                navRight.prepend(button);
            }
        }
    }

    async function fetchThreadIDs() {
        try {
            const response = await fetch(listUrl, { credentials: 'same-origin' });
            const text = await response.text();
            const doc = new DOMParser().parseFromString(text, 'text/html');
            if (isUberboard) {
                return Array.from(doc.querySelectorAll('.thread')).map(thread => ({
                    id: thread.dataset.threadId,
                    board: thread.querySelector('.board-link').getAttribute('href').split('/')[1]
                }));
            } else {
                return Array.from(doc.querySelectorAll('.thread')).map(thread => thread.dataset.threadId);
            }
        } catch (error) {
            console.error(error);
            return [];
        }
    }

    async function fetchThreadContent(threadID, board) {
        if (threadCache.has(threadID)) {
            return threadCache.get(threadID);
        }

        const url = isUberboard ? `${window.location.origin}/${board}/${threadID}` : `${window.location.origin}/${boardPath}/${threadID}`;

        try {
            const response = await fetch(url, { credentials: 'same-origin' });
            const text = await response.text();
            const doc = new DOMParser().parseFromString(text, 'text/html');
            const threadElement = doc.querySelector(`.thread[data-thread-id="${threadID}"]`);

            if (threadElement) {
                const container = threadElement.cloneNode(false);
                const firstPost = threadElement.querySelector('.post');
                const threadReplies = threadElement.querySelector('.thread-replies');
                const replyPosts = threadReplies ? Array.from(threadReplies.querySelectorAll('.post')) : [];
                const lastThreeReplies = replyPosts.slice(-3);
                const threadMeta = threadElement.querySelector('.thread-meta');

                if (firstPost) {
                    const clonedFirstPost = firstPost.cloneNode(true);
                    addReplyButton(clonedFirstPost, threadID, board);
                    container.appendChild(clonedFirstPost);
                }

                if (threadReplies) {
                    const clonedReplies = threadReplies.cloneNode(false);
                    clonedReplies.style.paddingBottom = '10px';
                    lastThreeReplies.forEach(reply => {
                        const clonedReply = reply.cloneNode(true);
                        clonedReplies.appendChild(clonedReply);
                    });
                    container.appendChild(clonedReplies);
                }

                if (threadMeta) {
                    const clonedThreadMeta = threadMeta.cloneNode(true);
                    container.appendChild(clonedThreadMeta);
                }

                threadCache.set(threadID, container);
                return container;
            }
            return null;
        } catch (error) {
            console.error(error);
            return null;
        }
    }

    function addReplyButton(postElement, threadID, board) {
        const postMeta = postElement.querySelector('.post-meta');
        if (postMeta) {
            const replyButton = document.createElement('button');
            replyButton.textContent = 'Vastaa';
            replyButton.classList.add('post-button');
            replyButton.style.fontSize = '14px';
            replyButton.addEventListener('click', () => {
                const url = isUberboard ? `${window.location.origin}/${board}/${threadID}` : `${window.location.origin}/${boardPath}/${threadID}`;
                window.location.href = url;
            });

            const menuButton = postMeta.querySelector('.icon-menu');
            if (menuButton) {
                menuButton.after(replyButton);
            } else {
                postMeta.appendChild(replyButton);
            }
        }
    }

    async function delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function loadMoreThreads(observer) {
        const threadContainer = document.querySelector('.style-list');
        if (threadContainer) {
            const threadIDs = await fetchThreadIDs();
            for (const thread of threadIDs) {
                const threadContent = isUberboard ? await fetchThreadContent(thread.id, thread.board) : await fetchThreadContent(thread, boardPath);
                if (threadContent) {
                    threadContainer.appendChild(threadContent);
                }
                await delay(4);
            }

            const threads = document.querySelectorAll('.style-list .thread');
            if (threads.length !== 0) {
                observer.observe(threads[threads.length - 1]);
            }
        }
    }

    function debounce(func, wait) {
        let timeout;
        return function(...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
        };
    }

    function initializeInfiniteScroll() {
        const observer = new IntersectionObserver(debounce(async (entries, observer) => {
            for (const entry of entries) {
                if (entry.isIntersecting) {
                    observer.unobserve(entry.target);
                    await loadMoreThreads(observer);
                }
            }
        }, 100), {
            root: null,
            rootMargin: '0px',
            threshold: 1.0
        });

        const threads = document.querySelectorAll('.style-list .thread');
        if (threads.length !== 0) {
            observer.observe(threads[threads.length - 1]);
        }
    }

    async function initializeListView() {
        const threadContainer = document.querySelector('.threads');
        if (threadContainer) {
            threadContainer.classList.remove('threads');
            threadContainer.classList.add('style-list');
            threadContainer.innerHTML = '';

            const threadIDs = await fetchThreadIDs();
            for (const thread of threadIDs) {
                const threadContent = isUberboard ? await fetchThreadContent(thread.id, thread.board) : await fetchThreadContent(thread, boardPath);
                if (threadContent) {
                    threadContainer.appendChild(threadContent);
                }
                await delay(4);
            }

            initializeInfiniteScroll();
        }
    }

    if (isCatalogView) {
        addCatalogButton();
    } else {
        addCatalogButton();
        initializeListView();
    }
})();