import React, { useState } from 'react';
import { Shield, CheckCircle, XCircle, ArrowRight, Play, RotateCcw, Award, Target, MoreVertical, Check } from 'lucide-react';

const INITIAL_QUESTIONS = [
  { id: 1, text: "Zůstali tu jen (Vašek) rodiče.", options: ["Vaškovi", "Vaškovy"], correct: 0, explanation: "1. pád, množné číslo, rod mužský životný (ti rodiče). Zde se píše VŽDY měkké I." },
  { id: 2, text: "Na stole ležely (bratr) sešity.", options: ["bratrovi", "bratrovy"], correct: 1, explanation: "1. pád, množné číslo, ale rod mužský NEŽIVOTNÝ (ty sešity). Proto tvrdé Y." },
  { id: 3, text: "(Klára) bratři vůbec nepřišli.", options: ["Klářiny", "Klářini"], correct: 1, explanation: "1. pád, množné číslo, rod mužský životný (ti bratři). Měkké I." },
  { id: 4, text: "Přinesla jsem knihu z (táta) knihovny.", options: ["tátovi", "tátovy"], correct: 1, explanation: "2. pád, rod ženský (z koho/čeho? z tátovy knihovny). Tvrdé Y." },
  { id: 5, text: "Řídil se (šéf) příkazy.", options: ["šéfovými", "šéfovími"], correct: 0, explanation: "7. pád množného čísla (kým/čím se řídil?). V tomto pádě je vždy koncovka -ými." },
  { id: 6, text: "Koupil oves pro (strýček) koně.", options: ["strýčkovi", "strýčkovy"], correct: 1, explanation: "4. pád (koupil pro koho/co?). I když jsou koně životní, ptáme se 'vidím koho, co'. Měkké I je pouze v 1. pádě! Zde je tvrdé Y." },
  { id: 7, text: "Bojím se (soused) psů.", options: ["sousedových", "sousedovích"], correct: 0, explanation: "2. pád množného čísla (bez koho/čeho?). Koncovka je -ých." },
  { id: 8, text: "Znáš (Karel) sestru?", options: ["Karlovu", "Karlovou"], correct: 0, explanation: "4. pád rodu ženského (vidím koho/co?). Skloňujeme jako 'matčinu' (Karlovu)." },
  { id: 9, text: "Viděl jsem všechny (prezident) projevy.", options: ["prezidentovy", "prezidentovi"], correct: 0, explanation: "4. pád, množné číslo, rod mužský neživotný (ty projevy). Tvrdé Y." },
  { id: 10, text: "To jsou (Honza) nejlepší nápady.", options: ["Honzovi", "Honzovy"], correct: 1, explanation: "1. pád, rod mužský neživotný (ty nápady). Tvrdé Y." },
  { id: 11, text: "Navštívili jsme (babička) sousedy.", options: ["babiččini", "babiččiny"], correct: 1, explanation: "POZOR chyták! 4. pád (koho, co jsme navštívili?). Měkké I je jen v prvním pádě. Správně je tvrdé Y." },
  { id: 12, text: "(Petr) kamarádi na nás už čekali.", options: ["Petrovi", "Petrovy"], correct: 0, explanation: "1. pád, rod mužský životný (ti kamarádi). Měkké I." },
  { id: 13, text: "Půjčil jsem si (Pavel) boty.", options: ["Pavlovi", "Pavlovy"], correct: 1, explanation: "4. pád (koho, co jsem si půjčil?). Rod ženský (ty boty). Tvrdé Y." },
  { id: 14, text: "(Učitel) otázky byly velmi těžké.", options: ["Učitelovy", "Učitelovi"], correct: 0, explanation: "1. pád, rod ženský (ty otázky). Tvrdé Y." },
  { id: 15, text: "Hráli jsme si se (soused) psy.", options: ["sousedovími", "sousedovými"], correct: 1, explanation: "7. pád množného čísla (s kým, čím?). Koncovka je vždy -ými." },
  { id: 16, text: "To jsou (doktor) chirurgické nástroje.", options: ["doktorovi", "doktorovy"], correct: 1, explanation: "1. pád, rod mužský neživotný (ty nástroje). Tvrdé Y." },
  { id: 17, text: "Běž se zeptat (Jana) bratra.", options: ["Janiného", "Janina"], correct: 1, explanation: "2. pád (bez koho, čeho?). Skloňujeme jako 'matčina bratra'." },
  { id: 18, text: "Dnes odpoledne přijedou (strýc) synové.", options: ["strýcovi", "strýcovy"], correct: 0, explanation: "1. pád, rod mužský životný (ti synové). Měkké I." },
  { id: 19, text: "(Alena) vlasy byly krásně upravené.", options: ["Aleniny", "Alenini"], correct: 0, explanation: "1. pád, rod mužský neživotný (ty vlasy). Tvrdé Y." },
  { id: 20, text: "Tyto (spisovatel) knihy mě vůbec nebaví.", options: ["spisovatelovi", "spisovatelovy"], correct: 1, explanation: "1. pád, rod ženský (ty knihy). Tvrdé Y." },
  { id: 21, text: "Dívám se na (Kamil) nové obrazy.", options: ["Kamilovy", "Kamilovi"], correct: 0, explanation: "4. pád, rod mužský neživotný (vidím ty obrazy). Tvrdé Y." },
  { id: 22, text: "Marně hledám (Hana) klíče.", options: ["Haniny", "Hanini"], correct: 0, explanation: "4. pád, rod mužský neživotný (ty klíče). Tvrdé Y." },
  { id: 23, text: "Pozvali jsme (Lukáš) rodiče na večeři.", options: ["Lukášovy", "Lukášovi"], correct: 0, explanation: "CHYTÁK! 4. pád (vidím koho, co? rodiče). Měkké I se píše pouze v prvním pádě. Zde je tvrdé Y." },
  { id: 24, text: "Kde jsou (Martin) lovečtí psi?", options: ["Martinovy", "Martinovi"], correct: 1, explanation: "1. pád, rod mužský životný (ti psi). Měkké I." },
  { id: 25, text: "(Zdeněk) nápady se mi vždy líbí.", options: ["Zdeňkovy", "Zdeňkovi"], correct: 0, explanation: "1. pád, rod mužský neživotný (ty nápady). Tvrdé Y." },
  { id: 26, text: "Na zahradě štěkali (Zuzana) psi.", options: ["Zuzaniny", "Zuzanini"], correct: 1, explanation: "1. pád, rod mužský životný (ti psi). Měkké I." },
  { id: 27, text: "Četl jsem všechny (Karel Čapek) knihy.", options: ["Čapkovy", "Čapkovi"], correct: 0, explanation: "4. pád, rod ženský (ty knihy). Tvrdé Y." },
  { id: 28, text: "Pozdravuj (Eliška) starší bratry.", options: ["Eliščini", "Eliščiny"], correct: 1, explanation: "CHYTÁK! 4. pád (koho, co mám pozdravovat?). I když jsou to bratři, není to 1. pád, takže píšeme tvrdé Y." },
  { id: 29, text: "(Veronika) kamarádky nakonec nepřišly.", options: ["Veroničiny", "Veroničini"], correct: 0, explanation: "1. pád, rod ženský (ty kamarádky). Tvrdé Y." },
  { id: 30, text: "Šli jsme tam za (Tomáš) kamarády.", options: ["Tomášovími", "Tomášovými"], correct: 1, explanation: "7. pád (s kým, čím?). Koncovka -ými." },
  { id: 31, text: "Slyšel jsem na chodbě (Karel) kroky.", options: ["Karlovy", "Karlovi"], correct: 0, explanation: "4. pád, rod mužský neživotný (ty kroky). Tvrdé Y." },
  { id: 32, text: "Kde jsou schované (dědeček) brýle?", options: ["dědečkovi", "dědečkovy"], correct: 1, explanation: "1. pád, rod ženský (ty brýle). Tvrdé Y." },
  { id: 33, text: "Včera jsme v kině potkali (Lenka) sestry.", options: ["Lenčiny", "Lenčini"], correct: 0, explanation: "4. pád, rod ženský (ty sestry). Tvrdé Y." },
  { id: 34, text: "(Zahradník) ovocné stromy krásně kvetou.", options: ["Zahradníkovy", "Zahradníkovi"], correct: 0, explanation: "1. pád, rod mužský neživotný (ty stromy). Tvrdé Y." },
  { id: 35, text: "(Kuchař) recepty byly moc složité.", options: ["Kuchařovi", "Kuchařovy"], correct: 1, explanation: "1. pád, rod mužský neživotný (ty recepty). Tvrdé Y." },
  { id: 36, text: "Šli tam i (Mirek) bývalí spolužáci.", options: ["Mirkovi", "Mirkovy"], correct: 0, explanation: "1. pád, rod mužský životný (ti spolužáci). Měkké I." },
  { id: 37, text: "Dlouze jsem mluvil s (David) rodiči.", options: ["Davidovými", "Davidovími"], correct: 0, explanation: "7. pád (s kým, čím?). Koncovka -ými." },
  { id: 38, text: "Rozzlobeně odmítl (ředitel) návrhy.", options: ["ředitelovi", "ředitelovy"], correct: 1, explanation: "4. pád, rod mužský neživotný (odmítl koho, co?). Tvrdé Y." },
  { id: 39, text: "Už jsi viděl (Eva) výsledky?", options: ["Eviny", "Evini"], correct: 0, explanation: "4. pád, rod mužský neživotný (ty výsledky). Tvrdé Y." },
  { id: 40, text: "Kde leží ty (předseda) důležité zprávy?", options: ["předsedovy", "předsedovi"], correct: 0, explanation: "1. pád, rod ženský (ty zprávy). Tvrdé Y." },
  { id: 41, text: "Rychle otevři (Vojta) dopisy.", options: ["Vojtovi", "Vojtovy"], correct: 1, explanation: "4. pád, rod mužský neživotný (ty dopisy). Tvrdé Y." },
  { id: 42, text: "Procházeli jsme se mezi (soused) domy.", options: ["sousedovými", "sousedovími"], correct: 0, explanation: "7. pád množného čísla. Koncovka -ými." },
  { id: 43, text: "Znáš už (Lucie) názory na tuto věc?", options: ["Luciiny", "Luciini"], correct: 0, explanation: "4. pád, rod mužský neživotný (ty názory). Tvrdé Y." },
  { id: 44, text: "(Dělník) těžké stroje se porouchaly.", options: ["Dělníkovi", "Dělníkovy"], correct: 1, explanation: "1. pád, rod mužský neživotný (ty stroje). Tvrdé Y." },
  { id: 45, text: "Zaujaly mě (herečka) fantastické výkony.", options: ["hereččiny", "hereččini"], correct: 0, explanation: "1. pád, rod mužský neživotný (ty výkony). Tvrdé Y." },
  { id: 46, text: "Odjeli pryč s (přítel) auty.", options: ["přítelovími", "přítelovými"], correct: 1, explanation: "7. pád množného čísla. Koncovka -ými." },
  { id: 47, text: "To na fotce byli (Klára) učitelé ze střední.", options: ["Klářiny", "Klářini"], correct: 1, explanation: "1. pád, rod mužský životný (ti učitelé). Měkké I." },
  { id: 48, text: "Nutně potřebuji (lékař) dobré rady.", options: ["lékařovy", "lékařovi"], correct: 0, explanation: "4. pád, rod ženský (ty rady). Tvrdé Y." },
  { id: 49, text: "V rádiu hráli (zpěvák) staré písně.", options: ["zpěvákovi", "zpěvákovy"], correct: 1, explanation: "4. pád, rod ženský (ty písně). Tvrdé Y." },
  { id: 50, text: "Kde jsou schované (František) peníze?", options: ["Františkovi", "Františkovy"], correct: 1, explanation: "1. pád, rod ženský (ty peníze). Tvrdé Y." }
];

