import React from "react";
import { CheckIcon } from "lucide-react";

import { cn } from "../../lib/utils";
import { Badge } from "./badge";

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

/** The three lifecycle states of a loan application in the client CRM. */
export type LoanApplicationBadgeStatus = "SENT" | "IN_PROGRESS" | "COMPLETED";

export interface LoanApplicationBadgeProps {
  /** Loan application lifecycle status. */
  status: LoanApplicationBadgeStatus;
  /** Optional extra class names applied to the Badge element. */
  className?: string;
}

// ---------------------------------------------------------------------------
// Status config
// ---------------------------------------------------------------------------

const STATUS_CONFIG: Record<
  LoanApplicationBadgeStatus,
  { label: string; statusClassName: string; showCheck: boolean }
> = {
  SENT: {
    label: "Sent Application",
    statusClassName: "border-info/40 bg-info/10 text-info-text",
    showCheck: false,
  },
  IN_PROGRESS: {
    label: "Application In Progress",
    statusClassName: "border-warning/40 bg-warning/10 text-warning-text",
    showCheck: false,
  },
  COMPLETED: {
    label: "Loan Application",
    statusClassName: "border-success/40 bg-success/10 text-success-text",
    showCheck: true,
  },
};

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

/**
 * Inline badge showing the lifecycle state of a loan application.
 *
 * Used in the Backoffice Client CRM table `Name` cell to surface which
 * clients have an active loan application and where they are in the process.
 */
export function LoanApplicationBadge({
  status,
  className,
}: LoanApplicationBadgeProps) {
  const { label, statusClassName, showCheck } = STATUS_CONFIG[status];
  return (
    <Badge
      variant="outline"
      className={cn("w-fit text-xs gap-1", statusClassName, className)}
    >
      {showCheck && <CheckIcon aria-hidden="true" className="size-3" />}
      {label}
    </Badge>
  );
}