import { useState, useEffect, useCallback } from "react";

const TEACHER_CODE = "lehrer123";
const STORAGE = {
  WORDS: "tk_words_v2",
  ROUND: "tk_round_v2",
  RESULTS: "tk_results_v2",
  LEADERBOARD: "tk_leaderboard_v2",
  PHASE: "tk_phase_v2",
  ROUND_START: "tk_round_start_v2",
};

// Speed bonus over 20 seconds: 10 pts (0-2s), 9 pts (2-4s), ..., 1 pt (18-20s+)
const calcPoints = (elapsedMs) => {
  const secs = elapsedMs / 1000;
  return Math.max(1, 10 - Math.floor(secs / 2));
};

const fonts = `@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800;900&family=Nunito:wght@400;600;700;800&display=swap');`;

export default function App() {
  const [role, setRole] = useState(null);
  const [name, setName] = useState("");
  const [nameInput, setNameInput] = useState("");
  const [codeInput, setCodeInput] = useState("");

  // Game state (synced via storage)
  const [words, setWords] = useState([]);
  const [round, setRound] = useState(0); // 0-based index into words
  const [phase, setPhase] = useState("waiting");
  const [roundResults, setRoundResults] = useState({});
  const [leaderboard, setLeaderboard] = useState({});
  const [roundStart, setRoundStart] = useState(null);

  // Local state
  const [answer, setAnswer] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const [myLastResult, setMyLastResult] = useState(null);

  // Admin word setup
  const [wordInputs, setWordInputs] = useState(Array(10).fill(""));
  const [setupDone, setSetupDone] = useState(false);
  const [actionLoading, setActionLoading] = useState(false);
  const [actionError, setActionError] = useState(null);

  const poll = useCallback(async () => {
    try {
      const [wRes, rRes, pRes, rrRes, lbRes, rsRes] = await Promise.all([
        window.storage.get(STORAGE.WORDS, true).catch(() => null),
        window.storage.get(STORAGE.ROUND, true).catch(() => null),
        window.storage.get(STORAGE.PHASE, true).catch(() => null),
        window.storage.get(STORAGE.RESULTS, true).catch(() => null),
        window.storage.get(STORAGE.LEADERBOARD, true).catch(() => null),
        window.storage.get(STORAGE.ROUND_START, true).catch(() => null),
      ]);
      if (wRes?.value) {
        const w = JSON.parse(wRes.value);
        setWords(w);
        if (w.length > 0) setSetupDone(true);
      }
      if (rRes?.value) setRound(parseInt(rRes.value));
      if (pRes?.value) setPhase(pRes.value);
      if (rrRes?.value) setRoundResults(JSON.parse(rrRes.value));
      if (lbRes?.value) setLeaderboard(JSON.parse(lbRes.value));
      if (rsRes?.value) setRoundStart(parseInt(rsRes.value));
    } catch {}
  }, []);

  useEffect(() => {
    if (!role) return;
    poll();
    const id = setInterval(poll, 1500);
    return () => clearInterval(id);
  }, [role, poll]);

  // Reset local answer state when round changes
  useEffect(() => {
    setAnswer("");
    setSubmitted(false);
    setMyLastResult(null);
  }, [round, phase]);

  // ---- TEACHER ACTIONS ----

  const saveWords = async () => {
    const filtered = wordInputs.map(w => w.trim()).filter(Boolean);
    if (filtered.length < 2) { alert("Bitte mindestens 2 Wörter eingeben!"); return; }
    await window.storage.set(STORAGE.WORDS, JSON.stringify(filtered), true);
    await window.storage.set(STORAGE.ROUND, "0", true);
    await window.storage.set(STORAGE.PHASE, "waiting", true);
    await window.storage.set(STORAGE.RESULTS, JSON.stringify({}), true);
    await window.storage.set(STORAGE.LEADERBOARD, JSON.stringify({}), true);
    setSetupDone(true);
    poll();
  };

  const startRound = async () => {
    setActionLoading(true);
    setActionError(null);
    try {
      const now = Date.now();
      await window.storage.set(STORAGE.RESULTS, JSON.stringify({}), true);
      await window.storage.set(STORAGE.PHASE, "active", true);
      await window.storage.set(STORAGE.ROUND_START, String(now), true);
      // Immediately update local state so UI responds even before poll
      setPhase("active");
      setRoundResults({});
      setRoundStart(now);
      await poll();
    } catch(e) {
      setActionError("Fehler: " + (e?.message || "Unbekannt"));
    } finally {
      setActionLoading(false);
    }
  };

  const endRound = async () => {
    setActionLoading(true);
    setActionError(null);
    try {
      await window.storage.set(STORAGE.PHASE, "roundover", true);
      setPhase("roundover");
      await poll();
    } catch(e) {
      setActionError("Fehler: " + (e?.message || "Unbekannt"));
    } finally {
      setActionLoading(false);
    }
  };

  const nextRound = async () => {
    setActionLoading(true);
    setActionError(null);
    try {
      const nextIdx = round + 1;
      if (nextIdx >= words.length) {
        await window.storage.set(STORAGE.PHASE, "gameover", true);
        setPhase("gameover");
      } else {
        const now = Date.now();
        await window.storage.set(STORAGE.ROUND, String(nextIdx), true);
        await window.storage.set(STORAGE.RESULTS, JSON.stringify({}), true);
        await window.storage.set(STORAGE.PHASE, "active", true);
        await window.storage.set(STORAGE.ROUND_START, String(now), true);
        setRound(nextIdx);
        setRoundResults({});
        setPhase("active");
        setRoundStart(now);
      }
      await poll();
    } catch(e) {
      setActionError("Fehler: " + (e?.message || "Unbekannt"));
    } finally {
      setActionLoading(false);
    }
  };

  const resetAll = async () => {
    if (!confirm("Alles zurücksetzen?")) return;
    await Promise.all(Object.values(STORAGE).map(k => window.storage.set(k, k === STORAGE.WORDS ? JSON.stringify(words) : k === STORAGE.LEADERBOARD ? JSON.stringify({}) : k === STORAGE.ROUND ? "0" : k === STORAGE.PHASE ? "waiting" : JSON.stringify({}), true).catch(() => {})));
    setSetupDone(true);
    poll();
  };

  // ---- STUDENT ACTIONS ----

  const submitAnswer = async () => {
    if (!answer.trim() || submitted || phase !== "active") return;
    const currentWord = words[round] || "";
    const correct = answer.trim().toLowerCase() === currentWord.toLowerCase();
    const now = Date.now();
    const elapsed = roundStart ? now - roundStart : 9999;
    const points = correct ? calcPoints(elapsed) : 0;
    setMyLastResult({ correct, answer: answer.trim(), word: currentWord, points, elapsed });
    setSubmitted(true);

    // Save to round results
    const rrRes = await window.storage.get(STORAGE.RESULTS, true).catch(() => null);
    const rr = rrRes?.value ? JSON.parse(rrRes.value) : {};
    rr[name] = { correct, answer: answer.trim(), time: now, points };
    await window.storage.set(STORAGE.RESULTS, JSON.stringify(rr), true);

    // Update leaderboard
    const lbRes = await window.storage.get(STORAGE.LEADERBOARD, true).catch(() => null);
    const lb = lbRes?.value ? JSON.parse(lbRes.value) : {};
    if (!lb[name]) lb[name] = { points: 0, total: 0 };
    lb[name].total += 1;
    lb[name].points = (lb[name].points || 0) + points;
    await window.storage.set(STORAGE.LEADERBOARD, JSON.stringify(lb), true);
  };

  // ---- DERIVED ----
  const currentWord = words[round] || "";
  const resultsList = Object.entries(roundResults)
    .map(([n, r]) => ({ name: n, ...r }))
    .sort((a, b) => a.time - b.time);
  const lbSorted = Object.entries(leaderboard)
    .map(([n, s]) => ({ name: n, ...s }))
    .sort((a, b) => (b.points || 0) - (a.points || 0));
  const medals = ["🥇", "🥈", "🥉"];

  // ---- STYLES ----
  const S = {
    page: { minHeight: "100vh", background: "#0F172A", color: "#F1F5F9", fontFamily: "'Nunito',sans-serif" },
    center: { maxWidth: 520, margin: "0 auto", padding: "1.5rem 1rem" },
    card: (extra = {}) => ({ background: "#1E293B", border: "1.5px solid rgba(255,255,255,0.07)", borderRadius: 16, padding: "1.25rem", marginBottom: "1rem", ...extra }),
    input: { width: "100%", background: "#0F172A", border: "1.5px solid rgba(255,255,255,0.12)", borderRadius: 10, padding: "0.65rem 1rem", color: "#F1F5F9", fontSize: "1rem", outline: "none", boxSizing: "border-box" },
    btn: (bg, extra = {}) => ({ border: "none", borderRadius: 10, padding: "0.7rem 1.25rem", background: bg, color: "#fff", fontWeight: 800, fontSize: "0.95rem", cursor: "pointer", width: "100%", marginTop: "0.6rem", ...extra }),
    label: { fontSize: "0.72rem", color: "#64748B", fontWeight: 700, textTransform: "uppercase", letterSpacing: 1, marginBottom: "0.35rem", display: "block" },
  };

  // ---- LOGIN SCREEN ----
  if (!role) return (
    <div style={{ ...S.page, display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh" }}>
      <style>{fonts}</style>
      <div style={{ width: "100%", maxWidth: 400, padding: "1.5rem" }}>
        <div style={{ textAlign: "center", marginBottom: "2rem" }}>
          <div style={{ fontSize: "3.5rem" }}>🧑‍🏫</div>
          <h1 style={{ fontFamily: "'Baloo 2',cursive", fontSize: "2rem", margin: "0.25rem 0 0.5rem", color: "#FFD93D" }}>Tipp-Klasse</h1>
          <p style={{ color: "#64748B", fontSize: "0.9rem" }}>Diktat-Spiel für die ganze Klasse</p>
        </div>

        <div style={S.card()}>
          <label style={S.label}>Als Schüler:in einloggen</label>
          <input style={S.input} placeholder="Dein Name" value={nameInput} onChange={e => setNameInput(e.target.value)} onKeyDown={e => e.key === "Enter" && nameInput.trim() && (setName(nameInput.trim()), setRole("student"))} />
          <button style={S.btn("linear-gradient(135deg,#3B82F6,#6366F1)")} onClick={() => { if (nameInput.trim()) { setName(nameInput.trim()); setRole("student"); } }}>
            Mitspielen →
          </button>
        </div>

        <div style={S.card()}>
          <label style={S.label}>Als Lehrperson einloggen</label>
          <input style={{ ...S.input, marginBottom: "0.4rem" }} type="password" placeholder="Passwort" value={codeInput} onChange={e => setCodeInput(e.target.value)} onKeyDown={e => e.key === "Enter" && (codeInput === TEACHER_CODE ? (setRole("teacher"), setName("Lehrperson")) : alert("Falsches Passwort!"))} />
          <button style={S.btn("#475569")} onClick={() => { if (codeInput === TEACHER_CODE) { setRole("teacher"); setName("Lehrperson"); } else alert("Falsches Passwort!"); }}>
            Als Lehrperson einloggen
          </button>
        </div>
      </div>
    </div>
  );

  // ---- TEACHER SCREEN ----
  if (role === "teacher") return (
    <div style={S.page}>
      <style>{fonts}</style>
      <header style={{ background: "#1E293B", padding: "0.85rem 1.25rem", borderBottom: "2px solid rgba(255,255,255,0.06)", display: "flex", alignItems: "center", gap: "0.75rem" }}>
        <span style={{ fontSize: "1.3rem" }}>🧑‍🏫</span>
        <span style={{ fontFamily: "'Baloo 2',cursive", fontWeight: 800, fontSize: "1.1rem", color: "#FFD93D", flex: 1 }}>Tipp-Klasse · Lehrperson</span>
        {words.length > 0 && <span style={{ fontSize: "0.75rem", color: "#94A3B8", background: "#0F172A", padding: "0.25rem 0.75rem", borderRadius: 99 }}>Runde {round + 1} / {words.length}</span>}
      </header>

      <div style={{ maxWidth: 760, margin: "0 auto", padding: "1.25rem 1rem" }}>
        {/* Word setup */}
        {(!setupDone || words.length === 0) ? (
          <div style={S.card()}>
            <h2 style={{ fontFamily: "'Baloo 2',cursive", color: "#FFD93D", margin: "0 0 0.75rem" }}>📝 Wörter eingeben</h2>
            <p style={{ color: "#64748B", fontSize: "0.85rem", marginBottom: "1rem" }}>Gib bis zu 10 Wörter ein. Mit Enter springst du zum nächsten Feld.</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.6rem" }}>
              {wordInputs.map((w, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
                  <span style={{ color: "#475569", fontSize: "0.8rem", width: 20, textAlign: "right", flexShrink: 0 }}>{i + 1}.</span>
                  <input
                    className={`wi-${i}`}
                    style={{ ...S.input, fontSize: "0.95rem" }}
                    placeholder={`Wort ${i + 1}`}
                    value={w}
                    onChange={e => { const c = [...wordInputs]; c[i] = e.target.value; setWordInputs(c); }}
                    onKeyDown={e => { if (e.key === "Enter") document.querySelector(`.wi-${i + 1}`)?.focus(); }}
                  />
                </div>
              ))}
            </div>
            <button style={S.btn("linear-gradient(135deg,#22C55E,#16A34A)")} onClick={saveWords}>
              ✅ Wörter speichern & Spiel starten
            </button>
          </div>
        ) : (
          <>
            {/* Word list overview */}
            <div style={S.card()}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.75rem" }}>
                <h3 style={{ fontFamily: "'Baloo 2',cursive", color: "#94A3B8", margin: 0, fontSize: "0.9rem" }}>📋 Wortliste</h3>
                <button onClick={() => { setSetupDone(false); setWordInputs(words.concat(Array(10).fill("")).slice(0, 10)); }} style={{ background: "none", border: "1px solid #334155", borderRadius: 8, padding: "0.2rem 0.75rem", color: "#94A3B8", cursor: "pointer", fontSize: "0.78rem" }}>✏️ Bearbeiten</button>
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: "0.4rem" }}>
                {words.map((w, i) => (
                  <span key={i} style={{ padding: "0.25rem 0.75rem", borderRadius: 99, background: i === round && phase !== "waiting" ? "rgba(255,211,61,0.2)" : "#0F172A", border: `1.5px solid ${i === round && phase !== "waiting" ? "#FFD93D" : "#1E3A5F"}`, color: i < round ? "#334155" : i === round ? "#FFD93D" : "#94A3B8", fontSize: "0.82rem", fontWeight: 700, textDecoration: i < round ? "line-through" : "none" }}>
                    {i + 1}. {w}
                  </span>
                ))}
              </div>
            </div>

            {/* Game controls */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}>
              <div>
                {/* Current round card */}
                <div style={S.card({ background: "rgba(255,211,61,0.06)", border: "2px solid rgba(255,211,61,0.2)" })}>
                  <p style={{ fontSize: "0.7rem", color: "#F59E0B", fontWeight: 700, margin: "0 0 0.25rem", letterSpacing: 1, textTransform: "uppercase" }}>
                    {phase === "gameover" ? "Spiel beendet" : `Runde ${round + 1} von ${words.length}`}
                  </p>
                  {phase !== "gameover" && (
                    <p style={{ fontFamily: "'Baloo 2',cursive", fontSize: "clamp(2rem,8vw,3.5rem)", fontWeight: 900, color: "#FDE68A", letterSpacing: "0.1em", margin: "0 0 0.5rem" }}>
                      {currentWord}
                    </p>
                  )}
                  {phase === "waiting" && (
                    <button style={S.btn(actionLoading ? "#334155" : "linear-gradient(135deg,#22C55E,#16A34A)")} onClick={startRound} disabled={actionLoading}>
                      {actionLoading ? "⏳ Starte..." : "▶ Runde starten"}
                    </button>
                  )}
                  {actionError && <p style={{ color: "#EF4444", fontSize: "0.78rem", marginTop: "0.4rem" }}>{actionError}</p>}
                  {phase === "active" && (
                    <button style={S.btn(actionLoading ? "#334155" : "#F59E0B")} onClick={endRound} disabled={actionLoading}>
                      {actionLoading ? "⏳ Bitte warten..." : "⏹ Runde beenden"}
                    </button>
                  )}
                  {phase === "roundover" && (
                    <button style={S.btn(actionLoading ? "#334155" : round + 1 < words.length ? "linear-gradient(135deg,#3B82F6,#6366F1)" : "linear-gradient(135deg,#22C55E,#16A34A)")} onClick={nextRound} disabled={actionLoading}>
                      {actionLoading ? "⏳ Bitte warten..." : round + 1 < words.length ? "➡ Nächstes Wort" : "🏁 Ergebnis anzeigen"}
                    </button>
                  )}
                  {phase === "gameover" && (
                    <button style={S.btn("#EF4444")} onClick={resetAll}>🔄 Neues Spiel</button>
                  )}
                  <div style={{ display: "flex", gap: "0.3rem", marginTop: "0.5rem" }}>
                    <span style={{ fontSize: "0.72rem", color: "#475569", padding: "0.2rem 0.5rem", background: "#0F172A", borderRadius: 6 }}>
                      {phase === "waiting" ? "⏸ Warte" : phase === "active" ? "🟢 Aktiv" : phase === "roundover" ? "🟡 Beendet" : "🏁 Fertig"}
                    </span>
                    <span style={{ fontSize: "0.72rem", color: "#475569", padding: "0.2rem 0.5rem", background: "#0F172A", borderRadius: 6 }}>
                      {resultsList.length} Antworten
                    </span>
                  </div>
                </div>

                {/* Live answers */}
                <div style={S.card()}>
                  <h3 style={{ fontFamily: "'Baloo 2',cursive", color: "#94A3B8", fontSize: "0.88rem", margin: "0 0 0.6rem" }}>🎯 Antworten live</h3>
                  {resultsList.length === 0
                    ? <p style={{ color: "#334155", textAlign: "center", padding: "1rem 0", fontSize: "0.85rem" }}>Warte auf Antworten... ⏳</p>
                    : resultsList.map((r, i) => (
                      <div key={i} style={{ display: "flex", alignItems: "center", gap: "0.5rem", background: r.correct ? "rgba(34,197,94,0.08)" : "rgba(239,68,68,0.08)", border: `1px solid ${r.correct ? "#22C55E" : "#EF4444"}22`, borderRadius: 9, padding: "0.4rem 0.75rem", marginBottom: "0.3rem" }}>
                        <span>{r.correct ? "✅" : "❌"}</span>
                        <span style={{ flex: 1, fontWeight: 700, fontSize: "0.85rem" }}>{r.name}</span>
    <span style={{ fontFamily: "monospace", background: "#0F172A", padding: "0.1rem 0.5rem", borderRadius: 5, fontSize: "0.8rem", color: r.correct ? "#4ADE80" : "#FCA5A5" }}>{r.answer}</span>
                        {r.correct && <span style={{ fontSize: "0.75rem", color: "#FFD93D", fontWeight: 700 }}>+{r.points}P</span>}
                      </div>
                    ))
                  }
                </div>
              </div>

              {/* Leaderboard */}
              <div style={S.card()}>
                <h3 style={{ fontFamily: "'Baloo 2',cursive", color: "#FFD93D", fontSize: "1rem", margin: "0 0 0.75rem" }}>🏆 Leaderboard</h3>
                {lbSorted.length === 0
                  ? <p style={{ color: "#334155", textAlign: "center", padding: "1.5rem 0", fontSize: "0.85rem" }}>Noch keine Punkte</p>
                  : lbSorted.map((e, i) => (
                    <div key={e.name} style={{ display: "flex", alignItems: "center", gap: "0.6rem", padding: "0.5rem 0.75rem", borderRadius: 10, background: i === 0 ? "rgba(255,211,61,0.1)" : "#0F172A", border: `1px solid ${i === 0 ? "rgba(255,211,61,0.3)" : "transparent"}`, marginBottom: "0.35rem" }}>
                      <span style={{ fontSize: "1.1rem", width: 28 }}>{medals[i] || `${i + 1}.`}</span>
                      <span style={{ flex: 1, fontWeight: 700, fontSize: "0.9rem" }}>{e.name}</span>
                      <div style={{ textAlign: "right" }}>
                        <span style={{ fontFamily: "'Baloo 2',cursive", fontWeight: 800, color: "#FFD93D", fontSize: "1.1rem" }}>{e.points || 0}</span>
                        <span style={{ color: "#475569", fontSize: "0.75rem" }}> Pkt</span>
                      </div>
                    </div>
                  ))
                }
                {lbSorted.length > 0 && (
                  <button onClick={resetAll} style={{ ...S.btn("#334155"), marginTop: "1rem", fontSize: "0.78rem", padding: "0.45rem" }}>🔄 Neues Spiel</button>
                )}
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );

  // ---- STUDENT SCREEN ----
  return (
    <div style={S.page}>
      <style>{fonts + `@keyframes pop{from{transform:scale(0.85);opacity:0}to{transform:scale(1);opacity:1}} @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}`}</style>
      <header style={{ background: "#1E293B", padding: "0.85rem 1.25rem", borderBottom: "2px solid rgba(255,255,255,0.06)", display: "flex", alignItems: "center", gap: "0.75rem" }}>
        <span style={{ fontSize: "1.2rem" }}>🧑‍🎓</span>
        <span style={{ fontWeight: 800, flex: 1 }}>{name}</span>
        {words.length > 0 && phase !== "waiting" && (
          <span style={{ fontSize: "0.75rem", color: "#94A3B8", background: "#0F172A", padding: "0.25rem 0.75rem", borderRadius: 99 }}>
            {round + 1} / {words.length}
          </span>
        )}
        <span style={{ color: "#22C55E", fontSize: "0.72rem", fontWeight: 700, animation: "pulse 2s infinite" }}>● LIVE</span>
      </header>

      <div style={S.center}>
        {/* WAITING */}
        {(phase === "waiting" || words.length === 0) && (
          <div style={{ textAlign: "center", padding: "3rem 1rem" }}>
            <div style={{ fontSize: "4rem", animation: "bounce 2s infinite", marginBottom: "1rem" }}>⏳</div>
            <h2 style={{ fontFamily: "'Baloo 2',cursive", fontSize: "1.5rem" }}>Warte auf die Lehrperson...</h2>
            <p style={{ color: "#64748B" }}>Die Aufgabe erscheint gleich hier!</p>
            {lbSorted.length > 0 && (
              <div style={{ ...S.card({ marginTop: "2rem", textAlign: "left" }) }}>
                <h3 style={{ fontFamily: "'Baloo 2',cursive", color: "#FFD93D", margin: "0 0 0.75rem" }}>🏆 Aktueller Stand</h3>
                {lbSorted.slice(0, 5).map((e, i) => (
                  <div key={e.name} style={{ display: "flex", alignItems: "center", gap: "0.6rem", padding: "0.4rem 0", borderBottom: "1px solid rgba(255,255,255,0.04)" }}>
                    <span style={{ width: 24 }}>{medals[i] || `${i + 1}.`}</span>
                    <span style={{ flex: 1, fontWeight: e.name === name ? 800 : 400, color: e.name === name ? "#FFD93D" : "#F1F5F9" }}>{e.name}{e.name === name ? " (du)" : ""}</span>
<span style={{ fontWeight: 800, color: "#FFD93D" }}>{e.points || 0} Pkt</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {/* ACTIVE - not submitted */}
        {phase === "active" && !submitted && (
          <div style={{ animation: "pop 0.3s ease" }}>
            <p style={{ textAlign: "center", color: "#94A3B8", fontSize: "0.85rem", marginBottom: "0.75rem" }}>Tippe dieses Wort ab:</p>
            <div style={{ textAlign: "center", marginBottom: "2rem" }}>
              <div style={{ fontFamily: "'Baloo 2',cursive", fontSize: "clamp(3rem,12vw,4.5rem)", fontWeight: 900, color: "#FFD93D", letterSpacing: "0.08em", background: "rgba(255,211,61,0.08)", border: "2px solid rgba(255,211,61,0.25)", borderRadius: 20, padding: "1rem 2rem", display: "inline-block" }}>
                {currentWord}
              </div>
            </div>
            <div style={{ display: "flex", gap: "0.6rem" }}>
              <input
                autoFocus
                style={{ ...S.input, flex: 1, fontSize: "1.3rem", textAlign: "center", fontWeight: 700 }}
                placeholder="Hier tippen..."
                value={answer}
                onChange={e => setAnswer(e.target.value)}
                onKeyDown={e => e.key === "Enter" && submitAnswer()}
              />
              <button style={{ ...S.btn("#22C55E", { width: "auto", padding: "0 1.25rem", marginTop: 0, fontSize: "1.3rem" }) }} onClick={submitAnswer}>✓</button>
            </div>
            <p style={{ textAlign: "center", color: "#475569", fontSize: "0.78rem", marginTop: "0.5rem" }}>Enter oder ✓ zum Absenden</p>
            {leaderboard[name] && (
              <p style={{ textAlign: "center", marginTop: "1rem", fontSize: "0.82rem" }}>
                <span style={{ color: "#475569" }}>Dein Stand: </span>
                <strong style={{ color: "#FFD93D" }}>{leaderboard[name].correct} Punkte</strong>
                <span style={{ color: "#475569" }}> aus {leaderboard[name].total} Runden</span>
              </p>
            )}
          </div>
        )}

        {/* ACTIVE - submitted */}
        {phase === "active" && submitted && myLastResult && (
          <div style={{ textAlign: "center", animation: "pop 0.3s ease" }}>
            <div style={{ fontSize: "5rem", marginBottom: "0.5rem" }}>{myLastResult.correct ? "🎉" : "😅"}</div>
            <h2 style={{ fontFamily: "'Baloo 2',cursive", fontSize: "2rem", color: myLastResult.correct ? "#22C55E" : "#EF4444", margin: "0 0 0.5rem" }}>
  {myLastResult.correct ? `Richtig! +${myLastResult.points} Punkte 🌟` : "Nicht ganz..."}
            </h2>
<p style={{ color: "#94A3B8" }}>Du hast getippt: <strong style={{ color: "#F1F5F9" }}>{myLastResult.answer}</strong></p>
            {myLastResult.correct && <p style={{ color: "#94A3B8", fontSize: "0.82rem" }}>Zeit: {(myLastResult.elapsed / 1000).toFixed(1)}s</p>}
            {!myLastResult.correct && <p style={{ color: "#FDE68A" }}>Richtig wäre: <strong>{myLastResult.word}</strong></p>}
            {leaderboard[name] && (
              <div style={{ display: "inline-block", background: "rgba(255,211,61,0.1)", border: "1.5px solid rgba(255,211,61,0.3)", borderRadius: 12, padding: "0.6rem 1.5rem", margin: "1rem 0" }}>
                <p style={{ fontSize: "0.72rem", color: "#94A3B8", margin: "0 0 0.1rem" }}>Mein Gesamtstand</p>
  <p style={{ fontFamily: "'Baloo 2',cursive", fontSize: "1.5rem", fontWeight: 800, color: "#FFD93D", margin: 0 }}>{leaderboard[name].points || 0} Punkte</p>
              </div>
            )}
            <p style={{ color: "#64748B", fontSize: "0.85rem", animation: "pulse 2s infinite" }}>Warte auf die nächste Runde...</p>
          </div>
        )}

        {/* ROUND OVER */}
        {phase === "roundover" && (
          <div>
            <h2 style={{ fontFamily: "'Baloo 2',cursive", textAlign: "center", color: "#94A3B8", margin: "0 0 1rem" }}>Rundenauswertung</h2>
            <div style={S.card({ background: "rgba(255,211,61,0.06)", border: "2px solid rgba(255,211,61,0.2)", textAlign: "center" })}>
              <p style={{ color: "#F59E0B", fontSize: "0.75rem", fontWeight: 700, margin: "0 0 0.25rem" }}>Wort war:</p>
              <p style={{ fontFamily: "'Baloo 2',cursive", fontSize: "2.5rem", fontWeight: 900, color: "#FDE68A", margin: 0 }}>{currentWord}</p>
            </div>
            {myLastResult && (
              <div style={S.card({ background: myLastResult.correct ? "rgba(34,197,94,0.08)" : "rgba(239,68,68,0.08)", border: `1.5px solid ${myLastResult.correct ? "#22C55E" : "#EF4444"}` })}>
                <p style={{ textAlign: "center", fontWeight: 800, color: myLastResult.correct ? "#22C55E" : "#EF4444", margin: 0, fontSize: "1.1rem" }}>
                  {myLastResult.correct ? "✅ Deine Antwort war richtig!" : `❌ Du hast „${myLastResult.answer}" geschrieben`}
                </p>
              </div>
            )}
            <div style={S.card()}>
              <h3 style={{ fontFamily: "'Baloo 2',cursive", color: "#94A3B8", fontSize: "0.88rem", margin: "0 0 0.6rem" }}>Alle Antworten dieser Runde:</h3>
              {resultsList.map((r, i) => (
                <div key={i} style={{ display: "flex", gap: "0.5rem", alignItems: "center", padding: "0.35rem 0.6rem", borderRadius: 8, background: r.correct ? "rgba(34,197,94,0.06)" : "rgba(239,68,68,0.06)", marginBottom: "0.3rem" }}>
                  <span>{r.correct ? "✅" : "❌"}</span>
                  <span style={{ flex: 1, fontWeight: r.name === name ? 800 : 400, color: r.name === name ? "#FFD93D" : "#F1F5F9", fontSize: "0.88rem" }}>{r.name}{r.name === name ? " (du)" : ""}</span>
                  <span style={{ fontFamily: "monospace", color: r.correct ? "#4ADE80" : "#FCA5A5", fontSize: "0.82rem" }}>{r.answer}</span>
                </div>
              ))}
            </div>
            <p style={{ color: "#64748B", fontSize: "0.85rem", textAlign: "center", animation: "pulse 2s infinite" }}>Warte auf nächste Runde...</p>
          </div>
        )}

        {/* GAME OVER */}
        {phase === "gameover" && (
          <div style={{ animation: "pop 0.3s ease" }}>
            <div style={{ textAlign: "center", marginBottom: "1.5rem" }}>
              <div style={{ fontSize: "3.5rem" }}>🏁</div>
              <h1 style={{ fontFamily: "'Baloo 2',cursive", fontSize: "2rem", color: "#FFD93D", margin: "0.25rem 0" }}>Spiel beendet!</h1>
            </div>
            <div style={S.card()}>
              <h3 style={{ fontFamily: "'Baloo 2',cursive", color: "#FFD93D", margin: "0 0 1rem", fontSize: "1.1rem" }}>🏆 Endauswertung</h3>
              {lbSorted.map((e, i) => (
                <div key={e.name} style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.6rem 0.9rem", borderRadius: 12, background: e.name === name ? "rgba(255,211,61,0.1)" : i === 0 ? "rgba(255,211,61,0.06)" : "#0F172A", border: `1.5px solid ${e.name === name ? "rgba(255,211,61,0.4)" : i === 0 ? "rgba(255,211,61,0.2)" : "transparent"}`, marginBottom: "0.4rem" }}>
                  <span style={{ fontSize: "1.3rem", width: 32 }}>{medals[i] || `${i + 1}.`}</span>
                  <span style={{ flex: 1, fontWeight: 700, color: e.name === name ? "#FFD93D" : "#F1F5F9" }}>{e.name}{e.name === name ? " (du)" : ""}</span>
                  <div>
<span style={{ fontFamily: "'Baloo 2',cursive", fontSize: "1.3rem", fontWeight: 900, color: "#FFD93D" }}>{e.points || 0}</span>
                    <span style={{ color: "#475569", fontSize: "0.8rem" }}> Punkte</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}