import type { AppTour } from '../types';

/**
 * Visite de la planification (Réservations & Séjours › Planification).
 *
 * L'écran montre TROIS calendriers construits à partir des mêmes séjours, vus
 * sous trois angles. Ce que la visite doit dire, et que rien à l'écran ne dit :
 *
 *  - les ménages de mi-séjour sont CALCULÉS, pas saisis : tous les
 *    `cleaning_days_rate + 1` jours (paramètre, 4 par défaut), donc un séjour
 *    court n'en a aucun (`PlanificationController::index`) ;
 *  - la fenêtre chargée est de 60 jours en arrière et 90 en avant, annulés
 *    exclus ;
 *  - le check-out affiché suit la DERNIÈRE prolongation, pas la date d'origine ;
 *  - il n'existe qu'UNE fiche de planification par séjour
 *    (`Planning::firstOrNew(['reservation_id' => …])`) : ce qu'on y enregistre
 *    depuis un onglet est ce que les autres reliront.
 *
 * Ancres posées dans `pages/planification/index.tsx`. Celle de la pastille est
 * posée dans `eventDidMount` — FullCalendar fabrique ses éléments lui-même, il
 * n'y a pas de JSX où l'accrocher.
 * Textes dans `lang/{fr,en}/tours.php`, clés `planification.<key>.title|content`.
 */
export const planificationTour: AppTour = {
    id: 'planification',
    components: ['planification/index'],
    steps: [
        {
            anchor: 'planification-filters',
            key: 'filters',
            order: 10,
        },
        {
            anchor: 'planification-sources',
            key: 'sources',
            order: 20,
        },
        {
            anchor: 'planification-property',
            key: 'property',
            order: 30,
        },
        {
            // Réservé au siège.
            anchor: 'planification-franchise',
            key: 'franchise',
            order: 40,
            adminOnly: true,
            optional: true,
        },
        {
            anchor: 'planification-country',
            key: 'country',
            order: 50,
        },
        {
            // La page porte DEUX boutons de rafraîchissement, un mobile et un
            // bureau, tous deux présents dans le DOM et départagés par le seul
            // CSS. L'ancre n'est posée que sur celui du bureau — voir le
            // commentaire à côté dans le JSX.
            anchor: 'planification-refresh',
            key: 'refresh',
            order: 60,
        },
        {
            anchor: 'planification-tabs',
            key: 'tabs',
            order: 70,
        },
        {
            anchor: 'planification-menage-tab',
            key: 'menageTab',
            order: 75,
        },
        {
            anchor: 'planification-report',
            key: 'report',
            order: 80,
        },
        {
            anchor: 'planification-calendar',
            key: 'calendar',
            order: 90,
        },
        {
            // Absente quand le mois affiché ne contient aucun mouvement — état
            // normal, surtout hors de la fenêtre chargée.
            anchor: 'planification-event',
            key: 'event',
            order: 100,
            optional: true,
        },
    ],
};