/* Robindex v2 — shared UI atoms: store hook, money, fee rows, reward bars, modal shell.
   Exposed on window (RXU2). */
const { useState: u2S, useEffect: u2E, useId: u2Id } = React;
const T2 = (k) => window.RXI2.t(k);
const E2 = () => window.RXE;

function useStore2() {
  const [, force] = u2S(0);
  u2E(() => {
    const off1 = window.RXS.onChange(() => force((n) => n + 1));
    const off2 = window.RXE.onCfg(() => force((n) => n + 1));
    return () => { off1(); off2(); };
  }, []);
  return window.RXS.get();
}
function kolAdapter(r) {
  return { id: r.id, display_name: r.name, handle: r.handle, avatar_url: r.avatar, accent: r.accent };
}
function Money({ v, d, className }) {
  return <span className={"v2-mono " + (className || "")}>{window.RXE.usd(v, d)}</span>;
}
function RewardBar({ label, earned, cap, live, lost, amber }) {
  const pct = Math.min(100, cap > 0 ? (earned / cap) * 100 : 0);
  const done = earned >= cap - 1e-9;
  return (
    <div className="rw">
      <div className="rw-line">
        <span>{label}</span>
        <b>{window.RXE.usd(earned)}</b>
        {live && !done && !lost && <span style={{ color: "var(--up)", display: "inline-flex", alignItems: "center", gap: 4 }}><span className="live-dot"></span>{T2("eDripLive")}</span>}
        <span className="cap">/ {window.RXE.usd(cap)} · {Math.round(pct)}%</span>
      </div>
      <div className={"rw-bar" + (done ? " done" : amber ? " amber" : "")}><i style={{ width: pct + "%" }}></i></div>
    </div>
  );
}
function FeeRow({ icon, title, sub, value, total, subrow }) {
  const { Icon } = window.RXC;
  return (
    <div className={"fee-row" + (total ? " total" : "") + (subrow ? " sub" : "")}>
      {icon && <Icon name={icon} size={15} color="var(--faint)" style={{ marginTop: 2 }} />}
      <div style={{ minWidth: 0 }}>
        <div className="fr-t">{title}</div>
        {sub && <div className="fr-s">{sub}</div>}
      </div>
      <div className="fr-v">{value}</div>
    </div>
  );
}
function Modal2({ title, icon, onClose, children, wide }) {
  const { Icon } = window.RXC;
  const titleId = u2Id();
  return (
    <div className="x2-overlay" onClick={(e) => { if (e.target.classList.contains("x2-overlay")) onClose(); }}>
      <div className={"x2-modal" + (wide ? " wide" : "")} role="dialog" aria-modal="true" aria-labelledby={titleId}>
        <div className="x2-mhead">
          {icon && <Icon name={icon} size={18} color="var(--accent)" />}
          <h3 id={titleId}>{title}</h3>
          <button className="x" onClick={onClose} aria-label={window.RXI.lang === "zh" ? "关闭" : "Close"}><Icon name="x" size={16} /></button>
        </div>
        {children}
      </div>
    </div>
  );
}
/* Claimed badge */
function ClaimBadge({ claimed }) {
  const { Icon } = window.RXC;
  if (!claimed) return null;
  return (
    <span className="badge-claim" title={T2("cardClaimedTag")}>
      <Icon name="check" size={10} />{claimed.you ? T2("cardClaimedYou") : T2("cardClaimedTag")}
    </span>
  );
}
/* Insufficient-credits modal — top-up or BYOK (token fee $0; other fees still apply). */
function InsuffModal({ need, bal, onClose, onTopup, onByok }) {
  React.useEffect(() => {
    try {
      if (window.RXA) {
        window.RXA.track("balance_zero_viewed", { amount: Number(need) || 0 });
        window.RXA.track("byok_prompt_viewed", { source: "insuff_modal" });
      }
    } catch (_) {}
  }, [need]);
  return (
    <Modal2 title={T2("chInsuffTitle")} icon="wallet" onClose={onClose}>
      <p className="x2-msub">{T2("chInsuffBody")(window.RXE.usd(need), window.RXE.usd(bal))}</p>
      <p className="x2-msub" style={{ marginTop: 8 }}>{T2("chInsuffByokHint")}</p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 12 }}>
        <button className="x2-primary" onClick={onTopup}>{T2("crTopupFirst")}</button>
        {typeof onByok === "function" && (
          <button className="btn-ghost" onClick={() => {
            try { if (window.RXA) window.RXA.track("byok_setup_started", { source: "insuff_modal" }); } catch (_) {}
            onByok();
          }}>{T2("chInsuffByokCta")}</button>
        )}
      </div>
    </Modal2>
  );
}
Object.assign(window, { useStore2, kolAdapter, Money, RewardBar, FeeRow, Modal2, ClaimBadge, InsuffModal, T2 });