"use client";

import React, { useEffect } from "react";
import { TourGuide } from "./TourGuide";
import { useHelpStore } from "../lib/help-store";
import { WELCOME_TOUR_STEPS } from "../lib/tours";

export function WelcomeTour() {
  const { hasSeenWelcomeTour, autoShowTours, markTourAsSeen } = useHelpStore();

  // Ne pas afficher si déjà vu ou si les tours sont désactivés
  if (hasSeenWelcomeTour || !autoShowTours) {
    return null;
  }

  const handleComplete = () => {
    markTourAsSeen("welcome");
  };

  const handleSkip = () => {
    markTourAsSeen("welcome");
  };

  return (
    <TourGuide
      steps={WELCOME_TOUR_STEPS}
      open={!hasSeenWelcomeTour && autoShowTours}
      onOpenChange={(open) => {
        if (!open) {
          markTourAsSeen("welcome");
        }
      }}
      onComplete={handleComplete}
      onSkip={handleSkip}
      closeOnOutsideClick={false}
      showProgress={true}
    />
  );
}

export function CorrelationTour() {
  const { hasSeenCorrelationTour, autoShowTours, markTourAsSeen } = useHelpStore();

  if (hasSeenCorrelationTour || !autoShowTours) {
    return null;
  }

  // Ce tour sera déclenché manuellement depuis l'onglet corrélation
  return null;
}

export function RegressionTour() {
  const { hasSeenRegressionTour, autoShowTours, markTourAsSeen } = useHelpStore();

  if (hasSeenRegressionTour || !autoShowTours) {
    return null;
  }

  // Ce tour sera déclenché manuellement depuis la config de régression
  return null;
}

export function OutlierTour() {
  const { hasSeenOutlierTour, autoShowTours, markTourAsSeen } = useHelpStore();

  if (hasSeenOutlierTour || !autoShowTours) {
    return null;
  }

  // Ce tour sera déclenché manuellement depuis la grille
  return null;
}