// Top bar: PLAY pill + tab + center icon row + currency + window controls.

// Render an asset from a Community Dragon URL with a graceful 404 fallback
// (an empty span) so the layout doesn't collapse if a path drifts.
const Img = ({ src, alt = "", className = "", style = {}, ...rest }) => (
  <img src={src} alt={alt} className={className} style={style} draggable="false" {...rest} />
);

// 1234 → "1234", 10000 → "10K", 10100 → "10.1K", 10999 → "10.9K". One decimal max.
const fmtCurrency = (n) => {
  if (n < 10000) return String(n);
  const k = Math.floor((n / 100)) / 10;
  return Number.isInteger(k) ? `${k}K` : `${k.toFixed(1)}K`;
};

// Deterministic PRNG so every visitor derives the same BE total from the
// shared click count. Single shared counter (clicks) → both RP and BE are
// reproducible without a second backend call.
const beForClick = (i) => {
  let h = 1779033703 ^ i;
  h = Math.imul(h ^ (h >>> 16), 2246822507);
  h = Math.imul(h ^ (h >>> 13), 3266489909);
  h ^= h >>> 16;
  return ((h >>> 0) % 40) + 1;
};
const sumBeUpTo = (() => {
  const cache = [0];
  return (n) => {
    while (cache.length <= n) {
      cache.push(cache[cache.length - 1] + beForClick(cache.length));
    }
    return cache[n];
  };
})();

// Free shared counter (https://abacus.jasoncameron.dev). One counter holds
// total clicks across all visitors; falls back to localStorage when offline.
const COUNTER_NS = "connortan-portfolio-v1";
const COUNTER_KEY = "currency";
const COUNTER_GET = `https://abacus.jasoncameron.dev/get/${COUNTER_NS}/${COUNTER_KEY}`;
const COUNTER_HIT = `https://abacus.jasoncameron.dev/hit/${COUNTER_NS}/${COUNTER_KEY}`;
const LS_KEY = "ct-currency-clicks";
const CLICK_COOLDOWN_MS = 500;

const readLocalClicks = () => {
  const v = Number(localStorage.getItem(LS_KEY));
  return Number.isFinite(v) && v > 0 ? v : 0;
};

const fetchClicks = async () => {
  try {
    const r = await fetch(COUNTER_GET);
    if (!r.ok) throw 0;
    const j = await r.json();
    return Math.max(Number(j.value) || 0, readLocalClicks());
  } catch {
    return readLocalClicks();
  }
};

const hitClicks = async () => {
  try {
    const r = await fetch(COUNTER_HIT);
    if (!r.ok) throw 0;
    const j = await r.json();
    return Number(j.value);
  } catch {
    return readLocalClicks() + 1;
  }
};

const TopBar = ({ onPlay, mode = "portfolio", onMode = () => {} }) => {
  const [clicks, setClicks] = React.useState(() => readLocalClicks());
  const [pops, setPops] = React.useState([]); // [{ id, rp, be }]
  const lastClickRef = React.useRef(0);

  React.useEffect(() => {
    let alive = true;
    fetchClicks().then((n) => { if (alive) setClicks((c) => Math.max(c, n)); });
    return () => { alive = false; };
  }, []);

  React.useEffect(() => {
    localStorage.setItem(LS_KEY, String(clicks));
  }, [clicks]);

  const handlePlus = async () => {
    const now = Date.now();
    if (now - lastClickRef.current < CLICK_COOLDOWN_MS) return;
    lastClickRef.current = now;
    const beAmt = beForClick(clicks + 1);
    const id = now + Math.random();
    setPops((p) => [...p, { id, rp: 1, be: beAmt }]);
    setTimeout(() => setPops((p) => p.filter((x) => x.id !== id)), 900);
    setClicks((c) => c + 1);
    const remote = await hitClicks();
    setClicks((c) => Math.max(c, remote));
  };

  return (
    <div className="topbar">
      <div className="tb-left">
        <div
          className="play-btn-wrap"
          style={{ "--play-frame": `url("${LOL.play}")` }}
        >
          <Img src={LOL.logo} className="play-btn-icon" alt="" />
          <button className="play-btn" onClick={onPlay}>
            <span className="play-text">PLAY</span>
          </button>
        </div>
        <div
          className={`tab ${mode === "portfolio" ? "active" : ""}`}
          onClick={() => onMode("portfolio")}
        >
          PORTFOLIO
        </div>
        <div
          className={`tab ${mode === "journal" ? "active" : ""}`}
          onClick={() => onMode("journal")}
        >
          JOURNAL
        </div>
      </div>
      <div className="tb-mid"></div>
      <div className="tb-right">
        <div className="currency-stack">
          <div className="currency">
            <Img src={LOL.currency.rp} className="cur-icon" alt="RP" />
            <span className="num">{fmtCurrency(clicks)}</span>
            {pops.map((p) => (
              <span key={`rp-${p.id}`} className="cur-pop">+{p.rp}</span>
            ))}
          </div>
          <div className="currency currency-be">
            <Img src={LOL.currency.be} className="cur-icon cur-icon-be" alt="BE" />
            <span className="num">{fmtCurrency(sumBeUpTo(clicks))}</span>
            {pops.map((p) => (
              <span key={`be-${p.id}`} className="cur-pop">+{p.be}</span>
            ))}
          </div>
          <span
            className="plus"
            role="button"
            tabIndex={0}
            onClick={handlePlus}
            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") handlePlus(); }}
            title="+1 RP, +random BE"
          >+</span>
        </div>
        <div className="tb-profile">
          <div className="rp-avatar">
            CT
            <span className="rp-level">505</span>
          </div>
          <div>
            <div className="rp-name">Copokemon</div>
            <div className="rp-status">● Online</div>
          </div>
          <div className="rp-profile-icons">
            <div className="iconbtn" title="Settings"><I.gear width="14" height="14"/></div>
            <div className="iconbtn" title="Notifications"><I.bell width="14" height="14"/></div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.TopBar = TopBar;