"use client";

import { useOrderBook, type PricePrecision } from "@/hooks/useOrderBook";
import { cn } from "@/lib/utils";

interface OrderBookProps {
  symbol?: string;
  maxRows?: number;
}

const PRECISION_OPTIONS: { value: PricePrecision; label: string }[] = [
  { value: 0.01, label: "0.01" },
  { value: 0.1, label: "0.1" },
  { value: 1, label: "1" },
  { value: 10, label: "10" },
];

export function OrderBook({ symbol, maxRows = 15 }: OrderBookProps) {
  const {
    bids,
    asks,
    maxQuantity,
    midPrice,
    spread,
    spreadPercent,
    buyRatio,
    sellRatio,
    precision,
    setPrecision,
    isLoading,
  } = useOrderBook({ symbol, maxRows });

  if (isLoading) {
    return (
      <div className="animate-pulse">
        <div className="p-20 text-center text-[#666666] font-black uppercase tracking-widest text-xs">
          同步订单簿...
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col">
      {/* Precision Selector */}
      <div className="flex items-center justify-between mb-3">
        <p className="text-[10px] font-bold text-[#666666] uppercase tracking-tighter">
          {symbol}
        </p>
        <div className="flex gap-1 bg-[#2c2c2c]/30 p-1 rounded-lg">
          {PRECISION_OPTIONS.map((opt) => (
            <button
              key={opt.value}
              onClick={() => setPrecision(opt.value)}
              className={cn(
                "px-2 py-1 text-[9px] font-black rounded-md transition-all",
                precision === opt.value
                  ? "bg-[#00ffcc] text-[#121212]"
                  : "text-[#666666] hover:text-[#e1e1e1]",
              )}
            >
              {opt.label}
            </button>
          ))}
        </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>价格 (USD)</span>
        <span>数量 ({symbol?.split("USDT")[0]})</span>
      </div>

      {/* Asks */}
      <div className="flex-1 flex flex-col-reverse justify-end">
        {asks.slice(0, maxRows).map((ask, index) => (
          <div
            key={`ask-${index}`}
            className="relative px-4 py-1 group hover:bg-[#ff5252]/5 cursor-default transition-colors"
          >
            <div
              className="absolute right-0 top-0 bottom-0 bg-[#ff5252]/10 transition-all duration-500"
              style={{ width: `${(ask.quantity / maxQuantity) * 100}%` }}
            />
            <div className="relative flex justify-between text-[11px] font-bold font-mono">
              <span className="text-[#ff5252] group-hover:text-[#ff1a1a]">
                {ask.price.toFixed(precision < 1 ? 2 : 0)}
              </span>
              <span className="text-[#e1e1e1]">{ask.quantity.toFixed(4)}</span>
            </div>
          </div>
        ))}
      </div>

      {/* Mid Price */}
      <div className="py-3 px-4 bg-[#2c2c2c]/20 border-y border-[#2c2c2c] flex items-center justify-between">
        <span className="text-sm font-black text-[#e1e1e1] tracking-tighter">
          {midPrice.toLocaleString(undefined, { minimumFractionDigits: 2 })}
        </span>
        <div className="text-right">
          <p className="text-[9px] font-black text-[#666666] uppercase">价差</p>
          <p className="text-[10px] font-bold text-[#ffb74d] tracking-tighter">
            {spread.toFixed(precision < 1 ? 2 : 1)} ({spreadPercent.toFixed(3)}
            %)
          </p>
        </div>
      </div>

      {/* Bids */}
      <div className="flex-1">
        {bids.slice(0, maxRows).map((bid, index) => (
          <div
            key={`bid-${index}`}
            className="relative px-4 py-1 group hover:bg-[#00ffcc]/5 cursor-default transition-colors"
          >
            <div
              className="absolute right-0 top-0 bottom-0 bg-[#00ffcc]/10 transition-all duration-500"
              style={{ width: `${(bid.quantity / maxQuantity) * 100}%` }}
            />
            <div className="relative flex justify-between text-[11px] font-bold font-mono">
              <span className="text-[#00ffcc] group-hover:text-[#00e6b8]">
                {bid.price.toFixed(precision < 1 ? 2 : 0)}
              </span>
              <span className="text-[#e1e1e1]">{bid.quantity.toFixed(4)}</span>
            </div>
          </div>
        ))}
      </div>

      {/* Ratio Bar */}
      <div className="p-4 border-t border-[#2c2c2c]">
        <div className="flex justify-between text-[9px] font-black uppercase mb-2">
          <span className="text-[#00ffcc]">买入 {buyRatio.toFixed(1)}%</span>
          <span className="text-[#ff5252]">卖出 {sellRatio.toFixed(1)}%</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: `${buyRatio}%` }}
          />
          <div
            className="h-full bg-[#ff5252] shadow-[0_0_8px_rgba(255,82,82,0.5)] transition-all duration-700"
            style={{ width: `${sellRatio}%` }}
          />
        </div>
      </div>
    </div>
  );
}
