auto-trade/features/dashboard/components/ActivitySection.tsx

import { AlertCircle, ClipboardList, FileText, RefreshCcw } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import type {
  DashboardActivityResponse,
  DashboardTradeSide,
} from "@/features/dashboard/types/dashboard.types";
import {
  formatCurrency,
  formatPercent,
  getChangeToneClass,
} from "@/features/dashboard/utils/dashboard-format";
import { cn } from "@/lib/utils";

interface ActivitySectionProps {
  activity: DashboardActivityResponse | null;
  isLoading: boolean;
  error: string | null;
  onRetry?: () => void;
}

/**
 * @description 대시보드 하단 주문내역/매매일지 섹션입니다.
 * @remarks UI 흐름: DashboardContainer -> ActivitySection -> tabs(주문내역/매매일지) -> 리스트 렌더링
 * @see features/dashboard/components/DashboardContainer.tsx 하단 영역에서 호출합니다.
 * @see app/api/kis/domestic/activity/route.ts 주문내역/매매일지 데이터 소스
 */
export function ActivitySection({
  activity,
  isLoading,
  error,
  onRetry,
}: ActivitySectionProps) {
  const orders = activity?.orders ?? [];
  const journalRows = activity?.tradeJournal ?? [];
  const summary = activity?.journalSummary;
  const warnings = activity?.warnings ?? [];

  return (
    <Card className="border-brand-200/70 bg-background/90 shadow-sm dark:border-brand-800/45">
      <CardHeader className="pb-3">
        {/* ========== TITLE ========== */}
        <CardTitle className="flex items-center gap-2 text-base">
          <ClipboardList className="h-4 w-4 text-brand-600 dark:text-brand-400" />
          매수 · 매도 기록 (주문내역/매매일지)
        </CardTitle>
        <CardDescription>
          최근 매수/매도 주문 흐름과 실현손익을 한 번에 확인합니다.
        </CardDescription>
      </CardHeader>

      <CardContent className="space-y-3">
        {isLoading && !activity && (
          <p className="text-sm text-muted-foreground">
            주문내역/매매일지를 불러오는 중입니다.
          </p>
        )}

        {error && (
          <div className="rounded-md border border-red-200 bg-red-50/60 p-2.5 dark:border-red-900/40 dark:bg-red-950/20">
            <p className="flex items-start gap-1.5 text-sm text-red-600 dark:text-red-400">
              <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
              <span>{error}</span>
            </p>
            <p className="mt-1 text-xs text-red-700/80 dark:text-red-300/80">
              주문/매매일지 API는 장중 혼잡 시간에 간헐적 실패가 발생할 수 있습니다.
            </p>
            {onRetry ? (
              <Button
                type="button"
                size="sm"
                variant="outline"
                onClick={onRetry}
                className="mt-2 border-red-300 text-red-700 hover:bg-red-100 dark:border-red-700 dark:text-red-300 dark:hover:bg-red-900/40"
              >
                <RefreshCcw className="mr-1.5 h-3.5 w-3.5" />
                주문/매매일지 다시 불러오기
              </Button>
            ) : null}
          </div>
        )}

        {warnings.length > 0 && (
          <div className="flex flex-wrap gap-2">
            {warnings.map((warning) => (
              <Badge
                key={warning}
                variant="outline"
                className="border-amber-300 bg-amber-50 text-amber-700 dark:border-amber-700 dark:bg-amber-950/30 dark:text-amber-300"
              >
                <AlertCircle className="h-3 w-3" />
                {warning}
              </Badge>
            ))}
          </div>
        )}

        {/* ========== TABS ========== */}
        <Tabs defaultValue="orders" className="gap-3">
          <TabsList className="h-auto w-full justify-start rounded-xl border border-brand-200/70 bg-background/80 p-1 dark:border-brand-800/50 dark:bg-background/60">
            <TabsTrigger
              value="orders"
              className="h-9 rounded-lg px-3 data-[state=active]:bg-brand-600 data-[state=active]:text-white"
            >
              주문내역 {orders.length}건
            </TabsTrigger>
            <TabsTrigger
              value="journal"
              className="h-9 rounded-lg px-3 data-[state=active]:bg-brand-600 data-[state=active]:text-white"
            >
              매매일지 {journalRows.length}건
            </TabsTrigger>
          </TabsList>

          <TabsContent value="orders">
            <div className="overflow-hidden rounded-xl border border-border/70">
              <div className="grid grid-cols-[100px_1fr_140px_120px_120px_90px] gap-2 bg-muted/40 px-3 py-2 text-xs font-medium text-muted-foreground">
                <span>일시</span>
                <span>종목</span>
                <span>주문</span>
                <span>체결</span>
                <span>평균체결가</span>
                <span>상태</span>
              </div>

              <ScrollArea className="h-[280px]">
                {orders.length === 0 ? (
                  <p className="px-3 py-4 text-sm text-muted-foreground">
                    표시할 주문내역이 없습니다.
                  </p>
                ) : (
                  <div className="divide-y divide-border/60">
                    {orders.map((order) => (
                      <div
                        key={`${order.orderNo}-${order.orderDate}-${order.orderTime}`}
                        className="grid grid-cols-[100px_1fr_140px_120px_120px_90px] items-center gap-2 px-3 py-2 text-sm"
                      >
                        {/* ========== ORDER DATETIME ========== */}
                        <div className="text-xs text-muted-foreground">
                          <p>{order.orderDate}</p>
                          <p>{order.orderTime}</p>
                        </div>

                        {/* ========== STOCK INFO ========== */}
                        <div>
                          <p className="font-medium text-foreground">{order.name}</p>
                          <p className="text-xs text-muted-foreground">
                            {order.symbol} · {getSideLabel(order.side)}
                          </p>
                        </div>

                        {/* ========== ORDER INFO ========== */}
                        <div className="text-xs">
                          <p>수량 {order.orderQuantity.toLocaleString("ko-KR")}주</p>
                          <p className="text-muted-foreground">
                            {order.orderTypeName} · {formatCurrency(order.orderPrice)}원
                          </p>
                        </div>

                        {/* ========== FILLED INFO ========== */}
                        <div className="text-xs">
                          <p>체결 {order.filledQuantity.toLocaleString("ko-KR")}주</p>
                          <p className="text-muted-foreground">
                            금액 {formatCurrency(order.filledAmount)}원
                          </p>
                        </div>

                        {/* ========== AVG PRICE ========== */}
                        <div className="text-xs font-medium text-foreground">
                          {formatCurrency(order.averageFilledPrice)}원
                        </div>

                        {/* ========== STATUS ========== */}
                        <div>
                          <Badge
                            variant="outline"
                            className={cn(
                              "text-[11px]",
                              order.isCanceled
                                ? "border-slate-300 text-slate-600 dark:border-slate-700 dark:text-slate-300"
                                : order.remainingQuantity > 0
                                  ? "border-amber-300 text-amber-700 dark:border-amber-700 dark:text-amber-300"
                                  : "border-emerald-300 text-emerald-700 dark:border-emerald-700 dark:text-emerald-300",
                            )}
                          >
                            {order.isCanceled
                              ? "취소"
                              : order.remainingQuantity > 0
                                ? "미체결"
                                : "체결완료"}
                          </Badge>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </ScrollArea>
            </div>
          </TabsContent>

          <TabsContent value="journal" className="space-y-3">
            {/* ========== JOURNAL SUMMARY ========== */}
            <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
              <SummaryMetric
                label="총 실현손익"
                value={summary ? `${formatCurrency(summary.totalRealizedProfit)}원` : "-"}
                toneClass={summary ? getChangeToneClass(summary.totalRealizedProfit) : undefined}
              />
              <SummaryMetric
                label="총 수익률"
                value={summary ? formatPercent(summary.totalRealizedRate) : "-"}
                toneClass={summary ? getChangeToneClass(summary.totalRealizedProfit) : undefined}
              />
              <SummaryMetric
                label="총 매수금액"
                value={summary ? `${formatCurrency(summary.totalBuyAmount)}원` : "-"}
              />
              <SummaryMetric
                label="총 매도금액"
                value={summary ? `${formatCurrency(summary.totalSellAmount)}원` : "-"}
              />
            </div>

            <div className="overflow-hidden rounded-xl border border-border/70">
              <div className="grid grid-cols-[100px_1fr_120px_130px_120px_110px] gap-2 bg-muted/40 px-3 py-2 text-xs font-medium text-muted-foreground">
                <span>일자</span>
                <span>종목</span>
                <span>매매구분</span>
                <span>매수/매도금액</span>
                <span>실현손익(률)</span>
                <span>비용</span>
              </div>

              <ScrollArea className="h-[280px]">
                {journalRows.length === 0 ? (
                  <p className="px-3 py-4 text-sm text-muted-foreground">
                    표시할 매매일지가 없습니다.
                  </p>
                ) : (
                  <div className="divide-y divide-border/60">
                    {journalRows.map((row) => {
                      const toneClass = getChangeToneClass(row.realizedProfit);
                      return (
                        <div
                          key={`${row.tradeDate}-${row.symbol}-${row.realizedProfit}-${row.buyAmount}-${row.sellAmount}`}
                          className="grid grid-cols-[100px_1fr_120px_130px_120px_110px] items-center gap-2 px-3 py-2 text-sm"
                        >
                          <p className="text-xs text-muted-foreground">{row.tradeDate}</p>
                          <div>
                            <p className="font-medium text-foreground">{row.name}</p>
                            <p className="text-xs text-muted-foreground">{row.symbol}</p>
                          </div>
                          <p className={cn("text-xs font-medium", getSideToneClass(row.side))}>
                            {getSideLabel(row.side)}
                          </p>
                          <p className="text-xs">
                            매수 {formatCurrency(row.buyAmount)}원 / 매도 {formatCurrency(row.sellAmount)}원
                          </p>
                          <p className={cn("text-xs font-medium", toneClass)}>
                            {formatCurrency(row.realizedProfit)}원 ({formatPercent(row.realizedRate)})
                          </p>
                          <p className="text-xs text-muted-foreground">
                            수수료 {formatCurrency(row.fee)}원
                            <br />
                            세금 {formatCurrency(row.tax)}원
                          </p>
                        </div>
                      );
                    })}
                  </div>
                )}
              </ScrollArea>
            </div>
          </TabsContent>
        </Tabs>

        {!isLoading && !error && !activity && (
          <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
            <FileText className="h-4 w-4" />
            활동 데이터가 없습니다.
          </p>
        )}
      </CardContent>
    </Card>
  );
}

interface SummaryMetricProps {
  label: string;
  value: string;
  toneClass?: string;
}

/**
 * @description 매매일지 요약 지표 카드입니다.
 * @param label 지표명
 * @param value 지표값
 * @param toneClass 값 색상 클래스
 * @see features/dashboard/components/ActivitySection.tsx 매매일지 상단 요약 표시
 */
function SummaryMetric({ label, value, toneClass }: SummaryMetricProps) {
  return (
    <div className="rounded-xl border border-border/70 bg-background/70 p-3">
      <p className="text-xs text-muted-foreground">{label}</p>
      <p className={cn("mt-1 text-sm font-semibold text-foreground", toneClass)}>{value}</p>
    </div>
  );
}

/**
 * @description 매수/매도 라벨 텍스트를 반환합니다.
 * @param side 매수/매도 구분값
 * @returns 라벨 문자열
 * @see features/dashboard/components/ActivitySection.tsx 주문내역/매매일지 표시
 */
function getSideLabel(side: DashboardTradeSide) {
  if (side === "buy") return "매수";
  if (side === "sell") return "매도";
  return "기타";
}

/**
 * @description 매수/매도 라벨 색상 클래스를 반환합니다.
 * @param side 매수/매도 구분값
 * @returns Tailwind 텍스트 클래스
 * @see features/dashboard/components/ActivitySection.tsx 매매구분 표시
 */
function getSideToneClass(side: DashboardTradeSide) {
  if (side === "buy") return "text-red-600 dark:text-red-400";
  if (side === "sell") return "text-blue-600 dark:text-blue-400";
  return "text-muted-foreground";
}