/* HUD bar, Match card, Countdown, Minimap, Flags */

const { useState: useState_h, useEffect: useEffect_h, useMemo: useMemo_h } = React;

/* --- Animated number ticker --- */
function NumberTicker({ value, prefix = "", suffix = "", decimals = 0 }) {
  const [shown, setShown] = useState_h(value);
  useEffect_h(() => {
    const from = shown;
    const to = value;
    const start = performance.now();
    const dur = 700;
    let raf;
    const ease = (t) => 1 - Math.pow(1 - t, 3);
    const step = (now) => {
      const p = Math.min(1, (now - start) / dur);
      setShown(from + (to - from) * ease(p));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [value]);
  const n = decimals === 0
    ? Math.round(shown).toLocaleString("en-US")
    : shown.toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
  return <span>{prefix}{n}{suffix}</span>;
}

/* --- Wanted-level stars --- */
function WantedStars({ level = 4, size = 22, max = 5 }) {
  return (
    <div className="stars">
      {Array.from({ length: max }, (_, i) => (
        <StarIcon
          key={i}
          className={`star ${i < level ? (i === level - 1 ? "pulse" : "") : "off"}`}
          style={{ width: size, height: size }}
        />
      ))}
    </div>
  );
}

/* --- HUD bar --- */
function HUDBar({ data, onWantedClick }) {
  const { price } = data;
  const placeholder = "- - -";
  return (
    <div className="hud">
      <div className="hud-brand">
        <img src="assets/main-logo.png" alt="Grand Cup Auto" className="mark" width="76" height="54" />
        <div className="word">
          <div className="t">grand cup auto</div>
          <div className="s">$GCA · GRAND CUP 2026</div>
        </div>
      </div>

      <div className="hud-center">
        <div className="hud-stat">
          <div className="num gold">{placeholder}</div>
          <div className="lbl">
            MARKET CAP
            <span className="delta up">{placeholder}</span>
          </div>
        </div>
        <div className="hud-divider" />
        <div className="hud-stat">
          <div className="num">{placeholder}</div>
          <div className="lbl">SOL · USD</div>
        </div>
        <div className="hud-divider" />
        <div className="hud-stat">
          <div className="num pink">{placeholder}</div>
          <div className="lbl">24H VOLUME</div>
        </div>
        <div className="hud-divider" />
        <div className="hud-stars">
          <div className="num gold hud-placeholder-heat">{placeholder}</div>
          <div className="hud-stat" style={{marginLeft: 6}}>
            <div className="lbl" style={{margin:0}}>HEAT LV</div>
          </div>
        </div>
      </div>

      <div className="hud-right">
        <button className="btn-wanted-cta" onClick={onWantedClick}>Buy $GCA</button>
      </div>
    </div>
  );
}

/* --- Flag micro-component --- */
function Flag({ code }) {
  const flags = {
    BR: <svg viewBox="0 0 60 40"><rect width="60" height="40" fill="#009c3b"/><polygon points="30,5 55,20 30,35 5,20" fill="#ffdf00"/><circle cx="30" cy="20" r="8" fill="#002776"/></svg>,
    AR: <svg viewBox="0 0 60 40"><rect width="60" height="40" fill="#75aadb"/><rect y="14" width="60" height="12" fill="#fff"/><circle cx="30" cy="20" r="3" fill="#f6b40e"/></svg>,
    ES: <svg viewBox="0 0 60 40"><rect width="60" height="10" fill="#aa151b"/><rect y="10" width="60" height="20" fill="#f1bf00"/><rect y="30" width="60" height="10" fill="#aa151b"/></svg>,
    DE: <svg viewBox="0 0 60 40"><rect width="60" height="13" fill="#000"/><rect y="13" width="60" height="14" fill="#dd0000"/><rect y="27" width="60" height="13" fill="#ffce00"/></svg>,
    FR: <svg viewBox="0 0 60 40"><rect width="20" height="40" fill="#0055a4"/><rect x="20" width="20" height="40" fill="#fff"/><rect x="40" width="20" height="40" fill="#ef4135"/></svg>,
    MX: <svg viewBox="0 0 60 40"><rect width="20" height="40" fill="#006847"/><rect x="20" width="20" height="40" fill="#fff"/><rect x="40" width="20" height="40" fill="#ce1126"/></svg>,
    US: <svg viewBox="0 0 60 40"><rect width="60" height="40" fill="#b22234"/>{[...Array(6)].map((_,i)=><rect key={i} y={5+i*6} width="60" height="3" fill="#fff"/>)}<rect width="26" height="22" fill="#3c3b6e"/></svg>,
    PT: <svg viewBox="0 0 60 40"><rect width="24" height="40" fill="#006600"/><rect x="24" width="36" height="40" fill="#ff0000"/></svg>,
    MA: <svg viewBox="0 0 60 40"><rect width="60" height="40" fill="#c1272d"/><polygon points="30,12 33,22 43,22 35,28 38,38 30,32 22,38 25,28 17,22 27,22" fill="none" stroke="#006233" strokeWidth="1.5"/></svg>,
    JP: <svg viewBox="0 0 60 40"><rect width="60" height="40" fill="#fff"/><circle cx="30" cy="20" r="10" fill="#bc002d"/></svg>,
    NL: <svg viewBox="0 0 60 40"><rect width="60" height="13" fill="#ae1c28"/><rect y="13" width="60" height="14" fill="#fff"/><rect y="27" width="60" height="13" fill="#21468b"/></svg>,
    IT: <svg viewBox="0 0 60 40"><rect width="20" height="40" fill="#009246"/><rect x="20" width="20" height="40" fill="#fff"/><rect x="40" width="20" height="40" fill="#ce2b37"/></svg>,
    HR: <svg viewBox="0 0 60 40"><rect width="60" height="13" fill="#ff0000"/><rect y="13" width="60" height="14" fill="#fff"/><rect y="27" width="60" height="13" fill="#171796"/></svg>,
    UY: <svg viewBox="0 0 60 40"><rect width="60" height="40" fill="#fff"/>{[...Array(4)].map((_,i)=><rect key={i} y={5+i*9} width="60" height="4" fill="#0038a8"/>)}<rect width="22" height="22" fill="#fff"/><circle cx="11" cy="11" r="6" fill="#fcd116"/></svg>,
    CO: <svg viewBox="0 0 60 40"><rect width="60" height="20" fill="#ffcd00"/><rect y="20" width="60" height="10" fill="#003893"/><rect y="30" width="60" height="10" fill="#ce1126"/></svg>,
    GB: <svg viewBox="0 0 60 40"><rect width="60" height="40" fill="#012169"/><path d="M0,0 L60,40 M60,0 L0,40" stroke="#fff" strokeWidth="6"/><path d="M30,0 V40 M0,20 H60" stroke="#fff" strokeWidth="10"/><path d="M30,0 V40 M0,20 H60" stroke="#c8102e" strokeWidth="6"/></svg>,
  };
  return <div className="flag">{flags[code] || <div style={{background:"#333",width:"100%",height:"100%"}}/>}</div>;
}

/* --- Live Match card --- */
function MatchCard({ match }) {
  return (
    <div className="card card-pink-edge match-card">
      <div className="match-head">
        <span className="match-live"><span className="dot"/> MISSION LOADING</span>
        <span className="match-min">KICKOFF WATCH</span>
      </div>
      <div className="match-teams">
        <div className="match-team">
          <Flag code={match.home.flag} />
          <div className="name">{match.home.name.toLowerCase()}</div>
        </div>
        <div className="match-score">{match.homeScore}–{match.awayScore}</div>
        <div className="match-team">
          <Flag code={match.away.flag} />
          <div className="name">{match.away.name.toLowerCase()}</div>
        </div>
      </div>
      <div className="match-mission">&ldquo;{match.mission.toLowerCase()}&rdquo;</div>
      <div className="match-objs">
        {match.objectives.map((o, i) => (
          <div key={i} className={`match-obj ${o.done ? "done" : ""}`}>
            <span className="box" /> {o.text}
          </div>
        ))}
      </div>
    </div>
  );
}

/* --- Pre-kickoff mission loading card --- */
function MissionLoadingCard() {
  return (
    <div className="card card-pink-edge match-card mission-loading-card">
      <div className="match-head">
        <span className="match-live"><span className="dot"/> MISSION LOADING</span>
        <span className="match-min">KICKOFF WATCH</span>
      </div>
      <div className="mission-load-core">
        <div className="mission-load-icon">
          <img src="assets/main-logo.png" alt="$GCA" loading="lazy" />
        </div>
        <div className="mission-load-copy">
          <div className="mission-load-title">waiting for first live match</div>
          <div className="mission-load-sub">Bounties arm when the first World Cup whistle goes live.</div>
        </div>
      </div>
      <div className="match-mission">first whistle arms the board</div>
      <div className="match-objs">
        <div className="match-obj"><span className="box" /> World Cup kickoff detected</div>
        <div className="match-obj"><span className="box" /> Live events connect to bounty logic</div>
        <div className="match-obj"><span className="box" /> First mission gets posted</div>
      </div>
    </div>
  );
}

/* --- Countdown card --- */
function CountdownCard({ next }) {
  const [secs, setSecs] = useState_h(next.countdown);
  useEffect_h(() => {
    const t = setInterval(() => setSecs(s => Math.max(0, s - 1)), 1000);
    return () => clearInterval(t);
  }, []);
  const h = Math.floor(secs / 3600);
  const m = Math.floor((secs % 3600) / 60);
  const s = secs % 60;
  const fmt = `${String(h).padStart(2,"0")}:${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}`;
  return (
    <div className="card card-cyan-edge countdown">
      <div className="lbl">NEXT MISSION DROPS IN</div>
      <div className="time">{fmt}</div>
      <div className="match-teams" style={{paddingBottom:0}}>
        <div className="match-team">
          <Flag code={next.home.flag} />
          <div className="name">{next.home.name.toLowerCase()}</div>
        </div>
        <div className="match-score" style={{fontSize:22, color:"var(--ink-2)"}}>VS</div>
        <div className="match-team">
          <Flag code={next.away.flag} />
          <div className="name">{next.away.name.toLowerCase()}</div>
        </div>
      </div>
      <div className="match-mission" style={{marginTop:8}}>&ldquo;{next.mission.toLowerCase()}&rdquo;</div>
      <div style={{fontSize:11, color:"var(--ink-2)", letterSpacing:"0.06em", marginTop:4}}>
        {next.venue}
      </div>
    </div>
  );
}

/* --- Minimap stylized Miami --- */
function Minimap() {
  return (
    <div className="minimap">
      <div className="minimap-circle">
        <svg viewBox="0 0 200 200">
          <defs>
            <radialGradient id="mapbg" cx="50%" cy="50%" r="60%">
              <stop offset="0%" stopColor="#1a0a35" />
              <stop offset="100%" stopColor="#070210" />
            </radialGradient>
          </defs>
          <rect width="200" height="200" fill="url(#mapbg)" />
          {/* ocean */}
          <path d="M0,140 C30,135 60,148 100,138 C140,128 170,150 200,142 L200,200 L0,200 Z"
                fill="#0d0a28" stroke="#46e5e5" strokeWidth="0.6" strokeOpacity="0.6"/>
          {/* roads */}
          <g stroke="#ff7ac8" strokeWidth="0.6" opacity="0.7" fill="none">
            <path d="M20,40 L180,90" />
            <path d="M0,90 L200,80" />
            <path d="M40,0 L60,200" />
            <path d="M120,0 L140,200" />
            <path d="M0,140 L200,160" />
          </g>
          {/* blocks */}
          <g fill="#1a0a35">
            <rect x="50" y="35" width="40" height="22" />
            <rect x="105" y="50" width="32" height="20" />
            <rect x="55" y="100" width="28" height="22" />
            <rect x="115" y="105" width="48" height="18" />
          </g>
          {/* N */}
          <g transform="translate(180, 22)">
            <text x="0" y="-8" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="7" fill="#46e5e5">N</text>
            <polygon points="0,-2 4,8 0,4 -4,8" fill="#46e5e5" />
          </g>
        </svg>
        <div className="minimap-dot" />
      </div>
      <div className="minimap-label">▸ hard rock stadium</div>
    </div>
  );
}

window.HUDBar = HUDBar;
window.MatchCard = MatchCard;
window.MissionLoadingCard = MissionLoadingCard;
window.CountdownCard = CountdownCard;
window.Minimap = Minimap;
window.NumberTicker = NumberTicker;
window.WantedStars = WantedStars;
window.Flag = Flag;