// ==UserScript==
// @name        Usability Tweaks for Manga sites.
// @namespace   Itsnotlupus Industries
// @match       https://asura.gg/*
// @match       https://flamescans.org/*
// @match       https://void-scans.com/*
// @match       https://luminousscans.com/*
// @match       https://shimascans.com/*
// @match       https://nightscans.org/*
// @match       https://freakscans.com/*
// @match       https://mangastream.themesia.com/*
// @noframes
// @version     2.2
// @author      Itsnotlupus
// @license     MIT
// @description Keyboard navigation, inertial drag scrolling, page rotation, chapter preloading and chapter tracking for MangaStream sites, like Asura Scans, Flame Scans, Void Scans, Luminous Scans, Shima Scans, Night Scans, Freak Scans.
// @run-at      document-start
// @require     https://greasyfork.org/scripts/468394-itsnotlupus-tiny-utilities/code/utils.js
// @grant       GM_setValue
// @grant       GM_getValue
// @downloadURL none
// ==/UserScript==

/* not currently supported, but might later: realmscans.xyz manhwafreak.com manhwafreak-fr.com */

/* jshint esversion:11 */
/* eslint curly: 0 no-return-assign: 0, no-loop-func: 0, no-multi-spaces: 0 */
/* global fixConsole, addStyles, $, $$, $$$, events, rAF, observeDOM, untilDOM, until, fetchHTML, prefetch, crel */

function cssCleanup() {
  addStyles(`
  /* remove ads and blank space between images were ads would have been */
  [class^="ai-viewport"], .code-block, .blox, .kln, [id^="teaser"] {
    display: none !important;
  }

  /* hide various header and footer content. */
  .socialts, .chdesc, .chaptertags, .postarea >#comments, .postbody>article>#comments {
    display: none;
  }

  /* asura broke some of MangaStream's CSS. whatever. */
  .black #thememode {
    display: none
  }

  /* luminousscans junk */
  .flame, .flamewidthwrap { display: none !important }
  .listupd .bs .bsx .limit .type { right: initial; left: 5px }
  `);
}

/**
 * - left/right arrow keys or A/D keys can be used to navigate chapers
 * - K/L keys can be used to rotate the page orientation
 * - dragging with the mouse can scroll the page
 * - mouse swiping horizontally can be used to navigate chapters
 * - in landscape mode, the primary mousewheel can scroll the page
 */
