function BetModal({ pick, onClose }) {
  if (!pick) return null;
  const isParlay = Array.isArray(pick.legs) && pick.legs.length > 0;
  // ESPN win % (utils/winprob.js) only while the bet is still open; graded bets keep their result line
  const open = !["won", "lost", "void", "push", "graded", "settled", "closed", "canceled", "cancelled"].includes(String(pick.status || pick.state || "open").toLowerCase());
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20">
      <div className="card rounded-xl p-6 w-96 shadow-xl">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold">Bet Details</h2>
          <button className="btn-alt px-3 py-1 rounded" onClick={onClose}>
            Close
          </button>
        </div>
        {isParlay ? (
          <div className="mb-2">
            {pick.legs.map((leg, i) => (
              <div key={i} className="mb-2">
                <div className="font-medium">
                  {window.TeamRankBadge ? <window.TeamRankBadge rank={window.selectionRank({ ...leg, league: leg.league || pick.league })} league={leg.league || pick.league} /> : null}{leg.selection} {leg.odds != null && (
                    <span className="muted">({signOdds(Number(leg.odds))})</span>
                  )}
                </div>
                <div className="muted text-sm">
                  {leg.league} - {leg.event}
                </div>
                {open && window.LiveWinProb ? <window.LiveWinProb item={leg} league={leg.league || pick.league} detail wrap /> : null}
              </div>
            ))}
          </div>
        ) : (
          <div className="mb-2">
            <div className="font-medium">
              {window.TeamRankBadge ? <window.TeamRankBadge rank={window.selectionRank(pick)} league={pick.league} /> : null}{pick.selection} {pick.odds != null && (
                <span className="muted">({signOdds(Number(pick.odds))})</span>
              )}
            </div>
            <div className="muted text-sm">
              {pick.league} - {pick.event}
            </div>
            {open && window.LiveWinProb ? <window.LiveWinProb item={pick} detail wrap /> : null}
          </div>
        )}
        <div className="grid gap-1 mt-4 text-sm">
          <div className="app-v2-towin">{window.BBToWin.stakeToWinLine(pick)}</div>
          <div>
            <span className="font-semibold">Status:</span>{" "}
            {pick.status || pick.state || "open"}
          </div>
        </div>
      </div>
    </div>
  );
}

window.BetModal = BetModal;