import type { SessionPhase } from "../types";

/** Display label shown when phase is "Awaiting Approval" but plan isn't ready yet. */
export const PLANNING_LABEL = "Planning";

/** Display label shown when a plan fix/regeneration is currently in progress. */
export const FIXING_LABEL = "Fixing";

const PHASE_COLORS: Record<SessionPhase, string> = {
  "Awaiting Approval": "bg-yellow-900/50 text-yellow-300",
  Planned: "bg-blue-900/50 text-blue-300",
  Running: "bg-green-900/50 text-green-300",
  Completed: "bg-gray-700/50 text-gray-300",
  Failed: "bg-red-900/50 text-red-300",
  Suspended: "bg-orange-900/50 text-orange-300",
};

export function PhaseBadge({
  phase,
  planAvailable,
  fixing,
}: {
  phase: SessionPhase;
  planAvailable?: boolean;
  /** When true, overrides the label with "Fixing" and suppresses the approval-ready dot. */
  fixing?: boolean;
}) {
  const cls = PHASE_COLORS[phase];
  const isAwaiting = phase === "Awaiting Approval";
  const showApproveReady = isAwaiting && planAvailable === true && !fixing;
  const displayLabel = isAwaiting && fixing
    ? FIXING_LABEL
    : isAwaiting && planAvailable !== true
      ? PLANNING_LABEL
      : phase;
  return (
    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${cls}`}>
      {showApproveReady && (
        <span
          role="img"
          aria-label="plan ready for approval"
          className="w-2 h-2 rounded-full bg-blue-400 flex-shrink-0"
        />
      )}
      {displayLabel}
    </span>
  );
}
