import { Clock3, Trash2, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type { DashboardStockSearchHistoryItem } from "@/features/trade/types/trade.types";

interface StockSearchHistoryProps {
  items: DashboardStockSearchHistoryItem[];
  selectedSymbol?: string;
  onSelect: (item: DashboardStockSearchHistoryItem) => void;
  onRemove: (symbol: string) => void;
  onClear: () => void;
}

/**
 * @description 최근 검색 종목 목록을 보여주고, 재검색/개별삭제/전체삭제를 제공합니다.
 * @see features/trade/components/TradeContainer.tsx 검색 패널에서 종목 재선택 UI로 사용합니다.
 * @see features/trade/hooks/useStockSearch.ts searchHistory 상태를 화면에 렌더링합니다.
 */
export function StockSearchHistory({
  items,
  selectedSymbol,
  onSelect,
  onRemove,
  onClear,
}: StockSearchHistoryProps) {
  if (items.length === 0) return null;

  return (
    <section className="rounded-md border border-brand-200/80 bg-brand-50/45 p-2 dark:border-brand-700/50 dark:bg-brand-900/26">
      {/* ========== HISTORY HEADER ========== */}
      <div className="mb-1.5 flex items-center justify-between gap-2 px-1">
        <div className="flex items-center gap-1.5 text-xs font-semibold text-brand-700 dark:text-brand-200">
          <Clock3 className="h-3.5 w-3.5" />
          최근 검색 종목
        </div>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={onClear}
          className="h-7 px-2 text-[11px] text-muted-foreground hover:text-foreground dark:text-brand-100/75 dark:hover:text-brand-50"
        >
          <Trash2 className="mr-1 h-3.5 w-3.5" />
          전체 삭제
        </Button>
      </div>

      {/* ========== HISTORY LIST ========== */}
      <div className="max-h-36 space-y-1 overflow-y-auto pr-1">
        {items.map((item) => {
          const isSelected = item.symbol === selectedSymbol;

          return (
            <div key={item.symbol} className="flex items-center gap-1">
              <Button
                type="button"
                variant="ghost"
                onClick={() => onSelect(item)}
                className={cn(
                  "h-8 flex-1 justify-between rounded-md border border-transparent px-2.5",
                  "text-left hover:bg-white/80 dark:hover:bg-brand-800/35",
                  isSelected &&
                    "border-brand-300 bg-white text-brand-700 dark:border-brand-500/55 dark:bg-brand-800/40 dark:text-brand-100",
                )}
              >
                <span className="truncate text-sm font-medium">{item.name}</span>
                <span className="ml-2 shrink-0 text-[11px] text-muted-foreground dark:text-brand-100/70">
                  {item.symbol}
                </span>
              </Button>

              <Button
                type="button"
                variant="ghost"
                size="icon"
                onClick={() => onRemove(item.symbol)}
                aria-label={`${item.name} 히스토리 삭제`}
                className="h-8 w-8 shrink-0 text-muted-foreground hover:bg-white/80 hover:text-foreground dark:text-brand-100/70 dark:hover:bg-brand-800/35 dark:hover:text-brand-50"
              >
                <X className="h-4 w-4" />
              </Button>
            </div>
          );
        })}
      </div>
    </section>
  );
}