interface OrderBookLevel {
  price: number;
  size: number;
}

interface Props {
  bids?: OrderBookLevel[];
  asks?: OrderBookLevel[];
  spread?: number;
}

export function OrderBook({ bids = [], asks = [], spread }: Props) {
  const maxSize = Math.max(
    ...bids.map((b) => b.size),
    ...asks.map((a) => a.size),
    1,
  );

  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center justify-between px-3 py-1.5 border-b border-[var(--color-border)]">
        <span className="text-sm font-medium">Order Book</span>
        {spread !== undefined && (
          <span className="text-xs text-[var(--color-text-secondary)]">
            Spread: {spread.toFixed(2)}
          </span>
        )}
      </div>

      <div className="flex-1 overflow-auto">
        {/* Header */}
        <div className="grid grid-cols-3 px-3 py-1 text-xs text-[var(--color-text-secondary)] border-b border-[var(--color-border)]">
          <span>Price</span>
          <span className="text-right">Size</span>
          <span className="text-right">Total</span>
        </div>

        {/* Asks (reversed so lowest ask is at bottom) */}
        <div className="flex flex-col-reverse">
          {asks.slice(0, 10).map((level, i) => {
            const pct = (level.size / maxSize) * 100;
            return (
              <div
                key={`ask-${level.price}`}
                className="relative grid grid-cols-3 px-3 py-0.5 text-xs"
              >
                <div
                  className="absolute inset-0 bg-red-500/10"
                  style={{ width: `${pct}%`, right: 0, left: 'auto' }}
                />
                <span className="relative text-[var(--color-red)]">
                  {level.price.toFixed(2)}
                </span>
                <span className="relative text-right">{level.size}</span>
                <span className="relative text-right text-[var(--color-text-secondary)]">
                  {asks
                    .slice(0, i + 1)
                    .reduce((s, l) => s + l.size, 0)}
                </span>
              </div>
            );
          })}
        </div>

        {/* Spread indicator */}
        <div className="px-3 py-1 text-center text-xs font-medium border-y border-[var(--color-border)] bg-[var(--color-bg-primary)]">
          {spread !== undefined ? spread.toFixed(2) : '--'}
        </div>

        {/* Bids */}
        {bids.slice(0, 10).map((level, i) => {
          const pct = (level.size / maxSize) * 100;
          return (
            <div
              key={`bid-${level.price}`}
              className="relative grid grid-cols-3 px-3 py-0.5 text-xs"
            >
              <div
                className="absolute inset-0 bg-green-500/10"
                style={{ width: `${pct}%`, right: 0, left: 'auto' }}
              />
              <span className="relative text-[var(--color-green)]">
                {level.price.toFixed(2)}
              </span>
              <span className="relative text-right">{level.size}</span>
              <span className="relative text-right text-[var(--color-text-secondary)]">
                {bids
                  .slice(0, i + 1)
                  .reduce((s, l) => s + l.size, 0)}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}
