auto-trade/features/trade/components/orderbook/orderbook-sections.tsx

import { useMemo } from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Skeleton } from "@/components/ui/skeleton";
import type {
  DashboardRealtimeTradeTick,
  DashboardStockOrderBookResponse,
} from "@/features/trade/types/trade.types";
import { cn } from "@/lib/utils";
import { AnimatedQuantity } from "./AnimatedQuantity";
import type { BookRow } from "./orderbook-utils";
import {
  fmt,
  fmtPct,
  fmtSignedChange,
  fmtTime,
  getChangeToneClass,
  pctChange,
  resolveTickExecutionSide,
} from "./orderbook-utils";

/**
 * @description 호가창 중앙의 현재가/등락률/총잔량 바를 렌더링합니다.
 * @summary UI 흐름: OrderBook -> CurrentPriceBar -> 매도/매수 구간 사이 현재 체결 상태를 강조 표시
 * @see features/trade/components/orderbook/OrderBook.tsx 일반호가 탭의 모바일/데스크톱 공통 현재가 행
 */
export function CurrentPriceBar({
  latestPrice,
  basePrice,
  bestAsk,
  totalAsk,
  totalBid,
}: {
  latestPrice: number;
  basePrice: number;
  bestAsk: number;
  totalAsk: number;
  totalBid: number;
}) {
  return (
    <div className="grid h-10 grid-cols-3 items-center border-y-2 border-amber-400 bg-linear-to-r from-blue-50/60 via-amber-50/90 to-red-50/60 shadow-[0_0_10px_rgba(251,191,36,0.25)] dark:from-blue-950/30 dark:via-amber-900/30 dark:to-red-950/30 xl:h-10">
      <div className="px-2 text-right text-[10px] font-semibold text-blue-600 dark:text-blue-400">
        {totalAsk > 0 ? fmt(totalAsk) : ""}
      </div>
      <div className="flex flex-col items-center justify-center">
        <span
          className={cn(
            "text-base leading-none font-bold tabular-nums",
            latestPrice > 0 && basePrice > 0
              ? latestPrice >= basePrice
                ? "text-red-600"
                : "text-blue-600 dark:text-blue-400"
              : "text-foreground dark:text-brand-50",
          )}
        >
          {latestPrice > 0 ? fmt(latestPrice) : bestAsk > 0 ? fmt(bestAsk) : "-"}
        </span>
        {latestPrice > 0 && basePrice > 0 && (
          <span
            className={cn(
              "text-[11px] font-semibold leading-none",
              latestPrice >= basePrice
                ? "text-red-500"
                : "text-blue-600 dark:text-blue-400",
            )}
          >
            {fmtPct(pctChange(latestPrice, basePrice))}
          </span>
        )}
      </div>
      <div className="px-2 text-left text-[10px] font-semibold text-red-600 dark:text-red-400">
        {totalBid > 0 ? fmt(totalBid) : ""}
      </div>
    </div>
  );
}

/** 호가 표 헤더 */
export function BookHeader() {
  return (
    <div className="grid h-8 grid-cols-3 border-b bg-linear-to-r from-blue-50/40 via-muted/20 to-red-50/40 text-[11px] font-semibold text-muted-foreground dark:border-brand-800/50 dark:from-blue-950/30 dark:via-brand-900/40 dark:to-red-950/30 dark:text-brand-100/80">
      <div className="flex items-center justify-end px-2 text-blue-600/80 dark:text-blue-400/80">
        매도잔량
      </div>
      <div className="flex items-center justify-center border-x border-border/50 dark:border-brand-800/40">
        호가
      </div>
      <div className="flex items-center justify-start px-2 text-red-600/80 dark:text-red-400/80">
        매수잔량
      </div>
    </div>
  );
}

