"use client";

import { useTranslations } from "next-intl";

/**
 * Visual treatment per phase. Each entry is a Tailwind class string
 * applied to the badge. The `Pending` style is also used as a fallback
 * for unknown phases — it's the most neutral colour.
 *
 * Slice 7 / Bug 31 added `Suspended`. It uses an amber-on-muted scheme
 * to read as "intentionally paused" — distinct from `Error` (red) and
 * `Deleting` (mute grey).
 */
const phaseStyles: Record<string, string> = {
  Running: "bg-success/10 text-success border-success/20",
  Ready: "bg-success/10 text-success border-success/20",
  Provisioning: "bg-warning/10 text-warning border-warning/20",
  // Reconfiguring shares the warning palette (yellow pulse) but renders
  // a distinct label, so customers see it differently from first-time
  // provisioning. Useful when packages or channel-users change and the
  // pod restarts mid-life.
  Reconfiguring: "bg-warning/10 text-warning border-warning/20",
  Pending: "bg-text-muted/10 text-text-secondary border-border",
  Suspended: "bg-amber-500/10 text-amber-400 border-amber-500/30",
  Error: "bg-error/10 text-error border-error/20",
  Deleting: "bg-text-muted/10 text-text-muted border-border",
};

export function StatusBadge({ phase }: { phase: string }) {
  const t = useTranslations("phase");
  const style = phaseStyles[phase] ?? phaseStyles.Pending;
  // Translation lookup with fallback to the raw phase. Keeps things
  // working if a new operator-side phase ships before the portal has
  // a label for it.
  const label = (() => {
    try {
      return t(phase);
    } catch {
      return phase;
    }
  })();
  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium ${style}`}
    >
      {phase === "Running" && (
        <span className="status-pulse h-1.5 w-1.5 rounded-full bg-success" />
      )}
      {phase === "Provisioning" && (
        <span className="status-pulse h-1.5 w-1.5 rounded-full bg-warning" />
      )}
      {phase === "Reconfiguring" && (
        <span className="status-pulse h-1.5 w-1.5 rounded-full bg-warning" />
      )}
      {label}
    </span>
  );
}