import type { Order } from "../../types/models";

interface PendingOrdersProps {
  orders: Order[];
  onCancelOrder?: (orderId: string) => void;
  isLoading?: boolean;
}

// Theme colors - Design System tokens
const THEME = {
  background: "#121212",
  grid: "#1e1e1e",
  text: "#a0a0a0",
  textLight: "#e1e1e1",
  up: "#00ffcc",
  down: "#ff5252",
  border: "#2c2c2c",
  hoverBg: "#383838",
};

const statusConfig: Record<
  string,
  { label: string; bgColor: string; color: string }
> = {
  pending: {
    label: "待处理",
    bgColor: "rgba(234, 179, 8, 0.15)",
    color: "#eab308",
  },
  open: {
    label: "已挂单",
    bgColor: "rgba(59, 130, 246, 0.15)",
    color: "#3b82f6",
  },
  partially_filled: {
    label: "部分成交",
    bgColor: "rgba(168, 85, 247, 0.15)",
    color: "#a855f7",
  },
  filled: {
    label: "已成交",
    bgColor: "rgba(0, 212, 170, 0.15)",
    color: THEME.up,
  },
  cancelled: {
    label: "已取消",
    bgColor: "rgba(148, 163, 184, 0.15)",
    color: "#94a3b8",
  },
  rejected: {
    label: "已拒绝",
    bgColor: "rgba(239, 68, 68, 0.15)",
    color: THEME.down,
  },
};

const typeConfig: Record<string, string> = {
  market: "市价",
  limit: "限价",
  stop: "止损",
  stop_limit: "止损限价",
};

