auto-trade/features/trade/components/header/StockHeader.tsx

// import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import type { DashboardStockItem } from "@/features/trade/types/trade.types";
import { cn } from "@/lib/utils";

interface StockHeaderProps {
  stock: DashboardStockItem;
  price: string;
  change: string;
  changeRate: string;
  high?: string;
  low?: string;
  volume?: string;
}

/**
 * @description 선택된 종목의 현재가/등락/시세 요약 헤더를 렌더링합니다.
 * @see features/trade/components/layout/TradeDashboardContent.tsx - StockHeader 사용 (header prop으로 전달)
 */
export function StockHeader({
  stock,
  price,
  change,
  changeRate,
  high,
  low,
  volume,
}: StockHeaderProps) {
  const changeRateNum = parseFloat(changeRate);
  const isRise = changeRateNum > 0;
  const isFall = changeRateNum < 0;
  const colorClass = isRise
    ? "text-red-500"
    : isFall
      ? "text-blue-600 dark:text-blue-400"
      : "text-foreground";

  const bgGlowClass = isRise
    ? "from-red-500/10 to-transparent dark:from-red-500/15"
    : isFall
      ? "from-blue-500/10 to-transparent dark:from-blue-500/15"
      : "from-brand-500/10 to-transparent";

  // 전일종가 계산 (현재가 - 변동액)
  const prevClose =
    stock.prevClose > 0 ? stock.prevClose.toLocaleString("ko-KR") : "--";
  const open = stock.open > 0 ? stock.open.toLocaleString("ko-KR") : "--";

  return (
    <div className="bg-white px-3 py-2 dark:bg-brand-900/22 sm:px-4">
      {/* ========== STOCK SUMMARY ========== */}
      <div className="flex items-start justify-between gap-3">
        {/* 종목명 + 코드 */}
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-2">
            <h1 className="truncate text-base font-bold leading-tight text-foreground dark:text-brand-50 sm:text-lg">
              {stock.name}
            </h1>
            <span className="shrink-0 rounded border border-brand-200/60 bg-brand-50/50 px-1.5 py-0.5 text-[10px] font-medium text-brand-600 dark:border-brand-700/45 dark:bg-brand-900/30 dark:text-brand-200">
              {stock.market}
            </span>
          </div>
          <span className="mt-0.5 block text-[11px] text-muted-foreground dark:text-brand-100/70 sm:text-xs">
            {stock.symbol}
          </span>
        </div>

        {/* 현재가 + 등락 */}
        <div
          className={cn(
            "shrink-0 rounded-lg bg-linear-to-l px-3 py-1.5 text-right",
            bgGlowClass,
          )}
        >
          <span
            className={cn(
              "block text-xl font-bold tracking-tight tabular-nums sm:text-2xl",
              colorClass,
            )}
          >
            {price}
          </span>
          <div className="flex items-center justify-end gap-1.5">
            <span
              className={cn(
                "text-[11px] font-medium tabular-nums sm:text-xs",
                colorClass,
              )}
            >
              {isRise ? "▲" : isFall ? "▼" : ""}
              {changeRate}%
            </span>
            <span
              className={cn("text-[11px] tabular-nums sm:text-xs", colorClass)}
            >
              {isRise && "+"}
              {change}
            </span>
          </div>
        </div>
      </div>

      {/* ========== MOBILE STATS ========== */}
      <div className="mt-2 grid grid-cols-3 gap-1.5 text-xs md:hidden">
        <StatCard label="고가" value={high || "--"} tone="ask" />
        <StatCard label="저가" value={low || "--"} tone="bid" />
        <StatCard label="거래량" value={volume || "--"} />
      </div>

      <Separator className="mt-1.5 md:hidden" />

      {/* ========== DESKTOP STATS ========== */}
      <div className="hidden items-center justify-end gap-4 pt-1.5 md:flex">
        <DesktopStat label="전일종가" value={prevClose} />
        <DesktopStat label="시가" value={open} />
        <DesktopStat label="고가" value={high || "--"} tone="ask" />
        <DesktopStat label="저가" value={low || "--"} tone="bid" />
        <DesktopStat label="거래량" value={volume ? `${volume}주` : "--"} />
      </div>
    </div>
  );
}

/** 모바일 통계 카드 */
function StatCard({
  label,
  value,
  tone,
}: {
  label: string;
  value: string;
  tone?: "ask" | "bid";
}) {
  return (
    <div className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
      <p className="text-[11px] text-muted-foreground dark:text-brand-100/70">
        {label}
      </p>
      <p
        className={cn(
          "font-semibold",
          tone === "ask" && "text-red-500",
          tone === "bid" && "text-blue-600 dark:text-blue-400",
        )}
      >
        {value}
      </p>
    </div>
  );
}

/** 데스크톱 통계 항목 */
function DesktopStat({
  label,
  value,
  tone,
}: {
  label: string;
  value: string;
  tone?: "ask" | "bid";
}) {
  return (
    <div className="flex flex-col items-end">
      <span className="text-[11px] text-muted-foreground dark:text-brand-100/70">
        {label}
      </span>
      <span
        className={cn(
          "text-sm font-semibold tabular-nums",
          tone === "ask" && "text-red-500",
          tone === "bid" && "text-blue-600 dark:text-blue-400",
          !tone && "text-foreground dark:text-brand-50",
        )}
      >
        {value}
      </span>
    </div>
  );
}