auto-trade/features/trade/components/TradeContainer.tsx

"use client";

import Link from "next/link";
import { useCallback, useEffect, useRef, useState } from "react";
import { useShallow } from "zustand/react/shallow";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";
import { StockSearchForm } from "@/features/trade/components/search/StockSearchForm";
import { StockSearchHistory } from "@/features/trade/components/search/StockSearchHistory";
import { StockSearchResults } from "@/features/trade/components/search/StockSearchResults";
import { useStockSearch } from "@/features/trade/hooks/useStockSearch";
import { useOrderBook } from "@/features/trade/hooks/useOrderBook";
import { useKisTradeWebSocket } from "@/features/trade/hooks/useKisTradeWebSocket";
import { useStockOverview } from "@/features/trade/hooks/useStockOverview";
import { useCurrentPrice } from "@/features/trade/hooks/useCurrentPrice";
import { DashboardLayout } from "@/features/trade/components/layout/DashboardLayout";
import { StockHeader } from "@/features/trade/components/header/StockHeader";
import { OrderBook } from "@/features/trade/components/orderbook/OrderBook";
import { OrderForm } from "@/features/trade/components/order/OrderForm";
import { StockLineChart } from "@/features/trade/components/chart/StockLineChart";
import type {
  DashboardStockOrderBookResponse,
  DashboardStockSearchItem,
} from "@/features/trade/types/trade.types";

/**
 * @description 트레이딩 페이지 메인 컨테이너입니다.
 * @see app/(main)/trade/page.tsx 로그인 완료 후 이 컴포넌트를 렌더링합니다.
 * @see app/(main)/settings/page.tsx 미인증 상태일 때 설정 페이지로 이동하도록 안내합니다.
 * @see features/trade/hooks/useStockSearch.ts 검색 입력/요청/히스토리 상태를 관리합니다.
 * @see features/trade/hooks/useStockOverview.ts 선택 종목 상세 상태를 관리합니다.
 */