function augmentInteractions() {

  const CURSOR_PREV = 'data:image/svg+xml;base64,'+btoa`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#913fe2" viewBox="0 0 14 14" width="32" height="32">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 1 7.3 6.3a1 1 180 0 0 0 1.4L13 13M7 1 1.3 6.3a1 1 180 0 0 0 1.4L7 13"/>
  </svg>`;

  const CURSOR_NEXT = 'data:image/svg+xml;base64,'+btoa`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#913fe2" viewBox="0 0 14 14" width="32" height="32">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 13 5.7-5.3a1 1 0 0 0 0-1.4L1 1m6 12 5.7-5.3a1 1 0 0 0 0-1.4L7 1"/>
  </svg>`;

  addStyles(`
  /* animate transitions to/from portrait modes, and avoid scrollbar jankiness */
  html {
    transition: .25s transform;
    width: calc(100vw - 17px);
  }
  /* disable builtin drag behavior to allow drag scrolling and swiping */
  * {
    user-select: none;
    -webkit-user-drag: none;
  }
  /* nav swiping cursors */
  body.prev.prev {
    cursor: url("${CURSOR_PREV}") 16 16, auto !important;
  }
  body.next.next {
    cursor: url("${CURSOR_NEXT}") 16 16, auto !important;
  }
  /* drag scrolling cursor */
  body.drag {
    cursor: grabbing !important;
  }
  `);

  // keyboard navigation. good for long strips, which is apparently all this site has.
  const prev = () => $`.ch-prev-btn`?.click();
  const next = () => $`.ch-next-btn`?.click();
  addEventListener('keydown', e => document.activeElement.tagName != 'INPUT' && ({
    ArrowLeft: prev,
    ArrowRight: next,
    a: prev,
    d: next,
    k: () => rotatePage(false), // counter-clockwise
    l: () => rotatePage(true), // clockwise
  }[e.key]?.()), true);

  // inertial drag scrolling, swipe navigation, some rotation logic.
  let orientation = 0; // degrees. one of [0, 90, 180, 270 ];
  let rotating = false; // disable rotation until rotating is false again.
  const wheelFactor = { 0:0, 90: 1, 180: 0, 270: -1 };
  let [ delta, drag, dragged, navPos ] = [0, false, false, 0];
  let previousTouch;
  const eventListeners = {
    // wheel event, used to handle landscape scrolling
    wheel: e => scrollBy(e.wheelDeltaY * wheelFactor[orientation], 0),
    // mouse dragging/swiping
    mousedown: () => {
      [ delta, drag, dragged, navPos ] = [0, true, false, 0];
    },
    mousemove: e => {
      if (drag) {
        if (wheelFactor[orientation]) {
          scrollBy(delta=-e.movementX, 0);
        } else {
          scrollBy(0, delta=-e.movementY);
        }
        if (!wheelFactor[orientation]) { // nav swiping is just too confusing in landscape mode.
          const width = $`#readerarea`.clientWidth;
          navPos+=e.movementX;
          if (navPos < -width/4) document.body.classList.add("prev");
          else if (navPos > width/4) document.body.classList.add("next");
          else document.body.classList.remove("prev", "next");
        }
        if (Math.abs(delta)>3) {
          dragged = true;
          document.body.classList.add('drag');
        }
      }
    },
    mouseup: () => {
      if (drag) {
        drag=false;
        rAF((_, next) => Math.abs(delta*=0.98)>1 && next(wheelFactor[orientation]?scrollBy(delta,0):scrollBy(0, delta)));
      }
      const goPrev = document.body.classList.contains("prev");
      const goNext = document.body.classList.contains("next");
      document.body.classList.remove("prev", "next", "drag");
      if (dragged) {
        dragged = false;
        addEventListener('click', e => {
          if (goPrev || goNext) return;
          e.preventDefault();
          e.stopPropagation();
        }, { capture: true, once: true });
      }
      if (goPrev) prev();
      if (goNext) next();
    }
  };
  events(eventListeners);

  // This page rotation thingy actually feels good now.
  async function rotatePage(clockwise) {
    if (rotating) return;
    rotating = true;
    const html = document.documentElement;
    html.style.overflow = "hidden";
    const { scrollTop, scrollLeft, clientWidth, clientHeight, style } = html;
    const { scrollHeight } = document.body;
    const oldOriginY = parseInt(style.transformOrigin.split(" ")[1]);
    let scrollWidth; // html.scrollWidth is wrong on Firefox. compute it ourselves.

    const from = ({ angle, originY, sw=()=>0, topFactor=0 }) => next => () => {
      style.transition = "initial";
      style.transformOrigin = `${clientWidth/2}px ${originY()}px`;
      style.transform=`rotate(${angle(next == to0)}deg)`;
      scrollBy({top: topFactor*(originY() - oldOriginY), behavior:"instant"});
      scrollTo({left: angle()%180?0:void 0, behavior: "instant"});
      style.transition='';
      scrollWidth = sw();
      return next(angle()==0);
    };
    const to = ({angle, ty=()=>0, left=()=>void 0, top=()=>void 0}) => (flag) => new Promise(next => {
      style.transform=`rotate(${angle(flag)}deg)`;
      html.addEventListener('transitionend', () => {
        style.transition="initial";
        if (angle()==180) style.transformOrigin = `${clientWidth/2}px ${scrollHeight/2}px`;
        style.transform=`rotate(${angle(true)}deg) translate(0,${ty()}px)`;
        scrollTo({left:left(), top:top(), behavior: "instant"});
        style.transition ="";
        style.overflow = angle()%180 ? "auto hidden" : "hidden auto";
        next(angle());
      }, {once: true});
    });

    const from0   = from({ angle:()=>0,            originY:()=>scrollTop + clientHeight/2,                                 sw:()=>scrollTop + clientHeight + 17 });
    const from90  = from({ angle:()=>90,           originY:()=>scrollHeight - scrollLeft - clientWidth/2 - 1, topFactor:1 });
    const from180 = from({ angle:()=>180,          originY:()=>scrollHeight - scrollTop - clientHeight/2,     topFactor:2, sw:()=>scrollHeight - scrollTop + 17 });
    const from270 = from({ angle:to0=>to0?-90:270, originY:()=>scrollLeft + clientHeight/2,                   topFactor:1 });

    const to0   = to({ angle:()=>0 });
    const to90  = to({ angle:()=>90,               ty:()=>scrollWidth - scrollHeight,      left:()=>scrollHeight - html.scrollTop - clientWidth/2 - clientHeight/2 });
    const to180 = to({ angle:()=>180,                                                       top:()=>scrollHeight - html.scrollTop - clientHeight });
    const to270 = to({ angle:from0=>from0?-90:270, ty:()=>html.scrollTop,                  left:()=>html.scrollTop });

    const rotations = {
      0:   [ from0(to270),   from0(to90)    ],
      90:  [ from90(to0),    from90(to180)  ],
      180: [ from180(to90),  from180(to270) ],
      270: [ from270(to180), from270(to0)   ]
    }
    orientation = await rotations[orientation][~~clockwise]();
    rotating = false;
  }
}

