import { cn } from "@/lib/utils";
import type { TradeRecord } from "@/types/models";
import { format } from "date-fns";
import { ListOrdered } from "lucide-react";

interface TradeListProps {
  trades: TradeRecord[];
}

export function TradeList({ trades }: TradeListProps) {
  return (
    <div className="bg-[#1e1e1e] border border-[#2c2c2c] rounded-xl overflow-hidden">
      <div className="px-4 py-3 border-b border-[#2c2c2c] flex items-center justify-between">
        <h3 className="text-sm font-semibold text-[#e1e1e1] flex items-center gap-2">
          <ListOrdered className="w-4 h-4 text-[#00ffcc]" />
          交易日志
        </h3>
        <span className="text-[10px] font-bold text-[#666666]">最近成交</span>
      </div>
      <div className="p-4">
        <div className="divide-y divide-[#2c2c2c] max-h-[500px] overflow-auto custom-scrollbar">
          {trades.length === 0 ? (
            <div className="px-6 py-20 text-center text-[#666666] font-bold uppercase tracking-widest">
              无实时数据流
            </div>
          ) : (
            trades.map((trade) => (
              <div
                key={trade.id}
                className="px-6 py-4 hover:bg-[#121212] transition-colors group cursor-default"
              >
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <span
                      className={cn(
                        "inline-flex items-center px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-widest italic shadow-sm",
                        trade.side === "buy"
                          ? "bg-[#00ffcc]/10 text-[#00ffcc]"
                          : "bg-[#ff5252]/10 text-[#ff5252]",
                      )}
                    >
                      {trade.side}
                    </span>
                    <div>
                      <p className="text-sm font-black text-[#e1e1e1] group-hover:text-[#00ffcc] transition-colors tracking-tight">
                        {trade.symbol}
                      </p>
                      <p className="text-[10px] text-[#666666] font-bold uppercase tracking-tighter">
                        {trade.agentName || "系统执行"}
                      </p>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="text-sm font-black text-[#e1e1e1] tracking-tighter">
                      {trade.quantity} @ {trade.price.toFixed(2)}
                    </p>
                    <p className="text-[10px] text-[#666666] font-bold uppercase">
                      {format(new Date(trade.timestamp), "HH:mm:ss")}
                    </p>
                  </div>
                </div>
                {trade.pnl !== undefined && (
                  <div className="mt-2 flex justify-end">
                    <span
                      className={cn(
                        "text-xs font-black italic tracking-widest",
                        trade.pnl >= 0 ? "text-[#00ffcc]" : "text-[#ff5252]",
                      )}
                    >
                      {trade.pnl >= 0 ? "+" : ""}
                      {trade.pnl.toFixed(2)} ({trade.pnlPercent?.toFixed(2)}%)
                    </span>
                  </div>
                )}
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  );
}
