import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

const challenges = {
  "qr1": { question: "Jaka jest stolica Francji?", answer: "paryz" },
  "qr2": { question: "2 + 2 * 2 = ?", answer: "6" },
  "qr3": { question: "Jaki jest główny port HTTP?", answer: "80" },
};

export default function HackmeGame() {
  const [currentChallenge, setCurrentChallenge] = useState(null);
  const [userAnswer, setUserAnswer] = useState("");
  const [score, setScore] = useState(0);
  const [message, setMessage] = useState("");

  const handleQRScan = (code) => {
    if (challenges[code]) {
      setCurrentChallenge(challenges[code]);
      setMessage("");
    } else {
      setMessage("Niepoprawny kod QR!");
    }
  };

  const checkAnswer = () => {
    if (userAnswer.toLowerCase() === currentChallenge.answer) {
      setScore(score + 1);
      setMessage("Poprawna odpowiedź! Szukaj następnego kodu QR.");
      setCurrentChallenge(null);
    } else {
      setMessage("Niepoprawna odpowiedź, spróbuj ponownie.");
    }
    setUserAnswer("");
  };

  return (
    <div className="p-4 max-w-md mx-auto text-center">
      <h1 className="text-xl font-bold">HackMe QR Challenge</h1>
      <p className="mb-4">Skanuj kody QR i rozwiązuj zagadki!</p>
      <Card>
        <CardContent className="p-4">
          <p className="text-lg">Twoje punkty: {score}</p>
          <Button onClick={() => handleQRScan(prompt("Wpisz kod QR (np. qr1, qr2, qr3)", "qr1"))}>Skanuj Kod QR</Button>
        </CardContent>
      </Card>
      {currentChallenge && (
        <Card className="mt-4">
          <CardContent className="p-4">
            <p className="text-lg">{currentChallenge.question}</p>
            <input
              type="text"
              className="border p-2 w-full mt-2"
              placeholder="Twoja odpowiedź"
              value={userAnswer}
              onChange={(e) => setUserAnswer(e.target.value)}
            />
            <Button className="mt-2" onClick={checkAnswer}>Sprawdź</Button>
          </CardContent>
        </Card>
      )}
      {message && <p className="mt-4 text-red-500">{message}</p>}
    </div>
  );
}