"use client";

import type { Position } from "@/types/models";
import { cn } from "@/design-system/utils/cn";

interface PositionTableProps {
  positions: Position[];
  onClosePosition?: (positionId: string) => void;
}

export function PositionTable({
  positions,
  onClosePosition,
}: PositionTableProps) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full">
        <thead>
          <tr className="bg-[#1e1e1e]">
            <th className="px-4 py-2 text-left text-xs font-bold text-[#a0a0a0] uppercase tracking-widest">
              币种
            </th>
            <th className="px-4 py-2 text-left text-xs font-bold text-[#a0a0a0] uppercase tracking-widest">
              方向
            </th>
            <th className="px-4 py-2 text-right text-xs font-bold text-[#a0a0a0] uppercase tracking-widest">
              数量
            </th>
            <th className="px-4 py-2 text-right text-xs font-bold text-[#a0a0a0] uppercase tracking-widest">
              开仓价
            </th>
            <th className="px-4 py-2 text-right text-xs font-bold text-[#a0a0a0] uppercase tracking-widest">
              标记价
            </th>
            <th className="px-4 py-2 text-right text-xs font-bold text-[#a0a0a0] uppercase tracking-widest">
              未实现盈亏
            </th>
            <th className="px-4 py-2 text-center text-xs font-bold text-[#a0a0a0] uppercase tracking-widest">
              操作
            </th>
          </tr>
        </thead>
        <tbody>
          {positions.length === 0 ? (
            <tr>
              <td
                colSpan={7}
                className="px-4 py-8 text-center text-sm text-[#666666]"
              >
                暂无持仓
              </td>
            </tr>
          ) : (
            positions.map((position) => (
              <tr
                key={position.id}
                className="border-b border-[#2c2c2c] hover:bg-[#1e1e1e] transition-colors"
              >
                {/* Symbol */}
                <td className="px-4 py-3 whitespace-nowrap">
                  <span className="text-sm font-medium text-[#e1e1e1]">
                    {position.symbol}
                  </span>
                </td>

                {/* Side */}
                <td className="px-4 py-3 whitespace-nowrap">
                  <span
                    className={cn(
                      "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
                      position.side === "long"
                        ? "bg-[rgba(0,255,204,0.15)] text-[#00ffcc]"
                        : "bg-[rgba(255,82,82,0.15)] text-[#ff5252]",
                    )}
                  >
                    {position.side === "long" ? "做多" : "做空"}
                  </span>
                </td>

                {/* Quantity */}
                <td className="px-4 py-3 whitespace-nowrap text-right">
                  <span className="text-sm text-[#a0a0a0]">
                    {position.quantity}
                  </span>
                </td>

                {/* Entry Price */}
                <td className="px-4 py-3 whitespace-nowrap text-right">
                  <span className="text-sm text-[#a0a0a0]">
                    {position.entryPrice.toFixed(2)}
                  </span>
                </td>

                {/* Mark Price */}
                <td className="px-4 py-3 whitespace-nowrap text-right">
                  <span className="text-sm text-[#a0a0a0]">
                    {position.markPrice.toFixed(2)}
                  </span>
                </td>

                {/* Unrealized P&L */}
                <td className="px-4 py-3 whitespace-nowrap text-right">
                  <div className="flex flex-col items-end">
                    <p
                      className={cn(
                        "text-sm font-medium",
                        position.unrealizedPnl >= 0
                          ? "text-[#00ffcc]"
                          : "text-[#ff5252]",
                      )}
                    >
                      {position.unrealizedPnl >= 0 ? "+" : ""}
                      {position.unrealizedPnl.toFixed(2)}
                    </p>
                    <p
                      className={cn(
                        "text-xs",
                        position.unrealizedPnlPercent >= 0
                          ? "text-[#00ffcc]"
                          : "text-[#ff5252]",
                      )}
                    >
                      {position.unrealizedPnlPercent >= 0 ? "+" : ""}
                      {position.unrealizedPnlPercent.toFixed(2)}%
                    </p>
                  </div>
                </td>

                {/* Action */}
                <td className="px-4 py-3 whitespace-nowrap text-center">
                  <button
                    onClick={() => onClosePosition?.(position.id)}
                    className="px-3 py-1 text-xs font-medium rounded border border-[#ff5252] bg-transparent text-[#ff5252] hover:bg-[rgba(255,82,82,0.1)] transition-colors cursor-pointer"
                  >
                    平仓
                  </button>
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
}
