// 我的订单页 - 我买到的 / 我卖出的（支持 locked 独立模式）— Stitch UI 优化
const { useState, useEffect, useRef, useCallback } = React;


// Stitch 设计令牌
const TK = {
  bg: "#f8f9ff",
  cardBg: "#ffffff",
  cardShadow: "0px 2px 8px rgba(0,0,0,0.04)",
  cardRadius: 14,
  cardPadding: 12,
  cardGap: 10,
  primary: "#3B82F6",
  primaryLight: "#EFF6FF",
  textPrimary: "#1F2937",
  textSecondary: "#6B7280",
  textMuted: "#9CA3AF",
  divider: "#EEF2F7",
  headerH: 48,
  tabH: 44,
  btnRadius: 12,
  statusCompleted: { bg: "#D1FAE5", c: "#065F46" },
  statusPending:   { bg: "#FEF3C7", c: "#92400E" },
  statusProgress:  { bg: "#DBEAFE", c: "#1E40AF" },
  statusCancel:    { bg: "#FEE2E2", c: "#991B1B" },
  statusRefund:    { bg: "#F3F4F6", c: "#6B7280" },
  statusDispute:   { bg: "#FCE7F3", c: "#9D174D" },
};

const ORDER_STATUS_MAP = {
  10:"待支付",20:"已支付待确认",30:"验号中",40:"待换绑",
  50:"换绑中",60:"审核末",70:"待买家确认",80:"已完成",
  90:"纠纷中",100:"仲裁中",110:"已退款",120:"已取消"
};

function getStatusStyle(s) {
  if (s === 80) return TK.statusCompleted;
  if (s === 10) return TK.statusPending;
  if (s >= 20 && s < 80) return TK.statusProgress;
  if (s === 110 || s === 120) return TK.statusCancel;
  if (s === 90 || s === 100) return TK.statusDispute;
  return TK.statusRefund;
}

