document.addEventListener("DOMContentLoaded", () => {
  // ── Loading overlay ────────────────────────────────────
  const overlay = document.getElementById("loading-overlay");

  document.querySelectorAll("form").forEach((form) => {
    form.addEventListener("submit", () => {
      if (overlay) overlay.classList.add("active");
    });
  });

  // ── Hamburger menu ─────────────────────────────────────
  const hamburger = document.querySelector(".hamburger");
  const navLinks = document.querySelector(".nav-links");

  if (hamburger && navLinks) {
    hamburger.addEventListener("click", () => {
      navLinks.classList.toggle("open");
    });
  }

  // ── Generate dropdown tabs ─────────────────────────────
  document.querySelectorAll(".tab-btn").forEach((btn) => {
    btn.addEventListener("click", () => {
      const target = btn.dataset.tab;
      const container = btn.closest(".tabs-container");
      if (!container) return;

      container
        .querySelectorAll(".tab-btn")
        .forEach((b) => b.classList.remove("active"));
      container
        .querySelectorAll(".tab-panel")
        .forEach((p) => p.classList.remove("active"));

      btn.classList.add("active");
      const panel = container.querySelector(`#tab-${target}`);
      if (panel) panel.classList.add("active");
    });
  });

  // ── Video status polling ───────────────────────────────
  const pollDiv = document.getElementById("video-poll-status");
  if (pollDiv) {
    const pollingUrl = pollDiv.dataset.pollingUrl;
    const statusText = document.getElementById("poll-status-text");
    const videoContainer = document.getElementById("poll-video-container");

    const interval = setInterval(async () => {
      try {
        const resp = await fetch(
          "/generate/video/status?polling_url=" +
            encodeURIComponent(pollingUrl),
        );
        if (!resp.ok) return;
        const data = await resp.json();

        if (statusText) {
          statusText.innerHTML = "Status: <strong>" + data.status + "</strong>";
        }

        if (data.status === "completed") {
          clearInterval(interval);
          if (data.video_url && videoContainer) {
            const vid = document.createElement("video");
            vid.src = data.video_url;
            vid.controls = true;
            vid.className = "generated-video";
            videoContainer.appendChild(vid);
            const msg = pollDiv.querySelector("p");
            if (msg) msg.textContent = "Video ready!";
          }
        } else if (data.status === "failed") {
          clearInterval(interval);
          pollDiv.innerHTML =
            '<div class="alert alert-error">Generation failed: ' +
            (data.error || "Unknown error") +
            "</div>";
        }
      } catch (e) {
        console.error("Video polling error:", e);
      }
    }, 5000);
  }
});