import { categoryBadgeClass, normalizeCategory } from "@/lib/categories";
import { normalizeMerchant } from "@/lib/merchant";
import { cn } from "@/lib/utils";
import { CATEGORY_ICON } from "./categoryIcons";

const SIZES = {
  xs: { box: "h-5 w-5", icon: 11, text: "text-[10px]" },
  sm: { box: "h-6 w-6", icon: 12, text: "text-[11px]" },
  md: { box: "h-8 w-8", icon: 14, text: "text-xs" },
} as const;

type Size = keyof typeof SIZES;

/** A category's icon on a disc tinted with the category's badge colour. */
export function CategoryIcon({ category, size = "md", className }: { category: string; size?: Size; className?: string }) {
  const c = normalizeCategory(category);
  const Icon = CATEGORY_ICON[c];
  const s = SIZES[size];
  return (
    <span aria-hidden className={cn("inline-flex items-center justify-center rounded-full shrink-0", s.box, categoryBadgeClass(c), className)}>
      <Icon size={s.icon} strokeWidth={1.75} />
    </span>
  );
}

/**
 * Round avatar for a transaction: the merchant's initial, tinted with its
 * category's colour. The initial comes from the cleaned merchant name, the
 * raw description starts with bank noise, so "CHECKCARD 0411 STARBUCKS" used to
 * render as "C".
 */
export function MerchantAvatar({
  description,
  category,
  size = "md",
  className,
}: {
  description: string;
  category: string;
  size?: Size;
  className?: string;
}) {
  const name = normalizeMerchant(description) || description;
  const initial = (name.match(/[\p{L}\p{N}]/u)?.[0] ?? "?").toUpperCase();
  const s = SIZES[size];
  return (
    <span
      aria-hidden
      className={cn(
        "inline-flex items-center justify-center rounded-full shrink-0 font-semibold",
        s.box,
        s.text,
        categoryBadgeClass(category),
        className
      )}
    >
      {initial}
    </span>
  );
}

/** The category chip: icon + name, in the category's badge colours. */
export function CategoryBadge({ category, className }: { category: string; className?: string }) {
  const c = normalizeCategory(category);
  const Icon = CATEGORY_ICON[c];
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full border max-w-full",
        categoryBadgeClass(c),
        className
      )}
    >
      <Icon size={11} strokeWidth={1.75} className="shrink-0" aria-hidden />
      <span className="truncate">{category}</span>
    </span>
  );
}