// Mini game - Guess the Rune
const Game = ({ skin, onNav }) => {
  const [round, setRound] = React.useState(null);
  const [score, setScore] = React.useState(0);
  const [streak, setStreak] = React.useState(0);
  const [feedback, setFeedback] = React.useState(null);
  const [picked, setPicked] = React.useState(null);
  const [mode, setMode] = React.useState("symbol-to-name");

  const newRound = () => {
    const correct = window.RUNES[Math.floor(Math.random() * 24)];
    const pool = window.RUNES.filter(r => r.id !== correct.id);
    const wrongs = [];
    while (wrongs.length < 3) {
      const idx = Math.floor(Math.random() * pool.length);
      const r = pool.splice(idx, 1)[0];
      wrongs.push(r);
    }
    const choices = [correct, ...wrongs].sort(() => Math.random() - 0.5);
    setRound({ correct, choices });
    setFeedback(null);
    setPicked(null);
  };

  React.useEffect(newRound, [mode]);

  const choose = (r) => {
    if (feedback) return;
    setPicked(r.id);
    if (r.id === round.correct.id) {
      setScore(s => s + 10 + streak);
      setStreak(s => s + 1);
      setFeedback("correct");
    } else {
      setStreak(0);
      setFeedback("wrong");
    }
    setTimeout(newRound, 1400);
  };

  if (!round) return null;

  return (
    <div className="screen wood-grain" style={{ width: "100%", height: "100%", position: "relative", display: "flex", flexDirection: "column" }}>
      <div className="noise"/>
      <StatusBar/>
      <TopBar title="Guess the Rune" subtitle="Mini game" onBack={() => onNav("library")}/>

      <div style={{ display: "flex", justifyContent: "space-around", padding: "0 24px 16px" }}>
        <div style={{ textAlign: "center" }}>
          <div className="font-display" style={{ fontSize: 22, color: "var(--gold)" }}>{score}</div>
          <div style={{ fontSize: 9, color: "var(--ash)", letterSpacing: "0.15em", textTransform: "uppercase" }}>Score</div>
        </div>
        <div style={{ width: 1, background: "rgba(201,168,76,0.15)" }}/>
        <div style={{ textAlign: "center" }}>
          <div className="font-display" style={{ fontSize: 22, color: "var(--gold)" }}>*&nbsp;{streak}</div>
          <div style={{ fontSize: 9, color: "var(--ash)", letterSpacing: "0.15em", textTransform: "uppercase" }}>Streak</div>
        </div>
        <div style={{ width: 1, background: "rgba(201,168,76,0.15)" }}/>
        <div style={{ textAlign: "center" }}>
          <div className="font-display" style={{ fontSize: 22, color: "var(--gold)" }}>{Math.floor(score / 50) + 1}</div>
          <div style={{ fontSize: 9, color: "var(--ash)", letterSpacing: "0.15em", textTransform: "uppercase" }}>Level</div>
        </div>
      </div>

      <div style={{ display: "flex", margin: "0 24px 16px", border: "1px solid rgba(201,168,76,0.15)" }}>
        {[{k:"symbol-to-name",l:"Symbol to Name"},{k:"name-to-symbol",l:"Name to Symbol"}].map(t => (
          <div key={t.k} onClick={() => setMode(t.k)} className="font-display" style={{
            flex: 1, padding: "10px 8px", textAlign: "center",
            fontSize: 9, letterSpacing: "0.15em", textTransform: "uppercase",
            background: mode === t.k ? "rgba(201,168,76,0.1)" : "transparent",
            color: mode === t.k ? "var(--gold)" : "var(--ash)",
            cursor: "pointer"
          }}>{t.l}</div>
        ))}
      </div>

      <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "0 24px" }}>
        <div className="font-archaic" style={{ fontSize: 12, color: "var(--ash)", fontStyle: "italic", letterSpacing: "0.15em", textTransform: "uppercase", marginBottom: 16 }}>Which rune is this?</div>

        {mode === "symbol-to-name" ? (
          <div className="float">
            <RuneTile rune={round.correct} skin={skin} size={130} glow/>
          </div>
        ) : (
          <div className="ornate-card" style={{ padding: "24px 36px", background: "rgba(26,22,18,0.6)" }}>
            <div className="font-display" style={{ fontSize: 32, letterSpacing: "0.15em", color: "var(--gold)" }}>{round.correct.name}</div>
            <div style={{ fontSize: 12, color: "var(--ash)", fontStyle: "italic", textAlign: "center", marginTop: 6 }}>{round.correct.phonetic}</div>
          </div>
        )}

        {feedback && (
          <div className="fade-in" style={{ marginTop: 18, padding: "8px 18px", background: feedback === "correct" ? "rgba(138,180,201,0.15)" : "rgba(107,46,42,0.2)", border: `1px solid ${feedback === "correct" ? "var(--ice)" : "var(--blood)"}`, color: feedback === "correct" ? "var(--ice)" : "#d68080", display: "flex", alignItems: "center", gap: 8, fontFamily: "Cinzel, serif", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>
            {feedback === "correct" ? <><Icon.Check size={14}/> Correct</> : <><Icon.X size={14}/> Wrong - Answer: {round.correct.name}</>}
          </div>
        )}
      </div>

      <div style={{ padding: "16px 24px 110px", display: "grid", gridTemplateColumns: mode === "name-to-symbol" ? "repeat(4, 1fr)" : "repeat(2, 1fr)", gap: 10 }}>
        {round.choices.map(r => {
          const isCorrect = feedback && r.id === round.correct.id;
          const isPicked = picked === r.id;
          const isWrong = feedback === "wrong" && isPicked;
          return (
            <div key={r.id} onClick={() => choose(r)} style={{
              padding: mode === "name-to-symbol" ? "12px 4px" : "12px 14px",
              background: isCorrect ? "rgba(138,180,201,0.15)" : isWrong ? "rgba(107,46,42,0.2)" : "rgba(26,22,18,0.6)",
              border: `1px solid ${isCorrect ? "var(--ice)" : isWrong ? "var(--blood)" : "rgba(201,168,76,0.2)"}`,
              cursor: feedback ? "default" : "pointer",
              textAlign: "center",
              transition: "all 0.2s"
            }}>
              {mode === "symbol-to-name" ? (
                <div className="font-display" style={{ fontSize: 14, color: "var(--ivory)", letterSpacing: "0.05em" }}>{r.name}</div>
              ) : (
                <span className="rune-glyph" style={{ fontSize: 30, color: "var(--ivory)" }}>{r.symbol}</span>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

window.Game = Game;