import { OrderBook } from '../types';
import { cn } from '../lib/utils';

interface OrderBookViewProps {
  orderBook: OrderBook;
  className?: string;
}

export const OrderBookView = ({ orderBook, className }: OrderBookViewProps) => {
  const maxTotal = Math.max(
    ...orderBook.bids.map(b => b.total),
    ...orderBook.asks.map(a => a.total)
  );

  const getDepthWidth = (total: number) => {
    return (total / maxTotal) * 100;
  };

  return (
    <div className={cn('glassmorphism rounded-xl p-6', className)}>
      <h3 className="text-lg font-semibold text-foreground mb-4">Order Book</h3>
      
      <div className="grid grid-cols-2 gap-4">
        {/* Bids */}
        <div>
          <div className="flex items-center gap-2 mb-3">
            <div className="w-3 h-3 rounded-full bg-green-500" />
            <span className="text-sm font-medium text-green-500">Bids</span>
          </div>
          <div className="space-y-1">
            {orderBook.bids.map((bid, index) => (
              <div key={`bid-${index}`} className="relative">
                <div
                  className="absolute inset-y-0 right-0 bg-green-500/20 rounded"
                  style={{ width: `${getDepthWidth(bid.total)}%` }}
                />
                <div className="relative flex justify-between items-center px-2 py-1 text-sm">
                  <span className="font-mono text-green-500">{bid.price.toLocaleString()}</span>
                  <span className="font-mono text-muted-foreground">{bid.amount.toFixed(4)}</span>
                  <span className="font-mono text-muted-foreground">{bid.total.toFixed(2)}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Asks */}
        <div>
          <div className="flex items-center gap-2 mb-3">
            <div className="w-3 h-3 rounded-full bg-red-500" />
            <span className="text-sm font-medium text-red-500">Asks</span>
          </div>
          <div className="space-y-1">
            {orderBook.asks.map((ask, index) => (
              <div key={`ask-${index}`} className="relative">
                <div
                  className="absolute inset-y-0 right-0 bg-red-500/20 rounded"
                  style={{ width: `${getDepthWidth(ask.total)}%` }}
                />
                <div className="relative flex justify-between items-center px-2 py-1 text-sm">
                  <span className="font-mono text-red-500">{ask.price.toLocaleString()}</span>
                  <span className="font-mono text-muted-foreground">{ask.amount.toFixed(4)}</span>
                  <span className="font-mono text-muted-foreground">{ask.total.toFixed(2)}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Spread */}
      <div className="mt-4 pt-4 border-t border-border">
        <div className="flex justify-between items-center text-sm">
          <span className="text-muted-foreground">Spread</span>
          <span className="font-mono text-foreground">
            {orderBook.asks[0] && orderBook.bids[0] 
              ? ((orderBook.asks[0].price - orderBook.bids[0].price) / orderBook.bids[0].price * 100).toFixed(3)
              : '0.000'}%
          </span>
        </div>
      </div>
    </div>
  );
};