import React from "react";
import { Upload, Table as TableIcon, GitBranch, LineChart, AlertCircle, TrendingUp } from "lucide-react";
import { TourStep } from "../components/TourGuide";

// Tour de bienvenue - Premier lancement de l'application
export const WELCOME_TOUR_STEPS: TourStep[] = [
  {
    id: "welcome",
    title: "Bienvenue sur Data Analysis !",
    content: (
      <div className="space-y-3">
        <p>
          Ce guide interactif vous accompagnera dans la découverte de l'application d'analyse de données statistiques.
        </p>
        <p className="font-semibold text-slate-900">
          Vous apprendrez à :
        </p>
        <ul className="space-y-1 text-sm">
          <li className="flex items-start gap-2">
            <span className="text-indigo-600">•</span>
            <span>Importer et explorer vos données</span>
          </li>
          <li className="flex items-start gap-2">
            <span className="text-indigo-600">•</span>
            <span>Analyser les corrélations entre variables</span>
          </li>
          <li className="flex items-start gap-2">
            <span className="text-indigo-600">•</span>
            <span>Créer des modèles de régression</span>
          </li>
          <li className="flex items-start gap-2">
            <span className="text-indigo-600">•</span>
            <span>Gérer les valeurs aberrantes (outliers)</span>
          </li>
        </ul>
      </div>
    ),
    position: "center",
  },
  {
    id: "upload",
    title: "1. Importer vos données",
    content: (
      <div className="space-y-2">
        <p>
          Commencez par déposer un fichier <strong>CSV</strong> ou <strong>Excel</strong> dans la zone d'upload.
        </p>
        <p className="text-xs text-slate-500">
          Les données sont automatiquement détectées et typées. Les fichiers jusqu'à 50MB sont supportés.
        </p>
      </div>
    ),
    target: "[data-tour-target='upload']",
    position: "bottom",
  },
  {
    id: "navigation",
    title: "2. Naviguer entre les vues",
    content: (
      <div className="space-y-2">
        <p>Utilisez les onglets pour basculer entre les différentes vues :</p>
        <ul className="space-y-1 text-xs">
          <li className="flex items-center gap-2">
            <TableIcon className="w-3 h-3 text-indigo-600" />
            <span><strong>Données</strong> : Table interactive avec vos données</span>
          </li>
          <li className="flex items-center gap-2">
            <GitBranch className="w-3 h-3 text-indigo-600" />
            <span><strong>Corrélations</strong> : Matrice de corrélation</span>
          </li>
          <li className="flex items-center gap-2">
            <LineChart className="w-3 h-3 text-indigo-600" />
            <span><strong>Résultats</strong> : Résultats de régression</span>
          </li>
        </ul>
      </div>
    ),
    target: "[data-tour-target='tabs']",
    position: "bottom",
  },
  {
    id: "outliers",
    title: "3. Les indicateurs d'outliers",
    content: (
      <div className="space-y-2">
        <p>Dans la table, vous verrez des cercles colorés sur certaines cellules :</p>
        <div className="flex items-center gap-3 text-xs">
          <div className="flex items-center gap-1.5">
            <div className="w-3 h-3 rounded-full bg-red-500" />
            <span><strong>Rouge</strong> : Outlier univarié (valeur extrême)</span>
          </div>
          <div className="flex items-center gap-1.5">
            <div className="w-3 h-3 rounded-full bg-purple-500" />
            <span><strong>Violet</strong> : Outlier multivarié</span>
          </div>
        </div>
        <p className="text-xs text-slate-500">
          Cliquez sur un outlier pour voir les détails et l'exclure si nécessaire.
        </p>
      </div>
    ),
    target: "[data-tour-target='grid']",
    position: "bottom",
  },
  {
    id: "analysis",
    title: "4. Lancer une analyse",
    content: (
      <div className="space-y-2">
        <p>
          Cliquez sur <strong>"Lancer Analyse"</strong> pour configurer et exécuter des analyses de corrélation et de régression.
        </p>
        <p className="text-xs text-slate-500">
          Vous pourrez choisir votre type de modèle, vos variables cibles et prédicteurs.
        </p>
      </div>
    ),
    target: "[data-tour-target='analyze-button']",
    position: "left",
  },
  {
    id: "help",
    title: "5. Besoin d'aide ?",
    content: (
      <div className="space-y-2">
        <p>
          Cliquez sur le <strong>bouton "?"</strong> dans la barre supérieure pour accéder au centre d'aide complet.
        </p>
        <p className="text-xs text-slate-500">
          Vous y trouverez toute la documentation, des guides détaillés et des exemples.
        </p>
      </div>
    ),
    target: "[data-tour-target='help-button']",
    position: "left",
  },
  {
    id: "ready",
    title: "Vous êtes prêt !",
    content: (
      <div className="space-y-2">
        <p className="font-semibold text-slate-900">
          Vous connaissez maintenant les bases de l'application.
        </p>
        <p>
          N'hésitez pas à consulter le centre d'aide à tout moment si vous avez des questions.
        </p>
        <p className="text-xs text-indigo-600 font-medium">
          Bonnes analyses !
        </p>
      </div>
    ),
    position: "center",
  },
];

