// ==UserScript==
// @name         TikTok Auto Like
// @namespace    http://tampermonkey.net/
// @version      1.8
// @description  Automatically clicks the like button on TikTok live pages with a draggable and collapsible UI.
// @author       therealbeanos.
// @match        https://www.tiktok.com/*
// @grant        none
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    let intervalId = null;
    let clickInterval = 2000; // Default interval in milliseconds
    let isMinimized = false;
    let isDragging = false;
    let offsetX, offsetY;

    // Function to find and click the like button
    function autoClickLikeButton() {
        const likeButtonContainer = document.querySelector('.css-hm4yna-DivLikeContainer.ebnaa9i0');
        if (likeButtonContainer) {
            const likeButton = likeButtonContainer.querySelector('.css-1mk0i7a-DivLikeBtnIcon.ebnaa9i3');
            if (likeButton) {
                likeButton.click();
            }
        }
    }

    // Function to start auto-clicking
    function startAutoClicking() {
        if (!intervalId) {
            intervalId = setInterval(autoClickLikeButton, clickInterval);
            const startButton = document.getElementById('start-button');
            const stopButton = document.getElementById('stop-button');
            if (startButton) startButton.style.backgroundColor = '#00f593'; // TikTok green
            if (stopButton) stopButton.style.backgroundColor = '';
        }
    }

    // Function to stop auto-clicking
    function stopAutoClicking() {
        if (intervalId) {
            clearInterval(intervalId);
            intervalId = null;
            const startButton = document.getElementById('start-button');
            const stopButton = document.getElementById('stop-button');
            if (stopButton) stopButton.style.backgroundColor = '#ff2d55'; // TikTok red
            if (startButton) startButton.style.backgroundColor = '';
        }
    }

    // Create UI beside the like button
    function createUI() {
        const likeButtonContainer = document.querySelector('.css-hm4yna-DivLikeContainer.ebnaa9i0');
        if (likeButtonContainer && !document.querySelector('#auto-click-ui')) {
            const uiContainer = document.createElement('div');
            uiContainer.id = 'auto-click-ui';
            uiContainer.style.position = 'absolute';
            uiContainer.style.top = '50px';
            uiContainer.style.right = '10px';
            uiContainer.style.backgroundColor = '#ffffff'; // White background
            uiContainer.style.border = '1px solid #ddd'; // Light border
            uiContainer.style.borderRadius = '8px'; // Rounded corners
            uiContainer.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)'; // Subtle shadow
            uiContainer.style.padding = '15px';
            uiContainer.style.zIndex = 1000;
            uiContainer.style.fontFamily = 'Arial, sans-serif'; // TikTok-like font
            uiContainer.style.fontSize = '14px';
            uiContainer.style.color = '#333';
            uiContainer.style.transition = 'max-height 0.3s ease';
            uiContainer.style.overflow = 'hidden';

            uiContainer.innerHTML = `
                <div style="text-align: center; margin-bottom: 15px; font-family: 'Arial', sans-serif;">
                    <span style="font-size: 18px; font-weight: bold; color: #333;">TikTok</span><br>
                    <span style="font-size: 24px; font-weight: bold; color: #ff2d55;">Auto Like</span>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <button id="start-button" style="flex: 1; margin-right: 5px; padding: 8px 12px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">Start</button>
                    <button id="stop-button" style="flex: 1; margin-left: 5px; padding: 8px 12px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">Stop</button>
                </div>
                <div>
                    <label for="interval-input" style="display: block; margin-bottom: 5px; font-weight: bold;">Interval (ms):</label>
                    <input type="number" id="interval-input" value="${clickInterval}" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                </div>
            `;

            const heartIcon = document.createElement('div');
            heartIcon.style.width = '24px';
            heartIcon.style.height = '24px';
            heartIcon.style.backgroundSize = 'cover';
            heartIcon.style.margin = '0 auto 10px';
            uiContainer.insertBefore(heartIcon, uiContainer.firstChild);

            document.body.appendChild(uiContainer);

            // Add drag functionality
            uiContainer.addEventListener('mousedown', (e) => {
                isDragging = true;
                offsetX = e.clientX - uiContainer.offsetLeft;
                offsetY = e.clientY - uiContainer.offsetTop;
            });

            document.addEventListener('mousemove', (e) => {
                if (isDragging) {
                    uiContainer.style.left = `${e.clientX - offsetX}px`;
                    uiContainer.style.top = `${e.clientY - offsetY}px`;
                    uiContainer.style.right = 'auto';
                }
            });

            document.addEventListener('mouseup', () => {
                isDragging = false;
            });

            const expandBar = document.createElement('div');
            expandBar.style.width = '50%';
            expandBar.style.height = '10px';
            expandBar.style.backgroundColor = '#000';
            expandBar.style.cursor = 'pointer';
            expandBar.style.borderRadius = '0 0 8px 8px';
            expandBar.style.position = 'absolute';
            expandBar.style.left = '25%';  // Centers the bar horizontally
            expandBar.style.bottom = '0';
            uiContainer.appendChild(expandBar);

            // Toggle minimized UI on click of the black bar
            expandBar.addEventListener('click', () => {
                isMinimized = !isMinimized;
                if (isMinimized) {
                    uiContainer.style.maxHeight = '50px';
                    expandBar.style.display = 'block';
                } else {
                    uiContainer.style.maxHeight = '300px';
                    expandBar.style.display = 'block';  // Ensure bar remains after reopening
                }
            });

            document.getElementById('start-button').addEventListener('click', () => {
                const inputValue = parseInt(document.getElementById('interval-input').value, 10);
                if (!isNaN(inputValue) && inputValue > 0) {
                    clickInterval = inputValue;
                    if (intervalId) {
                        stopAutoClicking();
                        startAutoClicking();
                    }
                }
                startAutoClicking();
            });

            document.getElementById('stop-button').addEventListener('click', stopAutoClicking);
        }
    }

    // Observe DOM for changes to ensure the UI is added when the like button appears
    const observer = new MutationObserver(() => {
        createUI();
    });

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