auto-trade/features/trade/components/layout/TradeDashboardContent.tsx

import { useState } from "react";
import type { KisRuntimeCredentials } from "@/features/settings/store/use-kis-runtime-store";
import { StockLineChart } from "@/features/trade/components/chart/StockLineChart";
import { StockHeader } from "@/features/trade/components/header/StockHeader";
import { DashboardLayout } from "@/features/trade/components/layout/DashboardLayout";
import { OrderForm } from "@/features/trade/components/order/OrderForm";
import { OrderBook } from "@/features/trade/components/orderbook/OrderBook";
import type {
  DashboardRealtimeTradeTick,
  DashboardStockItem,
  DashboardStockOrderBookResponse,
} from "@/features/trade/types/trade.types";
import { cn } from "@/lib/utils";

interface TradeDashboardContentProps {
  selectedStock: DashboardStockItem | null;
  verifiedCredentials: KisRuntimeCredentials | null;
  latestTick: DashboardRealtimeTradeTick | null;
  recentTradeTicks: DashboardRealtimeTradeTick[];
  orderBook: DashboardStockOrderBookResponse | null;
  isOrderBookLoading: boolean;
  referencePrice?: number;
  currentPrice?: number;
  change?: number;
  changeRate?: number;
}

/**
 * @description 트레이드 본문(헤더/차트/호가/주문)을 조합해서 렌더링합니다.
 * @see features/trade/components/TradeContainer.tsx TradeContainer가 화면 조합 코드를 단순화하기 위해 사용합니다.
 * @see features/trade/components/layout/DashboardLayout.tsx 실제 4분할 레이아웃은 DashboardLayout에서 처리합니다.
 */
export function TradeDashboardContent({
  selectedStock,
  verifiedCredentials,
  latestTick,
  recentTradeTicks,
  orderBook,
  isOrderBookLoading,
  referencePrice,
  currentPrice,
  change,
  changeRate,
}: TradeDashboardContentProps) {
  // [State] 차트 영역 보임/숨김 상태
  const [isChartVisible, setIsChartVisible] = useState(false);

  return (
    <div
      className={cn(
        "transition-opacity duration-200 h-full flex-1 min-h-0 overflow-x-hidden",
        !selectedStock && "opacity-20 pointer-events-none",
      )}
    >
      {/* ========== DASHBOARD LAYOUT ========== */}
      <DashboardLayout
        header={
          selectedStock ? (
            <StockHeader
              stock={selectedStock}
              price={currentPrice?.toLocaleString() ?? "0"}
              change={change?.toLocaleString() ?? "0"}
              changeRate={changeRate?.toFixed(2) ?? "0.00"}
              high={latestTick ? latestTick.high.toLocaleString() : undefined}
              low={latestTick ? latestTick.low.toLocaleString() : undefined}
              volume={
                latestTick ? latestTick.accumulatedVolume.toLocaleString() : undefined
              }
            />
          ) : null
        }
        chart={
          selectedStock ? (
            <div className="p-0 h-full flex flex-col">
              <StockLineChart
                symbol={selectedStock.symbol}
                candles={selectedStock.candles}
                credentials={verifiedCredentials}
                latestTick={latestTick}
              />
            </div>
          ) : (
            <div className="h-full flex items-center justify-center text-muted-foreground">
              차트 영역
            </div>
          )
        }
        orderBook={
          <OrderBook
            symbol={selectedStock?.symbol}
            referencePrice={referencePrice}
            currentPrice={currentPrice}
            latestTick={latestTick}
            recentTicks={recentTradeTicks}
            orderBook={orderBook}
            isLoading={isOrderBookLoading}
          />
        }
        orderForm={<OrderForm stock={selectedStock ?? undefined} />}
        isChartVisible={isChartVisible}
        onToggleChart={() => setIsChartVisible((prev) => !prev)}
      />
    </div>
  );
}