function loadAllChapterImages() {
  // don't be shy about loading an entire chapter
  untilDOM(()=>$$`img[loading="lazy"]`).then(images=>images.forEach(img => img.loading="eager"));
}

function retryLoadingBrokenImages() {
  // retry loading broken images
  const imgBackoff = new Map();
  const imgNextRetry = new Map();
  const retryImage = img => {
    console.log("RETRY LOADING IMAGE! ",img.src, {complete:img.complete, naturalHeight:img.naturalHeight}, img);
    const now = Date.now();
    const nextRetry = imgNextRetry.has(img) ? imgNextRetry.get(img) : (imgNextRetry.set(img, now),now);
    if (nextRetry <= now) {
      // exponential backoff between retries: 0ms, 250ms, 500ms, 1s, 2s, 4s, 8s, 10s, 10s, ...
      imgBackoff.set(img, Math.min(10000,(imgBackoff.get(img)??125)*2));
      imgNextRetry.set(img, now + imgBackoff.get(img));
      img.src=img.src;
    } else {
      setTimeout(()=>retryImage(img), nextRetry - now);
    }
  }
  events({ load() {
    observeDOM(() => {
      [...document.images].filter(img=>img.complete && !img.naturalHeight && getComputedStyle(img).display!='none').forEach(retryImage);
    });
  }});
}

function prefetchNextChapterImages() {
  // and prefetch the next chapter's images for even less waiting.
  untilDOM(`a.ch-next-btn[href^="http"]`).then(a => fetchHTML(a.href).then(doc => [...doc.images].forEach(img => prefetch(img.src))));
}

