(function() {
  const $ = (sel) => document.querySelector(sel);
  const qs = new URLSearchParams(location.search);

  // Helper to get parameter from either long or short name
  const getParam = (longName, shortName, defaultValue = "") => {
    return qs.get(longName) || qs.get(shortName) || ($("#countdown")?.dataset[longName.replace('_', '')] || defaultValue);
  };

  const targetISO = getParam("target", "dt", "");
  const showMillis = (getParam("millis", "m", "0") === "1");
  const roundedUnit = getParam("rounded_unit", "ru", "none");
  const lang = getParam("lang", "l", "en");

  // Translations
  const translations = {
    en: {
      time_reached: "🎉 It's time!",
      invalid_date: "Invalid or missing target date. Use the Edit link to set one.",
      copy_link: "Copy sharable link",
      link_copied: "Link copied!"
    },
    es: {
      time_reached: "🎉 ¡Es hora!",
      invalid_date: "Fecha objetivo inválida o faltante. Usa el enlace Editar para establecer una.",
      copy_link: "Copiar enlace compartible",
      link_copied: "¡Enlace copiado!"
    }
  };

  const t = (key) => translations[lang]?.[key] || translations.en[key] || key;

  const targetDate = targetISO ? new Date(targetISO) : null;
  const targetText = $("#targetText");
  const statusEl = $("#status");
  const msWrap = $("#millisWrap");

  // Reflect chosen colors into CSS variables if passed via query
  const root = document.documentElement;
  const setVar = (k, v) => { if (v) root.style.setProperty(k, v); };
  setVar("--accent", getParam("accent", "a"));
  setVar("--radius", (getParam("radius", "r", "16")) + "px");
  setVar("--bg", getParam("bg", "bg"));
  setVar("--fg", getParam("fg", "fg"));
  const scheme = getParam("scheme", "s");
  if (scheme) root.setAttribute("data-scheme", scheme);
  const font = getParam("font", "f");
  if (font) root.style.setProperty("--font", font.includes(" ") ? `"${font}"` : font);

  if (!targetDate || isNaN(targetDate.valueOf())) {
    statusEl.textContent = t("invalid_date");
    return;
  }

  targetText.textContent = targetDate.toString();

  msWrap.hidden = !showMillis;
  if (!showMillis && msWrap.parentNode) { msWrap.parentNode.removeChild(msWrap); }

  function roundToUnit(ms, unit) {
    if (unit === "none") return ms;
    const map = {
      minutes: 60_000,
      hours: 3_600_000,
      days: 86_400_000,
    };
    const size = map[unit] || 1;
    return Math.round(ms / size) * size;
  }

  function tick() {
    const now = new Date();
    let diff = targetDate - now;
    if (roundedUnit !== "none") {
      diff = roundToUnit(diff, roundedUnit);
    }
    if (diff <= 0) {
      $("#d").textContent = "0";
      $("#h").textContent = "0";
      $("#m").textContent = "0";
      $("#s").textContent = "0";
      if (showMillis) $("#ms").textContent = "000";
      statusEl.textContent = t("time_reached");
      return;
    }

    const totalSeconds = Math.floor(diff / 1000);
    const days = Math.floor(totalSeconds / (3600*24));
    const hours = Math.floor((totalSeconds % (3600*24)) / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;
    const millis = diff % 1000;

    $("#d").textContent = String(days);
    $("#h").textContent = String(hours).padStart(2, "0");
    $("#m").textContent = String(minutes).padStart(2, "0");
    $("#s").textContent = String(seconds).padStart(2, "0");
    if (showMillis) $("#ms").textContent = String(millis).padStart(3, "0");

    requestAnimationFrame(tick);
  }

  // Shareable link
  const copyBtn = $("#copyLink");
  if (copyBtn) {
    copyBtn.addEventListener("click", async () => {
      try {
        await navigator.clipboard.writeText(location.href);
        copyBtn.textContent = t("link_copied");
        setTimeout(() => copyBtn.textContent = t("copy_link"), 1500);
      } catch (e) {
        alert("Copy failed: " + e);
      }
    });
  }

  // Start
  requestAnimationFrame(tick);
})();