import React, { useState, useEffect } from 'react';
import { BookOpen, User, RotateCcw, Trophy, Settings, Home, Plus, Brain } from 'lucide-react';

const BibleVerseApp = () => {
  const [currentPage, setCurrentPage] = useState('home');
  const [learningSession, setLearningSession] = useState(null);
  const [currentPhase, setCurrentPhase] = useState('presentation');
  const [questionsPool, setQuestionsPool] = useState([]);
  const [userProgress, setUserProgress] = useState({
    versesLearned: 10,
    streak: 3,
    totalScore: 150,
    level: 1
  });
  
  const [currentQuestion, setCurrentQuestion] = useState(null);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [showResult, setShowResult] = useState(false);
  const [knownVerses, setKnownVerses] = useState(new Set());
  const [reviewVerses, setReviewVerses] = useState(new Set());
  const [verseStats, setVerseStats] = useState({
    1: { repetitions: 3, learnedDate: '2024-01-10', lastReview: '2024-01-14' },
    2: { repetitions: 1, learnedDate: '2024-01-12', lastReview: '2024-01-12' },
    3: { repetitions: 5, learnedDate: '2024-01-08', lastReview: '2024-01-15' },
    4: { repetitions: 2, learnedDate: '2024-01-11', lastReview: '2024-01-13' }
  });
  const [questionNumber, setQuestionNumber] = useState(1);

  const sampleVerses = [
    {
      id: 1,
      verse: "Car Dieu a tant aimé le monde qu'il a donné son Fils unique, afin que quiconque croit en lui ne périsse point, mais qu'il ait la vie éternelle.",
      reference: "Jean 3:16",
      category: "Amour de Dieu"
    },
    {
      id: 2,
      verse: "Je puis tout par celui qui me fortifie.",
      reference: "Philippiens 4:13",
      category: "Force"
    },
    {
      id: 3,
      verse: "L'Éternel est mon berger: je ne manquerai de rien.",
      reference: "Psaume 23:1",
      category: "Confiance"
    },
    {
      id: 4,
      verse: "Ne crains rien, car je suis avec toi; Ne promène pas des regards inquiets, car je suis ton Dieu.",
      reference: "Ésaïe 41:10",
      category: "Réconfort"
    },
    {
      id: 5,
      verse: "Cherchez premièrement le royaume et la justice de Dieu; et toutes ces choses vous seront données par-dessus.",
      reference: "Matthieu 6:33",
      category: "Priorités"
    },
    {
      id: 6,
      verse: "Confie-toi en l'Éternel de tout ton cœur, Et ne t'appuie pas sur ta sagesse.",
      reference: "Proverbes 3:5",
      category: "Confiance"
    }
  ];

  const startLearningSession = () => {
    // Sélectionner 3 versets aléatoirement
    const selectedVerses = [...sampleVerses]
      .sort(() => Math.random() - 0.5)
      .slice(0, 3);
    
    setLearningSession({
      verses: selectedVerses,
      currentVerseIndex: 0
    });
    setCurrentPhase('presentation');
    setQuestionNumber(1);
    setCurrentQuestion(null);
    setSelectedAnswer(null);
    setShowResult(false);
    
    // Créer le pool de questions initiales (2 questions par verset)
    const initialQuestions = [];
    selectedVerses.forEach(verse => {
      // Question 1: Verset → Référence
      initialQuestions.push({
        id: `${verse.id}-v2r`,
        verse: verse,
        type: 'verse-to-reference',
        displayText: verse.verse,
        questionText: "Quelle est la référence de ce verset ?",
        correctAnswer: verse.reference,
        wrongAnswers: sampleVerses
          .filter(v => v.id !== verse.id)
          .sort(() => Math.random() - 0.5)
          .slice(0, 3)
          .map(v => v.reference)
      });
      
      // Question 2: Référence → Verset
      initialQuestions.push({
        id: `${verse.id}-r2v`,
        verse: verse,
        type: 'reference-to-verse',
        displayText: verse.reference,
        questionText: `Quel est le verset de ${verse.reference} ?`,
        correctAnswer: verse.verse,
        wrongAnswers: sampleVerses
          .filter(v => v.id !== verse.id)
          .sort(() => Math.random() - 0.5)
          .slice(0, 3)
          .map(v => v.verse)
      });
    });
    
    setQuestionsPool(initialQuestions.sort(() => Math.random() - 0.5));
  };

  const generateNextQuestion = () => {
    if (questionsPool.length === 0) {
      // Plus de questions - session terminée
      setCurrentPhase('completed');
      setUserProgress(prev => ({
        ...prev,
        versesLearned: prev.versesLearned + 3
      }));
      return;
    }
    
    // Prendre la première question du pool
    const question = questionsPool[0];
    const allAnswers = [question.correctAnswer, ...question.wrongAnswers].sort(() => Math.random() - 0.5);
    
    setCurrentQuestion({
      ...question,
      answers: allAnswers
    });
    setSelectedAnswer(null);
    setShowResult(false);
  };

  const handleAnswerSelect = (answer) => {
    setSelectedAnswer(answer);
    setShowResult(true);
    
    if (answer === currentQuestion.correctAnswer) {
      // Bonne réponse - retirer cette question du pool
      setQuestionsPool(prev => prev.filter(q => q.id !== currentQuestion.id));
      setUserProgress(prev => ({
        ...prev,
        totalScore: prev.totalScore + 10
      }));
      setKnownVerses(prev => new Set([...prev, currentQuestion.verse.id]));
      
      // Mettre à jour les statistiques
      setVerseStats(prev => {
        const currentStats = prev[currentQuestion.verse.id] || { repetitions: 0, learnedDate: null, lastReview: null };
        const today = new Date().toISOString().split('T')[0];
        
        return {
          ...prev,
          [currentQuestion.verse.id]: {
            repetitions: currentStats.repetitions + 1,
            learnedDate: currentStats.learnedDate || today,
            lastReview: today
          }
        };
      });
    } else {
      // Mauvaise réponse - remettre la question à la fin du pool
      setQuestionsPool(prev => {
        const remaining = prev.filter(q => q.id !== currentQuestion.id);
        return [...remaining, currentQuestion];
      });
      setReviewVerses(prev => new Set([...prev, currentQuestion.verse.id]));
    }
  };

  const nextStep = () => {
    if (currentPhase === 'presentation') {
      if (learningSession.currentVerseIndex < learningSession.verses.length - 1) {
        // Passer au verset suivant dans la présentation
        setLearningSession(prev => ({
          ...prev,
          currentVerseIndex: prev.currentVerseIndex + 1
        }));
      } else {
        // Commencer la phase de pratique
        setCurrentPhase('practice');
        generateNextQuestion();
      }
    } else if (currentPhase === 'practice') {
      // Générer la prochaine question ou terminer
      generateNextQuestion();
    } else {
      // Session terminée - retour à l'accueil
      setCurrentPage('home');
      setLearningSession(null);
      setCurrentPhase('presentation');
      setCurrentQuestion(null);
      setQuestionsPool([]);
      setQuestionNumber(1);
      setSelectedAnswer(null);
      setShowResult(false);
    }
  };

  useEffect(() => {
    if (currentPhase === 'practice' && questionsPool.length > 0 && !currentQuestion) {
      generateNextQuestion();
    }
  }, [currentPhase, questionsPool, currentQuestion]);

  const HomePage = () => (
    <div className="text-center space-y-6">
      <div className="bg-gradient-to-r from-blue-500 to-purple-600 text-white p-6 rounded-xl">
        <h2 className="text-2xl font-bold mb-2">Salut ! Prêt à apprendre ?</h2>
        <div className="flex justify-around text-sm">
          <div>
            <div className="text-2xl font-bold">{userProgress.versesLearned}</div>
            <div>Versets appris</div>
          </div>
          <div>
            <div className="text-2xl font-bold">{userProgress.streak}</div>
            <div>Jours consécutifs</div>
          </div>
          <div>
            <div className="text-2xl font-bold">{userProgress.totalScore}</div>
            <div>Points totaux</div>
          </div>
        </div>
      </div>

      <div className="grid gap-4">
        <button 
          onClick={() => {
            setCurrentPage('learn');
            startLearningSession();
          }}
          className="bg-green-500 hover:bg-green-600 text-white p-4 rounded-xl flex items-center justify-between transition-colors"
        >
          <div className="flex items-center gap-3">
            <Plus className="w-6 h-6" />
            <span className="font-semibold">Apprendre de nouveaux versets</span>
          </div>
          <div className="text-sm opacity-80">3 nouveaux versets</div>
        </button>

        <button 
          onClick={() => setCurrentPage('review')}
          className="bg-orange-500 hover:bg-orange-600 text-white p-4 rounded-xl flex items-center justify-between transition-colors"
        >
          <div className="flex items-center gap-3">
            <RotateCcw className="w-6 h-6" />
            <span className="font-semibold">Réviser</span>
          </div>
          <div className="text-sm opacity-80">{reviewVerses.size} à réviser</div>
        </button>
      </div>

      <div className="bg-gray-50 p-4 rounded-xl">
        <h3 className="font-semibold mb-2">Vos catégories préférées</h3>
        <div className="flex flex-wrap gap-2">
          <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Amour de Dieu</span>
          <span className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Force</span>
          <span className="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Réconfort</span>
        </div>
      </div>
    </div>
  );

  const LearningPage = () => {
    if (!learningSession) return null;

    if (currentPhase === 'presentation') {
      const currentVerse = learningSession.verses[learningSession.currentVerseIndex];
      
      return (
        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-bold">Présentation</h2>
            <div className="text-sm text-gray-600">
              Verset {learningSession.currentVerseIndex + 1}/{learningSession.verses.length}
            </div>
          </div>

          <div className="bg-gradient-to-r from-blue-50 to-purple-50 p-6 rounded-xl border-l-4 border-blue-500">
            <div className="space-y-4">
              <div>
                <p className="text-lg font-semibold text-blue-800 mb-2">{currentVerse.reference}</p>
                <p className="text-lg leading-relaxed text-gray-800">
                  "{currentVerse.verse}"
                </p>
              </div>
              <div className="flex items-center gap-2">
                <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
                  {currentVerse.category}
                </span>
              </div>
            </div>
          </div>

          <div className="bg-yellow-50 p-4 rounded-xl">
            <p className="text-yellow-800 text-sm">
              📚 Prenez le temps de lire et mémoriser ce verset avant de passer au suivant.
            </p>
          </div>

          <button 
            onClick={nextStep}
            className="w-full bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-xl font-semibold"
          >
            {learningSession.currentVerseIndex < learningSession.verses.length - 1 
              ? 'Verset suivant' 
              : 'Commencer la pratique'
            }
          </button>
        </div>
      );
    }

    if (currentPhase === 'practice') {
      if (!currentQuestion) {
        return (
          <div className="text-center py-12">
            <div className="animate-spin w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
            <p>Préparation de la question...</p>
          </div>
        );
      }

      return (
        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-bold">Pratique</h2>
            <div className="text-sm text-gray-600">
              {questionsPool.length} questions restantes
            </div>
          </div>

          <div className="bg-blue-50 p-6 rounded-xl">
            <p className="text-lg leading-relaxed text-gray-800">
              {currentQuestion.type === 'reference-to-verse' 
                ? currentQuestion.displayText
                : `"${currentQuestion.displayText}"`
              }
            </p>
          </div>

          <div className="space-y-2">
            <p className="font-medium">{currentQuestion.questionText}</p>
            {currentQuestion.answers.map((answer, index) => (
              <button
                key={index}
                onClick={() => handleAnswerSelect(answer)}
                disabled={showResult}
                className={`w-full p-4 text-left rounded-xl border-2 transition-colors ${
                  showResult
                    ? answer === currentQuestion.correctAnswer
                      ? 'bg-green-100 border-green-500 text-green-800'
                      : answer === selectedAnswer
                      ? 'bg-red-100 border-red-500 text-red-800'
                      : 'bg-gray-50 border-gray-200 text-gray-600'
                    : selectedAnswer === answer
                    ? 'bg-blue-100 border-blue-500'
                    : 'bg-white border-gray-200 hover:border-gray-300'
                }`}
              >
                {currentQuestion.type === 'reference-to-verse' ? `"${answer}"` : answer}
              </button>
            ))}
          </div>

          {showResult && (
            <div className="space-y-4">
              <div className={`p-4 rounded-xl ${
                selectedAnswer === currentQuestion.correctAnswer
                  ? 'bg-green-100 text-green-800'
                  : 'bg-red-100 text-red-800'
              }`}>
                {selectedAnswer === currentQuestion.correctAnswer
                  ? '✅ Correct ! Cette question ne reviendra plus.'
                  : `❌ Incorrect. Cette question reviendra plus tard. La bonne réponse était : ${currentQuestion.type === 'reference-to-verse' ? `"${currentQuestion.correctAnswer}"` : currentQuestion.correctAnswer}`
                }
              </div>

              <button 
                onClick={nextStep}
                className="w-full bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-xl font-semibold"
              >
                Question suivante
              </button>
            </div>
          )}
        </div>
      );
    }

    if (currentPhase === 'completed') {
      return (
        <div className="text-center space-y-6 py-12">
          <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto">
            <Trophy className="w-10 h-10 text-green-600" />
          </div>
          
          <div>
            <h2 className="text-2xl font-bold text-green-800 mb-2">Félicitations !</h2>
            <p className="text-gray-600">
              Vous avez maîtrisé les 3 versets de cette session.
            </p>
          </div>

          <div className="bg-green-50 p-6 rounded-xl">
            <h3 className="font-semibold text-green-800 mb-3">Versets appris :</h3>
            <div className="space-y-2">
              {learningSession.verses.map(verse => (
                <div key={verse.id} className="text-left">
                  <p className="font-medium text-green-700">{verse.reference}</p>
                  <p className="text-sm text-green-600">"{verse.verse.substring(0, 50)}..."</p>
                </div>
              ))}
            </div>
          </div>

          <button 
            onClick={nextStep}
            className="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-xl font-semibold"
          >
            Retour à l'accueil
          </button>
        </div>
      );
    }
  };

  const ReviewPage = () => {
    // Obtenir tous les versets avec des statistiques
    const learnedVersesWithStats = Object.keys(verseStats).map(verseId => {
      const verse = sampleVerses.find(v => v.id === parseInt(verseId));
      const stats = verseStats[verseId];
      return { ...verse, ...stats };
    }).sort((a, b) => new Date(b.lastReview) - new Date(a.lastReview));

    const formatDate = (dateString) => {
      if (!dateString) return '-';
      const date = new Date(dateString);
      return date.toLocaleDateString('fr-FR', { 
        day: '2-digit', 
        month: '2-digit', 
        year: 'numeric' 
      });
    };

    return (
      <div className="space-y-6">
        <h2 className="text-xl font-bold">Révisions</h2>
        
        <div className="bg-blue-50 p-4 rounded-xl">
          <div className="flex items-center gap-2 mb-2">
            <Brain className="w-5 h-5 text-blue-600" />
            <span className="font-semibold text-blue-800">Historique d'apprentissage</span>
          </div>
          <p className="text-blue-700 text-sm">
            Suivi détaillé de vos progrès pour chaque verset.
          </p>
        </div>

        {learnedVersesWithStats.length > 0 ? (
          <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
            {/* En-tête du tableau */}
            <div className="bg-gray-50 px-4 py-3 border-b border-gray-200">
              <div className="grid grid-cols-12 gap-2 text-xs font-semibold text-gray-600 uppercase">
                <div className="col-span-4">Verset</div>
                <div className="col-span-3">Référence</div>
                <div className="col-span-2 text-center">Répétitions</div>
                <div className="col-span-3 text-center">Dernière révision</div>
              </div>
            </div>

            {/* Lignes du tableau */}
            <div className="divide-y divide-gray-100">
              {learnedVersesWithStats.map((verse, index) => (
                <div 
                  key={verse.id} 
                  className={`px-4 py-3 hover:bg-gray-50 transition-colors ${
                    index % 2 === 0 ? 'bg-white' : 'bg-gray-25'
                  }`}
                >
                  <div className="grid grid-cols-12 gap-2 items-center">
                    {/* Verset (tronqué) */}
                    <div className="col-span-4">
                      <p className="text-sm text-gray-800 line-clamp-2">
                        "{verse.verse.substring(0, 50)}{verse.verse.length > 50 ? '...' : ''}"
                      </p>
                    </div>
                    
                    {/* Référence */}
                    <div className="col-span-3">
                      <p className="text-sm font-medium text-blue-600">
                        {verse.reference}
                      </p>
                      <p className="text-xs text-gray-500">
                        {verse.category}
                      </p>
                    </div>
                    
                    {/* Nombre de répétitions */}
                    <div className="col-span-2 text-center">
                      <span className={`inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold ${
                        verse.repetitions >= 5 
                          ? 'bg-green-100 text-green-800'
                          : verse.repetitions >= 3 
                          ? 'bg-yellow-100 text-yellow-800'
                          : 'bg-red-100 text-red-800'
                      }`}>
                        {verse.repetitions}
                      </span>
                    </div>
                    
                    {/* Date de dernière révision */}
                    <div className="col-span-3 text-center">
                      <p className="text-sm text-gray-600">
                        {formatDate(verse.lastReview)}
                      </p>
                      <p className="text-xs text-gray-400">
                        Appris le {formatDate(verse.learnedDate)}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ) : (
          <div className="text-center py-12 text-gray-500">
            <Trophy className="w-16 h-16 mx-auto mb-4 text-gray-300" />
            <h3 className="text-lg font-semibold text-gray-600 mb-2">Aucun verset appris</h3>
            <p className="text-sm">Commencez à apprendre des versets pour voir vos statistiques ici.</p>
          </div>
        )}

        {/* Statistiques générales */}
        {learnedVersesWithStats.length > 0 && (
          <div className="grid grid-cols-3 gap-4">
            <div className="bg-blue-50 p-4 rounded-lg text-center">
              <div className="text-2xl font-bold text-blue-600">
                {learnedVersesWithStats.length}
              </div>
              <div className="text-sm text-blue-800">Versets appris</div>
            </div>
            
            <div className="bg-green-50 p-4 rounded-lg text-center">
              <div className="text-2xl font-bold text-green-600">
                {learnedVersesWithStats.reduce((sum, v) => sum + v.repetitions, 0)}
              </div>
              <div className="text-sm text-green-800">Répétitions totales</div>
            </div>
            
            <div className="bg-purple-50 p-4 rounded-lg text-center">
              <div className="text-2xl font-bold text-purple-600">
                {learnedVersesWithStats.filter(v => v.repetitions >= 5).length}
              </div>
              <div className="text-sm text-purple-800">Versets maîtrisés</div>
            </div>
          </div>
        )}
      </div>
    );
  };

  const ProfilePage = () => (
    <div className="space-y-6">
      <div className="text-center">
        <div className="w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4">
          <User className="w-10 h-10 text-white" />
        </div>
        <h2 className="text-xl font-bold">Mon Profil</h2>
      </div>

      <div className="space-y-4">
        <div className="bg-white p-4 rounded-xl border">
          <h3 className="font-semibold mb-2">Statistiques</h3>
          <div className="grid grid-cols-2 gap-4">
            <div className="text-center">
              <div className="text-2xl font-bold text-blue-600">{knownVerses.size}</div>
              <div className="text-sm text-gray-600">Versets maîtrisés</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-green-600">{userProgress.streak}</div>
              <div className="text-sm text-gray-600">Jours d'affilée</div>
            </div>
          </div>
        </div>

        <div className="bg-white p-4 rounded-xl border">
          <h3 className="font-semibold mb-2">Abonnement Premium</h3>
          <div className="bg-gradient-to-r from-yellow-400 to-yellow-500 text-white p-3 rounded-lg">
            <div className="flex justify-between items-center">
              <div>
                <div className="font-semibold">Plan Premium</div>
                <div className="text-sm opacity-90">Accès illimité</div>
              </div>
              <div className="text-right">
                <div className="font-bold">9,99€/mois</div>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white p-4 rounded-xl border">
          <h3 className="font-semibold mb-2">Préférences</h3>
          <div className="space-y-3">
            <label className="flex items-center justify-between">
              <span>Notifications quotidiennes</span>
              <input type="checkbox" className="toggle" defaultChecked />
            </label>
            <label className="flex items-center justify-between">
              <span>Mode sombre</span>
              <input type="checkbox" className="toggle" />
            </label>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <div className="max-w-md mx-auto bg-gray-50 min-h-screen">
      {/* Header */}
      <div className="bg-white shadow-sm p-4">
        <div className="flex items-center justify-between">
          <h1 className="text-xl font-bold text-gray-800">Bible Study</h1>
          <div className="flex items-center gap-2">
            <div className="bg-yellow-100 px-2 py-1 rounded text-sm text-yellow-800 font-medium">
              🔥 {userProgress.streak}
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="p-4 pb-20">
        {currentPage === 'home' && <HomePage />}
        {currentPage === 'learn' && <LearningPage />}
        {currentPage === 'review' && <ReviewPage />}
        {currentPage === 'profile' && <ProfilePage />}
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200">
        <div className="flex">
          {[
            { id: 'home', icon: Home, label: 'Accueil' },
            { id: 'learn', icon: BookOpen, label: 'Apprendre' },
            { id: 'review', icon: RotateCcw, label: 'Réviser' },
            { id: 'profile', icon: User, label: 'Profil' }
          ].map(({ id, icon: Icon, label }) => (
            <button
              key={id}
              onClick={() => setCurrentPage(id)}
              className={`flex-1 p-3 flex flex-col items-center gap-1 transition-colors ${
                currentPage === id
                  ? 'text-blue-600 bg-blue-50'
                  : 'text-gray-600 hover:text-gray-800'
              }`}
            >
              <Icon className="w-5 h-5" />
              <span className="text-xs">{label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

export default BibleVerseApp;