export function TradeContainer() {
  const skipNextAutoSearchRef = useRef(false);
  const searchShellRef = useRef<HTMLDivElement | null>(null);

  // 상태 정의: 검색 패널 열림 상태를 관리합니다.
  const [isSearchPanelOpen, setIsSearchPanelOpen] = useState(false);

  const { verifiedCredentials, isKisVerified } = useKisRuntimeStore(
    useShallow((state) => ({
      verifiedCredentials: state.verifiedCredentials,
      isKisVerified: state.isKisVerified,
    })),
  );

  const {
    keyword,
    setKeyword,
    searchResults,
    setSearchError,
    isSearching,
    search,
    clearSearch,
    searchHistory,
    appendSearchHistory,
    removeSearchHistory,
    clearSearchHistory,
  } = useStockSearch();

  const { selectedStock, loadOverview, updateRealtimeTradeTick } =
    useStockOverview();

  // 호가 실시간 데이터 (체결 WS에서 동일 소켓으로 수신)
  const [realtimeOrderBook, setRealtimeOrderBook] =
    useState<DashboardStockOrderBookResponse | null>(null);

  const handleOrderBookMessage = useCallback(
    (data: DashboardStockOrderBookResponse) => {
      setRealtimeOrderBook(data);
    },
    [],
  );

  // 1. Trade WebSocket (체결 + 호가 통합)
  const { latestTick, recentTradeTicks } = useKisTradeWebSocket(
    selectedStock?.symbol,
    verifiedCredentials,
    isKisVerified,
    updateRealtimeTradeTick,
    {
      orderBookSymbol: selectedStock?.symbol,
      onOrderBookMessage: handleOrderBookMessage,
    },
  );

  // 2. OrderBook (REST 초기 조회 + WS 실시간 병합)
  const { orderBook, isLoading: isOrderBookLoading } = useOrderBook(
    selectedStock?.symbol,
    selectedStock?.market,
    verifiedCredentials,
    isKisVerified,
    {
      enabled: !!selectedStock && !!verifiedCredentials && isKisVerified,
      externalRealtimeOrderBook: realtimeOrderBook,
    },
  );

  // 3. Price Calculation Logic (Hook)
  const {
    currentPrice,
    change,
    changeRate,
    prevClose: referencePrice,
  } = useCurrentPrice({
    stock: selectedStock,
    latestTick,
    orderBook,
  });

  const canTrade = isKisVerified && !!verifiedCredentials;
  const canSearch = canTrade;

  /**
   * @description 검색 전 API 인증 여부를 확인합니다.
   * @see features/trade/components/search/StockSearchForm.tsx 검색 제출 전 공통 가드로 사용합니다.
   */
  const ensureSearchReady = useCallback(() => {
    if (canSearch) return true;
    setSearchError("API 키 검증을 먼저 완료해 주세요.");
    return false;
  }, [canSearch, setSearchError]);

  const closeSearchPanel = useCallback(() => {
    setIsSearchPanelOpen(false);
  }, []);

  const openSearchPanel = useCallback(() => {
    if (!canSearch) return;
    setIsSearchPanelOpen(true);
  }, [canSearch]);

  /**
   * @description 검색 영역 포커스가 완전히 빠지면 드롭다운(검색결과/히스토리)을 닫습니다.
   * @see features/trade/components/search/StockSearchForm.tsx 입력 포커스 이벤트에서 열림 제어를 함께 사용합니다.
   */
  const handleSearchShellBlur = useCallback(
    (event: React.FocusEvent<HTMLDivElement>) => {
      const nextTarget = event.relatedTarget as Node | null;
      if (nextTarget && searchShellRef.current?.contains(nextTarget)) return;
      closeSearchPanel();
    },
    [closeSearchPanel],
  );

  const handleSearchShellKeyDown = useCallback(
    (event: React.KeyboardEvent<HTMLDivElement>) => {
      if (event.key !== "Escape") return;
      closeSearchPanel();
      (event.target as HTMLElement | null)?.blur?.();
    },
    [closeSearchPanel],
  );

  useEffect(() => {
    if (skipNextAutoSearchRef.current) {
      skipNextAutoSearchRef.current = false;
      return;
    }

    if (!canSearch) {
      clearSearch();
      return;
    }

    const trimmed = keyword.trim();
    if (!trimmed) {
      clearSearch();
      return;
    }

    const timer = window.setTimeout(() => {
      search(trimmed, verifiedCredentials);
    }, 220);

    return () => window.clearTimeout(timer);
  }, [canSearch, keyword, verifiedCredentials, search, clearSearch]);

  /**
   * @description 수동 검색 버튼(엔터 포함) 제출 이벤트를 처리합니다.
   * @see features/trade/components/search/StockSearchForm.tsx onSubmit 이벤트로 호출됩니다.
   */
  const handleSearchSubmit = useCallback(
    (event: React.FormEvent) => {
      event.preventDefault();
      if (!ensureSearchReady() || !verifiedCredentials) return;
      search(keyword, verifiedCredentials);
    },
    [ensureSearchReady, keyword, search, verifiedCredentials],
  );

  /**
   * @description 검색 결과/히스토리에서 종목을 선택하면 종목 상세를 로드하고 히스토리를 갱신합니다.
   * @see features/trade/components/search/StockSearchResults.tsx onSelect 이벤트
   * @see features/trade/components/search/StockSearchHistory.tsx onSelect 이벤트
   */
  const handleSelectStock = useCallback(
    (item: DashboardStockSearchItem) => {
      if (!ensureSearchReady() || !verifiedCredentials) return;

      // 같은 종목 재선택 시 중복 overview 요청을 막고 검색 목록만 닫습니다.
      if (selectedStock?.symbol === item.symbol) {
        clearSearch();
        closeSearchPanel();
        return;
      }

      // 카드 선택으로 keyword가 바뀔 때 자동 검색이 다시 실행되지 않게 한 번 건너뜁니다.
      skipNextAutoSearchRef.current = true;
      setKeyword(item.name);
      clearSearch();
      closeSearchPanel();
      appendSearchHistory(item);
      loadOverview(item.symbol, verifiedCredentials, item.market);
    },
    [
      ensureSearchReady,
      verifiedCredentials,
      selectedStock?.symbol,
      clearSearch,
      closeSearchPanel,
      setKeyword,
      appendSearchHistory,
      loadOverview,
    ],
  );

  if (!canTrade) {
    return (
      <div className="flex h-full items-center justify-center p-6">
        <section className="w-full max-w-xl rounded-2xl border border-brand-200 bg-background p-6 shadow-sm dark:border-brand-800/45 dark:bg-brand-900/18">
          {/* ========== UNVERIFIED NOTICE ========== */}
          <h2 className="text-lg font-semibold text-foreground">
            트레이딩을 시작하려면 KIS API 인증이 필요합니다.
          </h2>
          <p className="mt-2 text-sm text-muted-foreground">
            설정 페이지에서 App Key/App Secret을 입력하고 연결 상태를 확인해
            주세요.
          </p>
          <div className="mt-4">
            <Button asChild className="bg-brand-600 hover:bg-brand-700">
              <Link href="/settings">설정 페이지로 이동</Link>
            </Button>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div className="relative h-full flex flex-col">
      {/* ========== SEARCH ========== */}
      <div className="z-30 flex-none border-b bg-background/95 p-4 backdrop-blur-sm dark:border-brand-800/45 dark:bg-brand-900/22">
        <div
          ref={searchShellRef}
          onBlurCapture={handleSearchShellBlur}
          onKeyDownCapture={handleSearchShellKeyDown}
          className="relative mx-auto max-w-2xl"
        >
          <StockSearchForm
            keyword={keyword}
            onKeywordChange={setKeyword}
            onSubmit={handleSearchSubmit}
            onInputFocus={openSearchPanel}
            disabled={!canSearch}
            isLoading={isSearching}
          />

          {isSearchPanelOpen && canSearch && (
            <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-80 overflow-x-hidden overflow-y-auto rounded-md border bg-background shadow-lg dark:border-brand-800/45 dark:bg-brand-950/95">
              {searchResults.length > 0 ? (
                <StockSearchResults
                  items={searchResults}
                  onSelect={handleSelectStock}
                  selectedSymbol={selectedStock?.symbol}
                />
              ) : keyword.trim() ? (
                <div className="px-3 py-2 text-sm text-muted-foreground">
                  {isSearching ? "검색 중..." : "검색 결과가 없습니다."}
                </div>
              ) : searchHistory.length > 0 ? (
                <StockSearchHistory
                  items={searchHistory}
                  onSelect={handleSelectStock}
                  onRemove={removeSearchHistory}
                  onClear={clearSearchHistory}
                  selectedSymbol={selectedStock?.symbol}
                />
              ) : (
                <div className="px-3 py-2 text-sm text-muted-foreground">
                  최근 검색 종목이 없습니다.
                </div>
              )}
            </div>
          )}
        </div>
      </div>

      {/* ========== MAIN CONTENT ========== */}
      <div
        className={cn(
          "transition-opacity duration-200 h-full flex-1 min-h-0 overflow-x-hidden",
          !selectedStock && "opacity-20 pointer-events-none",
        )}
      >
        <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} />}
        />
      </div>
    </div>
  );
}