// ==UserScript==
// @name         grok Paste
// @description  Paste text into Grok textarea from main page
// @match        *://grok.com/*
// @version 0.0.1.20251215185344
// @namespace https://greasyfork.org/users/1435046
// @downloadURL none
// ==/UserScript==

(function () {
  'use strict';

  let queueArray = [];
  let cycleInProgress = false;

  window.addEventListener("message", event => {

    const data = event.data;

    if (event.data === 'reload') {

      window.location.reload();
      
    }

    if (event.data && event.data.type === 'reasonButtonClicked') {
      document.querySelector('button[aria-label="Think"]').click();
      return;
    }

    if (event.data && event.data.type === 'newChatButtonClicked') {
      const customNewChatButton = document.querySelector('a[href="/"]');
      if (customNewChatButton) customNewChatButton.click();
      queueArray = [];
      cycleInProgress = false;
    }

    //grab style element
    let grokCssStyleId = document.getElementById('grokCssStyleId');

    let chatMessageInput = document.querySelector('div:has(> div > div > div > form > div > div > div > div > div > div[contenteditable].tiptap.ProseMirror)');
    let chatMessageInputRule = 'div:has(> div > div > div > form > div > div > div > div > div > div[contenteditable].tiptap.ProseMirror) {display: none !important;}';


    let chatMessageInputBackdrop = document.querySelector('.chat-input-backdrop');
    let chatMessageInputBackdropRule = '.chat-input-backdrop {display: none !important;}';
    let header = document.querySelector('div:has(> div > div > button[aria-label="Toggle sidebar"] > svg > path[d="M3 12h18"])');

    let headerCssRule = 'div:has(> div > div > button[aria-label="Toggle sidebar"] > svg > path[d="M3 12h18"]) {display: none !important;}'

    //if event data type is defaultChatMessageInputDisplay

    if (event.data?.type === 'defaultChatMessageInputDisplay') {
      console.log('default');

      if (chatMessageInput) {

        //delete the rule here
        grokCssStyleId.innerHTML = grokCssStyleId.innerHTML.replace(`${chatMessageInputRule}`, '')
        grokCssStyleId.innerHTML = grokCssStyleId.innerHTML.replace(`${chatMessageInputBackdropRule}`, '')

        grokCssStyleId.innerHTML = grokCssStyleId.innerHTML.replace(`${headerCssRule}`, '');

        //header.style.removeProperty('display');

        //return
        return;
      }
    }

    //if the event data type is customize chat message input display

    if (event.data?.type === 'customizeChatMessageInputDisplay') {
      console.log('customize');
      if (chatMessageInput) {

        console.log('chatMessageInput found')

        grokCssStyleId.innerHTML += `${chatMessageInputRule}`

        grokCssStyleId.innerHTML += `${chatMessageInputBackdropRule}`

        grokCssStyleId.innerHTML += `${headerCssRule}`

        //header.style.display = 'none';

        //return
        return;
      }
    }


    if (event.data.type === "prompt" && event.data.content.trim()) {

      queueArray.push(event.data.content);

      console.log(cycleInProgress)

      function queue() {
        if (cycleInProgress || queueArray.length === 0) { return };

        cycleInProgress = true;
        const contentEditableDiv = document.querySelector('div[contenteditable="true"].tiptap.ProseMirror:has(> p)');
        if (!contentEditableDiv) return;

        /*const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
                nativeInputValueSetter.call(textarea, queueArray[0]); // Set like the browser would*/

        contentEditableDiv.focus();
        //change the inner HTML
        contentEditableDiv.innerHTML = '<p>' + queueArray[0].replace(/\n/g, '<br>') + '</p>';

        // Now trigger a React-compatible InputEvent
        const inputEvent = new InputEvent('input', {
          bubbles: true,
          cancelable: true,
          inputType: 'insertText',
          data: queueArray[0],
        });

        contentEditableDiv.dispatchEvent(inputEvent);

        //console.log('lol')

        //we're going to have to move the mutation observer to be called outside any function
        //so that it can be called upon page load so that it can be used for multiple functions

        //if submit button exists
        if (document.querySelector('button[aria-label="Submit"]')) {

          console.log('submit button exists: ', document.querySelector('button[aria-label="Submit"]'));

          //click it
          //document.querySelector('button[aria-label="Submit"]').click();

          const interval = setInterval(() => {
            const button = document.querySelector('button[aria-label="Submit"]');
            if (button) {
              console.log('submit button exists: ', button);

              // Click the button programmatically
              const event = new MouseEvent('click', {
                view: window,
                bubbles: true,
                cancelable: true
              });
              button.dispatchEvent(event);

              // Optional: trigger focus and other events if necessary
              button.focus();
              button.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
              button.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));

              // Once the button is clicked, stop the interval
              clearInterval(interval);
            }
          }, 1); // Check every 100ms


        } else {

          console.log('lol')

          //watch for dom mutations
          const targetNode = document.querySelector('button[aria-label="Submit"]');

          const config = {
            attributes: true
          }

          const callback = function (mutationList, observer) {
            for (const mutation of mutationList) {
              if (mutation.type === 'attributes') {
                console.log('attribute changed: ', mutation.attributeName);
              }
            }
          }

          const observer = new MutationObserver(callback);

          observer.observe(targetNode, config);
        }

        const stopButtonSelector = 'button[aria-label="Stop model response"]';

        let observer = new MutationObserver(function (mutationRecordArray) {
          //for each mutation
          mutationRecordArray.forEach(function (mutationRecord) {

            mutationRecord.removedNodes.forEach((node) => {
              console.log('removed node: ', node);

              if (node.matches && node.matches(stopButtonSelector)) {
                console.log('button with aria label stop model response has been removed');
                //disconect the observer since the cycle has finished and a response has been generated
                observer.disconnect();
                //as the response has completed lets remove the first value in the queue which we presumably just got a
                //response for
                console.log(queueArray.shift())
                //lets indicate theat the cycle has ended
                cycleInProgress = false;
                //lets call the queue function again to see if there are more items in the queue array
                queue();
              };
            });
          })
        })
        observer.observe(document.body, { childList: true, subtree: true })
      }
      queue();
    }
  });
})();