"use client";

import { useCallback, useEffect, useState } from "react";
import { RefreshCw, TrendingDown, TrendingUp } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { fetchDashboardBalance } from "@/features/dashboard/apis/dashboard.api";
import type {
  DashboardBalanceSummary,
  DashboardHoldingItem,
} from "@/features/dashboard/types/dashboard.types";
import type { KisRuntimeCredentials } from "@/features/settings/store/use-kis-runtime-store";
import { cn } from "@/lib/utils";

interface HoldingsPanelProps {
  credentials: KisRuntimeCredentials;
}

/** 천단위 포맷 */
function fmt(v: number) {
  return Number.isFinite(v) ? v.toLocaleString("ko-KR") : "0";
}

/** 수익률 색상 */
function profitClass(v: number) {
  if (v > 0) return "text-red-500";
  if (v < 0) return "text-blue-600 dark:text-blue-400";
  return "text-muted-foreground";
}

/**
 * @description 매매창 하단에 보유 종목 및 평가손익 현황을 표시합니다.
 * @see features/trade/components/layout/TradeDashboardContent.tsx - holdingsPanel prop으로 DashboardLayout에 전달
 * @see features/dashboard/apis/dashboard.api.ts - fetchDashboardBalance API 호출
 */
export function HoldingsPanel({ credentials }: HoldingsPanelProps) {
  // [State] 잔고/보유종목 데이터
  const [summary, setSummary] = useState<DashboardBalanceSummary | null>(null);
  const [holdings, setHoldings] = useState<DashboardHoldingItem[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [isExpanded, setIsExpanded] = useState(true);

  /**
   * UI 흐름: HoldingsPanel 마운트 or 새로고침 버튼 -> loadBalance -> fetchDashboardBalance API ->
   * 응답 -> summary/holdings 상태 업데이트 -> 테이블 렌더링
   */
  const loadBalance = useCallback(async () => {
    setIsLoading(true);
    setError(null);
    try {
      const data = await fetchDashboardBalance(credentials);
      setSummary(data.summary);
      setHoldings(data.holdings);
    } catch (err) {
      setError(
        err instanceof Error
          ? err.message
          : "잔고 조회 중 오류가 발생했습니다.",
      );
    } finally {
      setIsLoading(false);
    }
  }, [credentials]);

  // [Effect] 컴포넌트 마운트 시 잔고 조회
  useEffect(() => {
    loadBalance();
  }, [loadBalance]);

  return (
    <div className="bg-white dark:bg-brand-900/20">
      {/* ========== HOLDINGS HEADER ========== */}
      <div className="flex items-center justify-between border-b border-border px-4 py-2 dark:border-brand-800/45">
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={() => setIsExpanded((prev) => !prev)}
            className="flex items-center gap-2 text-sm font-semibold text-foreground dark:text-brand-50 hover:text-brand-600 dark:hover:text-brand-300 transition-colors"
          >
            <span className="text-brand-500">▶</span>
            보유 종목 현황
            <span className="text-xs font-normal text-muted-foreground dark:text-brand-100/60">
              ({holdings.length}종목)
            </span>
          </button>

          {/* 요약 배지: 수익/손실 */}
          {summary && !isLoading && (
            <div
              className={cn(
                "flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold",
                summary.totalProfitLoss >= 0
                  ? "bg-red-50 text-red-600 dark:bg-red-900/25 dark:text-red-400"
                  : "bg-blue-50 text-blue-600 dark:bg-blue-900/25 dark:text-blue-400",
              )}
            >
              {summary.totalProfitLoss >= 0 ? (
                <TrendingUp className="h-3 w-3" />
              ) : (
                <TrendingDown className="h-3 w-3" />
              )}
              {summary.totalProfitLoss >= 0 ? "+" : ""}
              {fmt(summary.totalProfitLoss)}원&nbsp;(
              {summary.totalProfitRate >= 0 ? "+" : ""}
              {summary.totalProfitRate.toFixed(2)}%)
            </div>
          )}
        </div>

        {/* 새로고침 버튼 */}
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={loadBalance}
          disabled={isLoading}
          className="h-7 gap-1 px-2 text-[11px] text-muted-foreground hover:text-brand-600 dark:text-brand-100/60 dark:hover:text-brand-300"
        >
          <RefreshCw
            className={cn("h-3.5 w-3.5", isLoading && "animate-spin")}
          />
          새로고침
        </Button>
      </div>

      {/* ========== HOLDINGS CONTENT ========== */}
      {isExpanded && (
        <div>
          {/* 요약 바 */}
          {summary && !isLoading && (
            <div className="grid grid-cols-2 gap-2 border-b border-border/50 bg-muted/10 px-4 py-2 dark:border-brand-800/35 dark:bg-brand-900/15 sm:grid-cols-4">
              <SummaryItem
                label="총 평가금액"
                value={`${fmt(summary.evaluationAmount)}원`}
              />
              <SummaryItem
                label="총 매입금액"
                value={`${fmt(summary.purchaseAmount)}원`}
              />
              <SummaryItem
                label="평가손익"
                value={`${summary.totalProfitLoss >= 0 ? "+" : ""}${fmt(summary.totalProfitLoss)}원`}
                tone={
                  summary.totalProfitLoss > 0
                    ? "profit"
                    : summary.totalProfitLoss < 0
                      ? "loss"
                      : "neutral"
                }
              />
              <SummaryItem
                label="수익률"
                value={`${summary.totalProfitRate >= 0 ? "+" : ""}${summary.totalProfitRate.toFixed(2)}%`}
                tone={
                  summary.totalProfitRate > 0
                    ? "profit"
                    : summary.totalProfitRate < 0
                      ? "loss"
                      : "neutral"
                }
              />
            </div>
          )}

          {/* 로딩 상태 */}
          {isLoading && <HoldingsSkeleton />}

          {/* 에러 상태 */}
          {!isLoading && error && (
            <div className="flex items-center justify-center px-4 py-6 text-sm text-muted-foreground dark:text-brand-100/60">
              <span className="mr-2 text-destructive">⚠</span>
              {error}
            </div>
          )}

          {/* 보유 종목 없음 */}
          {!isLoading && !error && holdings.length === 0 && (
            <div className="flex items-center justify-center px-4 py-6 text-sm text-muted-foreground dark:text-brand-100/60">
              보유 중인 종목이 없습니다.
            </div>
          )}

          {/* 보유 종목 테이블 */}
          {!isLoading && !error && holdings.length > 0 && (
            <div className="overflow-x-auto">
              {/* 테이블 헤더 */}
              <div className="grid min-w-[600px] grid-cols-[2fr_1fr_1fr_1fr_1fr_1fr] border-b border-border/50 bg-muted/15 px-4 py-1.5 text-[11px] font-medium text-muted-foreground dark:border-brand-800/35 dark:bg-brand-900/20 dark:text-brand-100/65">
                <div>종목명</div>
                <div className="text-right">보유수량</div>
                <div className="text-right">평균단가</div>
                <div className="text-right">현재가</div>
                <div className="text-right">평가손익</div>
                <div className="text-right">수익률</div>
              </div>

              {/* 종목 행 */}
              {holdings.map((holding) => (
                <HoldingRow key={holding.symbol} holding={holding} />
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

/** 요약 항목 */
function SummaryItem({
  label,
  value,
  tone,
}: {
  label: string;
  value: string;
  tone?: "profit" | "loss" | "neutral";
}) {
  return (
    <div>
      <p className="text-[10px] text-muted-foreground dark:text-brand-100/60">
        {label}
      </p>
      <p
        className={cn(
          "text-xs font-semibold tabular-nums",
          tone === "profit" && "text-red-500",
          tone === "loss" && "text-blue-600 dark:text-blue-400",
          (!tone || tone === "neutral") && "text-foreground dark:text-brand-50",
        )}
      >
        {value}
      </p>
    </div>
  );
}

/** 보유 종목 행 */
function HoldingRow({ holding }: { holding: DashboardHoldingItem }) {
  return (
    <div className="grid min-w-[600px] grid-cols-[2fr_1fr_1fr_1fr_1fr_1fr] items-center border-b border-border/30 px-4 py-2 text-xs hover:bg-muted/20 dark:border-brand-800/25 dark:hover:bg-brand-900/20">
      {/* 종목명 */}
      <div className="min-w-0">
        <p className="truncate font-medium text-foreground dark:text-brand-50">
          {holding.name}
        </p>
        <p className="text-[10px] text-muted-foreground dark:text-brand-100/55">
          {holding.symbol} · {holding.market}
        </p>
      </div>

      {/* 보유수량 */}
      <div className="text-right tabular-nums text-foreground dark:text-brand-50">
        {fmt(holding.quantity)}주
      </div>

      {/* 평균단가 */}
      <div className="text-right tabular-nums text-foreground dark:text-brand-50">
        {fmt(holding.averagePrice)}
      </div>

      {/* 현재가 */}
      <div
        className={cn(
          "text-right tabular-nums font-medium",
          profitClass(holding.currentPrice - holding.averagePrice),
        )}
      >
        {fmt(holding.currentPrice)}
      </div>

      {/* 평가손익 */}
      <div
        className={cn(
          "text-right tabular-nums font-medium",
          profitClass(holding.profitLoss),
        )}
      >
        {holding.profitLoss >= 0 ? "+" : ""}
        {fmt(holding.profitLoss)}
      </div>

      {/* 수익률 */}
      <div
        className={cn(
          "text-right tabular-nums font-semibold",
          profitClass(holding.profitRate),
        )}
      >
        {holding.profitRate >= 0 ? "+" : ""}
        {holding.profitRate.toFixed(2)}%
      </div>
    </div>
  );
}

/** 로딩 스켈레톤 */
function HoldingsSkeleton() {
  return (
    <div className="space-y-2 px-4 py-3">
      {[1, 2, 3].map((i) => (
        <div key={i} className="flex items-center gap-4">
          <Skeleton className="h-8 w-24" />
          <Skeleton className="h-8 flex-1" />
          <Skeleton className="h-8 w-20" />
          <Skeleton className="h-8 w-20" />
        </div>
      ))}
    </div>
  );
}