const [quizMode, setQuizMode] = useState(false);
const [currentCharacter, setCurrentCharacter] = useState<Kana | null>(null);
const [userAnswer, setUserAnswer] = useState('');
const [score, setScore] = useState({ correct: 0, total: 0 });

function KanaApp() {
  // États
  const [script, setScript] = useState<'hiragana' | 'katakana'>('hiragana');
  const [mode, setMode] = useState<'study' | 'quiz'>('study');
  const [quizState, setQuizState] = useState({
    currentIndex: 0,
    userAnswer: '',
    score: { correct: 0, total: 0 }
  });

  // Fonctions
  const switchMode = (newMode: 'study' | 'quiz') => {
    setMode(newMode);
    // Réinitialiser le quiz si nécessaire
  };

  const handleAnswerSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Vérifier la réponse
    // Mettre à jour le score
    // Passer à la question suivante
  };

  return (
    <div>
      {/* Navigation mode */}
      <nav>
        <button onClick={() => switchMode('study')}>Étude</button>
        <button onClick={() => switchMode('quiz')}>Quiz</button>
      </nav>

      {/* Sélection script (hiragana/katakana) */}
      {mode === 'study' && (
        <div>
          <label>
            <input
              type="radio"
              checked={script === 'hiragana'}
              onChange={() => setScript('hiragana')}
            />
            Hiragana
          </label>
          <label>
            <input
              type="radio"
              checked={script === 'katakana'}
              onChange={() => setScript('katakana')}
            />
            Katakana
          </label>
        </div>
      )}

      {/* Affichage conditionnel */}
      {mode === 'study' && <StudyMode script={script} kanaData={kanaData} />}
      {mode === 'quiz' && <QuizMode ... />}
    </div>
  );
}

interface StudyModeProps {
  script: 'hiragana' | 'katakana';
  kanaData: Kana[];
}

function StudyMode({ script, kanaData }: StudyModeProps) {
  return (
    <div className="grid">
      {kanaData.map(kana => (
        <CharacterCard
          key={kana.romanji}
          character={script === 'hiragana' ? kana.hiragana : kana.katakana}
          romanji={kana.romanji}
        />
      ))}
    </div>
  );
}

interface QuizModeProps {
  script: 'hiragana' | 'katakana';
  kanaData: Kana[];
}

function QuizMode({ script, kanaData }: QuizModeProps) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [userAnswer, setUserAnswer] = useState('');
  const [score, setScore] = useState({ correct: 0, total: 0 });
  const [feedback, setFeedback] = useState('');

  const currentKana = kanaData[currentIndex];
  const displayChar = script === 'hiragana'
    ? currentKana.hiragana
    : currentKana.katakana;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const isCorrect = userAnswer.toLowerCase().trim() ===
                      currentKana.romanji.toLowerCase();

    setScore({
      correct: score.correct + (isCorrect ? 1 : 0),
      total: score.total + 1
    });

    setFeedback(isCorrect ? 'Correct !' : `Incorrect. C'était ${currentKana.romanji}`);
    setUserAnswer('');

    // Passer au suivant après un délai
    setTimeout(() => {
      setCurrentIndex((currentIndex + 1) % kanaData.length);
      setFeedback('');
    }, 1500);
  };

  return (
    <div>
      <div className="score">
        Score : {score.correct} / {score.total}
      </div>

      <div className="quiz-character">
        <h2>{displayChar}</h2>
      </div>

      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={userAnswer}
          onChange={e => setUserAnswer(e.target.value)}
          placeholder="Romanji..."
          autoFocus
        />
        <button type="submit">Valider</button>
      </form>

      {feedback && <div className="feedback">{feedback}</div>}
    </div>
  );
}