import React from 'react';
import { X, Keyboard, MousePointerClick, MessageCircle, Sparkles, GitGraph, BookOpen, Command, Globe, Layout, Settings, Lightbulb } from 'lucide-react';
import { ViewMode } from '../types';

interface HelpModalProps {
  isOpen: boolean;
  onClose: () => void;
  viewMode: ViewMode;
}

const Kbd: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <kbd className="px-2 py-1 text-xs font-semibold text-slate-800 bg-slate-100 border border-slate-300 rounded-md shadow-[0px_2px_0px_0px_rgba(203,213,225,1)] mx-1 font-mono">
    {children}
  </kbd>
);

const HelpModal: React.FC<HelpModalProps> = ({ isOpen, onClose, viewMode }) => {
  if (!isOpen) return null;

  const renderContent = () => {
      switch (viewMode) {
          case 'ideas':
              return (
                  <section className="mb-8">
                     <h3 className="text-lg font-bold text-yellow-600 flex items-center gap-2 border-b border-yellow-100 pb-2 mb-4">
                        <Lightbulb size={20} /> Boîte à Idées & Tâches
                     </h3>
                     <div className="text-sm text-slate-600 space-y-4">
                        <p>
                            Un espace de type Kanban pour ne rien oublier. Utilisez-le pour noter des idées fugaces, planifier des recherches ou lister les scènes à écrire.
                        </p>
                        <ul className="space-y-3">
                            <li className="flex items-start gap-2">
                                <MousePointerClick size={16} className="mt-0.5 shrink-0" />
                                <span>
                                    <span className="font-semibold text-slate-800">Glisser-Déposer :</span> Déplacez les cartes d'une colonne à l'autre (À faire → En cours → Validé) pour suivre votre progression.
                                </span>
                            </li>
                            <li className="flex items-start gap-2">
                                <Layout size={16} className="mt-0.5 shrink-0" />
                                <span>
                                    <span className="font-semibold text-slate-800">Catégories :</span> Utilisez les catégories (Intrigue, Personnage, Recherche) pour filtrer visuellement vos tâches grâce aux codes couleurs.
                                </span>
                            </li>
                        </ul>
                     </div>
                  </section>
              );

          case 'workflow':
              return (
                  <>
                    {/* Workflow Section */}
                    <section className="mb-8">
                        <h3 className="text-lg font-bold text-indigo-700 flex items-center gap-2 border-b border-indigo-100 pb-2 mb-4">
                        <GitGraph size={20} /> Organisation Narrative
                        </h3>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-slate-600">
                        <ul className="space-y-3">
                            <li className="flex items-start gap-2">
                            <MousePointerClick size={16} className="mt-0.5 shrink-0" />
                            <span>
                                <span className="font-semibold text-slate-800">Sélection :</span> <Kbd>Ctrl</Kbd> + Clic pour sélectionner plusieurs cartes. Glissez pour déplacer tout un groupe.
                            </span>
                            </li>
                            <li className="flex items-start gap-2">
                            <Command size={16} className="mt-0.5 shrink-0" />
                            <span>
                                <span className="font-semibold text-slate-800">Copier / Coller :</span> <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> pour copier les nœuds sélectionnés, <Kbd>Ctrl</Kbd> + <Kbd>V</Kbd> pour coller.
                            </span>
                            </li>
                            <li className="flex items-start gap-2">
                            <Layout size={16} className="mt-0.5 shrink-0" />
                            <span>
                                <span className="font-semibold text-slate-800">Connexions :</span> Tirez depuis le cercle à droite d'une carte pour lier les événements.
                            </span>
                            </li>
                        </ul>
                        </div>
                    </section>

                    {/* Dialogue Intelligent */}
                    <section className="bg-blue-50 p-6 rounded-xl border border-blue-100 mb-8">
                        <h3 className="text-lg font-bold text-blue-800 flex items-center gap-2 border-b border-blue-200 pb-2 mb-4">
                        <MessageCircle size={20} /> Mode Dialogue (Workflow)
                        </h3>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                        <div>
                            <div className="font-semibold text-slate-800 mb-1">Écriture Rapide</div>
                            <p className="text-slate-600 leading-relaxed mb-3">
                                Tapez un nom et <Kbd>Entrée</Kbd> : le formatage <code>Nom: </code> s'ajoute seul.
                            </p>
                            <p className="text-slate-600 leading-relaxed">
                                Dans un dialogue, <Kbd>Entrée</Kbd> change de ligne et <strong>devine le prochain interlocuteur</strong> automatiquement.
                            </p>
                        </div>
                        <div>
                            <div className="font-semibold text-slate-800 mb-1">Rotation & Insertion</div>
                            <p className="text-slate-600 leading-relaxed mb-3">
                                <Kbd>Tab</Kbd> permute instantanément entre les personnages présents dans la scène.
                            </p>
                            <p className="text-slate-600 leading-relaxed">
                                Utilisez <Kbd>@</Kbd> pour insérer un personnage, <Kbd>#</Kbd> pour un lieu.
                            </p>
                        </div>
                        </div>
                    </section>
                  </>
              );

          case 'world_building':
              return (
                  <section className="mb-8">
                     <h3 className="text-lg font-bold text-green-700 flex items-center gap-2 border-b border-green-100 pb-2 mb-4">
                        <Globe size={20} /> Bible du Monde
                     </h3>
                     <div className="text-sm text-slate-600 space-y-4">
                        <p>
                            La bible du monde permet de centraliser toutes les informations sur vos personnages et lieux.
                            Ces informations sont <strong>lues par l'IA</strong> pour assurer la cohérence de l'histoire.
                        </p>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                            <div className="bg-slate-50 p-4 rounded-lg">
                                <h4 className="font-bold text-slate-800 mb-2">Modèles Personnalisés</h4>
                                <p>
                                    Cliquez sur le bouton "Modèles" pour ajouter des champs spécifiques (ex: "Type de Magie", "Allégeance") à tous vos personnages ou lieux.
                                </p>
                            </div>
                            <div className="bg-slate-50 p-4 rounded-lg">
                                <h4 className="font-bold text-slate-800 mb-2">Contexte Automatique</h4>
                                <p>
                                    Le champ "Contexte Narratif" se remplit automatiquement au fur et à mesure que vous écrivez votre histoire et que l'IA détecte l'évolution des personnages.
                                </p>
                            </div>
                        </div>
                     </div>
                  </section>
              );

            case 'settings':
                return (
                    <section className="mb-8">
                        <h3 className="text-lg font-bold text-slate-700 flex items-center gap-2 border-b border-slate-100 pb-2 mb-4">
                           <Settings size={20} /> Paramètres du Livre
                        </h3>
                        <p className="text-sm text-slate-600 mb-4">
                            Ces réglages sont cruciaux pour l'Assistant IA. Ils définissent le "ton" de toutes les générations de texte.
                        </p>
                        <ul className="list-disc pl-5 space-y-2 text-sm text-slate-600">
                            <li><strong>Style Guide :</strong> Soyez précis sur le style (ex: "phrases courtes", "beaucoup de métaphores", "humour noir").</li>
                            <li><strong>POV (Point de Vue) :</strong> Définit si l'IA doit écrire en "Je" ou "Il/Elle".</li>
                        </ul>
                    </section>
                );

          case 'write':
          default:
              return (
                <section className="mb-8">
                    <h3 className="text-lg font-bold text-amber-600 flex items-center gap-2 border-b border-amber-100 pb-2 mb-4">
                    <Sparkles size={20} /> Éditeur & Assistant IA
                    </h3>
                    <div className="space-y-4 text-sm text-slate-600">
                    <div className="bg-amber-50 p-4 rounded-lg border border-amber-100">
                        <h4 className="font-bold text-amber-800 mb-2">Menu Contextuel Intelligent</h4>
                        <p>Sélectionnez du texte et faites un <strong>clic droit</strong> pour :</p>
                        <ul className="grid grid-cols-2 gap-2 mt-2 pl-4">
                            <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 rounded-full bg-amber-400"/>Corriger l'orthographe</li>
                            <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 rounded-full bg-amber-400"/>Reformuler / Améliorer</li>
                            <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 rounded-full bg-amber-400"/>Développer (Show, don't tell)</li>
                            <li className="flex items-center gap-2"><div className="w-1.5 h-1.5 rounded-full bg-amber-400"/>Continuer l'écriture</li>
                        </ul>
                    </div>
                    <p>
                        <span className="font-semibold text-slate-800">Historique des versions :</span> Activez la marge de droite (icône horloge) pour voir toutes les interventions de l'IA et revenir en arrière si nécessaire.
                    </p>
                    <p>
                        <span className="font-semibold text-slate-800">Chat Latéral :</span> Posez des questions sur votre histoire, demandez des résumés ou des idées de rebondissements. L'IA connaît le contexte de vos chapitres précédents et de vos fiches personnages.
                    </p>
                    
                    <div className="mt-6 border-t border-slate-100 pt-4">
                        <h4 className="font-bold text-slate-700 mb-3 flex items-center gap-2">
                           <Keyboard size={16} /> Raccourcis Clavier (Éditeur)
                        </h4>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 bg-slate-50 p-4 rounded-lg border border-slate-100">
                             <div className="space-y-3">
                                <div className="flex justify-between items-center text-xs">
                                    <span className="text-slate-600">Mettre en Gras</span>
                                    <span><Kbd>Ctrl</Kbd> + <Kbd>B</Kbd></span>
                                </div>
                                <div className="flex justify-between items-center text-xs">
                                    <span className="text-slate-600">Mettre en Italique</span>
                                    <span><Kbd>Ctrl</Kbd> + <Kbd>I</Kbd></span>
                                </div>
                                <div className="flex justify-between items-center text-xs">
                                    <span className="text-slate-600">Souligner</span>
                                    <span><Kbd>Ctrl</Kbd> + <Kbd>U</Kbd></span>
                                </div>
                             </div>
                             <div className="space-y-3">
                                <div className="flex justify-between items-center text-xs">
                                    <span className="text-slate-600">Tout sélectionner</span>
                                    <span><Kbd>Ctrl</Kbd> + <Kbd>A</Kbd></span>
                                </div>
                                <div className="flex justify-between items-center text-xs">
                                    <span className="text-slate-600">Annuler</span>
                                    <span><Kbd>Ctrl</Kbd> + <Kbd>Z</Kbd></span>
                                </div>
                                <div className="flex justify-between items-center text-xs">
                                    <span className="text-slate-600">Rétablir</span>
                                    <span><Kbd>Ctrl</Kbd> + <Kbd>Shift</Kbd> + <Kbd>Z</Kbd></span>
                                </div>
                             </div>
                        </div>
                    </div>
                    </div>
                </section>
              );
      }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm animate-in fade-in duration-200">
      <div className="bg-white rounded-xl shadow-2xl w-[800px] max-h-[90vh] flex flex-col overflow-hidden">
        
        {/* Header */}
        <div className="bg-slate-900 text-white p-6 flex justify-between items-center shrink-0">
          <div>
            <h2 className="text-xl font-bold flex items-center gap-2">
              <BookOpen size={24} className="text-blue-400" /> Aide : {
                  viewMode === 'workflow' ? 'Workflow & Dialogues' :
                  viewMode === 'world_building' ? 'Bible du Monde' :
                  viewMode === 'settings' ? 'Paramètres' :
                  viewMode === 'ideas' ? 'Boîte à Idées' :
                  'Éditeur & IA'
              }
            </h2>
            <p className="text-slate-400 text-sm mt-1">Astuces pour l'écran actuel.</p>
          </div>
          <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors p-2 hover:bg-slate-800 rounded-full">
            <X size={24} />
          </button>
        </div>

        {/* Content */}
        <div className="overflow-y-auto p-8">
            
            {/* Context Specific Content */}
            {renderContent()}

            {/* General Footer Section (Always visible) */}
            <div className="border-t border-slate-100 pt-6 mt-6">
                <h4 className="text-sm font-bold text-slate-500 uppercase tracking-wider mb-4">Raccourcis Généraux</h4>
                <div className="grid grid-cols-2 gap-4 text-xs text-slate-600">
                    <div className="flex justify-between">
                        <span>Sauvegarde Automatique</span>
                        <span className="font-mono text-slate-400">Permanente</span>
                    </div>
                    <div className="flex justify-between">
                        <span>Menu Latéral</span>
                        <span>Clic sur le burger</span>
                    </div>
                </div>
            </div>

        </div>

        {/* Footer */}
        <div className="p-4 border-t border-slate-200 bg-slate-50 flex justify-end">
          <button 
            onClick={onClose}
            className="px-6 py-2 bg-slate-800 text-white rounded-lg hover:bg-slate-900 transition-colors font-medium"
          >
            Fermer
          </button>
        </div>

      </div>
    </div>
  );
};

export default HelpModal;