import {
  AlertTriangle,
  Ban,
  Check,
  CheckCircle2,
  CircleDashed,
  CloudUpload,
  Sparkles,
  XCircle,
  type LucideIcon,
} from "lucide-react";
import type { InvoiceStatus } from "@/lib/ledger-types";
import { cn } from "@/lib/utils";

const MAP: Record<InvoiceStatus, { icon: LucideIcon; className: string }> = {
  New: { icon: CircleDashed, className: "bg-muted text-muted-foreground border-border" },
  "AI processed": {
    icon: Sparkles,
    className: "bg-muted text-foreground/80 border-border",
  },
  "Needs review": {
    icon: AlertTriangle,
    className: "bg-attention-soft text-attention border-attention/25",
  },
  "Auto-ready": {
    icon: Check,
    className: "bg-primary-soft text-primary border-primary/20",
  },
  Approved: {
    icon: CheckCircle2,
    className: "bg-success-soft text-success border-success/20",
  },
  Rejected: { icon: XCircle, className: "bg-destructive-soft text-destructive border-destructive/20" },
  Synced: { icon: CloudUpload, className: "bg-primary text-primary-foreground border-primary" },
  "Sync failed": { icon: Ban, className: "bg-destructive-soft text-destructive border-destructive/30" },
};

export function StatusBadge({ status, className }: { status: InvoiceStatus; className?: string }) {
  const conf = MAP[status];
  const Icon = conf.icon;
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium whitespace-nowrap transition-colors duration-300",
        conf.className,
        className,
      )}
    >
      <Icon size={12} aria-hidden="true" />
      {status}
    </span>
  );
}

const TONES = {
  neutral: "bg-muted text-muted-foreground border-border",
  green: "bg-primary-soft text-primary border-primary/20",
  amber: "bg-attention-soft text-attention border-attention/25",
  danger: "bg-destructive-soft text-destructive border-destructive/25",
} as const;

export function Pill({
  children,
  tone = "neutral",
  icon: Icon,
  className,
}: {
  children: React.ReactNode;
  tone?: keyof typeof TONES;
  icon?: LucideIcon;
  className?: string;
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium whitespace-nowrap",
        TONES[tone],
        className,
      )}
    >
      {Icon ? <Icon size={12} aria-hidden="true" /> : null}
      {children}
    </span>
  );
}