/** 매도 또는 매수 호가 행 목록 */
export function BookSideRows({
  rows,
  side,
  maxSize,
}: {
  rows: BookRow[];
  side: "ask" | "bid";
  maxSize: number;
}) {
  const isAsk = side === "ask";

  return (
    <div
      className={cn(
        isAsk
          ? "bg-linear-to-r from-blue-50/40 via-blue-50/10 to-transparent dark:from-blue-950/35 dark:via-blue-950/10 dark:to-transparent"
          : "bg-linear-to-r from-transparent via-red-50/10 to-red-50/45 dark:from-transparent dark:via-red-950/10 dark:to-red-950/35",
      )}
    >
      {rows.map((row, i) => {
        const ratio =
          maxSize > 0 ? Math.min((row.size / maxSize) * 100, 100) : 0;

        return (
          <div
            key={`${side}-${row.price}-${i}`}
            className={cn(
              "grid h-[29px] grid-cols-3 border-b border-border/30 text-[11px] transition-colors hover:bg-muted/15 xl:h-[29px] xl:text-xs dark:border-brand-800/25 dark:hover:bg-brand-900/20",
              row.isHighlighted &&
                "ring-1 ring-inset ring-amber-400 bg-amber-100/60 dark:bg-amber-800/35",
            )}
          >
            <div className="relative flex items-center justify-end overflow-hidden px-2">
              {isAsk && (
                <>
                  <DepthBar ratio={ratio} side="ask" />
                  {row.size > 0 ? (
                    <AnimatedQuantity
                      value={row.size}
                      format={fmt}
                      useColor
                      side="ask"
                      className="relative z-10"
                    />
                  ) : (
                    <span className="relative z-10 text-transparent">0</span>
                  )}
                </>
              )}
            </div>

            <div
              className={cn(
                "flex items-center justify-center border-x font-medium tabular-nums gap-1",
                row.isHighlighted &&
                  "border-x-amber-400 bg-amber-50/70 dark:bg-amber-800/20",
              )}
            >
              <span
                className={cn(
                  "text-[12px] xl:text-[13px]",
                  isAsk ? "text-blue-600 dark:text-blue-400" : "text-red-600",
                )}
              >
                {row.price > 0 ? fmt(row.price) : "-"}
              </span>
              <span
                className={cn(
                  "w-[50px] shrink-0 text-right text-[10px] tabular-nums xl:w-[58px]",
                  getChangeToneClass(row.changeValue),
                )}
              >
                {row.changeValue === null
                  ? "-"
                  : fmtSignedChange(row.changeValue)}
              </span>
            </div>

            <div className="relative flex items-center justify-start overflow-hidden px-1">
              {!isAsk && (
                <>
                  <DepthBar ratio={ratio} side="bid" />
                  {row.size > 0 ? (
                    <AnimatedQuantity
                      value={row.size}
                      format={fmt}
                      useColor
                      side="bid"
                      className="relative z-10"
                    />
                  ) : (
                    <span className="relative z-10 text-transparent">0</span>
                  )}
                </>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}

/** 우측 요약 패널 */
export function SummaryPanel({
  orderBook,
  latestTick,
  spread,
  imbalance,
  totalAsk,
  totalBid,
}: {
  orderBook: DashboardStockOrderBookResponse | null;
  latestTick: DashboardRealtimeTradeTick | null;
  spread: number;
  imbalance: number;
  totalAsk: number;
  totalBid: number;
}) {
  const displayTradeVolume =
    latestTick?.isExpected && (orderBook?.anticipatedVolume ?? 0) > 0
      ? (orderBook?.anticipatedVolume ?? 0)
      : (latestTick?.tradeVolume ?? orderBook?.anticipatedVolume ?? 0);
  const summaryItems: SummaryMetric[] = [
    {
      label: "실시간",
      value: orderBook || latestTick ? "연결됨" : "끊김",
      tone: orderBook || latestTick ? "ask" : undefined,
    },
    { label: "거래량", value: fmt(displayTradeVolume) },
    {
      label: "누적거래량",
      value: fmt(
        latestTick?.accumulatedVolume ?? orderBook?.accumulatedVolume ?? 0,
      ),
    },
    {
      label: "체결강도",
      value: latestTick
        ? `${latestTick.tradeStrength.toFixed(2)}%`
        : orderBook?.anticipatedChangeRate !== undefined
          ? `${orderBook.anticipatedChangeRate.toFixed(2)}%`
          : "-",
    },
    { label: "예상체결가", value: fmt(orderBook?.anticipatedPrice ?? 0) },
    {
      label: "매도1호가",
      value: latestTick ? fmt(latestTick.askPrice1) : "-",
      tone: "ask",
    },
    {
      label: "매수1호가",
      value: latestTick ? fmt(latestTick.bidPrice1) : "-",
      tone: "bid",
    },
    {
      label: "순매수체결",
      value: latestTick ? fmt(latestTick.netBuyExecutionCount) : "-",
    },
    { label: "총 매도잔량", value: fmt(totalAsk), tone: "ask" },
    { label: "총 매수잔량", value: fmt(totalBid), tone: "bid" },
    { label: "스프레드", value: fmt(spread) },
    {
      label: "수급 불균형",
      value: `${imbalance >= 0 ? "+" : ""}${imbalance.toFixed(2)}%`,
      tone: imbalance >= 0 ? "bid" : "ask",
    },
  ];

  return (
    <div className="h-full min-w-0 bg-muted/10 p-2 text-xs dark:bg-brand-900/30">
      <div className="grid grid-cols-2 gap-1 xl:h-full xl:grid-cols-1 xl:grid-rows-12">
        {summaryItems.map((item) => (
          <SummaryMetricCell
            key={item.label}
            label={item.label}
            value={item.value}
            tone={item.tone}
          />
        ))}
      </div>
    </div>
  );
}

/** 체결 목록 (Trade Tape) */
export function TradeTape({
  ticks,
  maxRows,
}: {
  ticks: DashboardRealtimeTradeTick[];
  maxRows?: number;
}) {
  const visibleTicks =
    typeof maxRows === "number" ? ticks.slice(0, maxRows) : ticks;
  const shouldUseScrollableList = typeof maxRows !== "number";

  const tapeRows = (
    <div>
      {visibleTicks.length === 0 && (
        <div className="flex min-h-[96px] items-center justify-center text-xs text-muted-foreground dark:text-brand-100/70 xl:min-h-[140px]">
          체결 데이터가 아직 없습니다.
        </div>
      )}
      {visibleTicks.map((t, i) => {
        const olderTick = visibleTicks[i + 1];
        const executionSide = resolveTickExecutionSide(t, olderTick);
        const volumeToneClass =
          executionSide === "buy"
            ? "text-red-600"
            : executionSide === "sell"
              ? "text-blue-600 dark:text-blue-400"
              : "text-muted-foreground dark:text-brand-100/70";

        return (
          <div
            key={`${t.tickTime}-${t.price}-${i}`}
            className="grid h-7 grid-cols-3 border-b border-border/40 px-2 text-[13px] dark:border-brand-800/35"
          >
            <div className="flex items-center tabular-nums">
              {fmtTime(t.tickTime)}
            </div>
            <div
              className={cn(
                "flex items-center justify-end tabular-nums",
                getChangeToneClass(
                  t.change,
                  "text-foreground dark:text-brand-50",
                ),
              )}
            >
              {fmt(t.price)}
            </div>
            <div
              className={cn(
                "flex items-center justify-end tabular-nums",
                volumeToneClass,
              )}
            >
              {fmt(t.tradeVolume)}
            </div>
          </div>
        );
      })}
    </div>
  );

  return (
    <div className="flex min-h-0 flex-col bg-background dark:bg-brand-900/20">
      <div className="grid h-8 grid-cols-3 border-b bg-muted/20 px-2 text-xs font-medium text-muted-foreground dark:border-brand-800/45 dark:bg-brand-900/35 dark:text-brand-100/78">
        <div className="flex items-center">체결시각</div>
        <div className="flex items-center justify-end">체결가</div>
        <div className="flex items-center justify-end">체결량</div>
      </div>
      {shouldUseScrollableList ? (
        <ScrollArea className="min-h-0 flex-1">{tapeRows}</ScrollArea>
      ) : (
        tapeRows
      )}
    </div>
  );
}

/** 누적호가 행 */
export function CumulativeRows({
  asks,
  bids,
}: {
  asks: BookRow[];
  bids: BookRow[];
}) {
  const rows = useMemo(() => {
    const len = Math.max(asks.length, bids.length);
    const result: { askAcc: number; bidAcc: number; price: number }[] = [];
    for (let i = 0; i < len; i += 1) {
      const prevAsk = result[i - 1]?.askAcc ?? 0;
      const prevBid = result[i - 1]?.bidAcc ?? 0;
      result.push({
        askAcc: prevAsk + (asks[i]?.size ?? 0),
        bidAcc: prevBid + (bids[i]?.size ?? 0),
        price: asks[i]?.price || bids[i]?.price || 0,
      });
    }
    return result;
  }, [asks, bids]);

  return (
    <div className="space-y-1">
      {rows.map((r, i) => (
        <div
          key={i}
          className="grid h-7 grid-cols-3 items-center rounded border bg-background px-2 text-xs dark:border-brand-800/45 dark:bg-black/20"
        >
          <span className="tabular-nums text-blue-600 dark:text-blue-400">
            {fmt(r.askAcc)}
          </span>
          <span className="text-center font-medium tabular-nums">
            {fmt(r.price)}
          </span>
          <span className="text-right tabular-nums text-red-600 dark:text-red-400">
            {fmt(r.bidAcc)}
          </span>
        </div>
      ))}
    </div>
  );
}

/** 로딩 스켈레톤 */
export function OrderBookSkeleton() {
  return (
    <div className="flex h-full flex-col p-3">
      <div className="mb-3 grid grid-cols-3 gap-2">
        <Skeleton className="h-8 w-full" />
        <Skeleton className="h-8 w-full" />
        <Skeleton className="h-8 w-full" />
      </div>
      <div className="space-y-2">
        {Array.from({ length: 16 }).map((_, i) => (
          <Skeleton key={i} className="h-7 w-full" />
        ))}
      </div>
    </div>
  );
}

interface SummaryMetric {
  label: string;
  value: string;
  tone?: "ask" | "bid";
}

/**
 * @description 실시간 요약 패널의 2열 메트릭 셀을 렌더링합니다.
 * @summary UI 흐름: SummaryPanel -> SummaryMetricCell -> 체결량 하단 정보 패널을 압축해 스크롤 없이 표시
 * @see features/trade/components/orderbook/orderbook-sections.tsx SummaryPanel summaryItems
 */
function SummaryMetricCell({
  label,
  value,
  tone,
}: {
  label: string;
  value: string;
  tone?: "ask" | "bid";
}) {
  return (
    <div className="flex h-full min-w-0 items-center justify-between gap-2 rounded border bg-background px-2 py-1 dark:border-brand-800/45 dark:bg-black/20">
      <span className="truncate text-[11px] text-muted-foreground dark:text-brand-100/70">
        {label}
      </span>
      <span
        className={cn(
          "shrink-0 text-xs font-semibold tabular-nums",
          tone === "ask" && "text-blue-600 dark:text-blue-400",
          tone === "bid" && "text-red-600",
        )}
      >
        {value}
      </span>
    </div>
  );
}

/** 잔량 깊이 바 */
function DepthBar({ ratio, side }: { ratio: number; side: "ask" | "bid" }) {
  if (ratio <= 0) return null;
  return (
    <div
      className={cn(
        "absolute inset-y-0.5 z-0 rounded-sm transition-[width] duration-150",
        side === "ask"
          ? "right-0.5 bg-blue-300/55 dark:bg-blue-700/50"
          : "left-0.5 bg-red-300/60 dark:bg-red-600/45",
      )}
      style={{ width: `${ratio}%` }}
    />
  );
}