"use client";

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

// 결재 상태 공통 뱃지 - 어느 목록의 상태 컬럼에서도 사용 가능
// status 는 APPR_STATUS(DB 원본) 또는 한글 APPR_STATUS_NAME 둘 다 인식
export function ApprovalStatusBadge({ status, onClick, className }: {
  status: unknown;
  onClick?: () => void;
  className?: string;
}) {
  const raw = String(status ?? "").trim();
  if (!raw) return <span className="text-gray-400">-</span>;

  const upper = raw.toUpperCase();
  let label = raw;
  let color = "bg-gray-100 text-gray-700 border-gray-300";

  if (upper === "INPROCESS" || raw === "결재중") {
    label = "결재중"; color = "bg-blue-50 text-blue-700 border-blue-200";
  } else if (upper === "COMPLETE" || raw === "결재완료" || raw === "승인") {
    label = raw === "승인" ? "승인" : "결재완료"; color = "bg-emerald-50 text-emerald-700 border-emerald-200";
  } else if (upper === "REJECT" || raw === "반려") {
    label = "반려"; color = "bg-rose-50 text-rose-700 border-rose-200";
  } else if (upper === "CANCEL" || raw === "취소" || raw === "결재취소") {
    label = "취소"; color = "bg-gray-100 text-gray-500 border-gray-300";
  } else if (upper === "READY" || raw === "진행중" || raw === "대기중") {
    label = "진행중"; color = "bg-amber-50 text-amber-700 border-amber-200";
  } else if (upper === "STANDBY" || raw === "대기") {
    label = "대기"; color = "bg-gray-50 text-gray-600 border-gray-300";
  }

  return (
    <span
      onClick={onClick}
      className={cn(
        "inline-flex items-center px-2 py-0.5 text-xs rounded border whitespace-nowrap",
        color,
        onClick && "cursor-pointer hover:underline",
        className
      )}
    >
      {label}
    </span>
  );
}
