import { TourGuideClient } from "@sjmc11/tourguidejs";

const commentimgUrl1 = multicollabUserTourMedia.commentImage1;
const commentimgUrl2 = multicollabUserTourMedia.commentImage2;
const commentimgUrl3 = multicollabUserTourMedia.commentImage3;
const suggestionimgUrl1 = multicollabUserTourMedia.suggestionImage1;
const suggestionimgUrl2 = multicollabUserTourMedia.suggestionImage2;
const teamimgUrl1 = multicollabUserTourMedia.teamImage1;
const resolveimgUrl1 = multicollabUserTourMedia.resolveImage1;

const steps = [
    {
      // Welcome modal (centered)
      content: "Collaborate on WordPress content with real-time comments and suggestions. Let's take a quick tour!",
      title: "Welcome to Multicollab!",
      dialogPlacement: "center", // or use dialogPlacement: "center"
      backdrop: true,
      afterEnter: async () => {
        return new Promise(async (resolve) => {
          // Inject target element if not present
          if (!document.querySelector('.cf-tour-step-2-container')) {
            const wrapper = document.createElement("div");
            wrapper.className = "cf-tour-step-2-container";
            wrapper.style.display = "flex";
            wrapper.style.flexDirection = "row";
            wrapper.style.gap = "10px";
            wrapper.innerHTML = `
              <div class="cf-tour-wrap-one">
              <div class="cf-tour-step-image1">
                <img src="${commentimgUrl1}" alt="Comment Text" />
              </div>
              <div class="cf-tour-step-image2">
                <img src="${commentimgUrl2}" alt="Floating Comment Button" />
              </div>
              <div class="cf-tour-step-image3">
              <img src="${commentimgUrl3}" alt="Comment Board" />
            </div> </div>
            `;
            document.body.appendChild(wrapper);
          }

          resolve(true);
        });
      }
    },
    {
      target: ".cf-tour-step-2-container", // New wrapper we'll create
      content: "Select any text or media, then click here to leave feedback or ask a question—just like Google Docs!",
      title: "Add Inline Comments",
      dialogPlacement: "left-middle",
      backdrop: true,
      afterEnter: async () => {
        return new Promise(async (resolve) => {
          // Inject target element if not present
          if (!document.querySelector('.cf-tour-step-3-container')) {
            const wrapper = document.createElement("div");
            wrapper.className = "cf-tour-step-3-container";
            wrapper.style.display = "flex";
            wrapper.style.flexDirection = "row";
            wrapper.style.gap = "10px";
            wrapper.innerHTML = `
              <div class="cf-tour-wrap-two">
              <div class="cf-tour-step-image1">
              <img src="${suggestionimgUrl1}" alt="Suggestion Text" />
            </div>
            <div class="cf-tour-step-image2">
              <img src="${suggestionimgUrl2}" alt="Suggestion Board" />
            </div> </div>
            `;
            document.body.appendChild(wrapper);
          }

          resolve(true);
        });
      }
    },
    {
      // Tag Teammates
      target: ".cf-tour-step-4-container", // update selector
      content: "Use @ to mention colleagues and notify them instantly about your comment.",
      title: "Tag Teammates",
      dialogPlacement: "left-middle",
      backdrop: true,
      afterEnter: async () => {
        return new Promise(async (resolve) => {
          // Inject target element if not present
          if (!document.querySelector('.cf-tour-step-5-container')) {
            const wrapper = document.createElement("div");
            wrapper.className = "cf-tour-step-5-container";
            wrapper.style.display = "flex";
            wrapper.style.flexDirection = "row";
            wrapper.style.gap = "10px";
            wrapper.innerHTML = `
              <div class="cf-tour-wrap-four">
            <div class="cf-tour-step-image2">
              <img src="${resolveimgUrl1}" alt="Suggestion Board" />
            </div> </div>
            `;
            document.body.appendChild(wrapper);
          }

          resolve(true);
        });
      }
    },
    {
      // Tag Teammates
      target: ".cf-tour-step-5-container", // update selector
      content: "Resolve comment when done, or delete if not needed - keeping your workflow tidy.",
      title: "Manage Feedback",
      dialogPlacement: "left-middle",
      backdrop: true,
    }
  ];

  document.addEventListener("DOMContentLoaded", function () {
    function initPointerInsideIframe() {
    
      const tg = new TourGuideClient({
        steps,
        hidePrev: true,
        showStepDots: false,
        closeButton: false,
        showStepProgress: false,
        finishLabel: 'Finish Tour',
        completeOnFinish: true,
        backdropColor: "rgba(20,20,21,0.84)",
        exitOnClickOutside: false,
      });
    
      tg.onAfterStepChange((stepIndex) => {
        if (stepIndex === 0) {
          document.body.classList.add("cfp-tour-step-0");
        } else if (stepIndex === 1) {
          document.body.classList.remove("cfp-tour-step-0");
        }
        if (stepIndex === 1) {
          document.body.classList.add("cfp-tour-step-1");
        } else if (stepIndex === 2) {
          document.body.classList.remove("cfp-tour-step-1");
        }
        if (stepIndex === 2) {
          document.body.classList.add("cfp-tour-step-2");
        } else if (stepIndex === 3) {
          document.body.classList.remove("cfp-tour-step-2");
        }
        if (stepIndex === 3) {
          document.body.classList.add("cfp-tour-step-3");
        } else if (stepIndex === 4) {
          document.body.classList.remove("cfp-tour-step-3");
        }
      });
    
      tg.onFinish(() => {
        return new Promise((resolve) => {
            // ✅ Store flag
            localStorage.setItem('multicollab-tour-completed', 'true');
            // ✅ Remove global tour class
            document.body.classList.remove("cf-tour-running");
    
            // ✅ Cleanup
            document.body.classList.remove("cfp-tour-step-0");
            const el = document.querySelector(".cf-tour-step-2-container");
            if (el) el.remove();
            document.body.classList.remove("cfp-tour-step-1");
            const el1 = document.querySelector(".cf-tour-step-3-container");
            if (el1) el1.remove();
            document.body.classList.remove("cfp-tour-step-2");
            const el2 = document.querySelector(".cf-tour-step-4-container");
            if (el2) el2.remove();
            document.body.classList.remove("cfp-tour-step-3");
            const el3 = document.querySelector(".cf-tour-step-5-container");
            if (el3) el3.remove();
    
            resolve(true);
          
        });
      });
    
      // Start if not already completed
      if (localStorage.getItem('multicollab-tour-completed') !== 'true') {
        document.body.classList.add("cf-tour-running");
        tg.start();
      }
    }
    
    // Run after some delay to ensure iframe is loaded
    setTimeout(initPointerInsideIframe, 500);
});