const SHIELD_REQ = 5;
const MAX_SHIELDS = 4;

export default function App() {
  const [gameState, setGameState] = useState('start'); // start, playing, finished
  const [queue, setQueue] = useState([]);
  const [currentQuestion, setCurrentQuestion] = useState(null);
  
  // Herní statistiky
  const [shields, setShields] = useState(0);
  const [streak, setStreak] = useState(0);
  const [score, setScore] = useState({ correct: 0, mistakes: 0 });
  
  // Stav aktuálního tahu
  const [selectedOption, setSelectedOption] = useState(null);
  const [isAnswerChecked, setIsAnswerChecked] = useState(false);
  
  // Cheat menu stavy a režimy
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isCheatMenuExpanded, setIsCheatMenuExpanded] = useState(false);
  const [isTomsModeOn, setIsTomsModeOn] = useState(false);
  const [isVercasModeOn, setIsVercasModeOn] = useState(false);
  const [isTatkasModeOn, setIsTatkasModeOn] = useState(false);

  // Inicializace hry
  const startGame = () => {
    const shuffled = [...INITIAL_QUESTIONS].sort(() => Math.random() - 0.5);
    setQueue(shuffled);
    setCurrentQuestion(shuffled[0]);
    setGameState('playing');
    setShields(0);
    setStreak(0);
    setScore({ correct: 0, mistakes: 0 });
    setIsMenuOpen(false);
    setIsCheatMenuExpanded(false);
    resetTurn();
  };

  const resetTurn = () => {
    setSelectedOption(null);
    setIsAnswerChecked(false);
  };

  const handleOptionClick = (index) => {
    if (isAnswerChecked) return;
    setSelectedOption(index);
  };

  const toggleMenu = () => {
    if (isMenuOpen) {
      setIsMenuOpen(false);
      setIsCheatMenuExpanded(false);
    } else {
      setIsMenuOpen(true);
    }
  };

  const toggleTomsMode = () => {
    setIsTomsModeOn(!isTomsModeOn);
    if (!isTomsModeOn) {
      setIsVercasModeOn(false);
      setIsTatkasModeOn(false);
    }
  };

  const toggleVercasMode = () => {
    setIsVercasModeOn(!isVercasModeOn);
    if (!isVercasModeOn) {
      setIsTomsModeOn(false);
      setIsTatkasModeOn(false);
    }
  };

  const toggleTatkasMode = () => {
    setIsTatkasModeOn(!isTatkasModeOn);
    if (!isTatkasModeOn) {
      setIsTomsModeOn(false);
      setIsVercasModeOn(false);
    }
  };

  const handleWinCheat = () => {
    setShields(4);
    setScore({ correct: 20, mistakes: 0 });
    setGameState('finished');
    setIsMenuOpen(false);
    setIsCheatMenuExpanded(false);
  };

  const handleCorrectAnswerCheat = () => {
    if (!isAnswerChecked && currentQuestion) {
      checkAnswer(currentQuestion.correct);
    }
    setIsMenuOpen(false);
    setIsCheatMenuExpanded(false);
  };

  const checkAnswer = (autoSubmitOption = null) => {
    const optionToEvaluate = typeof autoSubmitOption === 'number' ? autoSubmitOption : selectedOption;
    
    if (optionToEvaluate === null || !currentQuestion) return;
    
    if (typeof autoSubmitOption === 'number') {
      setSelectedOption(autoSubmitOption);
    }

    setIsAnswerChecked(true);
    
    // Vyhodnocení odpovědi (včetně hacků)
    let isCorrect = optionToEvaluate === currentQuestion.correct;
    
    if (isTomsModeOn || isTatkasModeOn) {
      isCorrect = true;
    } else if (isVercasModeOn) {
      isCorrect = false;
    }

    if (isCorrect) {
      setScore(s => ({ ...s, correct: s.correct + 1 }));
      const newStreak = streak + 1;
      
      if (newStreak === SHIELD_REQ) {
        setShields(s => s + 1);
        setStreak(0); // Reset série pro sbírání dalšího štítu
      } else {
        setStreak(newStreak);
      }
    } else {
      setScore(s => ({ ...s, mistakes: s.mistakes + 1 }));
      setStreak(0); 
      // Vrácení špatně zodpovězené otázky na konec fronty
      setQueue(prev => [...prev, currentQuestion]);
    }
  };

  const nextQuestion = () => {
    if (shields >= MAX_SHIELDS) {
      setGameState('finished');
      return;
    }

    let nextQueue = queue.slice(1);
    
    if (nextQueue.length === 0) {
      nextQueue = [...INITIAL_QUESTIONS].sort(() => Math.random() - 0.5);
    }
    
    setQueue(nextQueue);
    setCurrentQuestion(nextQueue[0]);
    resetTurn();
  };

  if (gameState === 'start') {
    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4 font-sans text-slate-800">
        <div className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 text-center space-y-6">
          <div className="bg-blue-100 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-4">
            <Target className="w-12 h-12 text-blue-600" />
          </div>
          <h1 className="text-3xl font-bold text-slate-900">Hardcore Test Přídavná Jména</h1>
          <div className="text-slate-600 leading-relaxed space-y-3 text-left bg-slate-50 p-4 rounded-xl">
            <p>🛡️ Za každých <strong>5 správných odpovědí v řadě</strong> získáte štít.</p>
            <p>❌ Pokud uděláte chybu, ztratíte aktuální sérii a otázka se vám později vrátí.</p>
            <p>🏆 Cílem hry je nasbírat <strong>4 štíty</strong>.</p>
          </div>
          <button 
            onClick={startGame}
            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-4 px-6 rounded-xl flex items-center justify-center gap-2 transition-all active:scale-95 text-lg"
          >
            <Play className="w-6 h-6 fill-current" />
            Zahájit Test
          </button>
        </div>
      </div>
    );
  }

  if (gameState === 'finished') {
    return (
      <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4 font-sans text-slate-800">
        <div className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 text-center space-y-6 transform transition-all">
          <div className="bg-yellow-100 w-28 h-28 rounded-full flex items-center justify-center mx-auto mb-4 relative">
            <Award className="w-14 h-14 text-yellow-600" />
            <div className="absolute -top-2 -right-2 bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg border-4 border-white shadow-sm">
              {shields}
            </div>
          </div>
          <h1 className="text-3xl font-bold text-slate-900">Vítězství!</h1>
          <p className="text-slate-600">Dokázali jste nasbírat všechny 4 štíty. Pravopis přídavných jmen přivlastňovacích máte v malíčku.</p>
          
          <div className="grid grid-cols-2 gap-4 my-6">
            <div className="bg-green-50 rounded-xl p-4">
              <div className="text-green-600 text-sm font-semibold uppercase tracking-wider mb-1">Správně</div>
              <div className="text-3xl font-bold text-green-700">{score.correct}</div>
            </div>
            <div className="bg-red-50 rounded-xl p-4">
              <div className="text-red-600 text-sm font-semibold uppercase tracking-wider mb-1">Chyby</div>
              <div className="text-3xl font-bold text-red-700">{score.mistakes}</div>
            </div>
          </div>
          
          <button 
            onClick={startGame}
            className="w-full mt-4 bg-slate-800 hover:bg-slate-900 text-white font-semibold py-4 px-6 rounded-xl flex items-center justify-center gap-2 transition-all active:scale-95"
          >
            <RotateCcw className="w-5 h-5" />
            Hrát znovu
          </button>
        </div>
      </div>
    );
  }

  // PLAYING STATE
  
  // Vypočtení finální správnosti pro aktuální tah (s ohledem na režimy)
  let isEvaluatedCorrect = false;
  if (isAnswerChecked && currentQuestion) {
    if (isTomsModeOn || isTatkasModeOn) {
      isEvaluatedCorrect = true;
    } else if (isVercasModeOn) {
      isEvaluatedCorrect = false;
    } else {
      isEvaluatedCorrect = selectedOption === currentQuestion.correct;
    }
  }

  const questionTextParts = (currentQuestion?.text || "").split(/\((.*?)\)/);

  return (
    <div className="min-h-screen bg-slate-100 flex flex-col font-sans text-slate-800">
      {/* Hlavní panel / HUD */}
      <header className="bg-white px-4 md:px-6 py-4 shadow-sm flex items-center justify-between sticky top-0 z-10">
        <div className="flex items-center gap-3 md:gap-6">
          <div className="flex items-center gap-2 bg-blue-50 px-3 py-1.5 rounded-lg border border-blue-100">
            <Shield className="w-5 h-5 text-blue-600 fill-blue-100" />
            <span className="font-bold text-blue-800">{shields} / {MAX_SHIELDS}</span>
          </div>
          <div className="h-6 w-px bg-slate-200"></div>
          <div className="flex flex-col gap-1">
            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Série do štítu</span>
            <div className="flex gap-1.5">
              {[1, 2, 3, 4, 5].map(i => (
                <div 
                  key={i} 
                  className={`w-2.5 h-2.5 rounded-full transition-colors duration-300 ${streak >= i ? 'bg-green-500 shadow-sm' : 'bg-slate-200'}`} 
                />
              ))}
            </div>
          </div>
        </div>

        {/* Tajné cheatovací menu */}
        <div className="relative">
          <button
            onClick={toggleMenu}
            className="p-2 text-slate-400 hover:bg-slate-100 rounded-full transition-colors"
            title="Více možností"
          >
            <MoreVertical className="w-6 h-6" />
          </button>

          {isMenuOpen && (
            <div className="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-slate-200 py-2 z-50 overflow-hidden">
              {!isCheatMenuExpanded ? (
                <div className="flex flex-col">
                  <button
                    onClick={() => setIsCheatMenuExpanded(true)}
                    className="w-full text-left px-4 py-3 text-sm font-bold text-slate-900 hover:bg-slate-100 transition-colors border-b border-slate-100"
                  >
                    Cheat
                  </button>
                  <button
                    onClick={toggleVercasMode}
                    className="w-full flex items-center justify-between px-4 py-3 text-sm font-bold text-slate-900 hover:bg-slate-100 transition-colors border-b border-slate-100"
                  >
                    <span>Verča’s Mode</span>
                    {isVercasModeOn && <Check className="w-4 h-4 text-green-600" />}
                  </button>
                  <button
                    onClick={toggleTatkasMode}
                    className="w-full flex items-center justify-between px-4 py-3 text-sm font-bold text-slate-900 hover:bg-slate-100 transition-colors"
                  >
                    <span>Taťka’s Mode</span>
                    {isTatkasModeOn && <Check className="w-4 h-4 text-green-600" />}
                  </button>
                </div>
              ) : (
                <div className="flex flex-col">
                  <button
                    onClick={handleWinCheat}
                    className="w-full text-left px-4 py-3 text-sm font-bold text-slate-900 hover:bg-slate-100 transition-colors border-b border-slate-100"
                  >
                    Konec
                  </button>
                  <button
                    onClick={handleCorrectAnswerCheat}
                    className="w-full text-left px-4 py-3 text-sm font-bold text-slate-900 hover:bg-slate-100 transition-colors border-b border-slate-100"
                  >
                    Správná Odpověď
                  </button>
                  <button
                    onClick={toggleTomsMode}
                    className="w-full flex items-center justify-between px-4 py-3 text-sm font-bold text-slate-900 hover:bg-slate-100 transition-colors"
                  >
                    <span>Tom’s Mode</span>
                    {isTomsModeOn && <Check className="w-4 h-4 text-green-600" />}
                  </button>
                </div>
              )}
            </div>
          )}
        </div>
      </header>

      {/* Hlavní obsah */}
      <main className="flex-1 max-w-2xl w-full mx-auto p-4 flex flex-col justify-center">
        
        {/* Karta s otázkou */}
        <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 md:p-8 mb-6">
          <h2 className="text-2xl md:text-3xl font-medium text-slate-800 mb-8 leading-tight text-center">
            {questionTextParts.map((part, i) => 
              i % 2 !== 0 
                ? <span key={i} className="text-blue-600 font-bold border-b-2 border-dashed border-blue-300 mx-1 px-1">({part})</span> 
                : part
            )}
          </h2>

          {/* Možnosti */}
          <div className="space-y-3">
            {currentQuestion?.options.map((opt, idx) => {
              let buttonStyle = "bg-slate-50 border-slate-200 hover:bg-blue-50 hover:border-blue-300 text-slate-700";
              let showCheck = false;
              let showCross = false;
              
              if (isAnswerChecked) {
                if (isTomsModeOn || isTatkasModeOn) {
                  // Všechno kliknuté je správně
                  if (idx === selectedOption) {
                    buttonStyle = "bg-green-100 border-green-500 text-green-800 z-10 ring-1 ring-green-500";
                    showCheck = true;
                  } else {
                    buttonStyle = "bg-slate-50 border-slate-200 text-slate-400 opacity-50";
                  }
                } else if (isVercasModeOn) {
                  // Všechno kliknuté je špatně, ani se neukazuje to správné
                  if (idx === selectedOption) {
                    buttonStyle = "bg-red-50 border-red-300 text-red-700 opacity-70";
                    showCross = true;
                  } else {
                    buttonStyle = "bg-slate-50 border-slate-200 text-slate-400 opacity-50";
                  }
                } else {
                  // Normální režim
                  if (idx === currentQuestion.correct) {
                    buttonStyle = "bg-green-100 border-green-500 text-green-800 z-10 ring-1 ring-green-500";
                    showCheck = true;
                  } else if (idx === selectedOption) {
                    buttonStyle = "bg-red-50 border-red-300 text-red-700 opacity-70";
                    showCross = true;
                  } else {
                    buttonStyle = "bg-slate-50 border-slate-200 text-slate-400 opacity-50";
                  }
                }
              } else if (selectedOption === idx) {
                buttonStyle = "bg-blue-100 border-blue-500 text-blue-800 ring-1 ring-blue-500";
              }

              return (
                <button
                  key={idx}
                  disabled={isAnswerChecked}
                  onClick={() => handleOptionClick(idx)}
                  className={`w-full text-left p-4 rounded-xl border-2 text-xl font-medium transition-all flex items-center justify-between ${buttonStyle}`}
                >
                  {opt}
                  {showCheck && <CheckCircle className="text-green-600 w-6 h-6" />}
                  {showCross && <XCircle className="text-red-500 w-6 h-6" />}
                </button>
              );
            })}
          </div>
        </div>

        {/* Akční tlačítka a zpětná vazba */}
        <div className="min-h-[140px]">
          {!isAnswerChecked ? (
            <button
              onClick={() => checkAnswer()}
              disabled={selectedOption === null}
              className={`w-full py-4 rounded-xl font-bold text-xl transition-all ${
                selectedOption !== null 
                  ? 'bg-blue-600 text-white hover:bg-blue-700 active:scale-95 shadow-md shadow-blue-200' 
                  : 'bg-slate-200 text-slate-400 cursor-not-allowed'
              }`}
            >
              Zkontrolovat
            </button>
          ) : (
            <div className={`rounded-2xl p-5 shadow-sm border ${isEvaluatedCorrect ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'}`}>
              <div className="flex items-start gap-4">
                <div className="mt-1">
                  {isEvaluatedCorrect ? 
                    <div className="bg-green-100 p-2 rounded-full"><CheckCircle className="w-6 h-6 text-green-600" /></div> : 
                    <div className="bg-red-100 p-2 rounded-full"><XCircle className="w-6 h-6 text-red-600" /></div>
                  }
                </div>
                <div className="flex-1">
                  <h3 className={`text-lg font-bold mb-1 ${isEvaluatedCorrect ? 'text-green-800' : 'text-red-800'}`}>
                    {isEvaluatedCorrect ? 'Správně!' : 'Ajaj, chybička... ztrácíš sérii.'}
                  </h3>
                  
                  {/* Vysvětlení se ukáže pouze, pokud není zapnutý žádný ze speciálních módů */}
                  {(!isTomsModeOn && !isVercasModeOn && !isTatkasModeOn) && (
                    <p className="text-slate-700 text-sm leading-relaxed mb-4 font-medium">
                      {currentQuestion?.explanation}
                    </p>
                  )}

                  <button
                    onClick={nextQuestion}
                    className={`w-full mt-4 py-3 px-6 rounded-xl font-bold flex items-center justify-center gap-2 transition-all active:scale-95 ${
                      isEvaluatedCorrect 
                        ? 'bg-green-600 hover:bg-green-700 text-white' 
                        : 'bg-red-600 hover:bg-red-700 text-white'
                    }`}
                  >
                    Pokračovat <ArrowRight className="w-5 h-5" />
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </main>
    </div>
  );
}