function ordersPage() {
  const pageParams = NK.Store.get("pageParams");
  const locked = pageParams && pageParams.locked;
  const initialTab = (pageParams && pageParams.tab) || "buy";
  const [tab, setTab] = useState(initialTab);
  const [orders, setOrders] = useState([]);
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const [initLoading, setInitLoading] = useState(true);
  const [error, setError] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");
  const pageSize = 10;
  const user = NK.Store.get("user");
  const statusScrollRef = useRef(null);
  const [serviceOrders, setServiceOrders] = useState([]);
  const [serviceLoading, setServiceLoading] = useState(false);
  const [serviceError, setServiceError] = useState("");
  const serviceOrderSocketTimerRef = useRef(null);
  const initialOrderType = (pageParams && (pageParams.type === "service" || pageParams.orderType === "service")) ? "service" : "account";
  const [orderTypeTab, setOrderTypeTab] = useState(initialOrderType);

  const title = tab === "buy" ? "我买到的" : "我卖出的";

  const statusTabs = [
    { key: "all", label: "全部" },
    { key: 10, label: "待支付" },
    { key: 20, label: "交易中" },
    { key: 80, label: "已完成" },
    { key: 90, label: "售后中" },
    { key: 120, label: "已取消" }
  ];

  const filteredOrders = statusFilter === "all" ? orders : orders.filter(function(o) {
    if (statusFilter === 20) return o.status >= 20 && o.status < 80;
    if (statusFilter === 90) return o.status >= 90 && o.status < 120;
    return o.status === statusFilter;
  });

  const fetchOrders = async (p, append) => {
    if (!NK.Store.isLoggedIn()) {
      setError("请先登录");
      setInitLoading(false);
      return;
    }
    setLoading(true); setError("");
    const currentPage = p || 1;
    try {
      const fn = tab === "buy" ? NK.Api.Orders.myBuy : NK.Api.Orders.mySell;
      const res = await fn({ page: currentPage, pageSize });
      if (res.code === 0) {
        const list = res.data.list || [];
        setOrders(append ? prev => [...prev, ...list] : list);
        setTotal(res.data.total || 0);
        setPage(res.data.page || 1);
      } else {
        setError(res.message || "加载失败");
      }
    } catch (e) { setError("网络错误"); }
    finally { setLoading(false); setInitLoading(false); }
  };

  useEffect(function() { fetchOrders(1, false); }, [tab]);
  const fetchServiceOrders = async function(st) {
    if (!NK.Store.isLoggedIn()) return;
    setServiceLoading(true); setServiceError("");
    try {
      var params = {};
      if (st && st !== "all") {
        if (st === 10) { /* no unpaid in service orders */ }
        else if (st === 20) { params.status = "20,30,40,60"; }
        else if (st === 80) { params.status = "70"; }
        else if (st === 90) { params.status = "90,91,100,110,130"; }
        else if (st === 120) { params.status = "120"; }
        else { params.status = String(st); }
      }
      var res = await NK.Api.Escort.myOrders(params);
      if (res.code === 0) {
        setServiceOrders(res.data.list || []);
      } else {
        setServiceError(res.message || "加载失败");
      }
    } catch (e) { setServiceError("网络错误"); }
    finally { setServiceLoading(false); }
  };

  useEffect(function() {
    if (tab === "buy" && orderTypeTab === "service") {
      fetchServiceOrders(statusFilter);
    }
  }, [tab, orderTypeTab, statusFilter]);

  useEffect(function() {
    if (tab !== "buy" || orderTypeTab !== "service" || typeof NK.UserImSocket === "undefined") return;
    var disposed = false;
    function scheduleServiceOrderRefresh() {
      if (disposed) return;
      if (serviceOrderSocketTimerRef.current) clearTimeout(serviceOrderSocketTimerRef.current);
      serviceOrderSocketTimerRef.current = setTimeout(function() {
        serviceOrderSocketTimerRef.current = null;
        if (!disposed) fetchServiceOrders(statusFilter);
      }, 180);
    }
    window.addEventListener("nk:escort-order-updated", scheduleServiceOrderRefresh);
    var offConversationUpdated = NK.UserImSocket.on("im:conversation_updated", scheduleServiceOrderRefresh);
    var offEscortOrderUpdated = NK.UserImSocket.on("escort:order_updated", scheduleServiceOrderRefresh);
    return function() {
      disposed = true;
      if (serviceOrderSocketTimerRef.current) {
        clearTimeout(serviceOrderSocketTimerRef.current);
        serviceOrderSocketTimerRef.current = null;
      }
      window.removeEventListener("nk:escort-order-updated", scheduleServiceOrderRefresh);
      if (typeof offConversationUpdated === "function") offConversationUpdated();
      if (typeof offEscortOrderUpdated === "function") offEscortOrderUpdated();
    };
  }, [tab, orderTypeTab, statusFilter]);

  useEffect(function() {
    if (!NK.Store.isLoggedIn()) {
      setError("请先登录");
      setInitLoading(false);
    }
  }, []);

  const handleTabChange = function(t) { setTab(t); setOrders([]); setPage(1); };
  const goServiceOrderDetail = function(order) {
    var id = Number(order && order.id);
    if (!id || isNaN(id)) { alert("订单参数异常，请刷新后重试"); return; }
    if (NK.Store.openEscortOrderDetailNative && NK.Store.openEscortOrderDetailNative(id, "buyer", { source:"orders" })) return;
    NK.Store.navigate("escortOrderDetail", { orderId:id, role:"buyer", source:"orders" });
  };

  const openServiceSupport = function(order) {
    var id = Number(order && order.id);
    if (!id || isNaN(id)) return;
    NK.Api.Im.sendEscortOrderCard({
      order_id:id,
      action:"contact_support",
      source:"buyer_orders"
    }).then(function(res) {
      if (!res || res.code !== 0 || !res.data) throw new Error((res && res.message) || "创建客服会话失败");
      var data = res.data;
      var conversationId = Number(data.conversation_id || data.conversation && (data.conversation.id || data.conversation.conversation_id) || 0);
      if (!conversationId) throw new Error("客服会话信息异常");
      NK.Store.navigate("supportChat", { conversationId:conversationId, conversationData:data });
    }).catch(function(error) {
      alert((error && error.message) || "网络错误，请稍后重试");
    });
  };

  const loadMore = function() {
    if (loading || orders.length >= total) return;
    fetchOrders(page + 1, true);
  };

  const goOrder = function(order) {
    var source = tab === "buy" ? "bought" : "sold";
    if (order.status === 10) {
      NK.Store.navigate("payment", { orderId: order.id, source: source, tab: tab });
    } else {
      NK.Store.navigate("tradeRoom", { orderId: order.id, source: source });
    }
  };

  const getCover = function(o) {
    if (o.coverImage && o.coverImage.image_url) return o.coverImage.image_url;
    if (o.images && o.images.length > 0 && o.images[0].image_url) return o.images[0].image_url;
    return null;
  };

  const fmtPrice = function(p) {
    var num = Number(p);
    return React.createElement("span", {style:{display:"flex",alignItems:"baseline",gap:4}},
      React.createElement("span", {style:{fontSize:12,color:"#64748B",fontWeight:500}},"实付款"),
      React.createElement("span", {style:{fontSize:17,fontWeight:700,color:"#2563eb"}},"￥" + num.toFixed(2))
    );
  };

  const fmtTime = function(t) {
    if (!t) return "";
    var d = new Date(t);
    return d.getFullYear()+"-"+String(d.getMonth()+1).padStart(2,"0")+"-"+String(d.getDate()).padStart(2,"0")+" "+String(d.getHours()).padStart(2,"0")+":"+String(d.getMinutes()).padStart(2,"0");
  };

  const fmtOrderId = function(o) {
    var no = o.order_no || o.order_sn || o.orderSn || o.account_uid || o.accountUid;
    if (no) { var s = String(no); return s.indexOf("NK") === 0 ? s : "NK" + s; }
    var id = o.id;
    if (!id) return "";
    return "NK" + String(id).padStart(8, "0");
  };

  const fmtProductTitle = function(o) {
    var productNo = o && o.product_no ? String(o.product_no).trim() : "";
    var title = o && (o.title || o.product_title) || "未知商品";
    return "【" + (productNo || "编号待补齐") + "】 " + title;
  };

  const statusBadge = function(s) {
    var sc = getStatusStyle(s);
    return React.createElement("span", {
      style: {display:"inline-block",padding:"2px 8px",borderRadius:999,fontSize:11,fontWeight:600,background:sc.bg,color:sc.c,flexShrink:0,whiteSpace:"nowrap"}
    }, ORDER_STATUS_MAP[s] || ("状态"+s));
  };

  const statusHint = function(s) {
    if (s === 10) return "请尽快完成支付，订单将为你保留";
    if (s === 20) return "卖家已确认，等待客服接入";
    if (s >= 30 && s < 80) return "客服已接入，交易进行中";
    if (s === 80) return "交易已完成，感谢使用";
    if (s === 90 || s === 100) return "订单售后处理中";
    if (s === 110) return "已退款";
    if (s === 120) return "订单已取消";
    return "";
  };

  const getAccountTypeLabel = function(o) {
    var t = o.accountType || o.account_type || o.bind_type || "";
    if (!t) return "\u6210\u54C1\u53F7";
    t = String(t).toLowerCase();
    if (t.indexOf("\u6210\u54C1") >= 0 || t === "finished" || t === "chengpin" || t === "1") return "\u6210\u54C1\u53F7";
    if (t.indexOf("\u521D\u59CB") >= 0 || t === "initial" || t === "chushi" || t === "2") return "\u521D\u59CB\u53F7";
    return "\u6210\u54C1\u53F7";
  };

  const renderOrderBtns = function(o) {
    var btns = [];
    var s = o.status;
    if (s === 10) {
      btns.push(React.createElement("button", {
        key: "pay",
        onClick: function(e) { e.stopPropagation(); NK.Store.navigate("payment", { orderId: o.id, source: tab==="buy"?"bought":"sold", tab: tab }); },
        style: {padding:"6px 14px",borderRadius:8,border:"none",background:"#2563eb",color:"#fff",fontSize:13,fontWeight:600,cursor:"pointer",whiteSpace:"nowrap"}
      }, "去支付"));
    }
    if (s >= 20 && s < 80) {
      btns.push(React.createElement("button", {
        key: "viewDetail",
        onClick: function(e) { e.stopPropagation(); NK.Store.set("orderDetailContext",{accountId:o.account_id,title:o.title||o.product_title,server:o.server,price:o.amount||o.price,status:o.status,cover:getCover(o),accountType:getAccountTypeLabel(o)}); NK.Store.navigate("detail",{id:o.account_id}); },
        style: {padding:"6px 14px",borderRadius:8,border:"1px solid #E5E7EB",background:"#fff",color:"#6B7280",fontSize:13,fontWeight:500,cursor:"pointer",whiteSpace:"nowrap"}
      }, "查看详细"));
      btns.push(React.createElement("button", {
        key: "trade",
        onClick: function(e) { e.stopPropagation(); NK.Store.navigate("tradeRoom", { orderId: o.id, source: tab==="buy"?"bought":"sold" }); },
        style: {padding:"6px 14px",borderRadius:8,border:"1px solid #2563eb",background:"#fff",color:"#2563eb",fontSize:13,fontWeight:600,cursor:"pointer",whiteSpace:"nowrap"}
      }, "进入交易群"));
    }
    if (s === 80) {
      btns.push(React.createElement("button", {
        key: "viewDetail",
        onClick: function(e) { e.stopPropagation(); NK.Store.set("orderDetailContext",{accountId:o.account_id,title:o.title||o.product_title,server:o.server,price:o.amount||o.price,status:o.status,cover:getCover(o),accountType:getAccountTypeLabel(o)}); NK.Store.navigate("detail",{id:o.account_id}); },
        style: {padding:"6px 14px",borderRadius:8,border:"1px solid #E5E7EB",background:"#fff",color:"#6B7280",fontSize:13,fontWeight:500,cursor:"pointer",whiteSpace:"nowrap"}
      }, "查看详细"));
      btns.push(React.createElement("button", {
        key: "view",
        onClick: function(e) { e.stopPropagation(); NK.Store.navigate("tradeRoom", { orderId: o.id, source: tab==="buy"?"bought":"sold" }); },
        style: {padding:"6px 14px",borderRadius:8,border:"1px solid #E5E7EB",background:"#fff",color:"#6B7280",fontSize:13,fontWeight:500,cursor:"pointer",whiteSpace:"nowrap"}
      }, "查看订单"));
      btns.push(React.createElement("button", {
        key: "aftersale",
        onClick: function(e) { e.stopPropagation(); NK.Store.navigate("appealDetail", { orderId: o.id }); },
        style: {padding:"6px 14px",borderRadius:8,border:"1px solid #FCA5A5",background:"#fff",color:"#DC2626",fontSize:13,fontWeight:500,cursor:"pointer",whiteSpace:"nowrap"}
      }, "申请售后"));
    }
    if (s === 110) {
      btns.push(React.createElement("button", {
        key: "viewDetail",
        onClick: function(e) { e.stopPropagation(); NK.Store.set("orderDetailContext",{accountId:o.account_id,title:o.title||o.product_title,server:o.server,price:o.amount||o.price,status:o.status,cover:getCover(o),accountType:getAccountTypeLabel(o)}); NK.Store.navigate("detail",{id:o.account_id}); },
        style: {padding:"6px 14px",borderRadius:8,border:"1px solid #E5E7EB",background:"#fff",color:"#6B7280",fontSize:13,fontWeight:500,cursor:"pointer",whiteSpace:"nowrap"}
      }, "查看详细"));
    }
    if (s === 120) {
      btns.push(React.createElement("button", {
        key: "viewDetail",
        onClick: function(e) { e.stopPropagation(); NK.Store.set("orderDetailContext",{accountId:o.account_id,title:o.title||o.product_title,server:o.server,price:o.amount||o.price,status:o.status,cover:getCover(o),accountType:getAccountTypeLabel(o)}); NK.Store.navigate("detail",{id:o.account_id}); },
        style: {padding:"6px 14px",borderRadius:8,border:"1px solid #E5E7EB",background:"#fff",color:"#6B7280",fontSize:13,fontWeight:500,cursor:"pointer",whiteSpace:"nowrap"}
      }, "查看详细"));
    }
    if (btns.length === 0) {
      btns.push(React.createElement("span", {key:"none",style:{fontSize:11,color:TK.textMuted}},""));
    }
    return btns;
  };

  if (initLoading) {
    return React.createElement("div", {style:{background:TK.bg,minHeight:"100vh",display:"flex",alignItems:"center",justifyContent:"center"}},
      React.createElement("div", {style:{color:TK.textSecondary,fontSize:14}},"加载中...")
    );
  }

  if (error && orders.length === 0 && !loading && error === "请先登录") {
    return React.createElement("div", {style:{background:TK.bg,minHeight:"100vh"}},
      locked && React.createElement("div",{style:{display:"flex",alignItems:"center",height:TK.headerH,background:"#fff",padding:"0 16px",borderBottom:"1px solid "+TK.divider}},
        React.createElement("div",{onClick:function(){NK.Store.back("mine");},style:{cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,flexShrink:0}}, chevronLeftSVG),
        React.createElement("div",{style:{flex:1,textAlign:"center",fontSize:16,fontWeight:700,color:"#111"}},title)
      ),
      React.createElement("div", {style:{display:"flex",flexDirection:"column",alignItems:"center",paddingTop:80}},
        React.createElement("div", {style:{fontSize:40,marginBottom:12}},"📦"),
        React.createElement("div", {style:{color:TK.textSecondary,fontSize:14}},error),
        React.createElement("div", {style:{color:TK.primary,marginTop:16,cursor:"pointer",fontSize:15,fontWeight:600},
          onClick:function(){NK.Store.navigate("login");}},"去登录")
      )
    );
  }

  var chevronLeftSVG = React.createElement("svg", {xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"},
    React.createElement("path", {d:"m15 18-6-6 6-6"})
  );
  var lockedHeader = locked ? React.createElement("div",{style:{display:"flex",alignItems:"center",height:TK.headerH,background:"#fff",padding:"0 12px",borderBottom:"1px solid "+TK.divider,position:"sticky",top:0,zIndex:50}},
    React.createElement("div",{onClick:function(){NK.Store.back("mine");},style:{cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,flexShrink:0}}, chevronLeftSVG),
    React.createElement("div",{style:{fontSize:16,fontWeight:700,color:"#111",marginLeft:4}},title)
  ) : null;

  return React.createElement("div", {style:{background:TK.bg,minHeight:"100vh",paddingBottom:20}},

    lockedHeader,

    !locked && React.createElement("div", {style:{display:"flex",alignItems:"center",height:48,background:"#fff",padding:"0 12px",borderBottom:"1px solid "+TK.divider,position:"sticky",top:0,zIndex:50}},
      React.createElement("div",{onClick:function(){NK.Store.back("mine");},style:{cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",width:32,height:32,flexShrink:0}}, chevronLeftSVG),
      React.createElement("div",{style:{fontSize:16,fontWeight:700,color:"#111",marginLeft:4,flexShrink:0}}, title),
      React.createElement("div",{style:{flex:1}}),
      React.createElement("div",{style:{display:"flex",gap:12,flexShrink:0}},
        React.createElement("div",{key:"buy",
          onClick:function(){handleTabChange("buy");},
          style:{fontSize:13,fontWeight:tab==="buy"?600:400,cursor:"pointer",
            color:tab==="buy"?TK.primary:TK.textMuted}
        }, "我买到的"),
        React.createElement("div",{key:"sell",
          onClick:function(){handleTabChange("sell");},
          style:{fontSize:13,fontWeight:tab==="sell"?600:400,cursor:"pointer",
            color:tab==="sell"?TK.primary:TK.textMuted}
        }, "我卖出的")
      )
    ),

    tab === "buy" && React.createElement("div", {style:{display:"flex",justifyContent:"center",padding:"10px 0 8px",background:"#fff"}},
      React.createElement("div", {style:{width:220,height:32,padding:3,borderRadius:10,background:"#f1f4f8",display:"flex"}},
        ["account","service"].map(function(ot) {
          var isActive = orderTypeTab === ot;
          return React.createElement("div", {
            key:ot,
            onClick:function(){setOrderTypeTab(ot);},
            style:{
              flex:1,borderRadius:8,display:"flex",alignItems:"center",justifyContent:"center",fontSize:14,fontWeight:isActive?700:600,cursor:"pointer",
              color:isActive?"#fff":"#333",
              background:isActive?"#2f6df6":"transparent",
              boxShadow:isActive?"0 2px 6px rgba(47,109,246,.25)":"none"
            }
          }, ot==="account"?"账号":"服务");
        })
      )
    ),

    React.createElement("div", {style:{background:"#fff",borderBottom:"1px solid #EEF2F7",padding:"4px 4px 0",overflowX:"auto",whiteSpace:"nowrap",WebkitOverflowScrolling:"touch"}},
      React.createElement("div", {style:{display:"inline-flex",minWidth:"100%"}},
        statusTabs.map(function(st) {
          var active = statusFilter === st.key;
          return React.createElement("div", {key:st.key,
            onClick:function(){setStatusFilter(st.key);},
            style:{display:"inline-block",padding:"10px 14px 8px",fontSize:12,fontWeight:active?600:400,cursor:"pointer",
              color:active?TK.primary:TK.textSecondary,
              borderBottom:active?"2px solid #3B82F6":"2px solid transparent",
              transition:"all .2s",flexShrink:0}
          }, st.label);
        })
      )
    ),

    tab === "buy" && orderTypeTab === "service"
      ? serviceLoading
        ? React.createElement("div", {style:{textAlign:"center",padding:40,color:TK.textSecondary,fontSize:14}},"加载中...")
        : serviceError && serviceOrders.length === 0
          ? React.createElement("div", {style:{display:"flex",flexDirection:"column",alignItems:"center",paddingTop:80}},
              React.createElement("svg", {width:44,height:44,viewBox:"0 0 24 24",fill:"none",stroke:TK.textMuted,strokeWidth:1.8,strokeLinecap:"round",strokeLinejoin:"round",style:{marginBottom:12}}, React.createElement("path",{d:"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"}),React.createElement("path",{d:"m3.3 7 8.7 5 8.7-5M12 22V12"})),
              React.createElement("div", {style:{color:TK.textSecondary,fontSize:14}}, serviceError),
              React.createElement("div", {style:{color:TK.primary,marginTop:16,cursor:"pointer",fontSize:15,fontWeight:600},
                onClick:function(){fetchServiceOrders(statusFilter);}},"重试")
            )
          : serviceOrders.length === 0
            ? React.createElement("div", {style:{display:"flex",flexDirection:"column",alignItems:"center",paddingTop:80}},
                React.createElement("svg", {width:44,height:44,viewBox:"0 0 24 24",fill:"none",stroke:TK.textMuted,strokeWidth:1.8,strokeLinecap:"round",strokeLinejoin:"round",style:{marginBottom:12}}, React.createElement("path",{d:"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"}),React.createElement("path",{d:"m3.3 7 8.7 5 8.7-5M12 22V12"})),
                React.createElement("div", {style:{color:TK.textSecondary,fontSize:14}},"暂无服务订单"),
                React.createElement("div", {style:{color:TK.textMuted,fontSize:12,marginTop:6}},"你购买的护航服务会显示在这里")
              )
            : React.createElement("div", {style:{padding:"8px 16px"}},
                serviceOrders.map(function(o) {
                  if (!o) return null;
                  
  // Local service status text (avoids backend encoding issues)
  function getServiceStatusText(status) { var s = Number(status); var map = { 20:"等待打手接单", 30:"打手已接单，等待开启服务", 40:"服务进行中", 60:"打手已完成服务，等待确认", 70:"交易完成", 90:"退款申请中", 91:"退款处理中", 100:"售后处理中", 110:"已退款", 120:"已取消", 130:"订单已冻结" }; return map[s] || ("状态" + s); }
var svcStatusStyle = Number(o.status) === 70 ? TK.statusCompleted : (Number(o.status) === 110 || Number(o.status) === 120) ? TK.statusCancel : (Number(o.status) === 90 || Number(o.status) === 91 || Number(o.status) === 100 || Number(o.status) === 130) ? TK.statusRefund : TK.statusProgress;
                  var svcAmount = o.amount != null ? Number(o.amount) : 0;
                  return React.createElement("div", {key:"svc-"+o.id, onClick:function(){goServiceOrderDetail(o);},
                    style:{background:TK.cardBg,borderRadius:TK.cardRadius,boxShadow:TK.cardShadow,padding:TK.cardPadding,marginBottom:TK.cardGap,cursor:"pointer"}
                  },
                    React.createElement("div", {style:{display:"flex",justifyContent:"space-between",alignItems:"center",paddingBottom:7,marginBottom:10,borderBottom:"1px solid #F1F5F9"}},
                      React.createElement("span", {style:{fontSize:12,color:"#64748B",fontWeight:600}}, React.createElement("span",{style:{color:"#94A3B8",marginRight:5,fontSize:13}},"服务单"), o.orderNo || ""),
                      React.createElement("span", {style:{display:"inline-block",padding:"2px 8px",borderRadius:999,fontSize:11,fontWeight:600,background:svcStatusStyle.bg,color:svcStatusStyle.c,flexShrink:0,whiteSpace:"nowrap"}}, getServiceStatusText(o.status))
                    ),
                    React.createElement("div", {style:{display:"flex",gap:12,alignItems:"flex-start"}},
                      React.createElement("div", {style:{width:64,height:64,borderRadius:10,overflow:"hidden",flexShrink:0,background:"#F3F4F6",display:"flex",alignItems:"center",justifyContent:"center"}},
                        o.coverImage
                          ? React.createElement("img", {src:o.coverImage,alt:"",style:{width:"100%",height:"100%",objectFit:"cover"},
                              onError:function(e){e.target.style.display="none";e.target.parentElement.innerHTML="图片";}})
                          : React.createElement("span", {style:{fontSize:26}},"图")
                      ),
                      React.createElement("div", {style:{flex:1,minWidth:0,display:"flex",flexDirection:"column",paddingTop:2}},
                        React.createElement("div", {style:{fontSize:15,fontWeight:700,color:TK.textPrimary,lineHeight:"20px",
                          overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical"}},
                          o.serviceTitle || "护航服务"
                        ),
                        o.specName ? React.createElement("div", {style:{fontSize:12,color:"#64748B",marginTop:3}},"规格：" + o.specName) : null,
                        React.createElement("div", {style:{fontSize:11,color:"#94A3B8",marginTop:3,lineHeight:"15px"}},
                          (o.gameServer || "") + " · " + (o.boosterName || "随机打手") + (o.quantity > 1 ? " · x" + o.quantity : "")
                        )
                      )
                    ),
                    React.createElement("div", {style:{marginTop:8}},
                      React.createElement("div", {style:{borderTop:"1px solid #F1F5F9",paddingTop:8,display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:4}},
                        React.createElement("span", {style:{fontSize:11,color:TK.textMuted}}, fmtTime(o.createdAt)),
                        o.status === 20 ? React.createElement("span", {style:{fontSize:11,color:"#2563eb",maxWidth:160,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}, "等待打手接单") : null,
                        o.status === 30 ? React.createElement("span", {style:{fontSize:11,color:"#16a34a",maxWidth:160,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}, "已有打手接单") : null
                      ),
                      React.createElement("div", {style:{display:"flex",justifyContent:"space-between",alignItems:"center"}},
                        React.createElement("span", {style:{display:"flex",alignItems:"baseline",gap:4}},
                          React.createElement("span", {style:{fontSize:12,color:"#64748B",fontWeight:500}},"实付款"),
                          React.createElement("span", {style:{fontSize:17,fontWeight:700,color:"#2563eb"}},"￥" + svcAmount.toFixed(2))
                        ),
                        React.createElement("div", {style:{display:"flex",gap:8}},
                          o.status === 20 ? React.createElement("button", {
                            onClick:function(e){e.stopPropagation();openServiceSupport(o);},
                            style:{padding:"6px 14px",borderRadius:8,border:"1px solid #E5E7EB",background:"#fff",color:"#6B7280",fontSize:13,fontWeight:500,cursor:"pointer",whiteSpace:"nowrap"}
                          }, "联系客服") : null,
                          o.status === 30 ? React.createElement("button", {
                            onClick:function(e){e.stopPropagation();goServiceOrderDetail(o);},
                            style:{padding:"6px 14px",borderRadius:8,border:"1px solid #2563eb",background:"#fff",color:"#2563eb",fontSize:13,fontWeight:600,cursor:"pointer",whiteSpace:"nowrap"}
                          }, "查看详情") : null,
                              o.status === 30 ? React.createElement("button", {
                                onClick:function(e){e.stopPropagation();openServiceSupport(o);},
                                style:{padding:"6px 14px",borderRadius:8,border:"1px solid #E5E7EB",background:"#fff",color:"#6B7280",fontSize:13,fontWeight:500,cursor:"pointer",whiteSpace:"nowrap"}
                              }, "联系客服") : null,

                          o.status === 40 ? React.createElement("button", {
                            onClick:function(e){e.stopPropagation();openServiceSupport(o);},
                            style:{padding:"6px 14px",borderRadius:8,border:"1px solid #E5E7EB",background:"#fff",color:"#6B7280",fontSize:13,fontWeight:500,cursor:"pointer",whiteSpace:"nowrap"}
                          }, "联系客服") : null,
                          o.status === 40 ? React.createElement("button", {
                            onClick:function(e){e.stopPropagation();goServiceOrderDetail(o);},
                            style:{padding:"6px 14px",borderRadius:8,border:"1px solid #2563eb",background:"#fff",color:"#2563eb",fontSize:13,fontWeight:600,cursor:"pointer",whiteSpace:"nowrap"}
                          }, "查看详情") : null,
                            )
                      )
                    )
                  );
                })
              )
    : error && orders.length === 0 && !loading
      ? React.createElement("div", {style:{display:"flex",flexDirection:"column",alignItems:"center",paddingTop:80}},
          React.createElement("div", {style:{fontSize:40,marginBottom:12}},"??"),
          React.createElement("div", {style:{color:TK.textSecondary,fontSize:14}}, error),
          React.createElement("div", {style:{color:TK.textMuted,fontSize:12,marginTop:6}},"你购买的商品会显示在这里")
        )
      : orders.length === 0 && !loading
        ? React.createElement("div", {style:{display:"flex",flexDirection:"column",alignItems:"center",paddingTop:80}},
            React.createElement("div", {style:{fontSize:40,marginBottom:12}},"??"),
            React.createElement("div", {style:{color:TK.textSecondary,fontSize:14}},"暂无相关订单"),
            React.createElement("div", {style:{color:TK.textMuted,fontSize:12,marginTop:6}},"你购买的商品会显示在这里")
          )
        : React.createElement("div", {style:{padding:"8px 16px"}},
            filteredOrders.map(function(o) {
              if (!o) return null;
              var cover = getCover(o);
              var hint = statusHint(o.status);
              var btns = renderOrderBtns(o);
              return React.createElement("div", {key:o.id,
                onClick:function(){goOrder(o);},
                style:{background:TK.cardBg,borderRadius:TK.cardRadius,boxShadow:TK.cardShadow,padding:TK.cardPadding,marginBottom:TK.cardGap,cursor:"pointer"}
              },
                React.createElement("div", {style:{display:"flex",justifyContent:"space-between",alignItems:"center",paddingBottom:7,marginBottom:10,borderBottom:"1px solid #F1F5F9"}},
                  React.createElement("span", {style:{fontSize:12,color:"#64748B",fontWeight:600}}, React.createElement("span",{style:{color:"#94A3B8",marginRight:5,fontSize:13}},"\u25A6"), fmtOrderId(o)),
                  statusBadge(o.status)
                ),
                React.createElement("div", {style:{display:"flex",gap:12,alignItems:"flex-start"}},
                  React.createElement("div", {style:{width:80,height:80,borderRadius:10,overflow:"hidden",flexShrink:0,background:"#F3F4F6",display:"flex",alignItems:"center",justifyContent:"center"}},
                    cover
                      ? React.createElement("img", {src:cover,alt:"",style:{width:"100%",height:"100%",objectFit:"cover"},
                          onError:function(e){e.target.style.display="none";e.target.parentElement.innerHTML="??";}})
                      : React.createElement("span", {style:{fontSize:30}},"??")
                  ),
                  React.createElement("div", {style:{flex:1,minWidth:0,display:"flex",flexDirection:"column",paddingTop:2}},
                    React.createElement("div", {style:{fontSize:16,fontWeight:700,color:TK.textPrimary,lineHeight:"21px",
                      overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical"}},
                      fmtProductTitle(o)
                    ),
                    React.createElement("div", {style:{fontSize:12,color:"#64748B",marginTop:4,lineHeight:"16px"}},
                      (o.server||"") + "--" + getAccountTypeLabel(o)
                    )
                  )
                ),
                React.createElement("div", {style:{marginTop:8}},
                  React.createElement("div", {style:{borderTop:"1px solid #F1F5F9",paddingTop:8,display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:4}},
                    React.createElement("span", {style:{fontSize:11,color:TK.textMuted}}, fmtTime(o.create_time||o.created_at)),
                    hint ? React.createElement("span", {style:{fontSize:11,color:o.status===80?"#10b981":o.status===10?"#b45309":o.status>=20&&o.status<80?"#2563eb":o.status===120?"#94a3b8":o.status>=90&&o.status<120?"#dc2626":TK.textMuted,maxWidth:160,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}, hint) : null
                  ),
                  React.createElement("div", {style:{display:"flex",justifyContent:"flex-end",marginBottom:4}},
                    fmtPrice(o.amount || o.price)
                  ),
                  React.createElement("div", {style:{display:"flex",justifyContent:"flex-end",gap:8}},
                    btns
                  )
                )
              );
            }),
            loading && React.createElement("div",{style:{textAlign:"center",padding:16,color:TK.textMuted,fontSize:13}},"加载中..."),
            filteredOrders.length > 0 && orders.length < total && React.createElement("div",{style:{textAlign:"center",padding:"8px 0 24px"}},
              React.createElement("button",{onClick:loadMore,disabled:loading,
                style:{padding:"10px 40px",borderRadius:20,border:"1px solid #E5E7EB",background:"#fff",color:TK.textSecondary,fontSize:14,cursor:"pointer"}},"加载更多")
            )
          )
  );
}

window.NK = window.NK || {};
NK.OrdersPage = ordersPage;