/* Intro sequence: Loading screen + Mission Brief overlay
   Grand Cup Auto cover-art treatment — Pricedown + heavy black stroke */

const { useState, useEffect, useRef } = React;

/* shared icons */
function StarIcon({ filled = true, className = "", style }) {
  return (
    <svg viewBox="0 0 24 24" className={className} style={style} fill="currentColor">
      <path d="M12 1.8l3.09 6.26 6.91 1.01-5 4.87 1.18 6.88L12 17.55l-6.18 3.25L7 13.94 2 9.07l6.91-1.01L12 1.8z"/>
    </svg>
  );
}

function CrosshairIcon({ className }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <circle cx="12" cy="12" r="9" />
      <circle cx="12" cy="12" r="2" fill="currentColor" />
      <line x1="12" y1="1" x2="12" y2="5" />
      <line x1="12" y1="19" x2="12" y2="23" />
      <line x1="1" y1="12" x2="5" y2="12" />
      <line x1="19" y1="12" x2="23" y2="12" />
    </svg>
  );
}

/* --- Loading Screen ---
   GTA-style boot sequence: heat-surge video bg, character cutout posse,
   stamped wanted notices, rotating loading taglines, big chunky bar */

const LOADER_CHARS = [
  { src: "assets/char-chairman.png",    pos: "ll", delay: 0.1,  rotate: -3 },
  { src: "assets/char-trailerpark.png", pos: "l",  delay: 0.25, rotate: 2  },
  { src: "assets/char-wag.png",         pos: "r",  delay: 0.35, rotate: -2 },
  { src: "assets/char-superagent.png",  pos: "rr", delay: 0.5,  rotate: 3  },
];

const LOADER_TAGS = [
  "connecting to los santos match control",
  "issuing 2,417 wanted posters",
  "patching gca radio · ch.04",
  "spinning up pump.fun bonding curve",
  "warming the diamond-hands engine",
  "intercepting referee bribes",
  "sat-link · grand cup / hard rock",
  "decrypting golden-boot intel",
];

const LOADER_STAMPS = [
  { txt: "wanted",       cls: "stamp-wanted",    x: "6%",  y: "12%", rot: -8 },
  { txt: "★ 5-star heat",cls: "stamp-heat",      x: "78%", y: "10%", rot: 7 },
  { txt: "gca · classified", cls: "stamp-class",x: "70%", y: "76%", rot: -6 },
  { txt: "no rules",     cls: "stamp-norules",   x: "4%",  y: "78%", rot: 5 },
];

