singularity-forge/web/components/sf/scope-badge.tsx

"use client"

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

/* ─── Helpers ──────────────────────────────────────────────────────────────── */

type PhaseTone = "success" | "active" | "warning" | "muted" | "info"

function phasePresentation(phase: string): { label: string; tone: PhaseTone } {
  switch (phase) {
    case "complete":
    case "completed":
      return { label: "Complete", tone: "success" }
    case "executing":
      return { label: "Executing", tone: "active" }
    case "in-progress":
      return { label: "In Progress", tone: "active" }
    case "planning":
      return { label: "Planning", tone: "info" }
    case "pre-planning":
      return { label: "Pre-planning", tone: "muted" }
    case "summarizing":
      return { label: "Summarizing", tone: "info" }
    case "blocked":
      return { label: "Blocked", tone: "warning" }
    case "needs-discussion":
      return { label: "Discussion", tone: "warning" }
    case "replanning-slice":
      return { label: "Replanning", tone: "info" }
    case "completing-milestone":
      return { label: "Completing", tone: "info" }
    case "evaluating-gates":
      return { label: "Evaluating Gates", tone: "info" }
    default:
      return { label: phase, tone: "muted" }
  }
}

const tonePill: Record<PhaseTone, string> = {
  success: "bg-success/15 text-success",
  active: "bg-primary/15 text-primary",
  warning: "bg-warning/15 text-warning",
  info: "bg-info/15 text-info",
  muted: "bg-muted text-muted-foreground",
}

const toneDot: Record<PhaseTone, string> = {
  success: "bg-success",
  active: "bg-primary",
  warning: "bg-warning",
  info: "bg-info",
  muted: "bg-muted-foreground/50",
}

/**
 * Strip leading zeros from SF IDs: M002 → M2, S01 → S1, T03 → T3.
 * Handles compound paths like "M001/S02/T03" → "M1/S2/T3".
 */
function normalizeScopeId(raw: string): string {
  return raw.replace(/([MST])0*(\d+)/g, "$1$2")
}

/**
 * Parse a scope label like "M002 — completed" into { scopeId, phase }.
 * Also handles bare IDs like "M002" (from auto mode).
 */
function parseScopeLabel(label: string): { scopeId: string; phase: string | null } {
  const m = label.match(/^(.+?)\s*—\s*(.+)$/)
  if (m) return { scopeId: normalizeScopeId(m[1].trim()), phase: m[2].trim() }
  return { scopeId: normalizeScopeId(label.trim()), phase: null }
}

/* ─── Components ───────────────────────────────────────────────────────────── */

interface ScopeBadgeProps {
  /** Raw scope label, e.g. "M002 — completed", "M001/S02/T03 — executing", or just "M002" */
  label: string
  /** Size variant */
  size?: "sm" | "md"
  className?: string
}

/**
 * Renders a scope label as: M002 [Complete]
 * The scope ID stays as-is (compact), phase gets a small colored pill.
 */
export function ScopeBadge({ label, size = "md", className }: ScopeBadgeProps) {
  const { scopeId, phase } = parseScopeLabel(label)

  if (scopeId === "Project scope pending") {
    return <span className={cn("text-muted-foreground", sizeText(size), className)}>Scope pending…</span>
  }

  const phaseInfo = phase ? phasePresentation(phase) : null

  return (
    <span className={cn("inline-flex items-center gap-2", className)}>
      <span className={cn("font-semibold tracking-tight", sizeValue(size))}>
        {scopeId}
      </span>
      {phaseInfo && (
        <span
          className={cn(
            "inline-flex shrink-0 items-center rounded-full px-2 font-medium leading-snug",
            tonePill[phaseInfo.tone],
            sizeText(size),
            sizePy(size),
          )}
        >
          {phaseInfo.label}
        </span>
      )}
    </span>
  )
}

function sizeText(size: "sm" | "md") {
  return size === "sm" ? "text-[10px]" : "text-[11px]"
}

function sizeValue(size: "sm" | "md") {
  return size === "sm" ? "text-sm" : "text-lg"
}

function sizePy(size: "sm" | "md") {
  return size === "sm" ? "py-px" : "py-0.5"
}

/**
 * Inline variant for the status bar — renders: ● M002 · Complete
 */
export function ScopeBadgeInline({ label, className }: { label: string; className?: string }) {
  const { scopeId, phase } = parseScopeLabel(label)

  if (scopeId === "Project scope pending") {
    return <span className={cn("text-muted-foreground", className)}>Scope pending…</span>
  }

  const phaseInfo = phase ? phasePresentation(phase) : null
  const dotColor = phaseInfo ? toneDot[phaseInfo.tone] : "bg-muted-foreground/50"

  return (
    <span className={cn("inline-flex items-center gap-1.5", className)}>
      <span className={cn("h-1.5 w-1.5 shrink-0 rounded-full", dotColor)} />
      <span>{scopeId}</span>
      {phaseInfo && (
        <>
          <span className="text-border">·</span>
          <span>{phaseInfo.label}</span>
        </>
      )}
    </span>
  )
}