function trackLastReadChapterAndBookmarks() {
  addStyles(`
  /* add a badge on bookmark items showing the number of unread chapters */
  .unread-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9999;
    display: block;
    padding: 2px;
    margin: 5px;
    border: 1px solid #0005b1;
    border-radius: 12px;
    background: #ffc700;
    color: #0005b1;
    font-weight: bold;
    font-family: cursive;
    transform: rotate(10deg);
    width: 24px;
    height: 24px;
    line-height: 18px;
    text-align: center;
  }
  /* text mode badge */
  .soralist .unread-badge {
    position: initial;
    display: inline-block;
    zoom: 0.8;
  }
  `);

  // have bookmarks track the last chapter you read
  // NOTE: If you use TamperMonkey, you can use their "Utilities" thingy to export/import this data across browsers/devices
  // (I wish this was an automatic sync tho.)
  const LAST_READ_CHAPTER_KEY = `${location.hostname}/lastReadChapterKey`;
  const SERIES_ID_HREF_MAP = `${location.hostname}/seriesIdHrefMap`;
  const SERIES_ID_LATEST_MAP = `${location.hostname}/seriesIdLatestMap`;
  const BOOKMARK = `${location.hostname}/bookmark`;
  const BOOKMARK_HTML = `${location.hostname}/bookmarkHTML`;

  // backward-compatibility - going away soon.
  const X_LAST_READ_CHAPTER_KEY = "lastReadChapter";
  const X_SERIES_ID_HREF_MAP = "seriesIdHrefMap";
  const X_SERIES_ID_LATEST_MAP = "seriesIdLatestMap";
  const lastReadChapters = GM_getValue(LAST_READ_CHAPTER_KEY, GM_getValue(X_LAST_READ_CHAPTER_KEY, JSON.parse(localStorage.getItem(X_LAST_READ_CHAPTER_KEY) ?? "{}")));
  const seriesIdHrefMap = GM_getValue(SERIES_ID_HREF_MAP, GM_getValue(X_SERIES_ID_HREF_MAP, JSON.parse(localStorage.getItem(X_SERIES_ID_HREF_MAP) ?? "{}")));
  const seriesIdLatestMap = GM_getValue(SERIES_ID_LATEST_MAP, GM_getValue(X_SERIES_ID_LATEST_MAP, JSON.parse(localStorage.getItem(X_SERIES_ID_LATEST_MAP) ?? "{}")));
  // sync site bookmarks into userscript data.
  // rules:
  // 1. A non-empty usBookmarks is always correct on start.
  // 2. any changes to localStorage while the page is loaded updates usBookmarks.
  const usBookmarks = GM_getValue(BOOKMARK, GM_getValue('bookmark', []));
  if (usBookmarks.length) {
    localStorage.bookmark = JSON.stringify(usBookmarks);
  } else {
    GM_setValue(BOOKMARK, JSON.parse(localStorage.bookmark ?? '[]'));
  }
  (async function watchBookmarks() {
    let lsb = localStorage.bookmark;
    while (true) {
      await until(() => lsb !== localStorage.bookmark);
      lsb = localStorage.bookmark;
      GM_setValue(BOOKMARK, JSON.parse(lsb));
    }
  })();

  function getLastReadChapter(post_id, defaultValue = {}) {
    return lastReadChapters[post_id] ?? defaultValue;
  }

  function setLastReadChapter(post_id, chapter_id, chapter_number) {
    lastReadChapters[post_id] = {
      id: chapter_id,
      number: chapter_number
    };
    GM_setValue(LAST_READ_CHAPTER_KEY, lastReadChapters);
  }

  function getSeriesId(post_id, href) {
    if (post_id) {
      seriesIdHrefMap[href] = post_id;
      GM_setValue(SERIES_ID_HREF_MAP, seriesIdHrefMap);
    } else {
      post_id = seriesIdHrefMap[href];
    }
    return post_id;
  }

  function getLatestChapter(post_id, chapter) {
    if (chapter) {
      seriesIdLatestMap[post_id] = chapter;
      GM_setValue(SERIES_ID_LATEST_MAP, seriesIdLatestMap);
    } else {
      chapter = seriesIdLatestMap[post_id];
    }
    return chapter;
  }


  // series card decorations, used in bookmarks and manga lists pages.
  const CHAPTER_REGEX = /\bChapter (?<chapter>\d+)\b|\bch.(?<ch>\d+)\b/i;
  async function decorateCards(reorder = true) {
    const cards = await untilDOM(() => $$$("//div[contains(@class, 'listupd')]//div[contains(@class, 'bsx')]/.."));
    cards.reverse().forEach(b => {
      const post_id = getSeriesId(b.firstElementChild.dataset.id, $('a', b).href);
      const epxs = $('.epxs',b)?.textContent ?? b.innerHTML.match(/<div class="epxs">(?<epxs>.*?)<\/div>/)?.groups.epxs;
      const latest_chapter = getLatestChapter(post_id, parseInt(epxs?.match(CHAPTER_REGEX)?.groups.chapter));
      const { number, id } = getLastReadChapter(post_id);
      if (id) {
        const unreadChapters = latest_chapter - number;
        if (unreadChapters) {
          // reorder bookmark, link directly to last read chapter and slap an unread count badge.
          if (reorder) b.parentElement.prepend(b);
          $('a',b).href = '/?p=' + id;
          $('.limit',b).prepend(crel('div', {
            className: 'unread-badge',
            textContent: unreadChapters<100 ? unreadChapters : '💀',
            title: `${unreadChapters} unread chapter${unreadChapters>1?'s':''}`
          }))
        } else {
          // nothing new to read here. gray it out.
          b.style = 'filter: grayscale(70%);opacity:.9';
        }
      } else {
        // we don't have data on that series. leave it alone.
      }
    });
  }
  // text-mode /manga/ page. put badges at the end of each series title, and strike through what's already read.
  async function decorateText() {
    const links = await untilDOM(()=>$`.soralist a.series` && $$`.soralist a.series`);
    links.forEach(a => {
      const post_id = getSeriesId(a.rel, a.href);
      const latest_chapter = getLatestChapter(post_id);
      const { number, id } = getLastReadChapter(post_id);
      if (id) {
        const unreadChapters = latest_chapter - number;
        if (unreadChapters) {
          a.href = '/?p=' + id;
          a.append(crel('div', {
            className: 'unread-badge',
            textContent: unreadChapters<100 ? unreadChapters : '💀',
            title: `${unreadChapters} unread chapter${unreadChapters>1?'s':''}`
          }))
        } else {
          // nothing new to read here. gray it out.
          a.style = 'text-decoration: line-through;color: #777'
        }
      }
    })
  }

  // page specific tweaks
  const chapterMatch = document.title.match(CHAPTER_REGEX);
  if (chapterMatch) {
    until(()=>unsafeWindow.post_id).then(() => {
      // We're on a chapter page. Save chapter number and id if greater than last saved chapter number.
      const chapter_number = parseInt(chapterMatch.groups.chapter ?? chapterMatch.groups.ch);
      const { post_id, chapter_id } = unsafeWindow;
      const { number = 0 } = getLastReadChapter(post_id);
      if (number<chapter_number) {
        setLastReadChapter(post_id, chapter_id, chapter_number);
      }
    });
  }

  if (location.pathname.match(/^\/bookmarks?\/$/)) (async () => {
    // We're on a bookmark page. Wait for them to load, then tweak them to point to last read chapter, and gray out the ones that are fully read so far.
    setTimeout(()=> {
      if (!$`#bookmark-pool [data-id]`) {
        // no data yet from bookmark API. show a fallback.
        $`#bookmark-pool`.innerHTML = GM_getValue(BOOKMARK_HTML, localStorage.bookmarkHTML ?? '');
        // add a marker so we know this is just a cached rendering.
        $`#bookmark-pool [data-id]`.classList.add('cached');
        // decorate what we have.
        decorateCards();
      }
    }, 1000);
    // wait until we get bookmark markup from the server, not cached.
    await untilDOM("#bookmark-pool .bs:first-child [data-id]:not(.cached)");
    // bookmarks' ajax API is flaky (/aggressively rate-limited) - mitigate.
    GM_setValue(BOOKMARK_HTML, $`#bookmark-pool`.innerHTML);
    decorateCards();
  })(); else {
    // try generic decorations on any non-bookmark page
    decorateCards(false);
    decorateText();
  }

  untilDOM(`#chapterlist`).then(() => {
    // Add a "Continue Reading" button on main series pages.
    const post_id = $`.bookmark`.dataset.id;
    const { number, id } = getLastReadChapter(post_id);
    // add a "Continue Reading" button for series we recognize
    if (id) {
      $`.lastend`.prepend(crel('div', {
          className: 'inepcx',
          style: 'width: 100%'
        },
         crel('a', { href: '/?p=' + id },
           crel('span', {}, 'Continue Reading'),
           crel('span', { className: 'epcur' }, 'Chapter ' + number))
         )
      );
    }
  });
}

