content.js

/**
 * Criterion Channel Enhancer — content script
 *
 * Transforms the "Directed by" and "Starring" metadata lines on movie pages
 * into clickable search links, respecting per-field settings from the popup.
 * Optionally fetches genre tags from TMDB and displays them below the metadata.
 *
 * Search URL pattern: https://www.criterionchannel.com/search?q=QUERY
 *
 * DOM structure (both lines share one <p>, separated by <br>):
 *   <p>Directed by Taylor Hackford • 1997 • United States
 *   <br>Starring Keanu Reeves, Al Pacino, Charlize Theron</p>
 */

const SEARCH_BASE = 'https://www.criterionchannel.com/search?q=';
const TMDB_SEARCH_URL = 'https://api.themoviedb.org/3/search/movie';
const TMDB_GENRES_URL = 'https://api.themoviedb.org/3/genre/movie/list';
const GENRE_FILTER_BASE = 'https://films.criterionchannel.com/?genre=';

// Maps TMDB genre names to Criterion's URL slugs.
// TMDB genres with no Criterion equivalent (Family, History, Mystery, TV Movie)
// are intentionally omitted — they will be silently dropped from the tag row.
const TMDB_TO_CRITERION = {
  'Action':          'action-adventure',
  'Adventure':       'action-adventure',
  'Animation':       'animation',
  'Comedy':          'comedy',
  'Crime':           'crime',
  'Documentary':     'documentary',
  'Drama':           'drama',
  'Fantasy':         'fantasy',
  'Horror':          'horror',
  'Music':           'musical',
  'Romance':         'romance',
  'Science Fiction': 'science-fiction',
  'Thriller':        'thriller',
  'War':             'war',
  'Western':         'western',
};

const DEFAULT_SETTINGS = {
  linkDirector: true,
  linkYear: true,
  linkCountry: true,
  linkActors: true,
  showGenres: false,
  tmdbApiKey: '',
};

let currentSettings = { ...DEFAULT_SETTINGS };

// In-memory cache of TMDB genre id → name, shared across page navigations
let tmdbGenreMap = null;

// ─── Search link helpers ──────────────────────────────────────────────────────

function searchLink(text) {
  const a = document.createElement('a');
  a.href = SEARCH_BASE + encodeURIComponent(text);
  a.textContent = text;
  a.style.color = 'inherit';
  a.style.textDecoration = 'underline';
  a.style.cursor = 'pointer';
  return a;
}

function textOrLink(text, enabled) {
  return enabled ? searchLink(text) : document.createTextNode(text);
}

// ─── Metadata fragment builders ───────────────────────────────────────────────

/**
 * Builds a fragment for: "Directed by Taylor Hackford • 1997 • United States"
 * Handles multiple directors (comma-separated) and optional year/country fields.
 * Year segments are detected by /^\d{4}$/, everything else is treated as country.
 * Returns null if the text doesn't match.
 */
function buildDirectedByFragment(text, settings) {
  const match = text.match(/^Directed by\s+(.+)$/);
  if (!match) return null;

  const segments = match[1].split(/\s+•\s+/);
  const directors = segments[0].split(/,\s*|\s+and\s+/).map(d => d.trim()).filter(Boolean);
  const meta = segments.slice(1);

  const frag = document.createDocumentFragment();
  frag.appendChild(document.createTextNode('Directed by '));

  directors.forEach((director, i) => {
    frag.appendChild(textOrLink(director, settings.linkDirector));
    if (i < directors.length - 1) {
      frag.appendChild(document.createTextNode(' and '));
    }
  });

  for (const segment of meta) {
    frag.appendChild(document.createTextNode(' • '));
    const isYear = /^\d{4}$/.test(segment.trim());
    if (isYear) {
      frag.appendChild(textOrLink(segment, settings.linkYear));
    } else {
      // Country segment may contain multiple values: "United Kingdom, United States"
      const countries = segment.split(/,\s*/);
      countries.forEach((country, i) => {
        frag.appendChild(textOrLink(country.trim(), settings.linkCountry));
        if (i < countries.length - 1) {
          frag.appendChild(document.createTextNode(', '));
        }
      });
    }
  }

  return frag;
}

/**
 * Builds a fragment for: "Starring Keanu Reeves, Al Pacino, Charlize Theron"
 * Returns null if the text doesn't match.
 */
function buildStarringFragment(text, settings) {
  const match = text.match(/^Starring\s+(.+)$/);
  if (!match) return null;

  const actors = match[1].split(/,\s*/);
  const frag = document.createDocumentFragment();
  frag.appendChild(document.createTextNode('Starring '));
  actors.forEach((actor, i) => {
    frag.appendChild(textOrLink(actor.trim(), settings.linkActors));
    if (i < actors.length - 1) {
      frag.appendChild(document.createTextNode(', '));
    }
  });
  return frag;
}

// ─── Metadata block enhancement ───────────────────────────────────────────────

/**
 * Processes a single element that contains the metadata block.
 * Saves original innerHTML before first modification so settings changes
 * can re-process from the original text.
 */
function enhanceMetaBlock(el, settings) {
  if (!el.dataset.ccOriginalHtml) {
    el.dataset.ccOriginalHtml = el.innerHTML;
  }

  const frag = document.createDocumentFragment();

  for (const node of [...el.childNodes]) {
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent.trim();
      const dirFrag = /^Directed by\s+/.test(text) && buildDirectedByFragment(text, settings);
      const starFrag = /^Starring\s+/.test(text) && buildStarringFragment(text, settings);
      if (dirFrag) {
        frag.appendChild(dirFrag);
      } else if (starFrag) {
        frag.appendChild(starFrag);
      } else {
        frag.appendChild(document.createTextNode(node.textContent));
      }
    } else {
      frag.appendChild(node.cloneNode(true));
    }
  }

  el.replaceChildren(frag);
  el.dataset.ccEnhanced = 'true';
}

