(function () {
  const target = 20;
  let taps = 0;
  let best = 0;
  let startedAt = 0;

  function el(tag, className, text) {
    const node = document.createElement(tag);
    if (className) {
      node.className = className;
    }
    if (text) {
      node.textContent = text;
    }
    return node;
  }

  function bridge() {
    return window.localchat || {};
  }

  function toast(message) {
    const api = bridge();
    if (api.ui && api.ui.showToast) {
      return api.ui.showToast({ message: message }).catch(function () {});
    }
    return Promise.resolve();
  }

  function saveBest(value) {
    const api = bridge();
    best = value;
    if (api.storage && api.storage.local) {
      return api.storage.local.set("tap-race-best", String(value)).catch(function () {});
    }
    return Promise.resolve();
  }

  function loadBest() {
    const api = bridge();
    if (!api.storage || !api.storage.local) {
      return Promise.resolve();
    }
    return api.storage.local.get("tap-race-best").then(function (value) {
      const parsed = Number(value || "0");
      best = Number.isFinite(parsed) ? parsed : 0;
    }).catch(function () {});
  }

  function render() {
    document.body.innerHTML = "";
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "assets/style.css";
    document.head.appendChild(link);

    const app = el("main", "tapRace");
    const art = el("img", "trackArt");
    art.alt = "";
    art.src = "assets/tap-race-header.webp";
    const title = el("h1", "", "Tap Race");
    const subtitle = el("p", "subtitle", "Reach 20 taps before the timer makes you think too much.");
    const progress = el("div", "progress");
    const bar = el("span", "progressBar");
    progress.appendChild(bar);
    const counter = el("strong", "counter", "0 / " + target);
    const bestLabel = el("p", "best", "Best: " + (best ? best + " ms" : "no run yet"));
    const button = el("button", "tapButton", "Start");
    const reset = el("button", "resetButton", "Reset");

    function update() {
      counter.textContent = taps + " / " + target;
      bar.style.width = Math.min(100, (taps / target) * 100) + "%";
      button.textContent = taps === 0 ? "Start" : "Tap";
    }

    button.addEventListener("click", function () {
      if (taps === 0) {
        startedAt = Date.now();
      }
      taps += 1;
      if (taps >= target) {
        const elapsed = Date.now() - startedAt;
        const improved = best === 0 || elapsed < best;
        if (improved) {
          saveBest(elapsed);
        }
        taps = 0;
        toast(improved ? "New best: " + elapsed + " ms" : "Finished: " + elapsed + " ms");
        render();
        return;
      }
      update();
    });

    reset.addEventListener("click", function () {
      taps = 0;
      update();
      toast("Tap Race reset");
    });

    app.appendChild(art);
    app.appendChild(title);
    app.appendChild(subtitle);
    app.appendChild(progress);
    app.appendChild(counter);
    app.appendChild(bestLabel);
    app.appendChild(button);
    app.appendChild(reset);
    document.body.appendChild(app);
    update();
  }

  loadBest().then(render);
})();
