const story = {
  wifeName: "أحبكِ، أحبكِ كثيرًا جدًا جدًا"
};

const body = document.body;
const cover = document.querySelector("#cover");
const openInvite = document.querySelector("#openInvite");
const musicToggle = document.querySelector("#musicToggle");
const youtubeMusic = document.querySelector("#youtubeMusic");

const youtubeVideoId = "CgjknaWVChY";
const youtubeStartTime = 42;

let musicStarted = false;
let musicMuted = false;
let youtubePlayer;
let youtubePlayerReady;

function hydrateStory() {
  document.querySelector("#footerName").textContent = story.wifeName;
}

function setupRevealAnimations() {
  const revealItems = document.querySelectorAll(".reveal");

  if (!("IntersectionObserver" in window)) {
    revealItems.forEach((item) => item.classList.add("is-visible"));
    return;
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("is-visible");
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.18 });

  revealItems.forEach((item) => observer.observe(item));
}

function loadYouTubePlayer() {
  if (youtubePlayerReady) return youtubePlayerReady;

  youtubePlayerReady = new Promise((resolve, reject) => {
    const createPlayer = () => {
      youtubePlayer = new YT.Player(youtubeMusic, {
        width: "1",
        height: "1",
        videoId: youtubeVideoId,
        playerVars: {
          autoplay: 0,
          controls: 0,
          disablekb: 1,
          fs: 0,
          loop: 1,
          modestbranding: 1,
          origin: window.location.origin,
          playlist: youtubeVideoId,
          playsinline: 1,
          rel: 0,
          start: youtubeStartTime
        },
        events: {
          onReady: () => resolve(youtubePlayer),
          onError: () => reject(new Error("YouTube music could not be loaded."))
        }
      });
    };

    if (window.YT && window.YT.Player) {
      createPlayer();
      return;
    }

    const existingCallback = window.onYouTubeIframeAPIReady;
    window.onYouTubeIframeAPIReady = () => {
      if (typeof existingCallback === "function") existingCallback();
      createPlayer();
    };

    const script = document.createElement("script");
    script.src = "https://www.youtube.com/iframe_api";
    script.async = true;
    script.onerror = () => reject(new Error("YouTube player API could not be loaded."));
    document.head.appendChild(script);
  });

  return youtubePlayerReady;
}

async function startMusic() {
  if (musicStarted) return;
  musicToggle.hidden = false;

  const player = await loadYouTubePlayer();
  player.seekTo(youtubeStartTime, true);
  player.setVolume(42);
  player.playVideo();
  musicStarted = true;
  musicMuted = false;
  musicToggle.classList.remove("is-paused");
  musicToggle.setAttribute("aria-label", "Pause music");
}

async function resumeMusic() {
  musicToggle.hidden = false;
  const player = await loadYouTubePlayer();
  musicMuted = false;
  player.playVideo();
  musicToggle.classList.remove("is-paused");
  musicToggle.setAttribute("aria-label", "Pause music");
}

function pauseMusic() {
  musicMuted = true;
  if (youtubePlayer && youtubePlayer.pauseVideo) {
    youtubePlayer.pauseVideo();
  }
  musicToggle.classList.add("is-paused");
  musicToggle.setAttribute("aria-label", "Play music");
}

function createHeartConfetti() {
  const confetti = document.createElement("div");
  confetti.className = "heart-confetti";
  document.body.appendChild(confetti);

  for (let index = 0; index < 168; index += 1) {
    const heart = document.createElement("span");
    const upperLayer = Math.random() < 0.28;
    const startX = Math.round(Math.random() * 100);
    const startY = Math.round((upperLayer ? 18 : 50) + Math.random() * (upperLayer ? 42 : 48));
    const drift = Math.round((Math.random() - 0.5) * 360);
    const rise = Math.round((upperLayer ? 22 : 44) + Math.random() * (upperLayer ? 46 : 82));
    const delay = Math.random() * 0.85;
    const duration = 3.2 + Math.random() * 1.6;
    const size = 0.92 + Math.random() * 1.05;

    heart.className = "confetti-heart";
    heart.textContent = Math.random() > 0.18 ? "♥" : "♡";
    heart.style.setProperty("--start-x", `${startX}vw`);
    heart.style.setProperty("--start-y", `${startY}vh`);
    heart.style.setProperty("--drift", `${drift}px`);
    heart.style.setProperty("--rise", `${rise}vh`);
    heart.style.setProperty("--delay", `${delay}s`);
    heart.style.setProperty("--duration", `${duration}s`);
    heart.style.setProperty("--size", `${size}rem`);
    heart.style.setProperty("--scale", String(0.68 + Math.random() * 1.12));
    confetti.appendChild(heart);
  }

  window.setTimeout(() => {
    confetti.remove();
  }, 6500);
}

async function openStory() {
  window.scrollTo(0, 0);
  cover.classList.add("is-opening");
  body.classList.remove("cover-active");
  window.setTimeout(() => {
    createHeartConfetti();
  }, 420);
  window.setTimeout(() => {
    cover.classList.add("is-open");
  }, 1450);
  window.setTimeout(() => {
    cover.hidden = true;
  }, 2200);

  try {
    await startMusic();
  } catch {
    musicToggle.hidden = false;
    musicToggle.classList.add("is-paused");
    musicToggle.setAttribute("aria-label", "Play music");
  }
}

hydrateStory();
setupRevealAnimations();
loadYouTubePlayer().catch(() => {});
body.classList.add("cover-active");

openInvite.addEventListener("click", openStory);

musicToggle.addEventListener("click", async () => {
  if (musicMuted || !musicStarted) {
    await resumeMusic();
  } else {
    pauseMusic();
  }
});