// ─── Genre row ────────────────────────────────────────────────────────────────

/**
 * Returns the element after which the genre row should be inserted.
 * If the metadata element is inside a .read-more-wrap container (which has a
 * max-height that would clip the description), we insert after that container
 * instead of after metaEl, so genre tags don't consume the description's space.
 */
function getGenreAnchor(metaEl) {
  let el = metaEl.parentElement;
  while (el) {
    if (el.classList.contains('read-more-wrap')) return el;
    el = el.parentElement;
  }
  return metaEl;
}

function removeGenreRow(metaEl) {
  const anchor = getGenreAnchor(metaEl);
  const sibling = anchor.previousElementSibling;
  if (sibling && sibling.dataset.ccGenreRow) sibling.remove();
}

function renderGenreRow(metaEl, genres) {
  removeGenreRow(metaEl);
  if (!genres || genres.length === 0) return;

  const row = document.createElement('p');
  row.dataset.ccGenreRow = 'true';
  row.style.marginBottom = '6px';

  const seenSlugs = new Set();
  for (const genre of genres) {
    const slug = TMDB_TO_CRITERION[genre];
    if (!slug || seenSlugs.has(slug)) continue;
    seenSlugs.add(slug);

    const a = document.createElement('a');
    a.href = GENRE_FILTER_BASE + slug;
    a.textContent = genre;
    a.style.cssText = [
      'display:inline-block',
      'margin:0 4px 4px 0',
      'padding:2px 8px',
      'border:1px solid #666',
      'border-radius:12px',
      'font-size:0.85em',
      'color:#ccc',
      'text-decoration:none',
    ].join(';');
    row.appendChild(a);
  }

  getGenreAnchor(metaEl).insertAdjacentElement('beforebegin', row);
}

// ─── TMDB fetching ────────────────────────────────────────────────────────────

async function fetchTmdbGenreMap(apiKey) {
  if (tmdbGenreMap) return tmdbGenreMap;
  try {
    const res = await fetch(`${TMDB_GENRES_URL}?api_key=${apiKey}&language=en-US`);
    if (!res.ok) return null;
    const data = await res.json();
    tmdbGenreMap = {};
    for (const g of data.genres) tmdbGenreMap[g.id] = g.name;
    return tmdbGenreMap;
  } catch {
    return null;
  }
}

async function fetchGenresForMovie(title, year, apiKey) {
  try {
    const params = new URLSearchParams({ api_key: apiKey, query: title, language: 'en-US', page: '1' });
    if (year) params.set('year', year);
    const res = await fetch(`${TMDB_SEARCH_URL}?${params}`);
    if (!res.ok) return null;
    const data = await res.json();
    if (!data.results || data.results.length === 0) return null;

    const map = await fetchTmdbGenreMap(apiKey);
    if (!map) return null;

    return data.results[0].genre_ids.map(id => map[id]).filter(Boolean);
  } catch {
    return null;
  }
}

function getMovieTitle() {
  for (const h1 of document.querySelectorAll('h1')) {
    const text = h1.textContent.trim();
    if (text) return text;
  }
  return document.title.split(/\s*[|\-–]\s*/)[0].trim();
}

async function maybeAddGenres(metaEl) {
  const { showGenres, tmdbApiKey } = currentSettings;
  if (!showGenres || !tmdbApiKey) return;

  const title = getMovieTitle();
  const yearMatch = (metaEl.dataset.ccOriginalHtml || '').match(/\b(\d{4})\b/);
  const year = yearMatch ? yearMatch[1] : null;

  const genres = await fetchGenresForMovie(title, year, tmdbApiKey);
  renderGenreRow(metaEl, genres);
}

// ─── Page scanning ────────────────────────────────────────────────────────────

/**
 * Scans the page for the metadata <p> containing both lines.
 */
function enhancePage() {
  for (const el of document.querySelectorAll('p')) {
    if (el.dataset.ccEnhanced) continue;
    const text = el.textContent;
    if (/Directed by\s+/.test(text) || /Starring\s+/.test(text)) {
      enhanceMetaBlock(el, currentSettings);
      maybeAddGenres(el);
    }
  }
}

/**
 * Re-processes all previously enhanced elements from their saved original HTML,
 * then re-runs enhancePage with updated settings.
 */
function reEnhancePage() {
  for (const el of document.querySelectorAll('[data-cc-enhanced]')) {
    removeGenreRow(el);
    el.innerHTML = el.dataset.ccOriginalHtml;
    delete el.dataset.ccEnhanced;
  }
  enhancePage();
}

// ─── Initialisation ───────────────────────────────────────────────────────────

// Load settings before first pass, then kick off page enhancement.
chrome.storage.sync.get(DEFAULT_SETTINGS, (settings) => {
  currentSettings = settings;
  enhancePage();
});

// Re-process whenever the user changes a setting in the popup.
chrome.storage.onChanged.addListener((changes) => {
  for (const key of Object.keys(changes)) {
    if (key in DEFAULT_SETTINGS) {
      currentSettings[key] = changes[key].newValue;
    }
  }
  reEnhancePage();
});

/**
 * MutationObserver handles SPA navigation — content loads dynamically.
 * Debounced to prevent re-entrancy when replaceChildren triggers mutations.
 */
let debounceTimer;
const observer = new MutationObserver(() => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(enhancePage, 100);
});

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