// Tour pour la fonctionnalité de corrélation
export const CORRELATION_TOUR_STEPS: TourStep[] = [
  {
    id: "correlation-intro",
    title: "Analyse de Corrélation",
    content: (
      <div className="space-y-2">
        <p>
          La matrice de corrélation vous permet de visualiser les relations entre vos variables numériques.
        </p>
        <p className="text-xs text-slate-500">
          Les couleurs vont du bleu (corrélation négative) au rouge (corrélation positive).
        </p>
      </div>
    ),
    position: "center",
  },
  {
    id: "correlation-method",
    title: "Choisir la méthode",
    content: (
      <div className="space-y-2">
        <p>Sélectionnez la méthode de corrélation adaptée à vos données :</p>
        <ul className="space-y-1 text-xs">
          <li><strong>Pearson</strong> : Données normales, relations linéaires</li>
          <li><strong>Spearman</strong> : Données non-paramétriques</li>
          <li><strong>Kendall</strong> : Petits échantillons</li>
        </ul>
      </div>
    ),
    target: "[data-tour-target='correlation-method']",
    position: "bottom",
  },
  {
    id: "multicollinearity",
    title: "Attention à la multicolinéarité !",
    content: (
      <div className="space-y-2">
        <p className="flex items-center gap-2 text-amber-600">
          <AlertCircle className="w-4 h-4" />
          <span className="font-semibold">Bordures rouges = Multicolinéarité</span>
        </p>
        <p>
          Si deux prédicteurs sont fortement corrélés (≥ 0.7), n'utilisez pas les deux ensemble dans une régression.
        </p>
      </div>
    ),
    position: "center",
  },
  {
    id: "correlation-interpretation",
    title: "Interpréter les valeurs",
    content: (
      <div className="space-y-2">
        <p>Les valeurs varient entre -1 et +1 :</p>
        <ul className="space-y-1 text-xs">
          <li><strong>&gt; 0.7</strong> : Forte corrélation positive</li>
          <li><strong>&lt; -0.7</strong> : Forte corrélation négative</li>
          <li><strong>≈ 0</strong> : Aucune corrélation</li>
        </ul>
      </div>
    ),
    position: "center",
  },
];

