// ==UserScript==
// @name         Filterboxd
// @namespace    https://github.com/blakegearin/filterboxd
// @version      1.5.0
// @description  Filter content on Letterboxd
// @author       Blake Gearin <hello@blakeg.me> (https://blakegearin.com)
// @match        https://letterboxd.com/*
// @require      https://openuserjs.org/src/libs/sizzle/GM_config.js
// @grant        GM.getValue
// @grant        GM.setValue
// @icon         https://raw.githubusercontent.com/blakegearin/filterboxd/main/img/logo.png
// @supportURL   https://github.com/blakegearin/filterboxd/issues
// @license      MIT
// @copyright    2024–2025, Blake Gearin (https://blakegearin.com)
// @downloadURL https://update.greasyfork.icu/scripts/519719/Filterboxd.user.js
// @updateURL https://update.greasyfork.icu/scripts/519719/Filterboxd.meta.js
// ==/UserScript==

/* jshint esversion: 6 */
/* global GM_config */

(function() {
  'use strict';

  const VERSION = '1.5.0';
  const USERSCRIPT_NAME = 'Filterboxd';
  let GMC = null;

  // Log levels
  const SILENT = 0;
  const QUIET = 1;
  const INFO = 2;
  const DEBUG = 3;
  const VERBOSE = 4;
  const TRACE = 5;

  // Change to true if you want to clear all your local data; this is irreversible
  const RESET_DATA = false;

  const LOG_LEVELS = {
    default: 'quiet',
    options: [
      'silent',
      'quiet',
      'info',
      'debug',
      'verbose',
      'trace',
    ],
    getName: (level) => {
      return {
        0: 'silent',
        1: 'quiet',
        2: 'info',
        3: 'debug',
        4: 'verbose',
        5: 'trace',
      }[level];
    },
    getValue: (name) => {
      return {
        silent: SILENT,
        quiet: QUIET,
        info: INFO,
        debug: DEBUG,
        verbose: VERBOSE,
        trace: TRACE,
      }[name];
    },
  };

  function currentLogLevel() {
    if (GMC === null) return LOG_LEVELS.getValue(LOG_LEVELS.default);

    return LOG_LEVELS.getValue(GMC.get('logLevel'));
  }

  function log (level, message, variable = undefined) {
    if (currentLogLevel() < level) return;

    const levelName = LOG_LEVELS.getName(level);

    const log = `[${VERSION}] [${levelName}] ${USERSCRIPT_NAME}: ${message}`;

    console.groupCollapsed(log);

    if (variable !== undefined) console.dir(variable, { depth: null });

    console.trace();
    console.groupEnd();
  }

  function logError (message, error = undefined) {
    const log = `[${VERSION}] [error] ${USERSCRIPT_NAME}: ${message}`;

    console.groupCollapsed(log);

    if (error !== undefined) console.error(error);

    console.trace();
    console.groupEnd();
  }

  log(TRACE, 'Starting');

  function gmcGet(key) {
    log(DEBUG, 'gmcGet()');

    try {
      return GMC.get(key);
    } catch (error) {
      logError(`Error setting GMC, key=${key}`, error);
    }
  }

  function gmcSet(key, value) {
    log(DEBUG, 'gmcSet()');

    try {
      return GMC.set(key, value);
    } catch (error) {
      logError(`Error setting GMC, key=${key}, value=${value}`, error);
    }
  }

  function gmcSave() {
    log(DEBUG, 'gmcSave()');

    try {
      return GMC.save();
    } catch (error) {
      logError('Error saving GMC', error);
    }
  }

  function startObserving() {
    log(DEBUG, 'startObserving()');

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

  function modifyThenObserve(callback) {
    log(DEBUG, 'modifyThenObserve()');

    OBSERVER.disconnect();
    callback();
    startObserving();
  }

  function mutationsExceedsLimits() {
    // Fail-safes to prevent infinite loops
    if (IDLE_MUTATION_COUNT > gmcGet('maxIdleMutations')) {
      logError('Max idle mutations exceeded');
      OBSERVER.disconnect();

      return true;
    } else if (ACTIVE_MUTATION_COUNT >= gmcGet('maxActiveMutations')) {
      logError('Max active mutations exceeded');
      OBSERVER.disconnect();

      return true;
    }

    return false;
  }

  function observeAndModify(mutationsList) {
    log(VERBOSE, 'observeAndModify()');

    if (mutationsExceedsLimits()) return;

    log(VERBOSE, 'mutationsList.length', mutationsList.length);

    for (const mutation of mutationsList) {
      if (mutation.type !== 'childList') return;

      log(TRACE, 'mutation', mutation);

      let sidebarUpdated;
      let popMenuUpdated;
      let filtersApplied;

      modifyThenObserve(() => {
        sidebarUpdated = maybeAddListItemToSidebar();
        log(VERBOSE, 'sidebarUpdated', sidebarUpdated);

        popMenuUpdated = addListItemToPopMenu();
        log(VERBOSE, 'popMenuUpdated', popMenuUpdated);

        filtersApplied = applyFilters();
        log(VERBOSE, 'filtersApplied', filtersApplied);
      });

      const activeMutation = sidebarUpdated || popMenuUpdated || filtersApplied;
      log(DEBUG, 'activeMutation', activeMutation);

      if (activeMutation) {
        ACTIVE_MUTATION_COUNT++;
        log(VERBOSE, 'ACTIVE_MUTATION_COUNT', ACTIVE_MUTATION_COUNT);
      } else {
        IDLE_MUTATION_COUNT++;
        log(VERBOSE, 'IDLE_MUTATION_COUNT', IDLE_MUTATION_COUNT);
      }

      if (mutationsExceedsLimits()) break;
    }
  }

  // Source: https://stackoverflow.com/a/21144505/5988852
  function countWords(string) {
    var matches = string.match(/[\w\d’'-]+/gi);
    return matches ? matches.length : 0;
  }

  function createId(string) {
    log(TRACE, 'createId()');

    if (string.startsWith('#')) return string;

    if (string.startsWith('.')) {
      logError(`Attempted to create an id from a class: "${string}"`);
      return;
    }

    if (string.startsWith('[')) {
      logError(`Attempted to create an id from an attribute selector: "${string}"`);
      return;
    }

    return `#${string}`;
  }

  const FILM_BEHAVIORS = [
    'Remove',
    'Fade',
    'Blur',
    'Replace poster',
    'Custom',
  ];
  const REVIEW_BEHAVIORS = [
    'Remove',
    'Fade',
    'Blur',
    'Replace text',
    'Custom',
  ];
  const COLUMN_ONE_WIDTH = '33%';
  const COLUMN_TWO_WIDTH = '64.8%';
  const COLUMN_HALF_WIDTH = '50%';

  let IDLE_MUTATION_COUNT = 0;
  let ACTIVE_MUTATION_COUNT = 0;
  let SELECTORS = {
    filmPosterPopMenu: {
      self: '.film-poster-popmenu',
      userscriptListItemClass: 'filterboxd-list-item',
      addToList: '.film-poster-popmenu .menu-item-add-to-list',
      addThisFilm: '.film-poster-popmenu .menu-item-add-this-film',
    },
    filmPageSections: {
      backdropImage: 'body.backdrop-loaded .backdrop-container',
      // Left column
      poster: '#film-page-wrapper section.poster-list a[data-js-trigger="postermodal"]',
      stats: '#film-page-wrapper section.poster-list ul.film-stats',
      whereToWatch: '#film-page-wrapper section.watch-panel',
      // Right column
      userActionsPanel: '#film-page-wrapper section#userpanel',
      ratings: '#film-page-wrapper section.ratings-histogram-chart',
      // Middle column
      releaseYear: '#film-page-wrapper .details .releaseyear',
      director: '#film-page-wrapper .details .credits',
      tagline: '#film-page-wrapper .tagline',
      description: '#film-page-wrapper .truncate',
      castTab: '#film-page-wrapper #tabbed-content ul li:nth-of-type(1),#film-page-wrapper #tab-cast',
      crewTab: '#film-page-wrapper #tabbed-content ul li:nth-of-type(2),#film-page-wrapper #tab-crew',
      detailsTab: '#film-page-wrapper #tabbed-content ul li:nth-of-type(3),#film-page-wrapper #tab-details',
      genresTab: '#film-page-wrapper #tabbed-content ul li:nth-of-type(4),#film-page-wrapper #tab-genres',
      releasesTab: '#film-page-wrapper #tabbed-content ul li:nth-of-type(5),#film-page-wrapper #tab-releases',
      activityFromFriends: '#film-page-wrapper section.activity-from-friends',
      filmNews: '#film-page-wrapper section.film-news',
      reviewsFromFriends: '#film-page-wrapper section#popular-reviews-with-friends',
      popularReviews: '#film-page-wrapper section#popular-reviews',
      recentReviews: '#film-page-wrapper section#recent-reviews',
      relatedFilms: '#film-page-wrapper section#related',
      similarFilms: '#film-page-wrapper section.related-films:not(#related)',
      mentionedBy: '#film-page-wrapper section#film-hq-mentions',
      popularLists: '#film-page-wrapper section:has(#film-popular-lists)',
    },
    filter: {
      filmClass: 'filterboxd-filter-film',
      reviewClass: 'filterboxd-filter-review',
      reviews: {
        ratings: '.film-detail .attribution .rating,.film-detail-meta .rating,.activity-summary .rating,.film-metadata .rating,.-rated .rating,.poster-viewingdata .rating',
        likes: '.film-detail .attribution .icon-liked,.film-metadata .icon-liked,.review .like-link-target,.film-detail-content .like-link-target',
        comments: '.film-detail .attribution .content-metadata,#content #comments',
        withSpoilers: '.film-detail:has(.contains-spoilers)',
        withoutRatings: '.film-detail:not(:has(.rating))',
      },
    },
    homepageSections: {
      friendsHaveBeenWatching: '.person-home h1.title-hero span',
      newFromFriends: '.person-home section#recent-from-friends',
      popularWithFriends: '.person-home section#popular-with-friends',
      discoveryStream: '.person-home section.section-discovery-stream',
      latestNews: '.person-home section#latest-news:not(:has(.teaser-grid))',
      popularReviewsWithFriends: '.person-home section#popular-reviews',
      newListsFromFriends: '.person-home section:has([href="/lists/friends/"])',
      popularLists: '.person-home section:has([href="/lists/popular/this/week/"])',
      recentStories: '.person-home section.stories-section',
      recentShowdowns: '.person-home section:has([href="/showdown/"])',
      recentNews: '.person-home section#latest-news:has(.teaser-grid)',
    },
    processedClass: {
      apply: 'filterboxd-hide-processed',
      remove: 'filterboxd-unhide-processed',
    },
    settings: {
      clear: '.clear',
      favoriteFilms: '.favourite-films-selector',
      filteredTitleLinkClass: 'filtered-title-span',
      note: '.note',
      posterList: '.poster-list',
      removePendingClass: 'remove-pending',
      savedBadgeClass: 'filtered-saved',
      subNav: '.sub-nav',
      subtitle: '.mob-subtitle',
      tabbedContentId: '#tabbed-content',
    },
    userpanel: {
      self: '#userpanel',
      userscriptListItemId: 'filterboxd-userpanel-list-item',
      addThisFilm: '#userpanel .add-this-film',
    },
  };

  function addListItemToPopMenu() {
    log(DEBUG, 'addListItemToPopMenu()');

    const filmPosterPopMenus = document.querySelectorAll(SELECTORS.filmPosterPopMenu.self);

    if (!filmPosterPopMenus) {
      log(`Selector ${SELECTORS.filmPosterPopMenu.self} not found`, DEBUG);
      return false;
    }

    let pageUpdated = false;

    filmPosterPopMenus.forEach(filmPosterPopMenu => {
      const userscriptListItemPresent = filmPosterPopMenu.querySelector(
        `.${SELECTORS.filmPosterPopMenu.userscriptListItemClass}`,
      );
      if (userscriptListItemPresent) return;

      const lastListItem = filmPosterPopMenu.querySelector('li:last-of-type');

      if (!lastListItem) {
        logError(`Selector ${SELECTORS.filmPosterPopMenu} li:last-of-type not found`);
        return;
      }

      const unorderedList = filmPosterPopMenu.querySelector('ul');
      if (!unorderedList) {
        logError(`Selector ${SELECTORS.filmPosterPopMenu.self} ul not found`);
        return;
      }

      modifyThenObserve(() => {
        let userscriptListItem = lastListItem.cloneNode(true);
        userscriptListItem.classList.add(SELECTORS.filmPosterPopMenu.userscriptListItemClass);

        userscriptListItem = buildUserscriptLink(userscriptListItem, unorderedList);
        lastListItem.parentNode.append(userscriptListItem);
      });

      pageUpdated = true;
    });

    return pageUpdated;
  }

  function addFilterToFilm({ id, slug }) {
    log(DEBUG, 'addFilterToFilm()');

    let pageUpdated = false;

    const idMatch = `[data-film-id="${id}"]`;
    let appliedSelector = `.${SELECTORS.processedClass.apply}`;

    const replaceBehavior = gmcGet('filmBehaviorType') === 'Replace poster';
    log(VERBOSE, 'replaceBehavior', replaceBehavior);

    if (replaceBehavior) appliedSelector = '[data-original-img-src]';

    log(VERBOSE, 'Activity page reviews');
    document.querySelectorAll(`section.activity-row ${idMatch}`).forEach(posterElement => {
      applyFilterToFilm(posterElement, 3);

      pageUpdated = true;
    });

    log(VERBOSE, 'Activity page likes');
    document.querySelectorAll(`section.activity-row .activity-summary a[href*="${slug}"]:not(${appliedSelector})`).forEach(posterElement => {
      applyFilterToFilm(posterElement, 3);

      pageUpdated = true;
    });

    log(VERBOSE, 'New from friends');
    document.querySelectorAll(`.poster-container ${idMatch}:not(${appliedSelector})`).forEach(posterElement => {
      applyFilterToFilm(posterElement, 1);

      pageUpdated = true;
    });

    log(VERBOSE, 'Reviews');
    document.querySelectorAll(`.review-tile ${idMatch}:not(${appliedSelector})`).forEach(posterElement => {
      applyFilterToFilm(posterElement, 3);

      pageUpdated = true;
    });

    log(VERBOSE, 'Diary');
    document.querySelectorAll(`.td-film-details [data-original-img-src]${idMatch}:not(${appliedSelector})`).forEach(posterElement => {
      applyFilterToFilm(posterElement, 2);

      pageUpdated = true;
    });

    log(VERBOSE, 'Popular with friends, competitions');
    const remainingElements = document.querySelectorAll(
      `div:not(.popmenu):not(.actions-panel) ${idMatch}:not(aside [data-film-id="${id}"]):not(${appliedSelector})`,
    );
    remainingElements.forEach(posterElement => {
      applyFilterToFilm(posterElement, 0);

      pageUpdated = true;
    });

    return pageUpdated;
  }

  function addToHiddenTitles(filmMetadata) {
    log(DEBUG, 'addToHiddenTitles()');

    const filmFilter = getFilter('filmFilter');
    filmFilter.push(filmMetadata);
    log(VERBOSE, 'filmFilter', filmFilter);

    setFilter('filmFilter', filmFilter);
  }

  function applyFilters() {
    log(DEBUG, 'applyFilters()');

    let pageUpdated = false;

    const filmFilter = getFilter('filmFilter');
    log(VERBOSE, 'filmFilter', filmFilter);

    const reviewFilter = getFilter('reviewFilter');
    log(VERBOSE, 'reviewFilter', reviewFilter);

    const replaceBehavior = gmcGet('reviewBehaviorType') === 'Replace text';
    log(VERBOSE, 'replaceBehavior', replaceBehavior);

    const reviewBehaviorReplaceValue = gmcGet('reviewBehaviorReplaceValue');
    log(VERBOSE, 'reviewBehaviorReplaceValue', reviewBehaviorReplaceValue);

    const homepageFilter = getFilter('homepageFilter');
    log(VERBOSE, 'homepageFilter', homepageFilter);

    const filmPageFilter = getFilter('filmPageFilter');
    log(VERBOSE, 'filmPageFilter', filmPageFilter);

    modifyThenObserve(() => {
      filmFilter.forEach(filmMetadata => {
        const filmUpdated = addFilterToFilm(filmMetadata);
        if (filmUpdated) pageUpdated = true;
      });

      const selectorReviewElementsToFilter = [];
      if (reviewFilter.ratings) selectorReviewElementsToFilter.push(SELECTORS.filter.reviews.ratings);
      if (reviewFilter.likes) selectorReviewElementsToFilter.push(SELECTORS.filter.reviews.likes);
      if (reviewFilter.comments) selectorReviewElementsToFilter.push(SELECTORS.filter.reviews.comments);

      log(VERBOSE, 'selectorReviewElementsToFilter', selectorReviewElementsToFilter);

      if (selectorReviewElementsToFilter.length) {
        document.querySelectorAll(selectorReviewElementsToFilter.join(',')).forEach(reviewElement => {
          reviewElement.style.display = 'none';

          pageUpdated = true;
        });
      }

      const reviewsToFilterSelectors = [];
      if (reviewFilter.withSpoilers) reviewsToFilterSelectors.push(SELECTORS.filter.reviews.withSpoilers);
      if (reviewFilter.withoutRatings) reviewsToFilterSelectors.push(SELECTORS.filter.reviews.withoutRatings);

      log(VERBOSE, 'reviewsToFilterSelectors', reviewsToFilterSelectors);

      if (reviewsToFilterSelectors.length) {
        document.querySelectorAll(reviewsToFilterSelectors.join(',')).forEach(review => {
          if (replaceBehavior) {
            review.querySelector('.body-text').innerText = reviewBehaviorReplaceValue;
          }

          review.classList.add(SELECTORS.filter.reviewClass);

          pageUpdated = true;
        });
      }

      if (reviewFilter.byWordCount) {
        const reviewMinimumWordCount = getFilter('reviewMinimumWordCount');
        log(VERBOSE, 'reviewMinimumWordCount', reviewMinimumWordCount);

        document.querySelectorAll('.film-detail:not(.filterboxd-filter-review)').forEach(review => {
          const reviewText = review.querySelector('.body-text').innerText;
          log(VERBOSE, 'reviewText', reviewText);

          if (countWords(reviewText) >= reviewMinimumWordCount) return;

          if (replaceBehavior) {
            review.querySelector('.body-text').innerText = reviewBehaviorReplaceValue;
          }

          review.classList.add(SELECTORS.filter.reviewClass);

          pageUpdated = true;
        });
      }

      const sectionsToFilter = [];

      const homepageSectionsToFilter = Object.keys(homepageFilter)
        .filter(key => homepageFilter[key])
        .map(key => SELECTORS.homepageSections[key])
        .filter(Boolean);
      log(VERBOSE, 'homepageSectionToFilter', homepageSectionsToFilter);

      const filmPageSectionsToFilter = Object.keys(filmPageFilter)
        .filter(key => filmPageFilter[key])
        .map(key => SELECTORS.filmPageSections[key])
        .filter(Boolean);
      log(VERBOSE, 'filmPageSectionsToFilter', filmPageSectionsToFilter);

      sectionsToFilter.push(...homepageSectionsToFilter);
      sectionsToFilter.push(...filmPageSectionsToFilter);

      if (sectionsToFilter.length) {
        document.querySelectorAll(sectionsToFilter.join(',')).forEach(filterSection => {
          filterSection.style.display = 'none';

          pageUpdated = true;
        });
      }

      if (filmPageFilter.backdropImage) {
        document.querySelector('#content.-backdrop')?.classList.remove('-backdrop');
        pageUpdated = true;
      }
    });

    return pageUpdated;
  }

  function applyFilterToFilm(element, levelsUp = 0) {
    log(DEBUG, 'applyFilterToFilm()');

    const replaceBehavior = gmcGet('filmBehaviorType') === 'Replace poster';
    log(VERBOSE, 'replaceBehavior', replaceBehavior);

    if (replaceBehavior) {
      const filmBehaviorReplaceValue = gmcGet('filmBehaviorReplaceValue');
      log(VERBOSE, 'filmBehaviorReplaceValue', filmBehaviorReplaceValue);

      const elementImg = element.querySelector('img');
      if (!elementImg) return;

      const originalImgSrc = elementImg.src;
      if (!originalImgSrc) return;

      if (originalImgSrc === filmBehaviorReplaceValue) return;

      element.setAttribute('data-original-img-src', originalImgSrc);

      element.querySelector('img').src = filmBehaviorReplaceValue;
      element.querySelector('img').srcset = filmBehaviorReplaceValue;

      element.classList.add(SELECTORS.processedClass.apply);
      element.classList.remove(SELECTORS.processedClass.remove);
    } else {
      let target = element;

      for (let i = 0; i < levelsUp; i++) {
        if (target.parentNode) {
          target = target.parentNode;
        } else {
          break;
        }
      }

      log(VERBOSE, 'target', target);

      target.classList.add(SELECTORS.filter.filmClass);
      element.classList.add(SELECTORS.processedClass.apply);
      element.classList.remove(SELECTORS.processedClass.remove);
    }
  }

  function buildBehaviorFormRows(parentDiv, filterName, selectArrayValues, behaviorsMetadata) {
    const behaviorValue = gmcGet(`${filterName}BehaviorType`);
    log(DEBUG, 'behaviorValue', behaviorValue);

    const behaviorChange = (event) => {
      const filmBehaviorType = event.target.value;
      updateBehaviorCSSVariables(filterName, filmBehaviorType);
    };

    const behaviorFormRow = createFormRow({
      formRowStyle: `width: ${COLUMN_ONE_WIDTH};`,
      labelText: 'Behavior',
      inputValue: behaviorValue,
      inputType: 'select',
      selectArray: selectArrayValues,
      selectOnChange: behaviorChange,
    });

    parentDiv.appendChild(behaviorFormRow);

    // Fade amount
    const behaviorFadeAmount = parseInt(gmcGet(behaviorsMetadata.fade.fieldName));
    log(DEBUG, 'behaviorFadeAmount', behaviorFadeAmount);

    const fadeAmountFormRow = createFormRow({
      formRowClass: ['update-details'],
      formRowStyle: `width: ${COLUMN_TWO_WIDTH}; float: right; display: var(--filterboxd-${filterName}-behavior-fade);`,
      labelText: 'Opacity',
      inputValue: behaviorFadeAmount,
      inputType: 'number',
      inputMin: 0,
      inputMax: 100,
      inputStyle: 'width: 100px !important;',
      notes: '%',
      notesStyle: 'width: 10px; margin-left: 14px;',
    });

    parentDiv.appendChild(fadeAmountFormRow);

    // Blur amount
    const behaviorBlurAmount = parseInt(gmcGet(behaviorsMetadata.blur.fieldName));
    log(DEBUG, 'behaviorBlurAmount', behaviorBlurAmount);

    const blurAmountFormRow = createFormRow({
      formRowClass: ['update-details'],
      formRowStyle: `width: ${COLUMN_TWO_WIDTH}; float: right; display: var(--filterboxd-${filterName}-behavior-blur);`,
      labelText: 'Amount',
      inputValue: behaviorBlurAmount,
      inputType: 'number',
      inputMin: 1,
      inputStyle: 'width: 100px !important;',
      notes: 'px',
      notesStyle: 'width: 10px; margin-left: 14px;',
    });

    parentDiv.appendChild(blurAmountFormRow);

    // Replace value
    const behaviorReplaceValue = gmcGet(behaviorsMetadata.replace.fieldName);
    log(DEBUG, 'behaviorReplaceValue', behaviorReplaceValue);

    const replaceValueFormRow = createFormRow({
      formRowStyle: `width: ${COLUMN_TWO_WIDTH}; float: right; display: var(--filterboxd-${filterName}-behavior-replace);`,
      labelText: behaviorsMetadata.replace.labelText,
      inputValue: behaviorReplaceValue,
      inputType: 'text',
    });

    parentDiv.appendChild(replaceValueFormRow);

    // Custom CSS
    const behaviorCustomValue = gmcGet(behaviorsMetadata.custom.fieldName);
    log(DEBUG, 'behaviorCustomValue', behaviorCustomValue);

    const cssFormRow = createFormRow({
      formRowStyle: `width: ${COLUMN_TWO_WIDTH}; float: right; display: var(--filterboxd-${filterName}-behavior-custom);`,
      labelText: 'CSS',
      inputValue: behaviorCustomValue,
      inputType: 'text',
    });

    parentDiv.appendChild(cssFormRow);

    return [
      behaviorFormRow,
      fadeAmountFormRow,
      blurAmountFormRow,
      replaceValueFormRow,
      behaviorCustomValue,
    ];
  }

  function buildToggleSectionListItems(filterName, unorderedList, listItemMetadata) {
    log(DEBUG, 'buildListItemToggles()');

    const filter = getFilter(filterName);

    listItemMetadata.forEach(metadata => {
      const { type, name, description } = metadata;

      if (type === 'label') {
        const label = document.createElement('label');
        unorderedList.appendChild(label);

        label.innerText = description;
        label.style.cssText = 'margin: 1em 0em;';

        return;
      }

      const checked = filter[name] || false;

      const listItem = document.createElement('li');
      listItem.classList.add('option');

      const label = document.createElement('label');
      listItem.appendChild(label);

      label.classList.add('option-label', '-toggle', 'switch-control');

      const labelSpan = document.createElement('span');
      label.appendChild(labelSpan);

      labelSpan.classList.add('label');
      labelSpan.innerText = description;

      const labelInput = document.createElement('input');
      label.appendChild(labelInput);

      labelInput.classList.add('checkbox');
      labelInput.setAttribute('type', 'checkbox');
      labelInput.setAttribute('role', 'switch');
      labelInput.setAttribute('data-filter-name', filterName);
      labelInput.setAttribute('data-field-name', name);
      labelInput.checked = checked;

      const labelCheckboxSpan = document.createElement('span');
      label.appendChild(labelCheckboxSpan);

      labelCheckboxSpan.classList.add('state');

      const checkboxTrackSpan = document.createElement('span');
      labelCheckboxSpan.appendChild(checkboxTrackSpan);

      checkboxTrackSpan.classList.add('track');

      const checkboxHandleSpan = document.createElement('span');
      checkboxTrackSpan.appendChild(checkboxHandleSpan);

      checkboxHandleSpan.classList.add('handle');

      unorderedList.appendChild(listItem);
    });
  }

  function buildUserscriptLink(userscriptListItem, unorderedList) {
    log(DEBUG, 'buildUserscriptLink()');

    const userscriptLink = userscriptListItem.firstElementChild;
    userscriptListItem.onclick = (event) => {
      event.preventDefault();

      log(DEBUG, 'userscriptListItem clicked');
      log(VERBOSE, 'event', event);

      const link = event.target;
      log(VERBOSE, 'link', link);

      const id = parseInt(link.getAttribute('data-film-id'));
      const slug = link.getAttribute('data-film-slug');
      const name = link.getAttribute('data-film-name');
      const year = link.getAttribute('data-film-release-year');

      const filmMetadata = {
        id,
        slug,
        name,
        year,
      };

      const titleIsHidden = link.getAttribute('data-title-hidden') === 'true';

      modifyThenObserve(() => {
        if (titleIsHidden) {
          removeFilterFromFilm(filmMetadata);
          removeFromFilmFilter(filmMetadata);
        } else {
          addFilterToFilm(filmMetadata);
          addToHiddenTitles(filmMetadata);
        }

        const sidebarLink = document.querySelector(createId(SELECTORS.userpanel.userscriptListItemId));
        if (sidebarLink) {
          updateLinkInPopMenu(!titleIsHidden, sidebarLink);

          const popupLink = document.querySelector(`.${SELECTORS.filmPosterPopMenu.userscriptListItemClass} a`);
          if (popupLink) updateLinkInPopMenu(!titleIsHidden, popupLink);
        } else {
          updateLinkInPopMenu(!titleIsHidden, link);
        }
      });
    };

    let filmPosterSelector;

    let titleId = unorderedList.querySelector('[data-film-id]')?.getAttribute('data-film-id');
    log(DEBUG, 'titleId', titleId);

    if (titleId) {
      filmPosterSelector = `[data-film-id='${titleId}'].film-poster`;
    } else {
      const titleName = unorderedList.querySelector('[data-film-name]')?.getAttribute('data-film-name');
      log(DEBUG, 'titleName', titleName);

      if (titleName) {
        filmPosterSelector = `[data-film-name='${titleName}'].film-poster`;
      } else {
        logError('No film id or name found in unordered list');
        return;
      }
    }

    log(DEBUG, 'filmPosterSelector', filmPosterSelector);
    const filmPoster = document.querySelector(filmPosterSelector);
    log(DEBUG, 'filmPoster', filmPoster);

    if (!titleId) {
      titleId = filmPoster?.getAttribute('data-film-id');
      log(DEBUG, 'titleId', titleId);

      if (!titleId) {
        logError('No film id found on film poster');
        return;
      }
    }

    userscriptLink.setAttribute('data-film-id', titleId);

    if (!filmPoster) {
      logError('No film poster found');
      log(INFO, 'unorderedList', unorderedList);
    }

    const titleSlug =
      unorderedList.querySelector('[data-film-slug]')?.getAttribute('data-film-slug')
      || filmPoster?.getAttribute('data-film-slug');
    log(DEBUG, 'titleSlug', titleSlug);

    if (titleSlug) userscriptLink.setAttribute('data-film-slug', titleSlug);

    const titleName = unorderedList.querySelector('[data-film-name]')?.getAttribute('data-film-name');
    log(DEBUG, 'titleName', titleName);
    if (titleName) userscriptLink.setAttribute('data-film-name', titleName);

    // Title year isn't present in the pop menu list, so retrieve it from the film poster
    const titleYear =
      filmPoster?.querySelector('.has-menu')?.getAttribute('data-original-title')?.match(/\((\d{4})\)/)?.[1]
      || document.querySelector('div.releaseyear a')?.innerText
      || document.querySelector('small.metadata a')?.innerText
      || filmPoster?.querySelector('.frame-title')?.innerText?.match(/\((\d{4})\)/)?.[1];
    log(DEBUG, 'titleYear', titleYear);
    if (titleYear) userscriptLink.setAttribute('data-film-release-year', titleYear);

    const filmFilter = getFilter('filmFilter');
    log(DEBUG, 'filmFilter', filmFilter);

    const titleIsHidden = filmFilter.some(
      filteredFilm => filteredFilm.id?.toString() === titleId?.toString(),
    );
    log(DEBUG, 'titleIsHidden', titleIsHidden);

    updateLinkInPopMenu(titleIsHidden, userscriptLink);

    userscriptLink.removeAttribute('class');

    return userscriptListItem;
  }

  function buildToggleSection(parentElement, sectionTitle, filerName, sectionMetadata) {
    log(DEBUG, 'buildToggleSection()');

    const formRowDiv = document.createElement('div');
    parentElement.appendChild(formRowDiv);

    formRowDiv.style.cssText = 'margin-bottom: 40px;';

    const sectionHeader = document.createElement('h3');
    formRowDiv.append(sectionHeader);

    sectionHeader.classList.add('title-3');
    sectionHeader.style.cssText = 'margin-top: 0em;';
    sectionHeader.innerText = sectionTitle;

    const unorderedList = document.createElement('ul');
    formRowDiv.append(unorderedList);

    unorderedList.classList.add('options-list', '-toggle-list', 'js-toggle-list');

    buildToggleSectionListItems(
      filerName,
      unorderedList,
      sectionMetadata,
    );

    let formColumnDiv = document.createElement('div');
    formRowDiv.appendChild(formColumnDiv);

    formColumnDiv.classList.add('form-columns', '-cols2');
  }

  function createFormRow({
    formRowClass = [],
    formRowStyle = '',
    labelText = '',
    helpText = '',
    inputValue = '',
    inputType = 'text',
    inputMin = null,
    inputMax = null,
    inputStyle = '',
    selectArray = [],
    selectOnChange = () => {},
    notes = '',
    notesStyle = '',
  }) {
    log(DEBUG, 'createFormRow()');

    const formRow = document.createElement('div');
    formRow.classList.add('form-row');
    formRow.style.cssText = formRowStyle;
    formRow.classList.add(...formRowClass);

    const selectList = document.createElement('div');
    formRow.appendChild(selectList);

    selectList.classList.add('select-list');

    const label = document.createElement('label');
    selectList.appendChild(label);

    label.classList.add('label');
    label.textContent = labelText;

    if (helpText) {
      const helpIcon = document.createElement('span');
      label.appendChild(helpIcon);

      helpIcon.classList.add('s', 'icon-14', 'icon-tip', 'tooltip');
      helpIcon.setAttribute('target', '_blank');
      helpIcon.setAttribute('data-html', 'true');
      helpIcon.setAttribute('data-original-title', helpText);
      helpIcon.innerHTML = '<span class="icon"></span>(Help)';
    }

    const inputDiv = document.createElement('div');
    selectList.appendChild(inputDiv);

    inputDiv.classList.add('input');
    inputDiv.style.cssText = inputStyle;

    if (inputType === 'select') {
      const select = document.createElement('select');
      inputDiv.appendChild(select);

      select.classList.add('select');

      selectArray.forEach(option => {
        const optionElement = document.createElement('option');
        select.appendChild(optionElement);

        optionElement.value = option;
        optionElement.textContent = option;

        if (option === inputValue) optionElement.setAttribute('selected', 'selected');
      });

      select.onchange = selectOnChange;
    } else if (['text', 'number'].includes(inputType)) {
      const input = document.createElement('input');
      inputDiv.appendChild(input);

      input.type = inputType;
      input.classList.add('field');
      input.value = inputValue;

      if (inputMin !== null) input.min = inputMin;
      if (inputMax !== null) input.max = inputMax;
    }

    if (notes) {
      const notesElement = document.createElement('p');
      selectList.appendChild(notesElement);

      notesElement.classList.add('notes');
      notesElement.style.cssText = notesStyle;
      notesElement.textContent = notes;
    }

    return formRow;
  }

  function displaySavedBadge() {
    log(DEBUG, 'displaySavedBadge()');

    const savedBadge = document.querySelector(`.${SELECTORS.settings.savedBadgeClass}`);

    savedBadge.classList.remove('hidden');
    savedBadge.classList.add('fade');

    setTimeout(() => {
      savedBadge.classList.add('fade-out');
    }, 2000);

    setTimeout(() => {
      savedBadge.classList.remove('fade', 'fade-out');
      savedBadge.classList.add('hidden');
    }, 3000);
  }

  function getFilter(filterName) {
    log(DEBUG, 'getFilter()');

    return JSON.parse(gmcGet(filterName));
  }

  function getFilterBehaviorStyle(filterName) {
    log(DEBUG, 'getFilterBehaviorStyle()');

    let behaviorStyle;
    let behaviorType = gmcGet(`${filterName}BehaviorType`);
    log(DEBUG, 'behaviorType', behaviorType);

    const behaviorFadeAmount = gmcGet(`${filterName}BehaviorFadeAmount`);
    log(VERBOSE, 'behaviorFadeAmount', behaviorFadeAmount);

    const behaviorBlurAmount = gmcGet(`${filterName}BehaviorBlurAmount`);
    log(VERBOSE, 'behaviorBlurAmount', behaviorBlurAmount);

    const behaviorCustomValue = gmcGet(`${filterName}BehaviorCustomValue`);
    log(VERBOSE, 'behaviorCustomValue', behaviorCustomValue);

    switch (behaviorType) {
      case 'Remove':
        behaviorStyle = 'display: none !important;';
        break;
      case 'Fade':
        behaviorStyle = `opacity: ${behaviorFadeAmount}%`;
        break;
      case 'Blur':
        behaviorStyle = `filter: blur(${behaviorBlurAmount}px)`;
        break;
      case 'Custom':
        behaviorStyle = behaviorCustomValue;
        break;
    }

    updateBehaviorCSSVariables(filterName, behaviorType);

    return behaviorStyle;
  }

  function gmcInitialized() {
    log(DEBUG, 'gmcInitialized()');
    log(QUIET, 'Running');

    GMC.css.basic = '';

    if (RESET_DATA) {
      log(QUIET, 'Resetting GMC');

      for (const [key, field] of Object.entries(GMC_FIELDS)) {
        const value = field.default;
        gmcSet(key, value);
      }

      log(QUIET, 'GMC reset');
    }

    let userscriptStyle = document.createElement('style');
    userscriptStyle.setAttribute('id', 'filterboxd-style');

    const filmBehaviorStyle = getFilterBehaviorStyle('film');
    log(VERBOSE, 'filmBehaviorStyle', filmBehaviorStyle);

    const reviewBehaviorStyle = getFilterBehaviorStyle('review');
    log(VERBOSE, 'reviewBehaviorStyle', reviewBehaviorStyle);

    userscriptStyle.textContent += `
      .${SELECTORS.filter.filmClass}
      {
        ${filmBehaviorStyle}
      }

      .${SELECTORS.filter.reviewClass}
      {
        ${reviewBehaviorStyle}
      }

      .${SELECTORS.settings.filteredTitleLinkClass}
      {
        cursor: pointer;
        margin-right: 0.3rem !important;
      }

      .${SELECTORS.settings.filteredTitleLinkClass}:hover
      {
        background: #303840;
        color: #def;
      }

      .${SELECTORS.settings.removePendingClass}
      {
        outline: 1px dashed #ee7000;
        outline-offset: -1px;
      }

      .hidden {
        visibility: hidden;
      }

      .fade {
        opacity: 1;
        transition: opacity 1s ease-out;
      }

      .fade.fade-out {
        opacity: 0;
      }
    `;
    document.body.appendChild(userscriptStyle);

    const onSettingsPage = window.location.href.includes('/settings/');
    log(VERBOSE, 'onSettingsPage', onSettingsPage);

    if (onSettingsPage) {
      maybeAddConfigurationToSettings();
    }
    else {
      applyFilters();
      startObserving();
    }
  }

  function trySelectFilterboxdTab() {
    const maxAttempts = 10;
    let attempts = 0;
    let successes = 0;

    log(DEBUG, `Attempting to select Filterboxd tab (attempt ${attempts + 1}/${maxAttempts})`);

    const tabLink = document.querySelector('a[data-id="filterboxd"]');
    if (!tabLink) {
      log(DEBUG, 'Filterboxd tab link not found yet');
      if (attempts < maxAttempts) {
        attempts++;
        setTimeout(trySelectFilterboxdTab, 100);
      } else {
        logError('Failed to find Filterboxd tab after maximum attempts');
      }
      return;
    }

    try {
      tabLink.click();

      setTimeout(() => {
        const tabSelected = document.querySelector('li.selected:has(a[data-id="filterboxd"])') !== null;
        if (tabSelected) {
          log(DEBUG, 'Filterboxd tab selected successfully');
          successes++;

          // There's a race condition between the click and the "Profile" tab being loaded and selected
          if (successes < 2) setTimeout(trySelectFilterboxdTab, 500);
        } else {
          log(DEBUG, 'Click didn\'t select the tab properly');
          if (attempts < maxAttempts) {
            attempts++;
            setTimeout(trySelectFilterboxdTab, 100);
          } else {
            logError('Failed to select Filterboxd tab after maximum attempts');
          }
        }
      }, 50);
    } catch (error) {
      logError('Error selecting Filterboxd tab', error);
      if (attempts < maxAttempts) {
        attempts++;
        setTimeout(trySelectFilterboxdTab, 100);
      }
    }
  }

  function maybeAddConfigurationToSettings() {
    log(DEBUG, 'maybeAddConfigurationToSettings()');

    const userscriptTabId = 'tab-filterboxd';
    const configurationExists = document.querySelector(createId(userscriptTabId));
    log(VERBOSE, 'configurationExists', configurationExists);

    if (configurationExists) {
      log(DEBUG, 'Filterboxd configuration tab is present');
      return;
    }

    const userscriptTabDiv = document.createElement('div');

    const settingsTabbedContent = document.querySelector(SELECTORS.settings.tabbedContentId);
    settingsTabbedContent.appendChild(userscriptTabDiv);

    userscriptTabDiv.setAttribute('id', userscriptTabId);
    userscriptTabDiv.classList.add('tabbed-content-block');

    const tabTitle = document.createElement('h2');
    userscriptTabDiv.append(tabTitle);

    tabTitle.style.cssText = 'margin-bottom: 1em;';
    tabTitle.innerText = 'Filterboxd';

    const tabPrimaryColumn = document.createElement('div');
    userscriptTabDiv.append(tabPrimaryColumn);

    tabPrimaryColumn.classList.add('col-10', 'overflow');

    const asideColumn = document.createElement('aside');
    userscriptTabDiv.append(asideColumn);

    asideColumn.classList.add('col-12', 'overflow', 'col-right', 'js-hide-in-app');

    // Filter film page
    const filmPageFilterMetadata = [
      {
        type: 'toggle',
        name: 'backdropImage',
        description: 'Remove backdrop image',
      },
      {
        type: 'label',
        description: 'Left column',
      },
      {
        type: 'toggle',
        name: 'poster',
        description: 'Remove poster',
      },
      {
        type: 'toggle',
        name: 'stats',
        description: 'Remove Letterboxd stats',
      },
      {
        type: 'toggle',
        name: 'whereToWatch',
        description: 'Remove "Where to watch" section',
      },
      {
        type: 'label',
        description: 'Right column',
      },
      {
        type: 'toggle',
        name: 'userActionsPanel',
        description: 'Remove user actions panel',
      },
      {
        type: 'toggle',
        name: 'ratings',
        description: 'Remove "Ratings" section',
      },
      {
        type: 'label',
        description: 'Middle column',
      },
      {
        type: 'toggle',
        name: 'releaseYear',
        description: 'Remove release year text',
      },
      {
        type: 'toggle',
        name: 'director',
        description: 'Remove director text',
      },
      {
        type: 'toggle',
        name: 'tagline',
        description: 'Remove tagline text',
      },
      {
        type: 'toggle',
        name: 'description',
        description: 'Remove description text',
      },
      {
        type: 'toggle',
        name: 'castTab',
        description: 'Remove "Cast" tab',
      },
      {
        type: 'toggle',
        name: 'crewTab',
        description: 'Remove "Crew" tab',
      },
      {
        type: 'toggle',
        name: 'detailsTab',
        description: 'Remove "Details" tab',
      },
      {
        type: 'toggle',
        name: 'genresTab',
        description: 'Remove "Genres" tab',
      },
      {
        type: 'toggle',
        name: 'releasesTab',
        description: 'Remove "Releases" tab',
      },
      {
        type: 'toggle',
        name: 'activityFromFriends',
        description: 'Remove "Activity from friends" section',
      },
      {
        type: 'toggle',
        name: 'filmNews',
        description: 'Remove HQ film news section',
      },
      {
        type: 'toggle',
        name: 'reviewsFromFriends',
        description: 'Remove "Reviews from friends" section',
      },
      {
        type: 'toggle',
        name: 'popularReviews',
        description: 'Remove "Popular reviews" section',
      },
      {
        type: 'toggle',
        name: 'recentReviews',
        description: 'Remove "Recent reviews" section',
      },
      {
        type: 'toggle',
        name: 'relatedFilms',
        description: 'Remove "Related films" section',
      },
      {
        type: 'toggle',
        name: 'similarFilms',
        description: 'Remove "Similar films" section',
      },
      {
        type: 'toggle',
        name: 'mentionedBy',
        description: 'Remove "Mentioned by" section',
      },
      {
        type: 'toggle',
        name: 'popularLists',
        description: 'Remove "Popular lists" section',
      },
    ];

    buildToggleSection(
      asideColumn,
      'Film Page Filter',
      'filmPageFilter',
      filmPageFilterMetadata,
    );

    // Advanced Options
    const formRowDiv = document.createElement('div');
    asideColumn.appendChild(formRowDiv);

    formRowDiv.style.cssText = 'margin-bottom: 40px;';

    const sectionHeader = document.createElement('h3');
    formRowDiv.append(sectionHeader);

    sectionHeader.classList.add('title-3');
    sectionHeader.style.cssText = 'margin-top: 0em;';
    sectionHeader.innerText = 'Advanced Options';

    const logLevelValue = gmcGet('logLevel');
    log(DEBUG, 'logLevelValue', logLevelValue);

    const logLevelFormRow = createFormRow({
      formRowClass: ['update-details'],
      formRowStyle: `width: ${COLUMN_ONE_WIDTH};`,
      labelText: 'Log level ',
      helpText: 'Determines how much logging<br /> is visible in the browser console',
      inputValue: logLevelValue,
      inputType: 'select',
      selectArray: LOG_LEVELS.options,
    });

    formRowDiv.appendChild(logLevelFormRow);

    const mutationsDiv = document.createElement('div');
    mutationsDiv.style.cssText = 'display: flex; align-items: center;';
    formRowDiv.append(mutationsDiv);

    const maxActiveMutationsValue = gmcGet('maxActiveMutations');
    log(DEBUG, 'maxActiveMutationsValue', maxActiveMutationsValue);

    const maxActiveMutationsFormRow = createFormRow({
      formRowClass: ['update-details'],
      formRowStyle: `width: ${COLUMN_HALF_WIDTH};`,
      labelText: 'Max active mutations ',
      helpText: 'Safety limit that halts execution<br /> when a certain number of modifications<br /> are performed by the script',
      inputValue: maxActiveMutationsValue,
      inputType: 'number',
      inputMin: 1,
      inputStyle: 'width: 100px !important;',
    });

    mutationsDiv.appendChild(maxActiveMutationsFormRow);

    const maxIdleMutationsValue = gmcGet('maxIdleMutations');
    log(DEBUG, 'maxIdleMutationsValue', maxIdleMutationsValue);

    const maxIdleMutationsFormRow = createFormRow({
      formRowClass: ['update-details'],
      formRowStyle: `width: ${COLUMN_HALF_WIDTH}; float: right;`,
      labelText: 'Max idle mutations ',
      helpText: 'Safety limit that halts execution<br /> when a certain number of modifications<br /> are performed by Letterboxd<br /> that did not result in modifications<br /> from the script',
      inputValue: maxIdleMutationsValue,
      inputType: 'number',
      inputMin: 1,
      inputStyle: 'width: 100px !important;',
    });

    mutationsDiv.appendChild(maxIdleMutationsFormRow);

    let formColumnDiv = document.createElement('div');
    formRowDiv.appendChild(formColumnDiv);

    formColumnDiv.classList.add('form-columns', '-cols2');

    // Filter films
    const favoriteFilmsDiv = document.querySelector(SELECTORS.settings.favoriteFilms);
    const filteredFilmsDiv = favoriteFilmsDiv.cloneNode(true);
    tabPrimaryColumn.appendChild(filteredFilmsDiv);

    filteredFilmsDiv.style.cssText = 'margin-bottom: 20px;';

    const posterList = filteredFilmsDiv.querySelector(SELECTORS.settings.posterList);
    posterList.remove();

    filteredFilmsDiv.querySelector(SELECTORS.settings.subtitle).innerText = 'Films Filter';
    filteredFilmsDiv.querySelector(SELECTORS.settings.note).innerText =
      'Right click to mark for removal.';

    let hiddenTitlesDiv = document.createElement('div');
    filteredFilmsDiv.append(hiddenTitlesDiv);

    const hiddenTitlesParagraph = document.createElement('p');
    hiddenTitlesDiv.appendChild(hiddenTitlesParagraph);

    hiddenTitlesDiv.classList.add('text-sluglist');

    const filmFilter = getFilter('filmFilter');
    log(VERBOSE, 'filmFilter', filmFilter);

    filmFilter.forEach((filteredFilm, index) => {
      log(VERBOSE, 'filteredFilm', filteredFilm);

      let filteredTitleLink = document.createElement('a');
      hiddenTitlesParagraph.appendChild(filteredTitleLink);

      if (filteredFilm.slug) filteredTitleLink.href= `/film/${filteredFilm.slug}`;

      filteredTitleLink.classList.add(
        'text-slug',
        SELECTORS.processedClass.apply,
        SELECTORS.settings.filteredTitleLinkClass,
      );
      filteredTitleLink.setAttribute('data-film-id', filteredFilm.id);
      filteredTitleLink.setAttribute('index', index);

      let titleLinkText = filteredFilm.name;
      if (['', null, undefined].includes(filteredFilm.name)) {
        log(INFO, 'filteredFilm has no name; marking as broken', filteredFilm);
        titleLinkText = 'Broken, please remove';
      }

      if (!['', null, undefined].includes(filteredFilm.year)) {
        titleLinkText += ` (${filteredFilm.year})`;
      }
      filteredTitleLink.innerText = titleLinkText;

      filteredTitleLink.oncontextmenu = (event) => {
        event.preventDefault();

        filteredTitleLink.classList.toggle(SELECTORS.settings.removePendingClass);
      };
    });

    let formColumnsDiv = document.createElement('div');
    filteredFilmsDiv.appendChild(formColumnsDiv);

    formColumnsDiv.classList.add('form-columns', '-cols2');

    // Filter films behavior
    const filmBehaviorsMetadata = {
      fade: {
        fieldName: 'filmBehaviorFadeAmount',
      },
      blur: {
        fieldName: 'filmBehaviorBlurAmount',
      },
      replace: {
        fieldName: 'filmBehaviorReplaceValue',
        labelText: 'Direct image URL',
      },
      custom: {
        fieldName: 'filmBehaviorCustomValue',
      },
    };
    const filmFormRows = buildBehaviorFormRows(
      formColumnsDiv,
      'film',
      FILM_BEHAVIORS,
      filmBehaviorsMetadata,
    );

    const clearDiv = filteredFilmsDiv.querySelector(SELECTORS.settings.clear);
    clearDiv.remove();

    // Filter reviews
    const filteredReviewsFormRow = document.createElement('div');
    tabPrimaryColumn.append(filteredReviewsFormRow);

    filteredReviewsFormRow.classList.add('form-row');

    const filteredReviewsTitle = document.createElement('h3');
    filteredReviewsFormRow.append(filteredReviewsTitle);

    filteredReviewsTitle.classList.add('title-3');
    filteredReviewsTitle.style.cssText = 'margin-top: 0em;';
    filteredReviewsTitle.innerText = 'Reviews Filter';

    // First unordered list
    const filteredReviewsUnorderedListFirst = document.createElement('ul');
    filteredReviewsFormRow.append(filteredReviewsUnorderedListFirst);

    filteredReviewsUnorderedListFirst.classList.add('options-list', '-toggle-list', 'js-toggle-list');
    filteredReviewsUnorderedListFirst.style.cssText += 'margin-bottom: 5px;';

    const reviewFilterItemsFirst = [
      {
        name: 'ratings',
        description: 'Remove ratings from reviews',
      },
      {
        name: 'likes',
        description: 'Remove likes from reviews',
      },
      {
        name: 'comments',
        description: 'Remove comments from reviews',
      },
      {
        name: 'byWordCount',
        description: 'Filter reviews by minimum word count',
      },
    ];

    buildToggleSectionListItems(
      'reviewFilter',
      filteredReviewsUnorderedListFirst,
      reviewFilterItemsFirst,
    );

    // Minium word count
    let minimumWordCountDiv = document.createElement('div');
    filteredReviewsFormRow.appendChild(minimumWordCountDiv);

    minimumWordCountDiv.classList.add('form-columns', '-cols2');

    const minimumWordCountValue = gmcGet('reviewMinimumWordCount');
    log(DEBUG, 'minimumWordCountValue', minimumWordCountValue);

    const minimumWordCountFormRow = createFormRow({
      formRowClass: ['update-details'],
      formRowStyle: `width: ${COLUMN_TWO_WIDTH}; float: right; margin-bottom: 10px;`,
      inputValue: minimumWordCountValue,
      inputType: 'number',
      inputStyle: 'width: 100px !important;',
      notes: 'words',
      notesStyle: 'width: 10px; margin-left: 14px;',
    });

    minimumWordCountDiv.appendChild(minimumWordCountFormRow);

    // Second unordered list
    const filteredReviewsUnorderedListSecond = document.createElement('ul');
    filteredReviewsFormRow.append(filteredReviewsUnorderedListSecond);

    filteredReviewsUnorderedListSecond.classList.add('options-list', '-toggle-list', 'js-toggle-list');
    filteredReviewsUnorderedListSecond.style.cssText += 'margin: 0 0 1.53846154rem;';

    const reviewFilterItemsSecond = [
      {
        name: 'withSpoilers',
        description: 'Filter reviews that contain spoilers',
      },
      {
        name: 'withoutRatings',
        description: 'Filter reviews that don\'t have ratings',
      },
    ];

    buildToggleSectionListItems(
      'reviewFilter',
      filteredReviewsUnorderedListSecond,
      reviewFilterItemsSecond,
    );

    let reviewColumnsDiv = document.createElement('div');
    filteredReviewsFormRow.appendChild(reviewColumnsDiv);

    reviewColumnsDiv.classList.add('form-columns', '-cols2');

    const reviewBehaviorsMetadata = {
      fade: {
        fieldName: 'reviewBehaviorFadeAmount',
      },
      blur: {
        fieldName: 'reviewBehaviorBlurAmount',
      },
      replace: {
        fieldName: 'reviewBehaviorReplaceValue',
        labelText: 'Text',
      },
      custom: {
        fieldName: 'reviewBehaviorCustomValue',
      },
    };
    const reviewFormRows = buildBehaviorFormRows(
      reviewColumnsDiv,
      'review',
      REVIEW_BEHAVIORS,
      reviewBehaviorsMetadata,
    );

    // Filter homepage
    const homepageFilterMetadata = [
      {
        name: 'friendsHaveBeenWatching',
        description: 'Remove "Here\'s what your friends have been watching..." title text',
      },
      {
        name: 'newFromFriends',
        description: 'Remove "New from friends" films section',
      },
      {
        name: 'popularWithFriends',
        description: 'Remove "Popular with friends" section',
      },
      {
        name: 'discoveryStream',
        description: 'Remove discovery section (e.g. festivals, competitions)',
      },
      {
        name: 'latestNews',
        description: 'Remove "Latest news" section',
      },
      {
        name: 'popularReviewsWithFriends',
        description: 'Remove "Popular reviews with friends" section',
      },
      {
        name: 'newListsFromFriends',
        description: 'Remove "New from friends" lists section',
      },
      {
        name: 'popularLists',
        description: 'Remove "Popular lists" section',
      },
      {
        name: 'recentStories',
        description: 'Remove "Recent stories" section',
      },
      {
        name: 'recentShowdowns',
        description: 'Remove "Recent showdowns" section',
      },
      {
        name: 'recentNews',
        description: 'Remove "Recent news" section',
      },
    ];

    buildToggleSection(
      tabPrimaryColumn,
      'Homepage Filter',
      'homepageFilter',
      homepageFilterMetadata,
    );

    // Save changes
    let buttonsRowDiv = document.createElement('div');
    userscriptTabDiv.appendChild(buttonsRowDiv);

    buttonsRowDiv.style.cssText = 'display: flex; align-items: center;';
    buttonsRowDiv.classList.add('buttons', 'clear', 'row');

    let saveInput = document.createElement('input');
    buttonsRowDiv.appendChild(saveInput);

    saveInput.classList.add('button', 'button-action');
    saveInput.setAttribute('value', 'Save Changes');
    saveInput.setAttribute('type', 'submit');
    saveInput.onclick = (event) => {
      event.preventDefault();

      const pendingRemovals = hiddenTitlesParagraph.querySelectorAll(`.${SELECTORS.settings.removePendingClass}`);
      pendingRemovals.forEach(removalLink => {
        const id = parseInt(removalLink.getAttribute('data-film-id'));
        const filteredFilm = filmFilter.find(filteredFilm => filteredFilm.id === id);

        if (filteredFilm) {
          removeFilterFromFilm(filteredFilm);
          removeFromFilmFilter(filteredFilm);
        } else {
          const index = removalLink.getAttribute('index');
          removeFromFilmFilter(null, index);
        }
        removalLink.remove();
      });

      const minimumWordCountValue = parseInt(minimumWordCountFormRow.querySelector('input').value || 0);
      log(DEBUG, 'minimumWordCountValue', minimumWordCountValue);

      gmcSet('reviewMinimumWordCount', minimumWordCountValue);

      saveBehaviorSettings('film', filmFormRows);
      saveBehaviorSettings('review', reviewFormRows);

      const inputToggles = userscriptTabDiv.querySelectorAll('input[type="checkbox"]');
      inputToggles.forEach(inputToggle => {
        const filterName = inputToggle.getAttribute('data-filter-name');
        const filter = getFilter(filterName);

        const fieldName = inputToggle.getAttribute('data-field-name');
        const checked = inputToggle.checked;

        filter[fieldName] = checked;
        setFilter(filterName, filter);
      });

      const logLevel = logLevelFormRow.querySelector('select').value;
      gmcSet('logLevel', logLevel);

      const maxIdleMutationsValue = parseInt(maxIdleMutationsFormRow.querySelector('input').value || 0);
      log(DEBUG, 'maxIdleMutationsValue', maxIdleMutationsValue);

      gmcSet('maxIdleMutations', maxIdleMutationsValue);

      const maxActiveMutationsValue = parseInt(maxActiveMutationsFormRow.querySelector('input').value || 0);
      log(DEBUG, 'maxActiveMutationsValue', maxActiveMutationsValue);

      gmcSet('maxActiveMutations', maxActiveMutationsValue);

      gmcSave();

      displaySavedBadge();
    };

    let checkContainerDiv = document.createElement('div');
    buttonsRowDiv.appendChild(checkContainerDiv);

    checkContainerDiv.classList.add('check-container');
    checkContainerDiv.style.cssText = 'margin-left: 10px;';

    let usernameAvailableParagraph = document.createElement('p');
    checkContainerDiv.appendChild(usernameAvailableParagraph);

    usernameAvailableParagraph.classList.add(
      'username-available',
      'has-icon',
      'hidden',
      SELECTORS.settings.savedBadgeClass,
    );
    usernameAvailableParagraph.style.cssText = 'float: left;';

    let iconSpan = document.createElement('span');
    usernameAvailableParagraph.appendChild(iconSpan);

    iconSpan.classList.add('icon');

    const savedText = document.createTextNode('Saved');
    usernameAvailableParagraph.appendChild(savedText);

    const settingsSubNav = document.querySelector(SELECTORS.settings.subNav);

    const userscriptSubNabListItem = document.createElement('li');
    settingsSubNav.appendChild(userscriptSubNabListItem);

    const userscriptSubNabLink = document.createElement('a');
    userscriptSubNabListItem.appendChild(userscriptSubNabLink);

    const userscriptSettingsLink = '/settings/?filterboxd';
    userscriptSubNabLink.setAttribute('href', userscriptSettingsLink);
    userscriptSubNabLink.setAttribute('data-id', 'filterboxd');
    userscriptSubNabLink.innerText = 'Filterboxd';
    userscriptSubNabLink.onclick = (event) => {
      event.preventDefault();

      Array.from(settingsSubNav.children).forEach(listItem => {
        const link = listItem.querySelector('a');

        if (link.getAttribute('data-id') === 'filterboxd') {
          listItem.classList.add('selected');
        } else {
          listItem.classList.remove('selected');
        }
      });

      Array.from(settingsTabbedContent.children).forEach(tab => {
        if (!tab.id) return;

        const display = tab.id === userscriptTabId ? 'block' : 'none';
        tab.style.cssText = `display: ${display};`;
      });

      window.history.replaceState(null, '', `https://letterboxd.com${userscriptSettingsLink}`);
    };

    Array.from(settingsSubNav.children).forEach(listItem => {
      listItem.onclick = (event) => {
        const link = event.target;
        if (link.getAttribute('href') === userscriptSettingsLink) return;

        userscriptSubNabListItem.classList.remove('selected');
        userscriptTabDiv.style.display = 'none';
      };
    });
  }

  function maybeAddListItemToSidebar() {
    log(DEBUG, 'maybeAddListItemToSidebar()');

    const isListPage = document.querySelector('body.list-page');
    if (isListPage) return;

    const userscriptListItemFound = document.querySelector(createId(SELECTORS.userpanel.userscriptListItemId));
    if (userscriptListItemFound) {
      log(DEBUG, 'Userscript list item already exists');
      return false;
    }

    const userpanel = document.querySelector(SELECTORS.userpanel.self);

    if (!userpanel) {
      log(INFO, 'Userpanel not found');
      return false;
    }

    const secondLastListItem = userpanel.querySelector('li:nth-last-child(3)');
    if (!secondLastListItem ) {
      log(INFO, 'Second last list item not found');
      return false;
    }

    if (secondLastListItem.classList.contains('loading-csi')) {
      log(INFO, 'Second last list item is loading');
      return false;
    }

    let userscriptListItem = document.createElement('li');
    const userscriptListLink = document.createElement('a');
    userscriptListItem.appendChild(userscriptListLink);
    userscriptListLink.href = '#';

    userscriptListItem.setAttribute('id', SELECTORS.userpanel.userscriptListItemId);

    const unorderedList = userpanel.querySelector('ul');
    userscriptListItem = buildUserscriptLink(userscriptListItem, unorderedList);

    // Text: "Go PATRON to change images"
    const upsellLink = userpanel.querySelector('[href="/pro/"]');

    // If the upsell link is present, insert above
    // Otherwise, inset above "Share"
    const insertBeforeElementIndex = upsellLink ? 2 : 1;
    const insertBeforeElement = userpanel.querySelector(`li:nth-last-of-type(${insertBeforeElementIndex})`);

    secondLastListItem.parentNode.insertBefore(userscriptListItem, insertBeforeElement);

    return true;
  }

  function removeFilterFromElement(element, levelsUp = 0) {
    log(DEBUG, 'removeFilterFromElement()');

    const replaceBehavior = gmcGet('filmBehaviorType') === 'Replace poster';
    log(VERBOSE, 'replaceBehavior', replaceBehavior);

    if (replaceBehavior) {
      const originalImgSrc = element.getAttribute('data-original-img-src');
      if (!originalImgSrc) {
        log(DEBUG, 'data-original-img-src attribute not found', element);
        return;
      }

      element.querySelector('img').src = originalImgSrc;
      element.querySelector('img').srcset = originalImgSrc;

      element.removeAttribute('data-original-img-src');
      element.classList.add(SELECTORS.processedClass.remove);
      element.classList.remove(SELECTORS.processedClass.apply);
    } else {
      let target = element;

      for (let i = 0; i < levelsUp; i++) {
        if (target.parentNode) {
          target = target.parentNode;
        } else {
          break;
        }
      }

      log(VERBOSE, 'target', target);

      target.classList.remove(SELECTORS.filter.filmClass);
      element.classList.add(SELECTORS.processedClass.remove);
      element.classList.remove(SELECTORS.processedClass.apply);
    }
  }

  function removeFromFilmFilter(filmMetadata, index) {
    log(DEBUG, 'removeFromFilmFilter()');

    let filmFilter = getFilter('filmFilter');
    if (filmMetadata) {
      filmFilter = filmFilter.filter(filteredFilm => filteredFilm.id !== filmMetadata.id);
    } else {
      filmFilter.splice(index, 1);
    }

    setFilter('filmFilter', filmFilter);
  }

  function removeFilterFromFilm({ id, slug }) {
    log(DEBUG, 'removeFilterFromFilm()');

    const idMatch = `[data-film-id="${id}"]`;
    let removedSelector = `.${SELECTORS.processedClass.remove}`;

    log(VERBOSE, 'Activity page reviews');
    document.querySelectorAll(`section.activity-row ${idMatch}`).forEach(posterElement => {
      removeFilterFromElement(posterElement, 3);
    });

    log(VERBOSE, 'Activity page likes');
    document.querySelectorAll(`section.activity-row .activity-summary a[href*="${slug}"]:not(${removedSelector})`).forEach(posterElement => {
      removeFilterFromElement(posterElement, 3);
    });

    log(VERBOSE, 'New from friends');
    document.querySelectorAll(`.poster-container ${idMatch}:not(${removedSelector})`).forEach(posterElement => {
      removeFilterFromElement(posterElement, 1);
    });

    log(VERBOSE, 'Reviews');
    document.querySelectorAll(`.review-tile ${idMatch}:not(${removedSelector})`).forEach(posterElement => {
      removeFilterFromElement(posterElement, 3);
    });

    log(VERBOSE, 'Diary');
    document.querySelectorAll(`.td-film-details [data-original-img-src]${idMatch}:not(${removedSelector})`).forEach(posterElement => {
      removeFilterFromElement(posterElement, 2);
    });

    log(VERBOSE, 'Popular with friends, competitions');
    const remainingElements = document.querySelectorAll(
      `div:not(.popmenu):not(.actions-panel) ${idMatch}:not(aside [data-film-id="${id}"]):not(#backdrop):not(${removedSelector})`,
    );
    remainingElements.forEach(posterElement => {
      removeFilterFromElement(posterElement, 0);
    });
  }

  function saveBehaviorSettings(filterName, formRows) {
    log(DEBUG, 'saveBehaviorSettings()');

    const behaviorType = formRows[0].querySelector('select').value;
    log(DEBUG, 'behaviorType', behaviorType);

    gmcSet(`${filterName}BehaviorType`, behaviorType);

    updateBehaviorCSSVariables(filterName, behaviorType);

    if (behaviorType === 'Fade') {
      const behaviorFadeAmount = formRows[1].querySelector('input').value;
      log(DEBUG, 'behaviorFadeAmount', behaviorFadeAmount);

      gmcSet(`${filterName}BehaviorFadeAmount`, behaviorFadeAmount);
    } else if (behaviorType === 'Blur') {
      const behaviorBlurAmount = formRows[2].querySelector('input').value;
      log(DEBUG, 'behaviorBlurAmount', behaviorBlurAmount);

      gmcSet(`${filterName}BehaviorBlurAmount`, behaviorBlurAmount);
    } else if (behaviorType.includes('Replace')) {
      const behaviorReplaceValue = formRows[3].querySelector('input').value;
      log(DEBUG, 'behaviorReplaceValue', behaviorReplaceValue);

      gmcSet(`${filterName}BehaviorReplaceValue`, behaviorReplaceValue);
    } else if (behaviorType === 'Custom') {
      const behaviorCustomValue = formRows[4].querySelector('input').value;
      log(DEBUG, 'behaviorCustomValue', behaviorCustomValue);

      gmcSet(`${filterName}BehaviorCustomValue`, behaviorCustomValue);
    }
  }

  function setFilter(filterName, filterValue) {
    log(DEBUG, 'setFilter()');

    gmcSet(filterName, JSON.stringify(filterValue));
    return gmcSave();
  }

  function updateBehaviorCSSVariables(filterName, behaviorType) {
    log(DEBUG, 'updateBehaviorTypeVariable()');
    log(DEBUG, 'behaviorType', behaviorType);

    const fadeValue = behaviorType === 'Fade' ? 'block' : 'none';
    document.documentElement.style.setProperty(
      `--filterboxd-${filterName}-behavior-fade`,
      fadeValue,
    );

    const blurValue = behaviorType === 'Blur' ? 'block' : 'none';
    document.documentElement.style.setProperty(
      `--filterboxd-${filterName}-behavior-blur`,
      blurValue,
    );

    const replaceValue = behaviorType.includes('Replace') ? 'block' : 'none';
    document.documentElement.style.setProperty(
      `--filterboxd-${filterName}-behavior-replace`,
      replaceValue,
    );

    const customValue = behaviorType === 'Custom' ? 'block' : 'none';
    document.documentElement.style.setProperty(
      `--filterboxd-${filterName}-behavior-custom`,
      customValue,
    );
  }

  function updateLinkInPopMenu(titleIsHidden, link) {
    log(DEBUG, 'updateLinkInPopMenu()');

    link.setAttribute('data-title-hidden', titleIsHidden);

    const innerText = titleIsHidden ? 'Remove from filter' : 'Add to filter';
    link.innerText = innerText;
  }

  const urlParams = new URLSearchParams(window.location.search);
  const tabSelected = urlParams.get('filterboxd') !== null;
  log(DEBUG, 'tabSelected', tabSelected);

  if (tabSelected) trySelectFilterboxdTab();

  let OBSERVER = new MutationObserver(observeAndModify);

  const GMC_FIELDS = {
    filmBehaviorType: {
      type: 'select',
      options: FILM_BEHAVIORS,
      default: 'Fade',
    },
    filmBehaviorBlurAmount: {
      type: 'int',
      default: 3,
    },
    filmBehaviorCustomValue: {
      type: 'text',
      default: '',
    },
    filmBehaviorFadeAmount: {
      type: 'int',
      default: 10,
    },
    filmBehaviorReplaceValue: {
      type: 'text',
      default: 'https://raw.githubusercontent.com/blakegearin/filterboxd/main/img/bee-movie.jpg',
    },
    filmFilter: {
      type: 'text',
      default: JSON.stringify([]),
    },
    filmPageFilter: {
      type: 'text',
      default: JSON.stringify({}),
    },
    homepageFilter: {
      type: 'text',
      default: JSON.stringify({}),
    },
    logLevel: {
      type: 'select',
      options: LOG_LEVELS.options,
      default: LOG_LEVELS.default,
    },
    reviewBehaviorType: {
      type: 'select',
      options: REVIEW_BEHAVIORS,
      default: 'Fade',
    },
    reviewBehaviorBlurAmount: {
      type: 'int',
      default: 3,
    },
    reviewBehaviorCustomValue: {
      type: 'text',
      default: '',
    },
    reviewBehaviorFadeAmount: {
      type: 'int',
      default: 10,
    },
    reviewBehaviorReplaceValue: {
      type: 'text',
      default: 'According to all known laws of aviation, there is no way a bee should be able to fly.',
    },
    reviewFilter: {
      type: 'text',
      default: JSON.stringify({}),
    },
    reviewMinimumWordCount: {
      type: 'int',
      default: 10,
    },
    maxIdleMutations: {
      type: 'int',
      default: 10000,
    },
    maxActiveMutations: {
      type: 'int',
      default: 10000,
    },
  };

  GMC = new GM_config({
    id: 'gmc-frame',
    events: {
      init: gmcInitialized,
    },
    fields: GMC_FIELDS,
  });
})();