/* ============================================================================
   Operation Outbreak — Wrapped · PDF GENERATOR
   Concept: scan a link → enter your avatar handle → get your unique 3-page PDF.
   The gate resolves a roster player, then renders the static pages scaled to
   fit the screen; "Download PDF" opens the browser print dialog (Save as PDF),
   which emits exactly three letter-portrait pages.
   ============================================================================ */
const { useState, useEffect, useRef } = React;

const ROSTER = window.OO_DATA.roster;

/* ── Avatar-entry gate ───────────────────────────────────────────────────── */
function Gate({ onGenerate }) {
  const [val, setVal] = useState("");
  const [err, setErr] = useState(false);
  const submit = (handle) => {
    const player = window.OO_DATA.findPlayer(handle || val);
    if (!player) { setErr(true); return; }
    onGenerate(player);
  };
  return (
    <div className="pdf-gate">
      <div className="pdf-gate-bg" />
      <div className="pdf-gate-card">
        <img src={(window.__resources && window.__resources.appIcon) || "assets/app-icon.png"} alt="" style={{ width: 64, height: 64, borderRadius: 15 }} />
        <div style={{ fontFamily: T.mono, fontSize: 12, fontWeight: 700, letterSpacing: "0.2em", color: T.mint, marginTop: 22 }}>OPERATION OUTBREAK · WRAPPED</div>
        <h1 style={{ fontFamily: T.sans, fontWeight: 300, fontSize: 46, letterSpacing: "-0.03em", color: T.fg, margin: "12px 0 0", lineHeight: 1.04, textWrap: "balance" }}>Reveal your<br />Outbreak Wrapped</h1>
        <p style={{ fontFamily: T.sans, fontSize: 16, lineHeight: 1.55, color: T.fg2, margin: "16px 0 0", maxWidth: 420 }}>
          Enter your avatar handle to generate your personal outbreak wrapped
        </p>

        <div className="pdf-gate-field">
          <span style={{ fontFamily: T.mono, fontSize: 18, color: T.fg3 }}>@</span>
          <input
            value={val.replace(/^@/, "")}
            onChange={(e) => { setVal(e.target.value); setErr(false); }}
            onKeyDown={(e) => { if (e.key === "Enter") submit(); }}
            placeholder="your_handle"
            spellCheck={false} autoComplete="off"
          />
          <button onClick={() => submit()} className="pdf-gate-go">
            Generate <Icon name="arrow-right" size={16} color={T.ink} stroke={2.25} />
          </button>
        </div>
        {err && <div style={{ fontFamily: T.mono, fontSize: 12, color: T.coral2, marginTop: 12, letterSpacing: "0.04em" }}>NO MATCH — double-check your spelling.</div>}

        <button onClick={() => window.open('./org_report.html', '_blank')} style={{
          marginTop: 16, display: "inline-flex", alignItems: "center", gap: 8,
          fontFamily: T.mono, fontSize: 12, fontWeight: 700, letterSpacing: "0.08em",
          textTransform: "uppercase", color: T.mint, background: "transparent",
          border: `1px solid rgba(88,219,166,0.4)`, padding: "10px 18px",
          borderRadius: 999, cursor: "pointer",
        }}>
          <Icon name="file-text" size={14} color={T.mint} stroke={2} /> View Group Report
        </button>

      </div>
    </div>
  );
}

/* ── Scaled, scrollable 3-page document (screen preview) ─────────────────── */
function PdfDoc({ player, onBack }) {
  const wrapRef = useRef(null);
  const docRef = useRef(null);
  const [scale, setScale] = useState(1);

  useEffect(() => {
    const fit = () => {
      const avail = (wrapRef.current ? wrapRef.current.clientWidth : window.innerWidth) - 48;
      setScale(Math.min(1, avail / 816));
    };
    fit();
    window.addEventListener("resize", fit);
    return () => window.removeEventListener("resize", fit);
  }, []);

  const PAGE_H = 1056, GAP = 32;
  const docHeight = (PAGE_H * 3 + GAP * 2) * scale;

  return (
    <div className="pdf-view">
      <div className="pdf-toolbar">
        <button className="pdf-tb-btn ghost" onClick={onBack}><Icon name="arrow-left" size={16} color={T.fg2} stroke={2} /> Back</button>
        <div className="pdf-tb-title">
          <span style={{ color: T.fg }}>{player.handle}</span>
          <span style={{ color: T.fg3 }}> · Outbreak Wrapped · 3 pages</span>
        </div>
        <button className="pdf-tb-btn go" onClick={() => window.print()}><Icon name="download" size={16} color={T.ink} stroke={2.25} /> Download PDF</button>
      </div>

      <div className="pdf-scroll" ref={wrapRef}>
        <div style={{ height: docHeight, position: "relative" }}>
          <div ref={docRef} className="pdf-doc" style={{ transform: `scale(${scale})`, transformOrigin: "top center", left: "50%", marginLeft: -408, position: "absolute", top: 0 }}>
            <PdfPageGroup />
            <PdfPageIndividual player={player} />
            <PdfPagePersonality player={player} />
          </div>
        </div>

        <div className="no-print" style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: "48px 24px 64px", gap: 14 }}>
          <div style={{ fontFamily: T.mono, fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", color: T.fg3 }}>WANT TO SEE THE FULL ROOM?</div>
          <button onClick={() => window.open('./org_report.html', '_blank')} style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            fontFamily: T.mono, fontSize: 13, fontWeight: 700, letterSpacing: "0.08em",
            textTransform: "uppercase", color: T.ink, background: T.mint,
            border: "none", padding: "14px 28px", borderRadius: 999, cursor: "pointer",
          }}>
            <Icon name="file-text" size={16} color={T.ink} stroke={2.25} /> View Group Report
          </button>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [player, setPlayer] = useState(null);

  useEffect(() => {
    const q = new URLSearchParams(location.search).get("avatar");
    if (q) { const p = window.OO_DATA.findPlayer(q); if (p) setPlayer(p); }
  }, []);

  if (player) {
    window.OO_DATA.individual = player;
    window.OO_DATA.currentBucket = window.OO_DATA.resolveBucket(player);
    return <window.MobileApp onBack={() => setPlayer(null)} />;
  }

  return <Gate onGenerate={setPlayer} />;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
if (window.lucide) { try { window.lucide.createIcons(); } catch (e) {} }