"use client";

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

export type BadgeTone =
  | "neutral"
  | "brand"
  | "green"
  | "amber"
  | "red"
  | "violet"
  | "blue";

const TONES: Record<BadgeTone, string> = {
  neutral: "bg-slate-100 text-slate-700 border-slate-200",
  brand: "bg-brand-50 text-brand-700 border-brand-100",
  green: "bg-emerald-50 text-emerald-700 border-emerald-100",
  amber: "bg-amber-50 text-amber-700 border-amber-100",
  red: "bg-red-50 text-red-700 border-red-100",
  violet: "bg-violet-50 text-violet-700 border-violet-100",
  blue: "bg-sky-50 text-sky-700 border-sky-100",
};

export function Badge({
  tone = "neutral",
  className,
  children,
  ...rest
}: React.HTMLAttributes<HTMLSpanElement> & { tone?: BadgeTone }) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-full border",
        TONES[tone],
        className,
      )}
      {...rest}
    >
      {children}
    </span>
  );
}

export function JobStatusBadge({ status }: { status: string }) {
  const map: Record<string, BadgeTone> = {
    queued: "neutral",
    running: "blue",
    completed: "green",
    failed: "red",
    cancelled: "amber",
  };
  return <Badge tone={map[status] ?? "neutral"}>{status}</Badge>;
}

export function ArtifactTypeBadge({ type }: { type: string }) {
  const map: Record<string, BadgeTone> = {
    requirement: "brand",
    epic: "violet",
    story: "brand",
    task: "blue",
    architecture_decision: "violet",
    document: "neutral",
    source_file: "neutral",
    commit: "green",
    pull_request: "blue",
    build: "amber",
    test: "green",
    security_finding: "red",
    deployment: "green",
    release: "green",
    runtime_event: "amber",
    incident: "red",
    ai_analysis: "violet",
  };
  return <Badge tone={map[type] ?? "neutral"}>{type}</Badge>;
}