"use client";

import { useRecentTrades } from "@/hooks/useRecentTrades";
import { cn } from "@/lib/utils";

interface RecentTradesProps {
  symbol?: string;
  maxTrades?: number;
  enableSound?: boolean;
}

export function RecentTrades({ symbol, maxTrades = 20 }: RecentTradesProps) {
  const { trades, stats, isLoading } = useRecentTrades({
    symbol,
    maxTrades,
  });

  const formatTime = (timestamp: string) => {
    const date = new Date(timestamp);
    return date.toLocaleTimeString("zh-CN", {
      hour12: false,
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    });
  };

  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]">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-sm font-semibold text-[#e1e1e1]">最近成交</h3>
            <p className="text-[10px] font-bold text-[#666666] mt-1 uppercase tracking-tighter">
              {symbol}
            </p>
          </div>
          <div className="text-right">
            <div className="text-[9px] font-black uppercase tracking-tighter flex gap-2">
              <span className="text-[#00ffcc]">买: {stats.buyCount}</span>
              <span className="text-[#666666]">/</span>
              <span className="text-[#ff5252]">卖: {stats.sellCount}</span>
            </div>
            <div className="text-[9px] font-bold text-[#a0a0a0] mt-1">
              成交量: {stats.totalVolume.toFixed(2)}
            </div>
          </div>
        </div>
      </div>

      {/* Column Headers */}
      <div className="px-4 py-2 flex justify-between text-[9px] font-black text-[#666666] uppercase tracking-widest border-b border-[#2c2c2c]">
        <span className="w-16">时间</span>
        <span className="flex-1">价格</span>
        <span className="w-20 text-right">数量</span>
      </div>

      {/* Trades List */}
      <div className="flex-1 overflow-y-auto custom-scrollbar max-h-[400px]">
        {trades.map((trade, index) => (
          <div
            key={`${trade.id}-${index}`}
            className={cn(
              "px-4 py-1.5 flex items-center justify-between text-[11px] font-mono transition-all duration-500",
              trade.isNew ? "bg-[#00ffcc]/5" : "hover:bg-[#2c2c2c]/30",
            )}
          >
            <span className="text-[#666666] w-16">
              {formatTime(trade.timestamp)}
            </span>

            <div className="flex-1 flex items-center gap-2">
              <div
                className={cn(
                  "w-1.5 h-1.5 rounded-full shadow-[0_0_5px_currentColor]",
                  trade.side === "buy"
                    ? "bg-[#00ffcc] text-[#00ffcc]"
                    : "bg-[#ff5252] text-[#ff5252]",
                )}
              />
              <span
                className={cn(
                  "font-bold",
                  trade.side === "buy" ? "text-[#00ffcc]" : "text-[#ff5252]",
                )}
              >
                {trade.price.toLocaleString(undefined, {
                  minimumFractionDigits: 2,
                })}
              </span>
            </div>

            <span className="text-[#e1e1e1] font-bold w-20 text-right">
              {trade.quantity.toFixed(4)}
            </span>
          </div>
        ))}
      </div>

      {/* Tape Momentum Ratio */}
      <div className="p-4 border-t border-[#2c2c2c]">
        <div className="flex justify-between text-[9px] font-black uppercase mb-2">
          <span className="text-[#00ffcc]">
            买入动能 {stats.buyRatio.toFixed(1)}%
          </span>
          <span className="text-[#666666] italic">实时数据流活跃中</span>
        </div>
        <div className="h-1 bg-[#2c2c2c]/50 rounded-full overflow-hidden flex">
          <div
            className="h-full bg-[#00ffcc] shadow-[0_0_8px_rgba(0,255,204,0.5)] transition-all duration-700"
            style={{ width: `${stats.buyRatio}%` }}
          />
          <div
            className="h-full bg-[#666666]/30 transition-all duration-700"
            style={{ width: `${100 - stats.buyRatio}%` }}
          />
        </div>
      </div>
    </div>
  );
}
