document.addEventListener("DOMContentLoaded", function () {
    let tutorialSteps = [
        { selector: ".dashboard-overview", message: "This is your dashboard where you can track inventory." },
        { selector: ".add-car-button", message: "Click here to add a new car." },
        { selector: ".reports-section", message: "View and download sales & purchase reports here." }
    ];

    let currentStep = 0;

    // Create overlay and tutorial box dynamically
    let overlay = document.createElement("div");
    overlay.classList.add("tutorial-overlay");
    document.body.appendChild(overlay);

    let tutorialBox = document.createElement("div");
    tutorialBox.classList.add("tutorial-box");
    overlay.appendChild(tutorialBox);

    let arrow = document.createElement("div");
    arrow.classList.add("tutorial-arrow");
    tutorialBox.appendChild(arrow);

    let messageText = document.createElement("p");
    tutorialBox.appendChild(messageText);

    let nextButton = document.createElement("button");
    nextButton.classList.add('btn');
    nextButton.classList.add('btn-sm');
    nextButton.classList.add('btn-phoenix-primary');
    nextButton.textContent = _("Next");
    nextButton.style.marginTop = "10px";
    tutorialBox.appendChild(nextButton);

    let skipButton = document.createElement("button");
    skipButton.classList.add('btn');
    skipButton.classList.add('btn-sm');
    skipButton.classList.add('btn-phoenix-primary');
    skipButton.textContent = "Skip Tutorial";
    skipButton.style.marginTop = "10px";
    skipButton.style.marginLeft = "10px";
    tutorialBox.appendChild(skipButton);

    function showStep(stepIndex) {
        if (stepIndex >= tutorialSteps.length) {
            overlay.style.display = "none";
            document.querySelector(".tutorial-highlight")?.classList.remove("tutorial-highlight");
            return;
        }

        let step = tutorialSteps[stepIndex];
        let element = document.querySelector(step.selector);

        if (element) {
            let rect = element.getBoundingClientRect();
            messageText.textContent = step.message;

            // Position tutorial box near the element
            tutorialBox.style.top = rect.top + window.scrollY + rect.height + 10 + "px";
            tutorialBox.style.left = rect.left + window.scrollX + "px";

            // Position the arrow
            arrow.style.top = "-10px"; // Adjust arrow position
            arrow.style.left = "50%";
            arrow.style.transform = "translateX(-50%)";

            // Highlight the element
            document.querySelector(".tutorial-highlight")?.classList.remove("tutorial-highlight");
            element.classList.add("tutorial-highlight");

            overlay.style.display = "flex";
        }
    }

    nextButton.addEventListener("click", function () {
        currentStep++;
        showStep(currentStep);
    });

    skipButton.addEventListener("click", function () {
        overlay.style.display = "none";
        document.querySelector(".tutorial-highlight")?.classList.remove("tutorial-highlight");
    });

    // Start the tutorial
    showStep(currentStep);
});