import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

import type { TransactionStatusTag, TransactionStatusTagKey } from "../../_lib/transaction-category-status";

const TAG_CLASS: Record<TransactionStatusTagKey, string> = {
  redeemed: "border-red-500/30 bg-red-500/10 text-red-700 dark:text-red-300",
  "option-closed": "border-amber-500/30 bg-amber-500/10 text-amber-800 dark:text-amber-200",
  split: "border-slate-400/40 bg-slate-500/10 text-slate-700 dark:border-slate-500/40 dark:text-slate-300",
  "reverse-split": "border-slate-400/40 bg-slate-500/10 text-slate-700 dark:border-slate-500/40 dark:text-slate-300",
};

/**
 * Category label with its lifecycle tags as compact badges beneath it, so a long label such as
 * "Equity (Accumulator) (Sale)" wraps on its own instead of the tag adding a fourth line.
 */
export function TransactionCategoryCell({
  category,
  tags,
}: {
  category: string;
  tags: readonly TransactionStatusTag[];
}) {
  const label = category.trim();
  if (!label) return <span className="text-sm">—</span>;

  return (
    <div className="flex min-w-0 flex-col items-start gap-1">
      <span className="text-sm leading-snug">{label}</span>
      {tags.length > 0 ? (
        <span className="flex flex-wrap gap-1">
          {tags.map((tag) => (
            <Badge
              key={tag.key}
              variant="outline"
              className={cn("h-5 rounded-md px-1.5 text-[10px] font-semibold uppercase tracking-wide", TAG_CLASS[tag.key])}
            >
              {tag.label}
            </Badge>
          ))}
        </span>
      ) : null}
    </div>
  );
}