import { prefersReducedMotion } from "../shared/media.js";

function bindSkillsIntroRoot(root) {
  const msgs = Array.from(root.querySelectorAll("[data-skills-msg]"));
  if (!msgs.length) return;
  const reduceMotion = prefersReducedMotion();

  function localDatetimeMinute(d) {
    const pad = (n) => String(n).padStart(2, "0");
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
  }

  function setTime(el, date) {
    const timeEl = el.querySelector("[data-skills-msg-time]");
    if (!timeEl) return;
    timeEl.textContent = date.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" });
    timeEl.setAttribute("datetime", localDatetimeMinute(date));
  }

  function revealAll() {
    msgs.forEach((el, i) => {
      window.setTimeout(() => {
        setTime(el, new Date());
        el.classList.add("is-visible");
        el.removeAttribute("aria-hidden");
      }, i * 420);
    });
  }

  if (reduceMotion) {
    const now = new Date();
    msgs.forEach((el) => {
      setTime(el, now);
      el.classList.add("is-visible");
    });
    return;
  }

  root.setAttribute("data-skills-anim", "1");
  msgs.forEach((m) => m.setAttribute("aria-hidden", "true"));

  let done = false;
  const obs = new IntersectionObserver(
    (entries) => {
      for (const e of entries) {
        if (!e.isIntersecting || done) continue;
        done = true;
        obs.disconnect();
        revealAll();
        break;
      }
    },
    { threshold: 0.22, rootMargin: "0px 0px -10% 0px" },
  );
  obs.observe(root);
}

/** Чат-вступления с `data-skills-intro`: может быть несколько на странице (например, навыки и мини-проекты). */
export function initSkillsIntroMessages() {
  document.querySelectorAll("[data-skills-intro]").forEach((root) => bindSkillsIntroRoot(root));
}