export function PendingOrders({
  orders,
  onCancelOrder,
  isLoading,
}: PendingOrdersProps) {
  // Filter to show only active orders
  const activeOrders = orders.filter(
    (order) =>
      order.status === "pending" ||
      order.status === "open" ||
      order.status === "partially_filled",
  );

  if (isLoading) {
    return (
      <div className="bg-[#1e1e1e] border border-[#2c2c2c] rounded-xl overflow-hidden flex flex-col">
        <div className="px-4 py-3 border-b border-[#2c2c2c]">
          <h3 className="text-sm font-semibold text-[#e1e1e1]">委托订单</h3>
        </div>
        <div className="animate-pulse p-20 text-center text-[#666666] font-black uppercase tracking-widest text-xs">
          加载订单中...
        </div>
      </div>
    );
  }

  return (
    <div className="bg-[#1e1e1e] border border-[#2c2c2c] rounded-xl overflow-hidden flex flex-col">
      {/* Header */}
      <div className="px-4 py-3 border-b border-[#2c2c2c]">
        <h3 className="text-sm font-semibold text-[#e1e1e1]">委托订单</h3>
      </div>

      {/* Content */}
      <div className="p-4">
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse" }}>
            <thead>
              <tr style={{ backgroundColor: THEME.grid }}>
                <th
                  style={{
                    padding: "8px 12px",
                    textAlign: "left",
                    fontSize: "11px",
                    fontWeight: 500,
                    color: THEME.text,
                    textTransform: "uppercase",
                  }}
                >
                  订单ID
                </th>
                <th
                  style={{
                    padding: "8px 12px",
                    textAlign: "left",
                    fontSize: "11px",
                    fontWeight: 500,
                    color: THEME.text,
                    textTransform: "uppercase",
                  }}
                >
                  交易对
                </th>
                <th
                  style={{
                    padding: "8px 12px",
                    textAlign: "left",
                    fontSize: "11px",
                    fontWeight: 500,
                    color: THEME.text,
                    textTransform: "uppercase",
                  }}
                >
                  类型
                </th>
                <th
                  style={{
                    padding: "8px 12px",
                    textAlign: "left",
                    fontSize: "11px",
                    fontWeight: 500,
                    color: THEME.text,
                    textTransform: "uppercase",
                  }}
                >
                  方向
                </th>
                <th
                  style={{
                    padding: "8px 12px",
                    textAlign: "right",
                    fontSize: "11px",
                    fontWeight: 500,
                    color: THEME.text,
                    textTransform: "uppercase",
                  }}
                >
                  价格
                </th>
                <th
                  style={{
                    padding: "8px 12px",
                    textAlign: "right",
                    fontSize: "11px",
                    fontWeight: 500,
                    color: THEME.text,
                    textTransform: "uppercase",
                  }}
                >
                  数量
                </th>
                <th
                  style={{
                    padding: "8px 12px",
                    textAlign: "center",
                    fontSize: "11px",
                    fontWeight: 500,
                    color: THEME.text,
                    textTransform: "uppercase",
                  }}
                >
                  状态
                </th>
                <th
                  style={{
                    padding: "8px 12px",
                    textAlign: "center",
                    fontSize: "11px",
                    fontWeight: 500,
                    color: THEME.text,
                    textTransform: "uppercase",
                  }}
                >
                  操作
                </th>
              </tr>
            </thead>
            <tbody>
              {activeOrders.length === 0 ? (
                <tr>
                  <td
                    colSpan={8}
                    style={{
                      padding: "32px 12px",
                      textAlign: "center",
                      fontSize: "13px",
                      color: THEME.text,
                    }}
                  >
                    暂无委托订单
                  </td>
                </tr>
              ) : (
                activeOrders.map((order) => {
                  const status = statusConfig[order.status] || {
                    label: order.status,
                    bgColor: "rgba(148, 163, 184, 0.15)",
                    color: "#94a3b8",
                  };
                  return (
                    <tr
                      key={order.id}
                      style={{
                        borderBottom: `1px solid ${THEME.border}`,
                        transition: "background-color 0.15s ease",
                      }}
                      onMouseEnter={(e) => {
                        (
                          e.currentTarget as HTMLTableRowElement
                        ).style.backgroundColor = THEME.hoverBg;
                      }}
                      onMouseLeave={(e) => {
                        (
                          e.currentTarget as HTMLTableRowElement
                        ).style.backgroundColor = "transparent";
                      }}
                    >
                      <td style={{ padding: "8px 12px", whiteSpace: "nowrap" }}>
                        <span
                          style={{
                            fontSize: "11px",
                            color: THEME.text,
                            fontFamily: "monospace",
                          }}
                        >
                          {order.id.slice(-8)}
                        </span>
                      </td>
                      <td style={{ padding: "8px 12px", whiteSpace: "nowrap" }}>
                        <span
                          style={{
                            fontSize: "13px",
                            fontWeight: 500,
                            color: THEME.textLight,
                          }}
                        >
                          {order.symbol}
                        </span>
                      </td>
                      <td style={{ padding: "8px 12px", whiteSpace: "nowrap" }}>
                        <span style={{ fontSize: "12px", color: THEME.text }}>
                          {typeConfig[order.type] || order.type}
                        </span>
                      </td>
                      <td style={{ padding: "8px 12px", whiteSpace: "nowrap" }}>
                        <span
                          style={{
                            display: "inline-flex",
                            alignItems: "center",
                            padding: "2px 8px",
                            borderRadius: "4px",
                            fontSize: "11px",
                            fontWeight: 500,
                            backgroundColor:
                              order.side === "buy"
                                ? "rgba(0, 212, 170, 0.15)"
                                : "rgba(239, 68, 68, 0.15)",
                            color: order.side === "buy" ? THEME.up : THEME.down,
                          }}
                        >
                          {order.side === "buy" ? "买入" : "卖出"}
                        </span>
                      </td>
                      <td
                        style={{
                          padding: "8px 12px",
                          whiteSpace: "nowrap",
                          textAlign: "right",
                        }}
                      >
                        <span
                          style={{ fontSize: "13px", color: THEME.textLight }}
                        >
                          {order.price ? order.price.toFixed(2) : "市价"}
                        </span>
                      </td>
                      <td
                        style={{
                          padding: "8px 12px",
                          whiteSpace: "nowrap",
                          textAlign: "right",
                        }}
                      >
                        <div
                          style={{ fontSize: "13px", color: THEME.textLight }}
                        >
                          {order.filledQuantity > 0 ? (
                            <span>
                              {order.filledQuantity}/{order.quantity}
                            </span>
                          ) : (
                            <span>{order.quantity}</span>
                          )}
                        </div>
                        {order.filledQuantity > 0 && (
                          <div style={{ fontSize: "11px", color: THEME.text }}>
                            {(
                              (order.filledQuantity / order.quantity) *
                              100
                            ).toFixed(0)}
                            %
                          </div>
                        )}
                      </td>
                      <td
                        style={{
                          padding: "8px 12px",
                          whiteSpace: "nowrap",
                          textAlign: "center",
                        }}
                      >
                        <span
                          style={{
                            display: "inline-flex",
                            alignItems: "center",
                            padding: "2px 8px",
                            borderRadius: "4px",
                            fontSize: "11px",
                            fontWeight: 500,
                            backgroundColor: status.bgColor,
                            color: status.color,
                          }}
                        >
                          {status.label}
                        </span>
                      </td>
                      <td
                        style={{
                          padding: "8px 12px",
                          whiteSpace: "nowrap",
                          textAlign: "center",
                        }}
                      >
                        {(order.status === "pending" ||
                          order.status === "open" ||
                          order.status === "partially_filled") && (
                          <button
                            onClick={() => onCancelOrder?.(order.id)}
                            style={{
                              padding: "4px 12px",
                              fontSize: "12px",
                              fontWeight: 500,
                              borderRadius: "4px",
                              border: `1px solid ${THEME.border}`,
                              backgroundColor: "transparent",
                              color: THEME.text,
                              cursor: "pointer",
                              transition: "all 0.15s ease",
                            }}
                            onMouseEnter={(e) => {
                              (
                                e.currentTarget as HTMLButtonElement
                              ).style.backgroundColor = THEME.hoverBg;
                            }}
                            onMouseLeave={(e) => {
                              (
                                e.currentTarget as HTMLButtonElement
                              ).style.backgroundColor = "transparent";
                            }}
                          >
                            撤销
                          </button>
                        )}
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}
