"use client";

import { ReactNode } from "react";
import { cn } from "@/lib/utils";

/**
 * BadgeSm - 작은 크기의 상태 뱃지 컴포넌트
 *
 * 견적 관리 시스템의 상태를 표시하는 데 사용되는 작은 뱃지입니다.
 *
 * @example
 * // 수주전환 상태
 * <BadgeSm variant="converted">수주전환</BadgeSm>
 *
 * // 견적완료 상태
 * <BadgeSm variant="finalized">견적완료</BadgeSm>
 *
 * // 수정중 상태
 * <BadgeSm variant="revising">2차 수정</BadgeSm>
 *
 * // 최초작성 상태
 * <BadgeSm variant="initial">최초 작성</BadgeSm>
 */

export type BadgeSmVariant =
  | "converted"    // 수주전환 - 보라색
  | "finalized"    // 견적완료 - 초록색
  | "revising"     // 수정중 - 주황색
  | "initial"      // 최초작성 - 회색
  | "current"      // 현재버전 - 파란색
  | "default"      // 기본 - 회색
  | "outline";     // 외곽선 - 회색 테두리

interface BadgeSmProps {
  variant?: BadgeSmVariant;
  children: ReactNode;
  className?: string;
}

const variantStyles: Record<BadgeSmVariant, string> = {
  converted: "bg-purple-600 text-white border-purple-600",
  finalized: "bg-green-600 text-white border-green-600",
  revising: "bg-orange-100 text-orange-700 border-orange-300",
  initial: "bg-gray-50 text-gray-700 border-gray-200",
  current: "bg-blue-600 text-white border-blue-600",
  default: "bg-gray-100 text-gray-700 border-gray-200",
  outline: "bg-transparent text-gray-700 border-gray-300",
};

export function BadgeSm({
  variant = "default",
  children,
  className
}: BadgeSmProps) {
  return (
    <span
      className={cn(
        // 기본 스타일
        "inline-flex items-center justify-center",
        "px-2.5 py-0.5",
        "text-xs font-medium",
        "rounded-md",
        "border",
        "transition-colors",
        // variant별 스타일
        variantStyles[variant],
        // 커스텀 클래스
        className
      )}
    >
      {children}
    </span>
  );
}

/**
 * 견적 상태에 따라 적절한 BadgeSm을 반환하는 헬퍼 함수
 */
export function getQuoteStatusBadge(quote: {
  status?: string;
  isFinal?: boolean;
  currentRevision?: number;
}) {
  // 수주전환
  if (quote.status === "converted") {
    return (
      <BadgeSm variant="converted">
        수주전환
      </BadgeSm>
    );
  }

  // 견적완료
  if (quote.isFinal) {
    return (
      <BadgeSm variant="finalized">
        견적완료
      </BadgeSm>
    );
  }

  // 수정중
  if (quote.currentRevision && quote.currentRevision > 0) {
    return (
      <BadgeSm variant="revising">
        {quote.currentRevision}차 수정
      </BadgeSm>
    );
  }

  // 최초작성
  return (
    <BadgeSm variant="initial">
      최초 작성
    </BadgeSm>
  );
}