function collapseFooters() {
  addStyles(`
  /* style a custom button to expand collapsed footer areas */
  button.expand {
    float: right;
    border: 0;
    border-radius: 20px;
    padding: 2px 15px;
    font-size: 13px;
    line-height: 25px;
    background: #333;
    color: #888;
    font-weight: bold;
    cursor: pointer;
  }
  button.expand:hover {
    background: #444;
  }
  `);

  function makeCollapsedFooter({ label, section }) {
    const elt = crel('div', {
      className: 'bixbox',
      style: 'padding: 8px 15px'
    }, crel('button', {
      className: 'expand',
      textContent: label,
      onclick() {
        section.style.display = 'block';
        elt.style.display = 'none';
      }
    }));
    section.parentElement.insertBefore(elt, section);
  }

  untilDOM(()=>$$$("//span[text()='Related Series' or text()='Similar Series']/../../..")[0]).then(related => {
    // Tweak footer content on any page that has them
    // 1. collapse related series.
    makeCollapsedFooter({label: 'Show Related Series', section: related});
    related.style.display = 'none';
  });

  untilDOM("#comments").then(comments => {
    // 2. collapse comments.
    makeCollapsedFooter({label: 'Show Comments', section: comments});
  });
}

// userscript entrypoint
function main() {
  // ads and antifeatures
  cssCleanup();
  // input
  augmentInteractions();
  // network
  loadAllChapterImages();
  retryLoadingBrokenImages();
  prefetchNextChapterImages();
  // UI
  trackLastReadChapterAndBookmarks();
  collapseFooters();
}

main();