// Tour pour la fonctionnalité de régression
export const REGRESSION_TOUR_STEPS: TourStep[] = [
  {
    id: "regression-intro",
    title: "Régression Statistique",
    content: (
      <div className="space-y-2">
        <p>
          La régression permet de modéliser et prédire une variable cible en fonction de prédicteurs.
        </p>
      </div>
    ),
    position: "center",
  },
  {
    id: "model-type",
    title: "Choisir le type de modèle",
    content: (
      <div className="space-y-2">
        <p>Sélectionnez le type de modèle adapté à vos données :</p>
        <ul className="space-y-1 text-xs">
          <li><strong>Linéaire</strong> : Relations droites</li>
          <li><strong>Logistique</strong> : Cible binaire (0/1)</li>
          <li><strong>Polynomial</strong> : Relations courbes</li>
          <li><strong>Exponentielle</strong> : Croissance/décroissance</li>
        </ul>
      </div>
    ),
    target: "[data-tour-target='model-type']",
    position: "left",
  },
  {
    id: "target-variable",
    title: "Sélectionner la cible (Y)",
    content: (
      <div className="space-y-2">
        <p>
          Choisissez la variable que vous souhaitez expliquer ou prédire.
        </p>
        <p className="text-xs text-slate-500">
          Pour la régression linéaire/polynomial, elle doit être numérique.
        </p>
      </div>
    ),
    target: "[data-tour-target='target-variable']",
    position: "left",
  },
  {
    id: "predictors",
    title: "Choisir les prédicteurs (X)",
    content: (
      <div className="space-y-2">
        <p>
          L'application recommande automatiquement les 5 meilleures variables.
        </p>
        <p className="text-xs text-amber-600 font-medium">
          Évitez les variables avec multicolinéarité élevée !
        </p>
      </div>
    ),
    target: "[data-tour-target='predictors']",
    position: "left",
  },
  {
    id: "run-analysis",
    title: "Lancer l'analyse",
    content: (
      <div className="space-y-2">
        <p>
          Cliquez sur "Lancer l'Analyse" pour exécuter le modèle.
        </p>
        <p className="text-xs text-slate-500">
          Les résultats s'afficheront dans l'onglet "Résultats".
        </p>
      </div>
    ),
    target: "[data-tour-target='run-regression']",
    position: "left",
  },
];

// Tour pour la gestion des outliers
export const OUTLIER_TOUR_STEPS: TourStep[] = [
  {
    id: "outlier-intro",
    title: "Gestion des Outliers",
    content: (
      <div className="space-y-2">
        <p>
          Les outliers sont des valeurs aberrantes qui peuvent fausser vos analyses.
        </p>
        <p className="text-xs text-slate-500">
          Il est important de les identifier et de les gérer correctement.
        </p>
      </div>
    ),
    position: "center",
  },
  {
    id: "univariate-outliers",
    title: "Outliers Univariés 🔴",
    content: (
      <div className="space-y-2">
        <p className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full bg-red-500" />
          <span className="font-semibold">Cercle Rouge</span>
        </p>
        <p>
          Valeur extrême dans une seule colonne (détectée par la méthode IQR).
        </p>
        <p className="text-xs text-slate-500">
          Calcule : Q1 - 1.5×IQR ou Q3 + 1.5×IQR
        </p>
      </div>
    ),
    target: "[data-tour-target='grid']",
    position: "bottom",
  },
  {
    id: "multivariate-outliers",
    title: "Outliers Multivariés 🟣",
    content: (
      <div className="space-y-2">
        <p className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full bg-purple-500" />
          <span className="font-semibold">Cercle Violet</span>
        </p>
        <p>
          Combinaison inhabituelle de plusieurs variables (détectée par Isolation Forest).
        </p>
      </div>
    ),
    position: "center",
  },
  {
    id: "exclude-outlier",
    title: "Exclure un outlier",
    content: (
      <div className="space-y-2">
        <p>
          Cliquez sur un outlier pour voir la raison et l'exclure de l'analyse.
        </p>
        <p className="text-xs text-slate-500">
          Les outliers exclus sont mémorisés et n'affectent plus les calculs.
        </p>
      </div>
    ),
    target: "[data-tour-target='grid']",
    position: "bottom",
  },
];
