import { Badge } from "@/components/ui";
import type { IntegrationRow } from "@/lib/services/integrations";

const TONE = { ACTIVE: "success", PENDING: "warning", REJECTED: "danger", DISABLED: "neutral" } as const;
const LABEL = { ACTIVE: "Active", PENDING: "Pending approval", REJECTED: "Rejected", DISABLED: "Disabled" } as const;

export const IntegrationStatusBadge = ({ status }: { status: IntegrationRow["status"] }) => <Badge tone={TONE[status]}>{LABEL[status]}</Badge>;

export function Deliveries({ rows }: { rows: IntegrationRow["deliveries"] }) {
  if (rows.length === 0) return <p className="text-xs text-muted-foreground">Nothing sent yet.</p>;
  return (
    <ul className="space-y-1 text-xs">
      {rows.map((d) => (
        <li key={d.id} className="flex flex-wrap gap-x-2">
          <span className={d.ok ? "text-success" : "text-danger"}>{d.ok ? "Sent" : "Failed"}</span>
          <span>{d.event}</span>
          <span className="text-muted-foreground">{new Date(d.createdAt).toLocaleString("en-GB")} · {d.durationMs} ms{d.httpStatus ? ` · HTTP ${d.httpStatus}` : ""}{d.error ? ` · ${d.error}` : ""}</span>
        </li>
      ))}
    </ul>
  );
}