import React, { memo } from 'react';
import { useUpbitOrderbook } from '../../hooks/useUpbitOrderbook';

interface Props {
  market: string;
  onPick?: (price: number, rowType: 'ask' | 'bid') => void;
  fillHeight?: boolean;
  hideHeader?: boolean;
  depth?: number;
}

function fmtPrice(p: number): string {
  if (!Number.isFinite(p)) return '-';
  return p >= 1000 ? p.toLocaleString('ko-KR', { maximumFractionDigits: 0 }) : p.toFixed(4);
}

function fmtSize(s: number): string {
  if (!Number.isFinite(s)) return '-';
  if (s >= 1000) return s.toLocaleString('ko-KR', { maximumFractionDigits: 2 });
  return s.toFixed(4);
}

const PaperCompactOrderbook: React.FC<Props> = memo(({
  market,
  onPick,
  fillHeight = false,
  hideHeader = false,
  depth = 8,
}) => {
  const { orderbook } = useUpbitOrderbook(market);
  const rowCount = fillHeight ? Math.max(depth, 12) : depth;
  const asks = orderbook.asks.slice(0, rowCount).reverse();
  const bids = orderbook.bids.slice(0, rowCount);
  const maxSize = Math.max(
    ...asks.map(a => a.size),
    ...bids.map(b => b.size),
    1,
  );
  const mid = bids[0]?.price ?? asks[asks.length - 1]?.price ?? 0;

  return (
    <div className={`ptd-ob${fillHeight ? ' ptd-ob--fill' : ''}`}>
      {!hideHeader && <div className="ptd-ob-head">호가 (Depth)</div>}
      <div className="ptd-ob-body">
        {asks.map(a => (
          <button
            key={`a-${a.price}`}
            type="button"
            className="ptd-ob-row ptd-ob-row--ask"
            onClick={() => onPick?.(a.price, 'ask')}
          >
            <span className="ptd-ob-bar" style={{ width: `${(a.size / maxSize) * 100}%` }} />
            <span className="ptd-ob-price">{fmtPrice(a.price)}</span>
            <span className="ptd-ob-size">{fmtSize(a.size)}</span>
          </button>
        ))}
        <div className="ptd-ob-mid">{mid ? fmtPrice(mid) : '—'}</div>
        {bids.map(b => (
          <button
            key={`b-${b.price}`}
            type="button"
            className="ptd-ob-row ptd-ob-row--bid"
            onClick={() => onPick?.(b.price, 'bid')}
          >
            <span className="ptd-ob-bar" style={{ width: `${(b.size / maxSize) * 100}%` }} />
            <span className="ptd-ob-price">{fmtPrice(b.price)}</span>
            <span className="ptd-ob-size">{fmtSize(b.size)}</span>
          </button>
        ))}
      </div>
    </div>
  );
});

PaperCompactOrderbook.displayName = 'PaperCompactOrderbook';
export default PaperCompactOrderbook;