<!--
  ============================================================
  diff.html — LLM-GENERATED FILE, LLM-MAINTAINED
  ============================================================
  This file was generated and is maintained by an LLM (Claude).
  When making changes, update this spec comment to reflect the
  new behaviour before returning the edited file.
  ============================================================

  OVERVIEW
  --------
  A single-file, no-build diff viewer that fetches two Git refs
  from a public GitHub repository and renders a side-by-side
  split diff, similar to GitHub's compare view.

  URL FORMAT
  ----------
  diff.html?repo=OWNER/REPO&range=BASE...HEAD&path=SUBDIR

  Parameters:
    repo    Optional. GitHub repo slug (e.g. talkjs/themes).
            Defaults to "talkjs/themes" when omitted.
    range   Required. Git range in BASE...HEAD or BASE..HEAD form
            (e.g. 0.1.6...0.1.7 or v1.0.0..v1.1.0).
    path    Optional. If given (with or without a leading /),
            only files whose path starts with that prefix are shown.
            The downloaded .patch file strips this prefix from all
            paths, so `git apply` can be run from inside that directory.
            If the path parameter isn't provided, then the theme and format
            parameters are used to set the path parameter, in the form
            "{theme}/{format}".
    theme   Optional. Defaults to "default".
    format   Optional. Defaults to "web-js".

  DATA FETCHING
  -------------
  Uses the GitHub REST API:
    GET /repos/{repo}/compare/{range}?per_page=100&page=N
  Paginates until all files are collected, up to GitHub's cap of
  300 files. No authentication — repo must be public.

  DIFF RENDERING
  --------------
  - Builds a unified diff string from the GitHub API response,
    including correct extended git headers:
      new file mode 100644        (status: added)
      deleted file mode 100644   (status: removed)
      rename from / rename to    (status: renamed)
      copy from / copy to        (status: copied)
    /dev/null is used as old/new path for added/removed files.
  - Renders with diff2html (v3.4.47) in side-by-side mode on wide screens
    (≥ 768px) and line-by-line on narrow screens.
  - Syntax highlighting via highlight.js (v11.9.0) for:
      .js / .jsx  → javascript
      .ts / .tsx  → typescript
      .css        → css
      .html / .htm → xml
  - The "CHANGED" file status badge is hidden; ADDED, DELETED,
    RENAMED, COPIED badges are shown.

  HEADER
  ------
  - TalkJS logo (SVG, inline) — links to https://talkjs.com/docs.
  - Repo name as a link to github.com/{repo}.
  - Version range label:
    "Showing changes for theme [select] using format [select] from [select] to [select]".
    Tags are fetched from the GitHub API in parallel with the diff and
    populated antichronologically (newest first, as returned by the API).
    If the current base or head is a SHA/ref not in the tag list it is
    prepended as an extra option. Changing the first dropdown redirects to
    the same URL with an updated theme= parameter. Changing the second dropdown
    does the same except it changes the format= parameter, and changing the third
    or fourth dropdown changes the range= parameter.
  - "Download patch file: {filename}" — grey label with only the
    filename as a blue link. Clicking downloads the .patch file
    (see below). Hidden until the diff has loaded.

  LAYOUT
  ------
  - Max-width 1400px, centered. Header and stats bar have inner wrappers.
  - Sticky sidebar TOC (250px) left of main content on screens ≥ 900px.
    Sidebar hidden via CSS on narrow screens.
  - Side-by-side diff on screens ≥ 768px; line-by-line below that.
  - overflow-x: auto on the diff wrapper prevents horizontal scrollbar
    on the whole page on mobile.

  TYPOGRAPHY
  ----------
  - Prose uses Inter font (self-hosted at /docs/fonts/inter/, same as
    talkjs.com/docs). Code uses system monospace.
  - Base font-size: 16px.

  SIDEBAR TOC
  -----------
  Built after diff renders. Mirrors the file tree: directories shown as
  collapsible <details>, files as anchor links to #diff-file-{i}.
  Colored dot indicates file status (green=added, red=removed, blue=renamed).

  FILE STATUS TAGS
  ----------------
  - CHANGED tag hidden; ADDED (green), DELETED (red), RENAMED/COPIED (blue)
    tags have colored pill backgrounds for easy scanning.

  STATS BAR
  ---------
  Shows N changed files / +additions / -deletions.
  Revealed after the diff loads.

  PATCH DOWNLOAD
  --------------
  A .patch file is generated from the filtered file list and
  exposed as a blob: URL on two native <a download> links:
    1. The filename link in the page header (always present).
    2. An inline "Download patch file: {filename}" link in the
       callout (talkjs/themes only, see below).
  The blob URL is created once at load time; no click handlers.

  Filename format:
    {repo-name}-{range}.patch
    {path-slug}-{range}.patch  (when path= is given)

  The patch is `git apply`-compatible:
    - Paths are stripped of the path= prefix so the patch applies
      correctly when run from inside that directory.
    - Includes new file mode / deleted file mode / rename from-to
      headers so git apply handles added, removed and renamed files
      correctly.

  TALKJS/THEMES CALLOUT
  ----------------------------
  When repo === "talkjs/themes", an explanatory section
  is shown above the diff titled "Upgrading your theme". It:
    - Explains that the diff shows changes between theme versions
      and can be used to upgrade locally customized theme files.
    - Provides an inline download link for the .patch file.
    - Shows two copy-able shell commands:
        git apply {filename}.patch
        git apply $(find . -type f -printf '--include=%P ') {filename}.patch
      The second command patches only files the user already has.
    Each command has a "Copy" button that flips to "Copied!" for
    2 seconds after clicking.

  DIFF RENDERING (continued)
  --------------------------
  - The "[ ] Viewed" checkbox rendered by diff2html is hidden via CSS.
  - Each file header is post-processed after rendering to become a link
    to that file on GitHub at the head ref:
      https://github.com/{repo}/blob/{head}/{filename}

  DEPENDENCIES (all loaded from esm.sh, no npm/build step)
  ---------------------------------------------------------
  - diff2html@3.4.47         JS via esm.sh, CSS via esm.sh static asset
  - highlight.js@11.9.0      JS (core + 4 languages) via esm.sh,
                             CSS (github theme) via esm.sh static asset
  - Inter font               Self-hosted at /docs/fonts/inter/ (same as
                             talkjs.com/docs), loaded via @font-face
  ============================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Diff Viewer</title>
  <style>
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/docs/fonts/inter/Inter-Regular.woff2?v=3.19') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/docs/fonts/inter/Inter-Medium.woff2?v=3.19') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/docs/fonts/inter/Inter-SemiBold.woff2?v=3.19') format('woff2'); }
    @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/docs/fonts/inter/Inter-Bold.woff2?v=3.19') format('woff2'); }
  </style>
  <link rel="stylesheet" href="https://esm.sh/diff2html@3.4.47/bundles/css/diff2html.min.css" />
  <link rel="stylesheet" href="https://esm.sh/highlight.js@11.9.0/styles/github.min.css" />
  <style>
    *, *::before, *::after { box-sizing: border-box; }

    body {
      margin: 0;
      background: #fff;
      color: #1f2328;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
      font-size: 16px;
    }

    header {
      background: #f6f8fa;
      border-bottom: 1px solid #d0d7de;
      padding: 14px 24px;
    }

    .header-inner {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .logo-link {
      display: flex;
      flex-shrink: 0;
      color: inherit;
    }
    .logo-link svg { fill: #1f2328; }
    .logo-link:hover { opacity: 0.75; }

    header .header-content {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: 1;
      flex-wrap: wrap;
    }

    header .breadcrumb {
      font-size: 15px;
      font-weight: 600;
    }

    header .breadcrumb a {
      color: #0969da;
      text-decoration: none;
    }

    header .breadcrumb a:hover { text-decoration: underline; }

    .range-label {
      font-size: 14px;
      color: #656d76;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .range-label select {
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 13px;
      color: #0550ae;
      background: #fff;
      border: 1px solid #d0d7de;
      border-radius: 6px;
      padding: 3px 8px 3px 6px;
      cursor: pointer;
      outline: none;
    }

    .range-label select:hover { border-color: #0550ae; }

    .stats-bar {
      background: #f6f8fa;
      border-bottom: 1px solid #d0d7de;
      padding: 8px 24px;
    }

    .stats-inner {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      gap: 16px;
      align-items: center;
      font-size: 13px;
      color: #656d76;
    }

    .stats-bar .stat { display: flex; align-items: center; gap: 5px; }
    .stat-add { color: #1a7f37; }
    .stat-del { color: #cf222e; }
    .stat-file { color: #0550ae; }

    #btn-download {
      margin-left: auto;
      display: none;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: #656d76;
      white-space: nowrap;
    }

    #btn-download svg { flex-shrink: 0; }
    #btn-download-name { color: #0969da; text-decoration: underline; }

    #page-body {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      align-items: flex-start;
    }

    #sidebar {
      width: 250px;
      flex-shrink: 0;
      position: sticky;
      top: 0;
      max-height: 100vh;
      overflow-y: auto;
      border-right: 1px solid #d0d7de;
      padding: 16px 12px;
      font-size: 12px;
      line-height: 1.5;
    }

    #sidebar .sidebar-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #656d76;
      margin: 0 0 8px 4px;
    }

    #sidebar .sidebar-file {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 2px 4px;
      border-radius: 4px;
      color: #1f2328;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 11px;
    }
    #sidebar .sidebar-file:hover { background: #f6f8fa; }

    #sidebar .sidebar-dot {
      flex-shrink: 0;
      width: 7px;
      height: 7px;
      border-radius: 50%;
    }

    #sidebar details { margin-bottom: 2px; }
    #sidebar details[open] > summary { margin-bottom: 2px; }

    #sidebar summary.sidebar-dir {
      padding: 2px 4px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
      color: #1f2328;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 11px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #sidebar summary.sidebar-dir::-webkit-details-marker { display: none; }
    #sidebar summary.sidebar-dir::before {
      content: '▶';
      font-size: 9px;
      color: #656d76;
      flex-shrink: 0;
      transition: transform 0.15s;
    }
    #sidebar details[open] > summary.sidebar-dir::before { transform: rotate(90deg); }
    #sidebar summary.sidebar-dir:hover { background: #f6f8fa; }

    #sidebar .sidebar-children { padding-left: 14px; }

    main {
      flex: 1;
      min-width: 0;
      padding: 24px;
      overflow-x: auto;
    }

    #status {
      text-align: center;
      padding: 60px 24px;
      color: #656d76;
    }

    .spinner {
      display: inline-block;
      width: 32px;
      height: 32px;
      border: 3px solid #d0d7de;
      border-top-color: #0969da;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin-bottom: 16px;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .error-box {
      background: #fff;
      border: 1px solid #cf222e;
      border-radius: 8px;
      padding: 24px;
      max-width: 560px;
      margin: 60px auto;
      text-align: center;
    }

    .error-box h2 { color: #cf222e; margin: 0 0 8px; font-size: 16px; }
    .error-box p { color: #656d76; margin: 0; }
    .error-box a { color: #0969da; }
    .error-box code {
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      background: #f6f8fa;
      padding: 2px 5px;
      border-radius: 4px;
    }

    .d2h-wrapper { font-size: 13px; overflow-x: auto; }
    .d2h-file-list-wrapper { display: none; }
    .d2h-changed-tag { display: none; }
    .d2h-file-collapse { display: none !important; }

    /* Colored status tags */
    .d2h-tag {
      font-size: 10px !important;
      font-weight: 700 !important;
      padding: 2px 8px !important;
      border-radius: 20px !important;
      letter-spacing: 0.03em;
    }
    .d2h-added-tag   { background: #dafbe1 !important; color: #1a7f37 !important; border-color: #1a7f37 !important; }
    .d2h-deleted-tag { background: #ffebe9 !important; color: #cf222e !important; border-color: #cf222e !important; }
    .d2h-moved-tag   { background: #ddf4ff !important; color: #0550ae !important; border-color: #0550ae !important; }
    .d2h-copied-tag  { background: #fff8c5 !important; color: #7d4e00 !important; border-color: #7d4e00 !important; }

    @media (max-width: 900px) {
      #sidebar { display: none !important; }
      header .breadcrumb { display: none; }
    }
    @media (max-width: 600px) {
      header { padding: 12px 16px; }
      main { padding: 16px; }
      .range-label { font-size: 13px; }
    }

    .callout {
      max-width: 900px;
      margin-bottom: 24px;
      font-size: 14px;
      line-height: 1.6;
      color: #1f2328;
    }

    .callout p { margin: 0 0 12px; }
    .callout p:last-child { margin-bottom: 0; }

    /* inline download link inside callout prose */
    .callout .dl-link { color: #0969da; }
    .callout .dl-link:hover { color: #0550ae; }

    .callout .cmd-block {
      display: flex;
      gap: 0;
      background: #f6f8fa;
      border: 1px solid #d0d7de;
      border-radius: 6px;
      margin: 8px 0 12px;
      overflow: hidden;
    }

    .callout .cmd-block code {
      flex: 1;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 12px;
      padding: 8px 12px;
      color: #1f2328;
      white-space: pre;
      overflow-x: auto;
    }

    .callout .cmd-copy {
      flex-shrink: 0;
      border: none;
      border-left: 1px solid #d0d7de;
      background: #f6f8fa;
      padding: 0 12px;
      cursor: pointer;
      color: #656d76;
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .callout .cmd-copy:hover { background: #eef1f4; color: #1f2328; }
    .callout .cmd-copy.copied { color: #1a7f37; }

    /* prevent hljs from adding its own background/padding inside diff rows */
    .d2h-code-line .hljs, .d2h-code-side-line .hljs {
      background: transparent;
      padding: 0;
      border-radius: 0;
      overflow: visible;
    }
  </style>
</head>
<body>
  <div id="page-header" style="display:none">
    <header>
      <div class="header-inner">
        <a href="/docs" class="logo-link" title="TalkJS Docs">
          <svg width="36" height="40" viewBox="0 0 40 46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40 0H0V40.185H17.937V45.6338L25.0847 40.185H40V0Z" fill="#1B1B1B"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6.65374 5.75222V10.8506H5.11361V5.75222H3.31229V4.42773H8.45507V5.75222H6.65374ZM16.4609 10.8506L15.9655 9.58959H13.4977L13.0294 10.8506H11.3541L14.0291 4.42773H15.5242L18.1722 10.8506H16.4609ZM14.7496 6.1423L13.939 8.34675H15.5422L14.7496 6.1423ZM22.2241 10.8506V4.42773H23.7732V9.49887H26.241V10.8506H22.2241ZM34.382 10.8506L32.0132 7.89316H31.9952V10.8506H30.4821V4.42773H31.9952V7.04041H32.0222L34.3009 4.42773H36.2283L33.4813 7.38514L36.3904 10.8506H34.382ZM7.4103 19.7726C7.4103 20.0266 7.38178 20.2927 7.32474 20.5709C7.2677 20.8491 7.16262 21.1046 7.00951 21.3375C6.85639 21.5703 6.64324 21.7623 6.37004 21.9135C6.09683 22.0647 5.74408 22.1403 5.31176 22.1403C4.77136 22.1403 4.32103 21.9997 3.96076 21.7185C3.6005 21.4373 3.36032 21.0759 3.24023 20.6344L4.60023 20.1717C4.64227 20.3411 4.71882 20.4772 4.8299 20.58C4.94099 20.6828 5.07758 20.7342 5.2397 20.7342C5.49189 20.7342 5.65851 20.6465 5.73957 20.4711C5.82063 20.2957 5.86116 20.0659 5.86116 19.7817V15.5451H7.4103V19.7726ZM15.5782 17.2143C15.4462 17.045 15.2735 16.9104 15.0604 16.8106C14.8472 16.7109 14.6416 16.661 14.4434 16.661C14.3413 16.661 14.2378 16.67 14.1327 16.6882C14.0276 16.7063 13.933 16.7411 13.849 16.7925C13.7649 16.8439 13.6944 16.9104 13.6373 16.9921C13.5803 17.0737 13.5518 17.1781 13.5518 17.3051C13.5518 17.4139 13.5743 17.5046 13.6193 17.5772C13.6643 17.6498 13.7304 17.7133 13.8175 17.7677C13.9045 17.8222 14.0081 17.872 14.1282 17.9174C14.2483 17.9628 14.3834 18.0096 14.5335 18.058C14.7496 18.1306 14.9748 18.2107 15.209 18.2984C15.4432 18.3861 15.6563 18.5025 15.8484 18.6477C16.0406 18.7928 16.1997 18.9728 16.3258 19.1875C16.4519 19.4022 16.5149 19.6698 16.5149 19.9903C16.5149 20.3592 16.4474 20.6783 16.3123 20.9474C16.1772 21.2165 15.9956 21.4388 15.7674 21.6142C15.5392 21.7896 15.278 21.9196 14.9838 22.0042C14.6896 22.0889 14.3864 22.1313 14.0741 22.1313C13.6178 22.1313 13.1765 22.0511 12.7502 21.8909C12.3239 21.7306 11.9696 21.5023 11.6874 21.2059L12.6961 20.1717C12.8522 20.3653 13.0579 20.5271 13.3131 20.6571C13.5683 20.7871 13.822 20.8521 14.0741 20.8521C14.1882 20.8521 14.2993 20.84 14.4074 20.8158C14.5155 20.7917 14.61 20.7523 14.6911 20.6979C14.7722 20.6435 14.8367 20.5709 14.8847 20.4802C14.9328 20.3895 14.9568 20.2806 14.9568 20.1536C14.9568 20.0326 14.9268 19.9298 14.8667 19.8452C14.8067 19.7605 14.7211 19.6834 14.61 19.6138C14.499 19.5443 14.3609 19.4808 14.1957 19.4233C14.0306 19.3659 13.843 19.3039 13.6328 19.2374C13.4287 19.1708 13.229 19.0922 13.0339 19.0015C12.8387 18.9108 12.6646 18.7943 12.5115 18.6522C12.3584 18.5101 12.2353 18.3377 12.1422 18.1351C12.0492 17.9325 12.0026 17.6861 12.0026 17.3958C12.0026 17.039 12.0747 16.7335 12.2188 16.4795C12.3629 16.2255 12.552 16.0169 12.7862 15.8536C13.0204 15.6903 13.2846 15.5708 13.5788 15.4952C13.873 15.4196 14.1702 15.3818 14.4704 15.3818C14.8307 15.3818 15.1985 15.4484 15.5737 15.5814C15.949 15.7145 16.2778 15.911 16.56 16.1711L15.5782 17.2143Z" fill="white"></path></svg>
        </a>
        <div class="header-content">
          <span class="breadcrumb">
            <a id="hdr-repo-link" href="#" target="_blank" rel="noopener"></a>
          </span>
          <span class="range-label">
            Showing changes for theme
            <select id="select-theme">
              <option value="default">default</option>
              <option value="classic">classic</option>
            </select>
            using format
            <select id="select-format">
              <option value="web-js">Web JS</option>
              <option value="web-ts">Web TS</option>
              <option value="react-jsx">React JSX</option>
              <option value="react-tsx">React TSX</option>
            </select>
            from
            <select id="select-base"></select>
            to
            <select id="select-head"></select>
          </span>
          <span id="btn-download" style="display:none">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
              <path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z"/>
              <path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.97a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.779a.749.749 0 1 1 1.06-1.06l1.97 1.97Z"/>
            </svg>
            Download patch file: <a id="btn-download-name"></a>
          </span>
        </div>
      </div>
    </header>
    <div id="stats-bar" class="stats-bar" style="display:none">
      <div class="stats-inner">
        <span class="stat"><span class="stat-file" id="stat-files"></span> changed files</span>
        <span class="stat"><span class="stat-add" id="stat-add">+0</span> additions</span>
        <span class="stat"><span class="stat-del" id="stat-del">-0</span> deletions</span>
      </div>
    </div>
  </div>

  <div id="page-body">
    <aside id="sidebar" style="display:none"></aside>
    <main>
      <div id="status">
        <div class="spinner"></div>
        <div id="status-text">Loading diff…</div>
      </div>
      <div id="callout" style="display:none"></div>
      <div id="diff-root"></div>
    </main>
  </div>

<script type="module">
import { Diff2HtmlUI } from 'https://esm.sh/diff2html@3.4.47/lib/ui/js/diff2html-ui-base';
import hljs     from 'https://esm.sh/highlight.js@11.9.0/lib/core';
import langJS   from 'https://esm.sh/highlight.js@11.9.0/lib/languages/javascript';
import langTS   from 'https://esm.sh/highlight.js@11.9.0/lib/languages/typescript';
import langCSS  from 'https://esm.sh/highlight.js@11.9.0/lib/languages/css';
import langXML  from 'https://esm.sh/highlight.js@11.9.0/lib/languages/xml';

hljs.registerLanguage('javascript', langJS);
hljs.registerLanguage('typescript', langTS);
hljs.registerLanguage('css', langCSS);
hljs.registerLanguage('xml', langXML);
hljs.registerAliases(['jsx'],         { languageName: 'javascript' });
hljs.registerAliases(['tsx'],         { languageName: 'typescript' });
hljs.registerAliases(['html', 'htm'], { languageName: 'xml' });

// For any language we haven't loaded (including 'plaintext', 'python', etc.),
// fall back to plain text instead of throwing.
const _highlight = hljs.highlight.bind(hljs);
hljs.highlight = (code, opts, ...rest) => {
  if (opts?.language && !hljs.getLanguage(opts.language)) {
    return { value: code.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') };
  }
  return _highlight(code, opts, ...rest);
};

const params = new URLSearchParams(location.search);
const repo  = params.get('repo') || 'talkjs/themes';
const range = params.get('range');
const theme = params.get('theme') || 'default';
const format = params.get('format') || 'web-js';
const path = params.get('path');
const pathFilter = (path !== null ? params.get('path') : `${theme}/${format}`).replace(/^\//, '');

const statusEl     = document.getElementById('status');
const statusTxt    = document.getElementById('status-text');
const diffRoot     = document.getElementById('diff-root');
const btnDownload  = document.getElementById('btn-download');
const selectTheme  = document.getElementById('select-theme');
const selectFormat = document.getElementById('select-format');

selectTheme.selectedIndex = [...selectTheme.options].findIndex(option => option.value === theme);
selectFormat.selectedIndex = [...selectFormat.options].findIndex(option => option.value === format);

selectTheme.addEventListener('change', () => {
  const p = new URLSearchParams(location.search);
  p.set('theme', selectTheme.value);
  location.href = '?' + p.toString();
});

selectFormat.addEventListener('change', () => {
  const p = new URLSearchParams(location.search);
  p.set('format', selectFormat.value);
  location.href = '?' + p.toString();
});

function showError(title, detail) {
  statusEl.style.display = '';
  statusEl.innerHTML = `
    <div class="error-box">
      <h2>${title}</h2>
      <p>${detail}</p>
    </div>`;
}

if (!range) {
  showError(
    'Missing parameters',
    'Usage: <code>diff.html?range=v1...v2</code>'
  );
} else {
  const [base, head] = range.includes('...') ? range.split('...') : range.split('..');
  const pageHeader = document.getElementById('page-header');
  const repoLink   = document.getElementById('hdr-repo-link');

  repoLink.href        = `https://github.com/${repo}`;
  repoLink.textContent = repo;
  pageHeader.style.display = '';

  // Populate tag dropdowns (fetched in parallel with the diff)
  fetchTags(repo).then(tags => {
    const selectBase = document.getElementById('select-base');
    const selectHead = document.getElementById('select-head');
    [selectBase, selectHead].forEach((sel, i) => {
      const current = i === 0 ? base : head;
      // Include current value even if it's a SHA not in the tag list
      const options = tags.includes(current) ? tags : [current, ...tags];
      options.forEach(tag => {
        const opt = document.createElement('option');
        opt.value = tag;
        opt.textContent = tag;
        opt.selected = tag === current;
        sel.appendChild(opt);
      });
    });
    function onSelectChange() {
      const p = new URLSearchParams(location.search);
      p.set('range', `${selectBase.value}...${selectHead.value}`);
      location.href = '?' + p.toString();
    }
    selectBase.addEventListener('change', onSelectChange);
    selectHead.addEventListener('change', onSelectChange);
  });

  document.title = `${base}...${head} · ${repo}`;

  loadDiff(repo, range, base, head);
}

async function loadDiff(repo, range, base, head) {
  try {
    const files = await fetchAllFiles(repo, range);

    const filteredFiles = pathFilter
      ? files.filter(f => f.filename.startsWith(pathFilter + '/') || f.filename.startsWith(pathFilter))
      : files;

    if (filteredFiles.length === 0) {
      const pathNote  = pathFilter ? ` under "${pathFilter}"` : '';
      let detail = `There are no differences between these two refs${pathNote}.`;
      if (semverGt(base, head)) {
        const swapParams = new URLSearchParams(location.search);
        swapParams.set('range', `${head}...${base}`);
        detail += ` Did you mean to compare them the other way around? <a href="?${swapParams.toString()}">Swap base and head ↔</a>`;
      }
      showError('No changes found' + pathNote, detail);
      return;
    }

    const unifiedDiff = buildUnifiedDiff(filteredFiles);

    statusEl.style.display = 'none';

    const repoSlug = repo.split('/')[1];
    const patchName = pathFilter
      ? `${pathFilter.replace(/\//g, '-')}-${range}.patch`
      : `${repoSlug}-${range}.patch`;

    // header download link (always shown)
    const patch = buildPatch(filteredFiles, pathFilter);
    const btnDownloadName = document.getElementById('btn-download-name');
    btnDownloadName.textContent = patchName;
    btnDownloadName.href        = URL.createObjectURL(new Blob([patch], { type: 'text/plain' })) + '#' + patchName;
    btnDownloadName.download    = patchName;
    btnDownload.style.display   = 'flex';

    // talkjs/themes callout
    if (repo === 'talkjs/themes') {
      const calloutEl = document.getElementById('callout');
      const patchCmd  = `git apply --directory="$(git rev-parse --show-prefix)" ${patchName}`;
      const findCmd   = `(
  dir=$(git rev-parse --show-prefix)
  includes=$(printf -- "--include=\${dir}%s " $(git ls-files))
  git apply --directory="$dir" $includes ${patchName}
)`;
      calloutEl.className     = 'callout';
      calloutEl.style.display = '';
      calloutEl.innerHTML = `
        <h2 style="margin:0 0 10px;font-size:16px;font-weight:600;color:#1f2328;">Upgrading your theme</h2>
        <p>This diff shows changes to the TalkJS default theme between two versions.
        If you have downloaded and customized these theme files locally, you can use it to upgrade your customized components.</p>
        <p>Download <a class="dl-link" href="${btnDownloadName.href}" download="${escHtml(patchName)}">${escHtml(patchName)}</a> to the directory containing your custom theme components, then run the following from that directory to apply the upgrade:</p>
        <div class="cmd-block">
          <code id="cmd-1">${escHtml(patchCmd)}</code>
          <button class="cmd-copy" data-target="cmd-1">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"/><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"/></svg>
            Copy
          </button>
        </div>
        <p>If you only copied a small number of theme components, run this instead to only patch the files you actually have:</p>
        <div class="cmd-block">
          <code id="cmd-2">${escHtml(findCmd)}</code>
          <button class="cmd-copy" data-target="cmd-2">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"/><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"/></svg>
            Copy
          </button>
        </div>
        <h2 style="margin:30px 0 10px;font-size:16px;font-weight:600;color:#1f2328;">Changes between ${base} and ${head}</h2>`;

      calloutEl.querySelectorAll('.cmd-copy').forEach(btn => {
        btn.addEventListener('click', () => {
          const text = document.getElementById(btn.dataset.target).textContent;
          navigator.clipboard.writeText(text).then(() => {
            btn.classList.add('copied');
            const orig = btn.innerHTML;
            btn.innerHTML = btn.innerHTML.replace('Copy', 'Copied!');
            setTimeout(() => { btn.innerHTML = orig; btn.classList.remove('copied'); }, 2000);
          });
        });
      });
    }

    const ui = new Diff2HtmlUI(diffRoot, unifiedDiff, {
      drawFileList: false,
      matching: 'lines',
      outputFormat: window.innerWidth < 768 ? 'line-by-line' : 'side-by-side',
      highlight: true,
      renderNothingWhenEmpty: false,
    }, hljs);
    ui.draw();
    ui.highlightCode();

    // Assign IDs for sidebar anchor links
    diffRoot.querySelectorAll('.d2h-file-wrapper').forEach((el, i) => {
      el.id = `diff-file-${i}`;
    });

    buildSidebar(filteredFiles);

    // Link each file header to the file on GitHub at the head ref
    diffRoot.querySelectorAll('.d2h-file-name').forEach(el => {
      const filename = el.textContent.trim();
      const a = document.createElement('a');
      a.href   = `https://github.com/${repo}/blob/${head}/${filename}`;
      a.target = '_blank';
      a.rel    = 'noopener';
      a.style.cssText = 'color:inherit;text-decoration:none';
      a.addEventListener('mouseenter', () => a.style.textDecoration = 'underline');
      a.addEventListener('mouseleave', () => a.style.textDecoration = 'none');
      a.append(...el.childNodes);
      el.appendChild(a);
    });

    const adds = filteredFiles.reduce((s, f) => s + (f.additions || 0), 0);
    const dels = filteredFiles.reduce((s, f) => s + (f.deletions || 0), 0);
    document.getElementById('stat-files').textContent = filteredFiles.length;
    document.getElementById('stat-add').textContent   = `+${adds}`;
    document.getElementById('stat-del').textContent   = `-${dels}`;
    document.getElementById('stats-bar').style.display = '';

  } catch (err) {
    showError('Failed to load diff', escHtml(err.message));
  }
}

async function fetchTags(repo) {
  const tags = [];
  let page = 1;
  while (true) {
    const res = await fetch(
      `https://api.github.com/repos/${repo}/tags?per_page=100&page=${page}`,
      { headers: { Accept: 'application/vnd.github+json', 'X-GitHub-Api-Version': '2022-11-28' } }
    );
    if (!res.ok) break;
    const data = await res.json();
    tags.push(...data.map(t => t.name));
    if (data.length < 100) break;
    page++;
  }
  return tags;
}

async function fetchAllFiles(repo, range) {
  const perPage = 100;
  let page = 1;
  let files = [];

  while (true) {
    const url = `https://api.github.com/repos/${repo}/compare/${range}?per_page=${perPage}&page=${page}`;
    const res = await fetch(url, {
      headers: { Accept: 'application/vnd.github+json', 'X-GitHub-Api-Version': '2022-11-28' }
    });

    if (!res.ok) {
      const body = await res.json().catch(() => ({}));
      throw new Error(body.message || `HTTP ${res.status} ${res.statusText}`);
    }

    const data = await res.json();
    files = files.concat(data.files || []);

    if (!data.files || data.files.length < perPage || files.length >= 300) break;
    page++;
  }

  return files;
}

function gitHeader(status, aName, bName) {
  switch (status) {
    case 'added':   return `new file mode 100644\n`;
    case 'removed': return `deleted file mode 100644\n`;
    case 'renamed': return `rename from ${aName}\nrename to ${bName}\n`;
    case 'copied':  return `copy from ${aName}\ncopy to ${bName}\n`;
    default:        return '';
  }
}

function buildUnifiedDiff(files) {
  return files
    .filter(f => f.patch)
    .map(f => {
      const aName   = f.previous_filename || f.filename;
      const bName   = f.filename;
      const oldPath = f.status === 'added'   ? '/dev/null' : `a/${aName}`;
      const newPath = f.status === 'removed' ? '/dev/null' : `b/${bName}`;

      return (
        `diff --git a/${aName} b/${bName}\n` +
        gitHeader(f.status, aName, bName) +
        `--- ${oldPath}\n` +
        `+++ ${newPath}\n` +
        f.patch
      );
    })
    .join('\n');
}

// Builds a patch suitable for `git apply` run from inside `prefix` directory.
// Strips the prefix from all file paths so paths are relative to that dir.
function buildPatch(files, prefix) {
  const strip = prefix ? prefix.replace(/\/?$/, '/') : '';

  return files
    .filter(f => f.patch)
    .map(f => {
      const aName   = (f.previous_filename || f.filename).slice(strip.length);
      const bName   = f.filename.slice(strip.length);
      const oldPath = f.status === 'added'   ? '/dev/null' : `a/${aName}`;
      const newPath = f.status === 'removed' ? '/dev/null' : `b/${bName}`;

      return (
        `diff --git a/${aName} b/${bName}\n` +
        gitHeader(f.status, aName, bName) +
        `--- ${oldPath}\n` +
        `+++ ${newPath}\n` +
        f.patch
      );
    })
    .join('\n') + '\n';
}

// Returns true if version string `a` is semver-greater than `b`.
// Strips a leading "v", splits on ".", compares parts numerically.
// Falls back to false (no swap suggestion) if either isn't semver-like.
function semverGt(a, b) {
  const parse = s => s.replace(/^v/, '').split('.').map(Number);
  const pa = parse(a), pb = parse(b);
  if (pa.some(isNaN) || pb.some(isNaN)) return false;
  for (let i = 0; i < Math.max(pa.length, pb.length); i++) {
    const diff = (pa[i] || 0) - (pb[i] || 0);
    if (diff !== 0) return diff > 0;
  }
  return false;
}

function buildSidebar(files) {
  const sidebar = document.getElementById('sidebar');
  sidebar.innerHTML = '';

  const title = document.createElement('div');
  title.className = 'sidebar-title';
  title.textContent = 'Changed files';
  sidebar.appendChild(title);

  // Build a nested tree: { __files: [...], subdir: { ... } }
  const tree = {};
  files.forEach((f, i) => {
    const parts = f.filename.split('/');
    let node = tree;
    for (let j = 0; j < parts.length - 1; j++) {
      if (!node[parts[j]]) node[parts[j]] = {};
      node = node[parts[j]];
    }
    if (!node.__files) node.__files = [];
    node.__files.push({ name: parts[parts.length - 1], file: f, index: i });
  });

  const dotColor = s => ({ added: '#1a7f37', removed: '#cf222e', renamed: '#0550ae', copied: '#0550ae' }[s] || '#656d76');

  function renderNode(node, container) {
    // Dirs first, then files
    const dirs = Object.keys(node).filter(k => k !== '__files').sort();
    dirs.forEach(dir => {
      const details = document.createElement('details');
      details.open = true;
      const summary = document.createElement('summary');
      summary.className = 'sidebar-dir';
      summary.appendChild(document.createTextNode(dir));
      details.appendChild(summary);
      const children = document.createElement('div');
      children.className = 'sidebar-children';
      renderNode(node[dir], children);
      details.appendChild(children);
      container.appendChild(details);
    });
    (node.__files || []).forEach(({ name, file, index }) => {
      const a = document.createElement('a');
      a.href = `#diff-file-${index}`;
      a.className = 'sidebar-file';
      const dot = document.createElement('span');
      dot.className = 'sidebar-dot';
      dot.style.background = dotColor(file.status);
      a.appendChild(dot);
      a.appendChild(document.createTextNode(name));
      container.appendChild(a);
    });
  }

  renderNode(tree, sidebar);
  sidebar.style.display = '';
}

function escHtml(s) {
  return String(s)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}
</script>
</body>
</html>