// ==UserScript==
// @name        8chan.moe Bigger Deletion Checkbox
// @namespace   Violentmonkey Scripts
// @match       https://8chan.moe/mod.js?boardUri=*&threadId=*
// @match       https://8chan.moe/*/res/*
// @grant       none
// @version     1.0
// @author      Anonymous
// @license     MIT
// @description Adds a larger checkbox to the right of each post's deletion checkbox on 8chan.moe mod.js pages for easier post selection.
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // Function to add a larger checkbox to a post
    function addLargeCheckbox(post) {
        const deletionCheckbox = post.querySelector('input.deletionCheckBox');
        if (!deletionCheckbox) return; // Skip if no deletion checkbox found

        // Find the postInfo div to append the new checkbox
        const postInfo = post.querySelector('.postInfo.title');
        if (!postInfo) return;

        // Create a container for the large checkbox
        const largeCheckboxContainer = document.createElement('span');
        largeCheckboxContainer.style.marginLeft = '10px'; // Space from other elements
        largeCheckboxContainer.style.display = 'inline-block';
        largeCheckboxContainer.style.verticalAlign = 'middle';

        // Create the large checkbox
        const largeCheckbox = document.createElement('input');
        largeCheckbox.type = 'checkbox';
        largeCheckbox.style.width = '24px'; // Larger size
        largeCheckbox.style.height = '24px';
        largeCheckbox.style.cursor = 'pointer';

        // Sync the large checkbox with the original
        largeCheckbox.checked = deletionCheckbox.checked;
        largeCheckbox.addEventListener('change', () => {
            deletionCheckbox.checked = largeCheckbox.checked;
            // Trigger change event on original checkbox to ensure form functionality
            const event = new Event('change', { bubbles: true });
            deletionCheckbox.dispatchEvent(event);
        });

        // Sync the original checkbox with the large one
        deletionCheckbox.addEventListener('change', () => {
            largeCheckbox.checked = deletionCheckbox.checked;
        });

        // Append the large checkbox to the container
        largeCheckboxContainer.appendChild(largeCheckbox);

        // Append the container to the postInfo div
        postInfo.appendChild(largeCheckboxContainer);
    }

    // Process all posts (OP and replies)
    function processPosts() {
        // Handle OP
        const opPost = document.querySelector('.innerOP');
        if (opPost) {
            addLargeCheckbox(opPost);
        }

        // Handle replies
        const replyPosts = document.querySelectorAll('.innerPost');
        replyPosts.forEach(post => {
            addLargeCheckbox(post);
        });
    }

    // Initial processing
    processPosts();

    // Observe for dynamically added posts (e.g., via auto-refresh or new replies)
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            if (mutation.addedNodes.length) {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        // Check if the added node is a post
                        if (node.classList.contains('innerPost') || node.classList.contains('innerOP')) {
                            addLargeCheckbox(node);
                        }
                        // Check for posts within the added node
                        node.querySelectorAll('.innerPost, .innerOP').forEach(post => {
                            addLargeCheckbox(post);
                        });
                    }
                });
            }
        });
    });

    // Observe changes in the thread list
    const threadList = document.getElementById('threadList');
    if (threadList) {
        observer.observe(threadList, {
            childList: true,
            subtree: true
        });
    }
})();