// 护航服务支付页 - 含下单信息 + 打手选择
const { useState, useEffect } = React;

var SERVERS = ["绽放之花","无尽之海","遗忘之境","生命之树","狂野之原","轻云之月","飘渺之峰","暗涌之泉","应许之地","参天之树","拉普达","铭心之界"];

function EscortPayPage() {
  var h = React.createElement;
  var pp = NK.Store.get("pageParams") || {};

  var serviceId = Number(pp.serviceId || pp.id || 0);

  // ---- state ----
  var _paying = useState(false); var paying = _paying[0]; var setPaying = _paying[1];
  var _showSuccess = useState(false); var showSuccess = _showSuccess[0]; var setShowSuccess = _showSuccess[1];
  var _createdOrder = useState(null); var createdOrder = _createdOrder[0]; var setCreatedOrder = _createdOrder[1];
  var _service = useState(null); var service = _service[0]; var setService = _service[1];
  var _serviceLoading = useState(true); var serviceLoading = _serviceLoading[0]; var setServiceLoading = _serviceLoading[1];
  var _serviceError = useState(""); var serviceError = _serviceError[0]; var setServiceError = _serviceError[1];
  var _method = useState("wechat"); var method = _method[0]; var setMethod = _method[1];
  var _quantity = useState(1); var quantity = _quantity[0]; var setQuantity = _quantity[1];
  var _gameServer = useState(pp.serverName || pp.gameServer || ""); var gameServer = _gameServer[0]; var setGameServer = _gameServer[1];
  var _showServerPicker = useState(false); var showServerPicker = _showServerPicker[0]; var setShowServerPicker = _showServerPicker[1];
  var _assignMode = useState(pp.designatedBoosterUserId ? "specified" : "random"); var assignMode = _assignMode[0]; var setAssignMode = _assignMode[1];
  var _selectedBooster = useState(pp.designatedBoosterUserId ? { id: pp.designatedBoosterProfileId, userId: pp.designatedBoosterUserId, nickname: pp.designatedBoosterName || "指定打手", avatar: pp.designatedBoosterAvatar || "", level: pp.designatedBoosterLevel || 1 } : null); var selectedBooster = _selectedBooster[0]; var setSelectedBooster = _selectedBooster[1];
  var _accountId = useState(pp.accountId || ""); var accountId = _accountId[0]; var setAccountId = _accountId[1];
    var _userPhoneInit = (function() { try { var u = NK.Store && NK.Store.get && NK.Store.get("user"); return (u && u.phone) ? u.phone : ""; } catch(e) { return ""; } })();
  var _contactPhone = useState(_userPhoneInit); var contactPhone = _contactPhone[0]; var setContactPhone = _contactPhone[1];
  var _hasEditedPhone = useState(false); var hasEditedPhone = _hasEditedPhone[0]; var setHasEditedPhone = _hasEditedPhone[1];
  var _remark = useState(pp.remark || ""); var remark = _remark[0]; var setRemark = _remark[1];
  var _showBoosterPicker = useState(false); var showBoosterPicker = _showBoosterPicker[0]; var setShowBoosterPicker = _showBoosterPicker[1];
  var _boosters = useState([]); var boosters = _boosters[0]; var setBoosters = _boosters[1];
  var _boosterKeyword = useState(""); var boosterKeyword = _boosterKeyword[0]; var setBoosterKeyword = _boosterKeyword[1];
  var _boosterLoading = useState(false); var boosterLoading = _boosterLoading[0]; var setBoosterLoading = _boosterLoading[1];

  var specs = service && Array.isArray(service.specs) ? service.specs : [];
  var requestedSpecId = Number(pp.specId || 0);
  var selectedSpec = specs.find(function(item) { return Number(item.id || item.specId || 0) === requestedSpecId; }) || specs[0] || null;
  var title = service && service.title || pp.title || "护航服务";
  var coverImage = service && (service.coverImage || service.cover_image) || pp.coverImage || "";
  var bizType = service && service.bizType || pp.bizType || "";
  var category = service && service.category || pp.category || "";
  var specName = selectedSpec && (selectedSpec.specName || selectedSpec.name) || pp.specName || "";
  var unitPrice = Number(selectedSpec && selectedSpec.price != null ? selectedSpec.price : service && service.price != null ? service.price : 0);

  // ---- computed ----
  var totalAmount = unitPrice * quantity;
  var payDisabled = paying || serviceLoading || !!serviceError || totalAmount <= 0;
  var fmt = function(n) { return "\uFFE5" + Number(n).toFixed(2); };

  var bizTypeLabel = bizType === "naikuai" ? "\u5976\u5757" : bizType === "delta" ? "\u4e09\u89d2\u6d32" : bizType === "mall" ? "\u5976\u5757" : bizType === "expert" ? "\u4e09\u89d2\u6d32" : bizType;
  var catLabels = { mall: "\u5546\u57ce", dungeon: "\u526f\u672c", accompany: "\u966a\u73a9", enchant: "\u9644\u9b54", labor: "\u82e6\u529b" };
  var categoryLabel = catLabels[category] || category;
  var subInfo = bizTypeLabel;
  if (categoryLabel) subInfo += " \u00b7 " + categoryLabel;
  if (specName) subInfo += " \u00b7 " + specName;

  var card = { background:"#fff", borderRadius:14, margin:"0 12px 10px", padding:14, boxShadow:"0 1px 4px rgba(0,0,0,0.04)" };
  var rowStyle = { display:"flex", justifyContent:"space-between", alignItems:"center", minHeight:46, padding:"12px 0", borderBottom:"1px solid #f1f1f1", cursor:"default" };
  var clickableRow = { display:"flex", justifyContent:"space-between", alignItems:"center", minHeight:46, padding:"12px 0", borderBottom:"1px solid #f1f1f1", cursor:"pointer" };
  var hasImg = coverImage && coverImage.length > 0;

  var boosterLabel = assignMode === "specified" && selectedBooster ? selectedBooster.nickname : (pp.designatedBoosterName || "随机打手");

  useEffect(function() {
    if (!serviceId) {
      setServiceError("服务信息无效"); setServiceLoading(false);
    } else {
      setServiceLoading(true); setServiceError("");
      NK.Api.Escort.detail(serviceId).then(function(res) {
        if (!res || res.code !== 0 || !res.data) throw new Error("服务信息加载失败");
        setService(res.data);
      }).catch(function() { setServiceError("服务信息加载失败，请返回重试"); })
        .finally(function() { setServiceLoading(false); });
    }
  }, [serviceId]);

  // ---- load boosters ----
  var loadBoosters = function() {
    setBoosterLoading(true);
    fetch("/api/escort/available-boosters?gameType=" + (bizType === "delta" ? "delta" : "naikuai"), {
      headers: { Authorization: "Bearer " + (NK.Store.get("token") || "") }
    })
    .then(function(r){return r.json();})
    .then(function(j){
      if (j && j.code === 0 && j.data && Array.isArray(j.data.list)) {
        setBoosters(j.data.list);
      } else { setBoosters([]); }
    }).catch(function(){ setBoosters([]); })
    .finally(function(){ setBoosterLoading(false); });
  };

  // ---- handlers ----
  var handlePay = function() {
    if (paying) return;
    if (serviceLoading || serviceError || !service) { alert(serviceError || "服务信息加载中，请稍后"); return; }
    if (!gameServer) { alert("请选择游戏区服"); return; }
    if (!accountId.trim()) { alert("请填写账号ID"); return; }
    if (!contactPhone.trim()) { alert("请填写联系电话"); return; }
    if (assignMode === "specified" && !selectedBooster) { alert("请选择接单打手"); return; }
    setPaying(true);
    NK.Api.Escort.createOrder({
      serviceId: serviceId,
      serviceTitle: title,
      coverImage: coverImage,
      bizType: bizType,
      category: category,
      specId: selectedSpec ? Number(selectedSpec.id || selectedSpec.specId || 0) : null,
      specName: specName,
      gameServer: gameServer,
      accountId: accountId.trim(),
      contactPhone: contactPhone.trim(),
      remark: remark.trim(),
      quantity: quantity,
      unitPrice: unitPrice,
      amount: totalAmount,
      assignMode: assignMode,
      boosterProfileId: assignMode === "specified" && selectedBooster ? selectedBooster.id : null,
      boosterUserId: assignMode === "specified" && selectedBooster ? selectedBooster.userId : null,
      boosterName: assignMode === "specified" && selectedBooster ? selectedBooster.nickname : null,
      payMethod: method
    }).then(function(j) {
      setPaying(false);
      if (j && j.code === 0) {
        window.dispatchEvent(new CustomEvent("nk:escort-order-updated", { detail:{ orderId:Number(j.data && j.data.id || 0), status:Number(j.data && j.data.status || 20) } }));
        setCreatedOrder(j.data);
        setShowSuccess(true);
      } else {
        alert((j && j.message) || "支付失败，请重试");
      }
    }).catch(function() {
      setPaying(false);
      alert("网络错误，请重试");
    });
  };

  var boosterLevelNames = {1:"黑铁",2:"青铜",3:"白银",4:"黄金",5:"铂金",6:"钻石",7:"王者"};

  function svgArrL(c){return h("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:c||"#334155",strokeWidth:1.875,strokeLinecap:"round",strokeLinejoin:"round"},h("path",{d:"M15 18l-6-6 6-6"}));}
  function svgArrR(c){return h("svg",{width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:c||"#bbb",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"},h("path",{d:"M9 18l6-6-6-6"}));}
  function svgCheck(){return h("svg",{width:30,height:30,viewBox:"0 0 24 24",fill:"none",stroke:"#16A34A",strokeWidth:2.2,strokeLinecap:"round",strokeLinejoin:"round"},h("path",{d:"m5 12 4 4L19 6"}));}

  var paymentMethods = [
    { key:"wechat", name:"微信支付", badge:"微" },
    { key:"alipay", name:"支付宝", badge:"支" }
  ];

  // ---- filtered boosters ----
  var filteredBoosters = boosters;
  if (boosterKeyword.trim()) {
    var kw = boosterKeyword.trim().toLowerCase();
    filteredBoosters = boosters.filter(function(b){
      return (b.nickname && b.nickname.toLowerCase().indexOf(kw) >= 0) ||
             (b.phone && b.phone.indexOf(kw) >= 0);
    });
  }

  return h("div",{style:{background:"#F6F7FA",minHeight:"100vh",paddingBottom:80}},

    // ===== Header =====
    h("div",{className:"back-header"},
      h("div",{className:"bbtn",onClick:function(){NK.Store.back();}},svgArrL()),
      h("div",{className:"btitle"},"确认支付")
    ),

    // ===== 1. Service info card with quantity =====
    h("div",{style:card},
      h("div",{style:{display:"flex",gap:12}},
        hasImg
          ? h("img",{src:coverImage,style:{width:72,height:72,borderRadius:10,objectFit:"cover",flexShrink:0},onError:function(e){e.target.style.display="none";}})
          : h("div",{style:{width:72,height:72,borderRadius:10,flexShrink:0,background:"linear-gradient(135deg,#6366f1,#8b5cf6)",display:"flex",alignItems:"center",justifyContent:"center"}},
              h("span",{style:{color:"rgba(255,255,255,0.7)",fontSize:22,fontWeight:700}},title.substring(0,2)||"护航")
            ),
        h("div",{style:{flex:1,display:"flex",flexDirection:"column",justifyContent:"space-between",minWidth:0}},
          h("div",{style:{fontSize:16,fontWeight:700,color:"#1a1a1a",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},title),
          h("div",{style:{fontSize:12,color:"#999",marginTop:2}},subInfo),
          h("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginTop:4}},
            h("span",{style:{fontSize:20,fontWeight:800,color:"#FF3B4F"}},fmt(unitPrice)),
            h("div",{style:{display:"flex",alignItems:"center",gap:0}},
              h("button",{
                onClick:function(){ if(quantity>1) setQuantity(quantity-1); },
                style:{width:28,height:28,border:"1px solid #d9d9d9",borderRight:"none",borderRadius:"6px 0 0 6px",background:"#f5f5f5",fontSize:16,color:"#666",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",lineHeight:"28px",padding:0}
              },"−"),
              h("div",{style:{width:36,height:28,border:"1px solid #d9d9d9",fontSize:14,color:"#333",display:"flex",alignItems:"center",justifyContent:"center",background:"#fff"}},quantity),
              h("button",{
                onClick:function(){ setQuantity(quantity+1); },
                style:{width:28,height:28,border:"1px solid #1677ff",borderLeft:"none",borderRadius:"0 6px 6px 0",background:"#1677ff",fontSize:16,color:"#fff",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",lineHeight:"28px",padding:0}
              },"+")
            )
          )
        )
      )
    ),

    // ===== 2. Order form card =====
    h("div",{style:card},
      h("div",{style:{fontSize:14,fontWeight:600,color:"#1a1a1a",marginBottom:6}},"下单信息"),

      // game server - clickable picker
      h("div",{style:clickableRow,onClick:function(){setShowServerPicker(true);}},
        h("span",{style:{fontSize:13,color:"#333"}},h("span",{style:{color:"#FF3B4F"}},"* "),"游戏区服"),
        h("div",{style:{display:"flex",alignItems:"center",gap:4}},
          h("span",{style:{fontSize:13,color:gameServer?"#333":"#bbb"}},gameServer || "请选择游戏区服"),
          svgArrR()
        )
      ),

      // booster row - locked when designated
      h("div",{style:pp.designatedBoosterUserId ? Object.assign({}, rowStyle, { cursor: "default" }) : clickableRow, onClick: pp.designatedBoosterUserId ? null : function(){setShowBoosterPicker(true);loadBoosters();}},
        h("span",{style:{fontSize:13,color:"#333"}},h("span",{style:{color:"#FF3B4F"}},"* "),"接单打手"),
        h("div",{style:{display:"flex",alignItems:"center",gap:4}},
          h("span",{style:{fontSize:13,color:assignMode==="specified"&&selectedBooster?"#1677ff":"#333"}},boosterLabel),
          pp.designatedBoosterUserId ? null : svgArrR()
        )
      ),

      // account ID
      h("div",{style:rowStyle},
        h("span",{style:{fontSize:13,color:"#333"}},h("span",{style:{color:"#FF3B4F"}},"* "),"账号ID"),
        h("input",{type:"text",placeholder:"请输入账号ID",value:accountId,onChange:function(e){setAccountId(e.target.value);},
          style:{border:"none",textAlign:"right",fontSize:13,color:"#333",outline:"none",background:"transparent",width:160}})
      ),

      // phone
      h("div",{style:rowStyle},
        h("span",{style:{fontSize:13,color:"#333"}},h("span",{style:{color:"#FF3B4F"}},"* "),"联系电话"),
        h("input",{type:"tel",placeholder:"请输入联系电话",value:contactPhone,onChange:function(e){setContactPhone(e.target.value);setHasEditedPhone(true);},
          style:{border:"none",textAlign:"right",fontSize:13,color:"#333",outline:"none",background:"transparent",width:160}})
      ),

      // remark - textarea
      h("div",{style:{padding:"10px 0",borderBottom:"none"}},
        h("div",{style:{fontSize:13,color:"#333",marginBottom:8}},"下单备注"),
        h("textarea",{placeholder:"请填写下单备注",value:remark,onChange:function(e){setRemark(e.target.value);},
          style:{width:"100%",height:90,padding:"10px 12px",border:"1px solid #eee",borderRadius:8,fontSize:13,color:"#333",outline:"none",resize:"vertical",boxSizing:"border-box",background:"#fafafa",fontFamily:"inherit"}})
      )
    ),

    // ===== 3. Order info card =====
    h("div",{style:card},
      h("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"4px 0"}},
        h("span",{style:{fontSize:13,color:"#999"}},"订单编号"),
        h("span",{style:{fontSize:13,color:"#333"}}, createdOrder ? createdOrder.orderNo : "支付后生成")
      ),
      h("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"6px 0"}},
        h("span",{style:{fontSize:13,color:"#999"}},"订单状态"),
        h("span",{style:{fontSize:12,color:"#FF3B4F",background:"#FFF3F5",padding:"2px 10px",borderRadius:999,fontWeight:600}},"待支付")
      ),
      h("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"4px 0"}},
        h("span",{style:{fontSize:13,color:"#999"}},"支付金额"),
        h("span",{style:{fontSize:13,fontWeight:700,color:"#FF3B4F"}},fmt(totalAmount))
      )
    ),

    // ===== 4. Coupon card =====
    h("div",{style:{...card,display:"flex",alignItems:"center",justifyContent:"space-between",height:52,cursor:"pointer"},onClick:function(){alert("暂无可用优惠券");}},
      h("span",{style:{fontSize:14,color:"#333",fontWeight:500}},"优惠券"),
      h("span",{style:{fontSize:13,color:"#bbb"}},"暂无可用优惠券 ›")
    ),

    // ===== 5. Payment method card =====
    h("div",{style:{...card,padding:"14px 14px 10px"}},
      h("div",{style:{fontSize:14,fontWeight:600,color:"#1a1a1a",marginBottom:10}},"支付方式"),
      paymentMethods.map(function(item) {
        var active = method === item.key;
        return h("div",{key:item.key,onClick:function(){setMethod(item.key);},style:{display:"flex",alignItems:"center",padding:"10px 12px",marginBottom:6,borderRadius:12,cursor:"pointer",background:active?"#FFF3F5":"#F8FAFC",border:"1.5px solid "+(active?"#FFCDD2":"transparent"),height:50}},
          h("div",{style:{width:28,height:28,borderRadius:"50%",background:"#EEF3FF",color:"#002FA7",marginRight:10,display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:700}},item.badge),
          h("span",{style:{flex:1,fontSize:14,fontWeight:500,color:"#333"}},item.name),
          h("div",{style:{width:18,height:18,borderRadius:"50%",border:"2px solid "+(active?"#FF3B4F":"#ddd"),display:"flex",alignItems:"center",justifyContent:"center"}},
            active ? h("div",{style:{width:10,height:10,borderRadius:"50%",background:"#FF3B4F"}}) : null
          )
        );
      })
    ),

    // ===== 6. Risk hint =====
    h("div",{style:{margin:"0 12px 10px",background:"#FFF8E6",borderRadius:12,padding:"10px 14px"}},
      h("div",{style:{fontSize:11,color:"#B7791F",lineHeight:"17px"}},"当前为模拟支付页面，确认支付后将进入交易流程。请勿在线下私下交易，避免造成损失。")
    ),

    // ===== 7. Bottom bar =====
    h("div",{style:{position:"fixed",bottom:0,left:"50%",transform:"translateX(-50%)",width:"100%",maxWidth:430,zIndex:100,background:"#fff",padding:"10px 16px",paddingBottom:"max(10px, env(safe-area-inset-bottom))",boxSizing:"border-box",borderTop:"1px solid #eef0f3",display:"flex",alignItems:"center",gap:10}},
      h("div",{style:{flex:1,minWidth:0}},
        h("div",{style:{fontSize:12,color:"#999"}},"待支付"),
        h("div",{style:{fontSize:24,fontWeight:700,color:"#FF4D5A",lineHeight:"28px"}},fmt(totalAmount))
      ),
      h("button",{style:{width:190,height:46,borderRadius:14,border:"none",background:"linear-gradient(135deg, #FF5A6A, #FF4D5A)",color:"#fff",fontSize:15,fontWeight:600,cursor:payDisabled?"not-allowed":"pointer",boxShadow:payDisabled?"none":"0 4px 12px rgba(255,77,90,0.3)",opacity:payDisabled?0.55:1,whiteSpace:"nowrap",flexShrink:0},onClick:handlePay,disabled:payDisabled},
        paying ? "支付中..." : "确认支付"
      )
    ),


    // ===== Success dialog =====
    showSuccess && createdOrder && h("div",{style:{position:"fixed",left:0,right:0,top:0,bottom:0,background:"rgba(0,0,0,0.5)",zIndex:10000,display:"flex",alignItems:"center",justifyContent:"center"}},
      h("div",{style:{width:"85%",maxWidth:340,background:"#fff",borderRadius:16,padding:"28px 24px 20px",textAlign:"center",boxShadow:"0 8px 32px rgba(0,0,0,0.15)"}},
        h("div",{style:{width:56,height:56,borderRadius:"50%",background:"#E8F5E9",margin:"0 auto 16px",display:"flex",alignItems:"center",justifyContent:"center"}},
          svgCheck()
        ),
        h("div",{style:{fontSize:18,fontWeight:700,color:"#1a1a1a",marginBottom:16}},"支付成功"),
        h("div",{style:{background:"#F8F9FA",borderRadius:10,padding:"14px",marginBottom:16,textAlign:"left"}},
          h("div",{style:{fontSize:13,color:"#666",marginBottom:4}},"服务名称：" + (createdOrder.serviceTitle || title)),
          h("div",{style:{fontSize:13,color:"#666",marginBottom:4}},"接单打手：" + (createdOrder.boosterName || "随机打手")),
          h("div",{style:{fontSize:13,color:"#666",marginBottom:4}},"订单金额：" + ("¥" + Number(createdOrder.amount || 0).toFixed(2))),
          h("div",{style:{fontSize:12,color:"#1677ff",marginTop:6}},"等待打手接单")
        ),
        h("button",{onClick:function(){
            setShowSuccess(false);
            var orderId = Number(createdOrder && createdOrder.id || 0);
            if (!orderId || isNaN(orderId)) { alert("订单信息异常，请前往订单列表查看"); return; }
            if (NK.Store.openEscortOrderDetailNative && NK.Store.openEscortOrderDetailNative(orderId, "buyer", { source:"payment" })) return;
            NK.Store.navigate("escortOrderDetail", { orderId:orderId, role:"buyer", source:"payment" });
          },
          style:{width:"100%",height:44,borderRadius:12,border:"none",background:"linear-gradient(135deg, #1677ff, #0958d9)",color:"#fff",fontSize:15,fontWeight:600,cursor:"pointer"}},"前往查看")
      )
    ),
    // ===== 8. Server picker modal =====
    showServerPicker && h("div",{style:{position:"fixed",left:0,right:0,top:0,bottom:0,background:"rgba(0,0,0,0.45)",zIndex:9999,display:"flex",justifyContent:"center",alignItems:"flex-end"},
      onClick:function(){setShowServerPicker(false);}
    },
      h("div",{style:{width:"100%",maxWidth:430,height:"52vh",minHeight:360,background:"#fff",borderRadius:"16px 16px 0 0",display:"flex",flexDirection:"column",overflow:"hidden",position:"relative",zIndex:1},
        onClick:function(e){e.stopPropagation();}
      },
        h("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"14px 16px",borderBottom:"1px solid #f0f0f0",flexShrink:0}},
          h("button",{onClick:function(){setShowServerPicker(false);},style:{border:"none",background:"none",fontSize:14,color:"#999",cursor:"pointer",padding:0}},"取消"),
          h("span",{style:{fontSize:16,fontWeight:600,color:"#1a1a1a"}},"选择游戏区服"),
          h("div",{style:{width:40}})
        ),
        h("div",{style:{flex:1,overflowY:"auto",padding:"0 16px 16px"}},
          SERVERS.map(function(s){
            var isActive = gameServer === s;
            return h("div",{key:s,
              style:{display:"flex",alignItems:"center",justifyContent:"space-between",minHeight:48,padding:"14px 0",borderBottom:"1px solid #f1f1f1",cursor:"pointer"},
              onClick:function(){setGameServer(s);setShowServerPicker(false);}
            },
              h("span",{style:{fontSize:14,color:isActive?"#1677ff":"#333",fontWeight:isActive?600:400}},s),
              h("button",{style:{padding:"5px 14px",borderRadius:16,border:"none",background:isActive?"#1677ff":"#10b981",color:"#fff",fontSize:12,fontWeight:500,cursor:"pointer"}},isActive?"已选":"选择")
            );
          })
        )
      )
    ),

    // ===== 9. Booster picker modal =====
    showBoosterPicker && h("div",{style:{position:"fixed",left:0,right:0,top:0,bottom:0,background:"rgba(0,0,0,0.45)",zIndex:9999,display:"flex",justifyContent:"center",alignItems:"flex-end"},
      onClick:function(){setShowBoosterPicker(false);}
    },
      h("div",{style:{width:"100%",maxWidth:430,height:"52vh",minHeight:360,background:"#fff",borderRadius:"16px 16px 0 0",display:"flex",flexDirection:"column",overflow:"hidden",position:"relative",zIndex:1},
        onClick:function(e){e.stopPropagation();}
      },
        h("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"14px 16px",borderBottom:"1px solid #f0f0f0",flexShrink:0}},
          h("button",{onClick:function(){setShowBoosterPicker(false);},style:{border:"none",background:"none",fontSize:14,color:"#999",cursor:"pointer",padding:0}},"取消"),
          h("span",{style:{fontSize:16,fontWeight:600,color:"#1a1a1a"}},"选择打手"),
          h("div",{style:{width:40}})
        ),
        h("div",{style:{padding:"10px 16px",flexShrink:0}},
          h("input",{type:"text",placeholder:"搜索打手",value:boosterKeyword,onChange:function(e){setBoosterKeyword(e.target.value);},
            style:{width:"100%",padding:"8px 12px",border:"1px solid #e5e5e5",borderRadius:8,fontSize:13,outline:"none",boxSizing:"border-box"}})
        ),
        h("div",{style:{flex:1,overflowY:"auto",padding:"0 16px 16px"}},
          // fixed random booster option
          h("div",{
            style:{display:"flex",alignItems:"center",padding:"12px 0",borderBottom:"1px solid #f5f5f5",cursor:"pointer",background:assignMode==="random"?"#f0faff":"transparent",borderRadius:assignMode==="random"?8:0,marginTop:4,paddingLeft:assignMode==="random"?8:0,paddingRight:assignMode==="random"?8:0},
            onClick:function(){setAssignMode("random");setSelectedBooster(null);setShowBoosterPicker(false);setBoosterKeyword("");}
          },
            h("div",{style:{width:40,height:40,borderRadius:"50%",background:"#e6f7ff",marginRight:12,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}},
              h("span",{style:{fontSize:15,fontWeight:700,color:"#1677ff"}},"随")
            ),
            h("div",{style:{flex:1}},
              h("div",{style:{fontSize:14,fontWeight:500,color:"#333"}},"随机打手"),
              h("div",{style:{fontSize:11,color:"#999",marginTop:2}},"系统自动分配可接单打手")
            ),
            h("button",{style:{padding:"5px 14px",borderRadius:16,border:"none",background:assignMode==="random"?"#1677ff":"#10b981",color:"#fff",fontSize:12,fontWeight:500,cursor:"pointer"}},assignMode==="random"?"已选":"选择")
          ),
          // boosters list
          boosterLoading
            ? h("div",{style:{textAlign:"center",padding:30,color:"#999",fontSize:13}},"加载中...")
            : filteredBoosters.length === 0
              ? h("div",{style:{textAlign:"center",padding:20,color:"#999",fontSize:13}},"暂无可用打手")
              : filteredBoosters.map(function(b){
                  var isSel = assignMode==="specified" && selectedBooster && selectedBooster.id === b.id;
                  return h("div",{key:b.id,
                    style:{display:"flex",alignItems:"center",padding:"10px 0",borderBottom:"1px solid #f5f5f5",cursor:"pointer",background:isSel?"#f0faff":"transparent",borderRadius:isSel?8:0,paddingLeft:isSel?8:0,paddingRight:isSel?8:0},
                    onClick:function(){setSelectedBooster(b);setAssignMode("specified");setShowBoosterPicker(false);setBoosterKeyword("");}
                  },
                    h("div",{style:{width:40,height:40,borderRadius:"50%",background:"#f0f0f0",marginRight:12,display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",flexShrink:0}},
                      b.avatar
                        ? h("img",{src:b.avatar,style:{width:"100%",height:"100%",objectFit:"cover"},onError:function(e){e.target.style.display="none";}})
                        : h("span",{style:{fontSize:16,color:"#ccc"}},b.nickname?b.nickname.charAt(0):"?")
                    ),
                    h("div",{style:{flex:1}},
                      h("div",{style:{fontSize:14,fontWeight:500,color:"#333"}},b.nickname || "打手"+b.id),
                      h("div",{style:{fontSize:11,color:"#999",marginTop:2}},
                        (boosterLevelNames[b.level] || "黑铁") + (b.totalOrders != null ? " · " + b.totalOrders + "单" : "")
                      )
                    ),
                    h("button",{style:{padding:"5px 14px",borderRadius:16,border:"none",background:isSel?"#1677ff":"#10b981",color:"#fff",fontSize:12,fontWeight:500,cursor:"pointer"}},isSel?"已选":"选择")
                  );
                })
        )
      )
    )
  );
}

window.NK = window.NK || {};
NK.EscortPayPage = EscortPayPage;