// ==UserScript==
// @name         DMM Top Filter Buttons
// @namespace    http://tampermonkey.net/
// @version      1.6
// @description  Adds instantRD, 4K, 1080p, 720p buttons at the top of DMM filter bar and allows clearing all filters with Escape
// @author       Waseem
// @match        https://debridmediamanager.com/*
// @grant        none
// @run-at       document-idle
// @locale       en
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // Helper to set React-controlled input value correctly
    function setReactValue(element, value) {
        const nativeSetter = Object.getOwnPropertyDescriptor(
            window.HTMLInputElement.prototype, 'value'
        ).set;
        nativeSetter.call(element, value);
        element.dispatchEvent(new Event('input', { bubbles: true }));
    }

    // Define buttons: text to display => value to insert
    const buttons = [
        { text: 'instantRD', value: 'videos:>0', class: 'dmm-instantrd' },
        { text: '4K', value: '2160p', class: 'dmm-4k' },
        { text: '1080p', value: '1080p', class: 'dmm-1080p' },
        { text: '720p', value: '720p', class: 'dmm-720p' }
    ];

    function addFilterButtons() {
        const container = document.querySelector(
            '#__next > div > div.mb-2.flex.items-center.gap-2.overflow-x-auto.p-2 > div'
        );
        const input = document.querySelector('#query');
        if (!container || !input) return;

        // Add each button at the **beginning** of the container
        buttons.slice().reverse().forEach(btn => { // reverse to maintain visual order
            if (container.querySelector(`span.${btn.class}`)) return; // avoid duplicates

            const span = document.createElement('span');
            span.textContent = btn.text;
            span.className =
                `${btn.class} cursor-pointer whitespace-nowrap rounded border border-blue-500 bg-blue-900/30 px-2 py-0.5 text-xs text-blue-100 transition-colors hover:bg-blue-800/50`;

            container.insertBefore(span, container.firstChild); // insert at top

            // Click inserts filter value
            span.addEventListener('click', () => {
                const current = input.value.trim();
                setReactValue(input, current ? `${current} ${btn.value}` : btn.value);
            });
        });
    }

    // Clear all filters on Escape key
    function setupEscapeClear() {
        const input = document.querySelector('#query');
        if (!input) return;

        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                setReactValue(input, '');
            }
        });
    }

    // Observe DOM for filter bar and input
    const observer = new MutationObserver(() => {
        addFilterButtons();
        setupEscapeClear();
    });
    observer.observe(document.body, { childList: true, subtree: true });
})();