/**
 * Tour Manager for Car Inventory System
 * Uses IntroJS to provide guided tours of the application
 */

function getCsrfToken(name) {
      let cookieValue = null;
      if (document.cookie && document.cookie !== "") {
        const cookies = document.cookie.split(";");
        for (let cookie of cookies) {
          cookie = cookie.trim();
          if (cookie.substring(0, name.length + 1) === name + "=") {
            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
            break;
          }
        }
      }
      return cookieValue;
    }

class TourManager {
    constructor() {
        this.introJs = introJs();
        this.currentTour = null;
        this.tourData = null;
        this.tourSlug = null;

        // Configure IntroJS defaults
        this.introJs.setOptions({
            showStepNumbers: true,
            showBullets: true,
            showProgress: true,
            scrollToElement: true,
            disableInteraction: false,
            doneLabel: 'Finish',
            nextLabel: 'Next →',
            prevLabel: '← Back',
            exitOnEsc: true,
            exitOnOverlayClick: false
        });

        // Set up event listeners
        this.introJs.oncomplete(() => this.onTourComplete());
        this.introJs.onexit(() => this.onTourExit());
    }

    /**
     * Load and start a tour by its slug
     * @param {string} slug - The tour slug
     */
    async loadTour(slug) {
        try {
            this.tourSlug = slug;
            const response = await fetch(`/tours/data/${slug}/`);
            if (!response.ok) {
                throw new Error('Failed to load tour data');
            }

            const data = await response.json();
            this.tourData = data.tour;

            // If user already completed this tour, ask if they want to repeat
            if (data.completed && !confirm('You have already completed this guide. Would you like to view it again?')) {
                return;
            }

            this.startTour();
        } catch (error) {
            console.error('Error loading tour:', error);
            alert('Failed to load the interactive guide. Please try again later.');
        }
    }

    /**
     * Start the currently loaded tour
     */
    startTour() {
        if (!this.tourData) {
            console.error('No tour data loaded');
            return;
        }

        this.introJs.setOptions({
            steps: this.tourData.steps
        });

        this.introJs.start();
    }

    /**
     * Handle tour completion
     */
    onTourComplete() {
        if (!this.tourSlug) return;

        // Mark the tour as completed on the server
        fetch(`/tours/complete/${this.tourSlug}/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCsrfToken()
            }
        }).catch(error => {
            console.error('Error marking tour as completed:', error);
        });

        // Show success message
        alert('Congratulations! You have completed the guide.');
    }

    /**
     * Handle tour exit (without completion)
     */
    onTourExit() {
        console.log('Tour exited');
    }

    /**
     * Get CSRF token from cookies
     */

}

// Initialize the tour manager
window.tourManager = new TourManager();

// Function to start a tour from a link
function startTour(slug) {
    window.tourManager.loadTour(slug);
    return false; // Prevent default link action
}

// Export for use in other modules
// export { startTour };