import { useState } from "react";
import type { DashboardHoldingItem } from "@/features/dashboard/types/dashboard.types";
import type { KisRuntimeCredentials } from "@/features/settings/store/use-kis-runtime-store";
import { StockLineChart } from "@/features/trade/components/chart/StockLineChart";
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;
  matchedHolding?: DashboardHoldingItem | null;
  availableCashBalance: number | null;
  verifiedCredentials: KisRuntimeCredentials | null;
  latestTick: DashboardRealtimeTradeTick | null;
  recentTradeTicks: DashboardRealtimeTradeTick[];
  orderBook: DashboardStockOrderBookResponse | null;
  isOrderBookLoading: boolean;
  referencePrice?: number;
}

/**
 * @description 트레이드 본문(차트/체결+호가/주문)을 조합하여 렌더링합니다.
 * @see features/trade/components/TradeContainer.tsx - TradeDashboardContent 렌더링 (selectedStock, verifiedCredentials 등 전달)
 * @see features/trade/components/layout/DashboardLayout.tsx - 3열 레이아웃(차트 | 체결+호가 | 매도)을 처리합니다.
 */
export function TradeDashboardContent({
  selectedStock,
  matchedHolding,
  availableCashBalance,
  verifiedCredentials,
  latestTick,
  recentTradeTicks,
  orderBook,
  isOrderBookLoading,
  referencePrice,
}: TradeDashboardContentProps) {
  // [State] 차트 영역 보임/숨김 - 요청사항 반영: 모바일에서도 기본 표시
  const [isChartVisible, setIsChartVisible] = useState(true);

  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
        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}
            latestTick={latestTick}
            recentTicks={recentTradeTicks}
            orderBook={orderBook}
            isLoading={isOrderBookLoading}
          />
        }
        orderForm={
          <OrderForm
            key={selectedStock?.symbol ?? "order-form-empty"}
            stock={selectedStock ?? undefined}
            matchedHolding={matchedHolding}
            availableCashBalance={availableCashBalance}
          />
        }
        isChartVisible={isChartVisible}
        onToggleChart={() => setIsChartVisible((prev) => !prev)}
      />
    </div>
  );
}