import { Badge } from "@/components/ui/kit";
import type { CampaignStats, CampaignStatus } from "@/lib/types";

const STATUS: Record<CampaignStatus, { label: string; tone: "teal" | "amber" | "brick" | "neutral" }> = {
  draft: { label: "Draft", tone: "neutral" },
  scheduled: { label: "Scheduled", tone: "amber" },
  running: { label: "Sending", tone: "teal" },
  paused: { label: "Paused", tone: "amber" },
  completed: { label: "Completed", tone: "teal" },
  cancelled: { label: "Cancelled", tone: "neutral" },
};

export function CampaignStatusBadge({ status }: { status: CampaignStatus }) {
  const s = STATUS[status];
  return <Badge tone={s.tone}>{s.label}</Badge>;
}

export const pct = (n: number, d: number) => (d ? Math.round((n / d) * 100) : 0);

/** Thin stacked bar: read, delivered (not read), sent (not delivered), failed, pending. Skipped excluded. */
export function ProgressBar({ stats }: { stats: CampaignStats }) {
  const reach = stats.total - stats.skipped;
  if (!reach) return <div className="h-1.5 rounded-full bg-paper" />;
  const seg = (n: number) => `${(n / reach) * 100}%`;
  return (
    <div className="flex h-1.5 overflow-hidden rounded-full bg-paper" role="img" aria-label={`${stats.sent} of ${reach} sent, ${stats.read} read, ${stats.failed} failed`}>
      <div className="bg-teal" style={{ width: seg(stats.read) }} />
      <div className="bg-mint" style={{ width: seg(stats.delivered - stats.read) }} />
      <div className="bg-[#9fd9c6]" style={{ width: seg(stats.sent - stats.delivered) }} />
      <div className="bg-brick" style={{ width: seg(stats.failed) }} />
    </div>
  );
}