/* Role reveal — shown to a player once, after the GM deals roles */
(function () {
  const { useState } = React;
  const S = () => window.TraitorsStore;

  function RoleReveal({ snap }) {
    const [revealed, setRevealed] = useState(false);
    const [busy, setBusy] = useState(false);
    const role = snap.myRole;
    const traitor = role === "traitor";

    async function ack() {
      setBusy(true);
      try { await S().ackRole(); } catch (e) { setBusy(false); }
    }

    if (!revealed) {
      return (
        <div className="t-screen t-center t-enter" style={{ gap: 18 }}>
          <div style={{ flex: 1 }} />
          <Candle scale={1.6} />
          <p className="t-eyebrow">Your allegiance awaits</p>
          <h2 className="t-h2" style={{ maxWidth: 300 }}>Shield your screen</h2>
          <p className="t-body" style={{ maxWidth: 300 }}>
            Make sure no one is watching. Your secret is for your eyes only.
          </p>
          <div style={{ flex: 1 }} />
          <button className="t-btn t-btn--gold" style={{ maxWidth: 340 }} onClick={() => setRevealed(true)}>
            Reveal my role
          </button>
        </div>
      );
    }

    const accent = traitor ? "var(--t-traitor-glow)" : "var(--t-faithful-glow)";
    const deep = traitor ? "var(--t-traitor-deep)" : "var(--t-faithful-deep)";
    return (
      <div className="t-screen t-center t-enter" style={{ gap: 16 }}>
        <div style={{ flex: 1 }} />
        <div className="t-card" style={{
          width: "100%", maxWidth: 360, padding: "34px 24px", textAlign: "center",
          border: `1px solid ${accent}`, boxShadow: `0 0 60px ${deep}, inset 0 1px 0 rgba(255,255,255,.04)`,
          background: `radial-gradient(120% 90% at 50% 0%, ${deep} 0%, var(--t-panel) 60%)`,
        }}>
          <div style={{ fontSize: "3rem", color: accent, lineHeight: 1, marginBottom: 6 }}>{traitor ? "✦" : "✚"}</div>
          <p className="t-kicker" style={{ marginBottom: 8 }}>You are a</p>
          <div style={{ fontWeight: 900, fontSize: "2.6rem", letterSpacing: ".02em", color: accent, textShadow: `0 0 30px ${accent}66` }}>
            {traitor ? "TRAITOR" : "FAITHFUL"}
          </div>
          <div style={{ margin: "18px 0" }}><Rule /></div>
          <p className="t-body" style={{ fontSize: ".95rem" }}>
            {traitor
              ? "Deceive the Faithful. Complete your secret tasks, murder by night, and evade the Round Table to bank the most points."
              : "Root out the Traitors. Win missions, vote wisely at the Round Table, and survive the night to climb the scoreboard."}
          </p>
        </div>
        <div style={{ flex: 1 }} />
        <button className="t-btn t-btn--gold" style={{ maxWidth: 340 }} disabled={busy} onClick={ack}>
          {busy ? "…" : "I understand — hide it"}
        </button>
      </div>
    );
  }

  Object.assign(window, { RoleReveal });
})();