// Admin guided tour - highlights key UI elements page by page (driver.js)

import { driver, type DriveStep } from 'driver.js';
import 'driver.js/dist/driver.css';
import { initTooltips } from '@core/Tooltip';
import { TOUR_STEPS } from './steps';

const tourButton = document.getElementById('admin-help-tour-btn') as HTMLButtonElement | null;
const tourPage = document.body.dataset.tourPage;

// The editor page already calls initTooltips() from admin-editor's own
// bootstrap - avoid attaching a second set of listeners/tooltip node there.
if (tourPage && tourPage !== 'editor') {
    initTooltips();
}

if (tourButton && tourPage) {
    const allSteps = TOUR_STEPS[tourPage] ?? [];
    const availableSteps: DriveStep[] = allSteps.filter(
        step => typeof step.element !== 'string' || document.querySelector(step.element)
    );

    if (availableSteps.length > 0) {
        tourButton.addEventListener('click', () => {
            const driverObj = driver({
                showProgress: true,
                nextBtnText: 'Suivant',
                prevBtnText: 'Précédent',
                doneBtnText: 'Terminer',
                progressText: '{{current}} / {{total}}',
                steps: availableSteps,
            });

            driverObj.drive();
        });
    } else {
        tourButton.disabled = true;
        tourButton.setAttribute('data-tooltip', 'Aucune étape disponible pour cette page');
    }
}