xtablo-source/ui/src/components/TabloTutorial.tsx

import { Button } from "@ui/components/ui/button";
import { ArrowLeft, ArrowRight, HelpCircle, X } from "lucide-react";
import React, { useState } from "react";
import { twMerge } from "tailwind-merge";

interface TutorialStep {
  id: string;
  title: string;
  description: string;
  target?: string;
  position?: "top" | "bottom" | "left" | "right";
  action?: () => void;
}

interface TabloTutorialProps {
  isOpen: boolean;
  onClose: () => void;
  onCreateTablo: () => void;
}

const tutorialSteps: TutorialStep[] = [
  {
    id: "welcome",
    title: "Bienvenue sur XTablo ! 🎉",
    description:
      "Découvrez comment XTablo peut révolutionner votre façon de gérer vos projets, équipes et collaborations.",
  },
  {
    id: "what-is-tablo",
    title: "Qu'est-ce qu'un Tablo ?",
    description:
      "Un Tablo est un espace de travail collaboratif qui regroupe toutes les fonctionnalités dont vous avez besoin : conversations, planning, documents et plus encore.",
  },

  {
    id: "tablo-features",
    title: "Fonctionnalités des Tablos",
    description:
      "Chaque Tablo vous donne accès à :\n• 💬 Conversations en temps réel\n• 📅 Planning partagé\n• 📝 Notes et documents\n• 👥 Gestion d'équipe",
  },
  {
    id: "tablo-status",
    title: "Gérer le statut des Tablos",
    description:
      "Organisez vos projets avec les statuts :\n• 📋 À faire : Projets en attente\n• 🔄 En cours : Projets actifs\n• ✅ Terminé : Projets complétés",
  },
  {
    id: "collaboration",
    title: "Collaboration d'équipe",
    description:
      "Invitez vos collègues dans vos Tablos. Vous serez Admin du Tablo que vous créez, et pourrez inviter d'autres membres en tant qu'invités.",
  },
  {
    id: "navigation",
    title: "Navigation rapide",
    description:
      "Utilisez le clic droit sur un Tablo pour accéder rapidement aux conversations et au planning. Filtrez vos Tablos par statut pour une meilleure organisation.",
  },
  {
    id: "create-first-tablo",
    title: "Créer votre premier Tablo",
    description:
      "Vous êtes maintenant prêt à utiliser XTablo ! Créez votre premier Tablo pour démarrer votre projet.",
    target: "create-tablo-button",
    position: "bottom",
    action: () => {
      // Do nothing
    }, // Will be set by the parent component
  },
];

export const TabloTutorial: React.FC<TabloTutorialProps> = ({ isOpen, onClose, onCreateTablo }) => {
  const [currentStep, setCurrentStep] = useState(0);

  const currentStepData = tutorialSteps[currentStep];

  const handleNext = () => {
    if (currentStep < tutorialSteps.length - 1) {
      setCurrentStep(currentStep + 1);
    } else {
      handleClose();
    }
  };

  const handlePrevious = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1);
    }
  };

  const handleClose = () => {
    setCurrentStep(0);
    localStorage.setItem("xtablo-tutorial-completed", "true");
    onClose();
  };

  const handleCreateTabloAction = () => {
    if (currentStepData.id === "create-first-tablo") {
      onCreateTablo();
      handleNext();
    }
  };

  const handleSkip = () => {
    setCurrentStep(tutorialSteps.length - 1);
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
      <div
        className={twMerge(
          "bg-white dark:bg-gray-800 rounded-xl shadow-2xl",
          "max-w-2xl w-full mx-4 p-6",
          "border border-gray-200 dark:border-gray-700"
        )}
      >
        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
              <HelpCircle className="w-6 h-6 text-blue-600 dark:text-blue-400" />
            </div>
            <div>
              <h2 className="text-xl font-bold text-gray-900 dark:text-white">
                Guide de démarrage
              </h2>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                Étape {currentStep + 1} sur {tutorialSteps.length}
              </p>
            </div>
          </div>
          <button
            onClick={handleClose}
            className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Progress Bar */}
        <div className="mb-6">
          <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
            <div
              className="bg-blue-600 h-2 rounded-full transition-all duration-300"
              style={{
                width: `${((currentStep + 1) / tutorialSteps.length) * 100}%`,
              }}
            />
          </div>
        </div>

        {/* Content */}
        <div className="mb-8">
          <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
            {currentStepData.title}
          </h3>
          <div className="text-gray-600 dark:text-gray-300 text-lg leading-relaxed whitespace-pre-line">
            {currentStepData.description}
          </div>
        </div>

        {/* Actions */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            {currentStep > 0 && (
              <Button
                variant="outline"
                onClick={handlePrevious}
                className="flex items-center gap-2"
              >
                <ArrowLeft className="w-4 h-4" />
                Précédent
              </Button>
            )}
          </div>

          <div className="flex items-center gap-2">
            {currentStep < tutorialSteps.length - 1 && (
              <Button
                variant="outline"
                onClick={handleSkip}
                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
              >
                Passer
              </Button>
            )}

            {currentStepData.id === "create-first-tablo" ? (
              <Button
                onClick={handleCreateTabloAction}
                className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white"
              >
                Créer mon premier Tablo
                <ArrowRight className="w-4 h-4" />
              </Button>
            ) : (
              <Button
                onClick={currentStep === tutorialSteps.length - 1 ? handleClose : handleNext}
                className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white"
              >
                {currentStep === tutorialSteps.length - 1 ? "Commencer" : "Suivant"}
                <ArrowRight className="w-4 h-4" />
              </Button>
            )}
          </div>
        </div>

        {/* Completion Message */}
        {currentStep === tutorialSteps.length - 1 && (
          <div className="mt-4 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
            <div className="flex items-center gap-2">
              <div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center">
                <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    fillRule="evenodd"
                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
              <span className="text-green-800 dark:text-green-200 font-medium">
                Félicitations ! Vous êtes prêt à utiliser XTablo.
              </span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};