/* --- Loading Screen --- */
function LoadingScreen({ onComplete }) {
  const [progress, setProgress] = useState(0);
  const [tagIdx, setTagIdx] = useState(0);
  const [exiting, setExiting] = useState(false);
  const [flash, setFlash] = useState(false);
  const [siren, setSiren] = useState(false);
  const completed = useRef(false);

  useEffect(() => {
    const start = performance.now();
    const dur = 3800;
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / dur);
      setProgress(p);
      if (p < 1) raf = requestAnimationFrame(tick);
      else finish();
    };
    raf = requestAnimationFrame(tick);

    const tagTimer = setInterval(() => {
      setTagIdx(i => (i + 1) % LOADER_TAGS.length);
    }, 600);

    // siren flicker right before exit
    const sirenT = setTimeout(() => setSiren(true), 3400);

    const finish = () => {
      if (completed.current) return;
      completed.current = true;
      setFlash(true);
      setTimeout(() => setExiting(true), 320);
      setTimeout(() => onComplete && onComplete(), 820);
    };

    const skip = (e) => {
      if (e.type === "keydown" || e.type === "click") finish();
    };
    window.addEventListener("keydown", skip);
    window.addEventListener("click", skip);
    return () => {
      cancelAnimationFrame(raf);
      clearInterval(tagTimer);
      clearTimeout(sirenT);
      window.removeEventListener("keydown", skip);
      window.removeEventListener("click", skip);
    };
  }, [onComplete]);

  const pct = Math.round(progress * 100);
  const pctStr = pct.toString().padStart(3, "0");

  return (
    <div className={`loader ${exiting ? "exiting" : ""} ${flash ? "flash" : ""} ${siren ? "siren" : ""}`}>
      {/* Video background — heat-surge HUD energy */}
      <video
        className="loader-video"
        src="assets/vid-heat-surge.mp4"
        autoPlay muted loop playsInline
        aria-hidden="true"
      />
      <div className="loader-scene" />

      {/* Stamped GTA-style overlays — paint-stencil look */}
      {LOADER_STAMPS.map((s, i) => (
        <div
          key={i}
          className={`loader-stamp ${s.cls}`}
          style={{ left: s.x, top: s.y, "--rot": `${s.rot}deg`, "--d": `${0.4 + i * 0.18}s` }}
        >{s.txt}</div>
      ))}

      {/* Heat siren stripes (top + bottom) */}
      <div className="loader-stripe top">
        <div className="loader-stripe-track">
          {[0,1,2,3].map(r => (
            <span key={r}>
              ★ grand cup auto · 104 missions · ★ pump.fun · 5 juni 26 · ★ live from hard rock · miami ·
              ★ heat lv. 5 · ★ no banks · no gatekeepers · no rules · ★
            </span>
          ))}
        </div>
      </div>
      <div className="loader-stripe bot">
        <div className="loader-stripe-track rev">
          {[0,1,2,3].map(r => (
            <span key={r}>
              ▸ wanted · ▸ dead or bullish · ▸ 5 cartels · cartel tokens · ▸ bounty pots · ▸ no bag, no bounty ·
            </span>
          ))}
        </div>
      </div>

      {/* Character posse */}
      <div className="loader-posse">
        {LOADER_CHARS.map((c, i) => (
          <img
            key={i}
            className={`loader-char loader-char-${c.pos}`}
            src={c.src}
            alt=""
            style={{ "--d": `${c.delay}s`, "--r": `${c.rotate}deg` }}
            loading="eager"
          />
        ))}
      </div>

      {/* Top chrome */}
      <div className="loader-top">
        <div className="loader-badge">
          <StarIcon style={{ width: 14, height: 14, color: "var(--vc-pink)" }} />
          <span className="txt">pump.fun · launch 5 juni 26</span>
        </div>
        <div className="loader-meta">
          <span className="loader-meta-build">build r45</span>
          <span className="loader-meta-now">
            <span className="d"/> live
          </span>
          <span style={{color:"var(--vc-cyan)"}}>GRAND CUP AUTO · LIVE</span>
        </div>
      </div>

      {/* Center hero */}
      <div className="loader-center">
        <div className="loader-eyebrow">▸ a new mission is loading ◂</div>
        <div className="loader-title-wrap">
          <div className="loader-title">grand cup auto</div>
          <div className="loader-title-shadow" aria-hidden="true">grand cup auto</div>
        </div>
        <div className="loader-subtitle">
          <span className="vi">VI</span>
          <span className="loader-ss">2026</span>
        </div>

        {/* Quick-fact strip */}
        <div className="loader-facts">
          <div className="lf"><div className="k">TOKEN</div><div className="v">$GCA</div></div>
          <div className="lf"><div className="k">MISSIONS</div><div className="v">104</div></div>
          <div className="lf"><div className="k">CARTELS</div><div className="v">5</div></div>
          <div className="lf"><div className="k">SUPPLY</div><div className="v">1B</div></div>
          <div className="lf"><div className="k">CHAIN</div><div className="v">SOL</div></div>
        </div>

        <div className="loader-tag">
          <span className="dot" /> {LOADER_TAGS[tagIdx]}
        </div>
      </div>

      {/* Bottom — progress + skip */}
      <div className="loader-bottom">
        <div className="loader-progress-row">
          <div className="loader-progress-label">▸ loading grand cup auto…</div>
          <div className="loader-progress-pct">{pctStr}<i>%</i></div>
        </div>
        <div className="loader-bar">
          <div className="loader-bar-fill" style={{ width: `${pct}%` }}>
            <div className="loader-bar-head" />
          </div>
          {[10,25,50,75,90].map(m => (
            <div key={m} className={`loader-bar-tick ${pct >= m ? "on" : ""}`} style={{ left: `${m}%` }} />
          ))}
        </div>
        <div className="loader-bottom-row">
          <button className="loader-enter" type="button">enter now</button>
          <div className="loader-skip">press any key to skip</div>
          <div className="loader-pump">
            <span className="d" /> pump fun live
          </div>
        </div>
      </div>
    </div>
  );
}

/* --- Mission Brief --- */
function MissionBrief({ open, onAccept, onClose }) {
  return (
    <React.Fragment>
      <div className={`brief-scrim ${open ? "open" : ""}`} onClick={onClose} />
      <div className={`brief ${open ? "open" : ""}`}>
        <div className="brief-top">
          <span>mission brief</span>
          <CrosshairIcon className="crosshair" />
        </div>
        <div className="brief-body">
          <div className="brief-title">OPERATION: BOUNTY FLYWHEEL</div>
          <div className="brief-sub">
            Every Cartel token trade routes creator fees into a split: half buys
            back and burns $GCA, half loads that Cartel&apos;s bounty pot for Pump Fun GO contracts.
          </div>

          <div className="brief-divider" />

          <div className="brief-flow" aria-label="Cartel fee split">
            <div className="flow-node flow-main">
              <span>trade a Cartel token</span>
              <b>$MAMBA / $VICE / ...</b>
            </div>
            <div className="flow-line" />
            <div className="flow-node flow-fees">creator fees</div>
            <div className="flow-split">
              <div className="flow-branch">
                <span className="pct">50%</span>
                <div className="flow-node burn">
                  <b>buy back &amp; BURN $GCA</b>
                  <span>supply down forever</span>
                </div>
              </div>
              <div className="flow-branch">
                <span className="pct">50%</span>
                <div className="flow-node bounty">
                  <b>that Cartel&apos;s BOUNTY POT</b>
                  <span>Pump Fun GO contracts</span>
                </div>
              </div>
            </div>
            <div className="flow-require">
              <span>claim requires wallet holds</span>
              <b>$GCA or a Cartel token</b>
              <em>no bag, no bounty</em>
            </div>
          </div>

          <div className="brief-stats">
            <div className="cell"><div className="k">Burn path</div><div className="v">50%</div></div>
            <div className="cell"><div className="k">Bounty path</div><div className="v">50%</div></div>
            <div className="cell"><div className="k">Gate</div><div className="v">HOLD</div></div>
          </div>

          <button className="btn-sunset" style={{ width: "100%" }} onClick={onAccept}>
            accept mission →
          </button>
        </div>
      </div>
    </React.Fragment>
  );
}

window.LoadingScreen = LoadingScreen;
window.MissionBrief = MissionBrief;
window.StarIcon = StarIcon;
window.CrosshairIcon = CrosshairIcon;