// mr.js: the merge request page beyond what htmx and hx-live give.
//
//  1. Windows of files. The page holds the hunks of one window of files; the
//     other files are placeholders (.dlazy[data-src]), loaded by lazy.js (which
//     the commit and compare pages use too) when they come near the screen. A
//     link to a file or to a comment of a placeholder loads it first (reveal).
//  2. The menus of the bar (merge, more) and their keys: M opens the merge menu
//     on its button, 1-9 pick a mode, D toggles the branch deletion, Enter
//     submits (the browser does it: the focus is on the button), Esc closes.
//     R marks the head read. Nothing merges on one key.
//  3. g f puts the focus in the list of files (opening it when folded); j / k
//     move in it, Enter opens the file, Esc goes back to the diff. The button
//     of its header folds the list, and the choice is remembered.
//
// Nothing runs on a page without #diffs[data-mr]. window.ermiteMR.core is pure
// (jstest/mr.test.mjs).
window.ermiteMR = (() => {
  // core: the decisions, without the DOM.
  const core = {
    rangeURL(previous, current, base) {
      const a = new URL(previous, base), b = new URL(current, base);
      const parse = (u) => /^(new|old):(\d+):(.+)$/.exec(u.searchParams.get('on') || '');
      const x = parse(a), y = parse(b);
      if (!x || !y || a.pathname !== b.pathname || x[1] !== y[1] || x[3] !== y[3] || x[2] === y[2]) return null;
      const nums = [Number(x[2]), Number(y[2])].sort((a,b) => a-b);
      b.searchParams.set('on', `${y[1]}:${nums[0]}-${nums[1]}:${y[3]}`);
      return b.href;
    },
    quote(button) {
      const thread = button.closest('.cmt').closest('[data-thread]');
      const details = thread?.querySelector(':scope > details[data-reply]');
      const field = details?.querySelector('textarea');
      if (!field) return false;
      details.open = true;
      field.value = button.dataset.quote;
      field.focus();
      return true;
    },
    // windowOf is the start of the window of file i (files are f1, f2, ...).
    windowOf(id, size) {
      const n = Number(String(id).replace(/^f/, '')) - 1;
      return Number.isInteger(n) && n >= 0 ? n - (n % size) : -1;
    },
    // menuKey says what a key does while the merge menu is open: a mode
    // (index), the branch deletion, or nothing.
    menuKey(key, modes) {
      if (key === 'D') return { toggle: true };
      if (/^[1-9]$/.test(key) && Number(key) <= modes) return { mode: Number(key) - 1 };
      return null;
    },
    // step moves an index within [0, n).
    step(i, d, n) {
      if (n === 0) return -1;
      if (i < 0) return d > 0 ? 0 : n - 1;
      return Math.max(0, Math.min(n - 1, i + d));
    },
  };

  const $ = (sel, root = document) => root.querySelector(sel);
  const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
  let revealGen = 0; // the last reveal wins the scroll
  const load = (ph) => window.ermiteLazy.load(ph);

  // reveal loads the file of an id (a file "f12" or a comment "c3") when it is
  // a placeholder, then scrolls to it. It returns false when there is nothing
  // to load.
  function reveal(id, scroll = true) {
    // Any navigation, loaded or not, makes the reveals still loading stale.
    const gen = ++revealGen;
    const target = () => {
      // A page with both layouts says which shows in data-diff; a large diff
      // rendered in one layout only says it in data-view.
      const diffs = $('#diffs')?.dataset;
      if (/^c\d+$/.test(id) && (diffs?.diff || diffs?.view) === 'split') {
        const split = document.getElementById(id + '-s');
        if (split) return split;
      }
      return document.getElementById(id);
    };
    let ph = document.getElementById(id)?.querySelector(':scope > .dlazy:not([data-manual])');
    if (!ph && /^c\d+/.test(id) && !document.getElementById(id)) {
      const base = id.replace(/-s$/, '');
      ph = $$('.dlazy[data-notes]').find((p) => p.dataset.notes.split(' ').includes(base));
    }
    if (!ph) {
      const el = target();
      if (el && el.id !== id) {
        const d = el.closest('details');
        if (d) d.open = true;
        if (scroll) el.scrollIntoView({ block: 'start' });
      }
      return false;
    }
    load(ph).then(() => {
      // A later reveal (another file asked meanwhile) owns the view.
      if (gen !== revealGen) return;
      const el = target();
      if (!el) return;
      const d = el.closest('details');
      if (d) d.open = true;
      if (!scroll) return;
      // The files above may have changed size while it loaded (placeholders,
      // content-visibility): place it, then again once laid out.
      el.scrollIntoView({ block: 'start' });
      requestAnimationFrame(() => requestAnimationFrame(() => {
        if (gen === revealGen) el.scrollIntoView({ block: 'start' });
      }));
    });
    return true;
  }

  // The merge menu.
  const menu = () => $('#merge-menu');
  function openMerge() {
    const m = menu();
    if (!m) return false;
    for (const d of $$('details.menu[open]')) if (d !== m) d.open = false;
    m.open = true;
    $('[data-default]', m)?.focus();
    return true;
  }
  // menuKey handles a key while the merge menu is open; true when it used it.
  function menuKey(e) {
    const m = menu();
    if (!m?.open || e.ctrlKey || e.metaKey || e.altKey) return false;
    // An open dialog (help, commands) is above the menu: it keeps the keys.
    if ($('dialog[open]')) return false;
    // A field outside the menu (a comment being written) keeps its keys.
    const field = e.target.closest?.('input, textarea, select, [contenteditable]');
    if (field && !m.contains(field)) return false;
    const radios = $$('input[name="mode"]', m);
    const act = core.menuKey(e.key, radios.length);
    if (!act) return false;
    e.preventDefault();
    if (act.toggle) {
      const box = $('input[name="delete_branch"]', m);
      if (box) box.checked = !box.checked;
    } else {
      const r = radios[act.mode];
      // A change event lets the live bindings enable the Merge button again.
      if (!r.disabled && !r.checked) {
        r.checked = true;
        r.dispatchEvent(new Event('change', { bubbles: true }));
      }
    }
    $('[data-default]', m)?.focus();
    return true;
  }
  function markRead() {
    const b = $('button[data-read]');
    if (!b) return false;
    b.closest('form').requestSubmit(b);
    return true;
  }

  // The list of files by keyboard: g f focuses the current file.
  const links = () => $$('.r-files .files > li:not([hidden]) > a');
  function focusFiles() {
    foldFiles(false);
    const all = links();
    if (!all.length) return false;
    const cur = all.find((a) => a.getAttribute('aria-current') === 'true') || all[0];
    cur.focus();
    cur.scrollIntoView({ block: 'nearest' });
    return true;
  }
  // stepFiles moves the focus in the list; false when the focus is not in it.
  function stepFiles(d) {
    const all = links();
    const i = all.indexOf(document.activeElement);
    if (i < 0) return false;
    const j = core.step(i, d, all.length);
    all[j].focus();
    all[j].scrollIntoView({ block: 'nearest' });
    return true;
  }
  function leaveFiles() {
    if (!links().includes(document.activeElement)) return false;
    document.getElementById('main')?.focus({ preventScroll: true });
    return true;
  }

  // foldFiles folds the list of files to its header, or opens it again:
  // toggles without an argument. The choice is kept for the next pages.
  function foldFiles(fold) {
    const sec = $('.r-files');
    const btn = sec && $('button.fold', sec);
    if (!btn) return;
    if (fold === undefined) fold = !sec.hasAttribute('data-folded');
    sec.toggleAttribute('data-folded', fold);
    btn.setAttribute('aria-expanded', String(!fold));
    btn.title = fold ? 'open the list of files' : 'fold the list of files';
    $('.sr', btn).textContent = btn.title;
    // The list did not follow the review while folded: show its current file,
    // moving the list only (never the page).
    const box = !fold && $('.files', sec);
    const a = box && $('a[aria-current="true"]', box);
    if (a && (a.offsetTop < box.scrollTop || a.offsetTop + a.offsetHeight > box.scrollTop + box.clientHeight)) {
      box.scrollTop = a.offsetTop - (box.clientHeight - a.offsetHeight) / 2;
    }
    try { localStorage.setItem('mr-files-folded', fold ? '1' : ''); } catch { /* storage refused: holds for this page */ }
  }

  // openFile opens the file of a link of the list (and loads it first).
  function openFile(id) {
    const f = document.getElementById(id);
    if (f) f.open = true;
    reveal(id);
  }

  function start() {
    if (!$('#diffs[data-mr]')) return;
    let folded = false;
    try { folded = localStorage.getItem('mr-files-folded') === '1'; } catch { /* no storage: open */ }
    if (folded) foldFiles(true);
    // The page answers a refused action from the address of the action: show
    // the address of the request, so that a reload does not post again.
    const canonical = $('#diffs[data-canonical]')?.dataset.canonical;
    if (canonical && location.pathname !== canonical) history.replaceState(history.state, '', canonical + location.hash);
    // A link to a file or a comment that is not loaded yet.
    const hash = () => {
      const id = decodeURIComponent(location.hash.slice(1));
      if (id) reveal(id);
    };
    addEventListener('hashchange', hash);
    hash();
    let lastLine = null;
    try { lastLine = sessionStorage.getItem('mr-last-line'); } catch { /* storage optional */ }
    addEventListener('click', (e) => {
      const quote = e.target.closest?.('[data-quote]');
      if (quote) { core.quote(quote); return; }
      const link = e.target.closest?.('a[href*="on="]');
      if (!link || e.ctrlKey || e.metaKey || e.altKey) return;
      const next = e.shiftKey && lastLine && core.rangeURL(lastLine, link.href, location.href);
      lastLine = link.href;
      try { sessionStorage.setItem('mr-last-line', lastLine); } catch { /* storage optional */ }
      if (next) { e.preventDefault(); location.assign(next); }
    });
  }

  return { core, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };
})();

if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => window.ermiteMR.start());
else window.ermiteMR.start();