// @design-system: domain/admin/TabBadge

'use client';

/**
 * TabBadge — numeric count badge for tab labels.
 *
 * Colors by threshold:
 *   count = 0            → neutral (hidden by default with hideZero)
 *   0 < count ≤ warnAt   → neutral/default
 *   count > warnAt       → warning
 *   count > dangerAt     → danger
 *
 * @example
 * ```tsx
 * // Inside a tab label:
 * <span>{t('reports')} <TabBadge count={pendingReports} warnAt={5} dangerAt={20} /></span>
 * ```
 */

import { cva } from 'class-variance-authority';
import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';
import { tabBadgeTone, tabBadgeToneClasses } from '@/lib/ui/tab-badge-tone';

// ─── Variants ─────────────────────────────────────────────────────────────────

const badgeVariants = cva(
  'inline-flex items-center justify-center rounded-full text-xs font-bold leading-none tabular-nums',
  {
    variants: {
      tone: {
        neutral: tabBadgeToneClasses.neutral,
        warning: tabBadgeToneClasses.warning,
        danger: tabBadgeToneClasses.danger,
      },
      size: {
        sm: 'h-4 min-w-4 px-1',
        md: 'h-5 min-w-5 px-1.5',
      },
    },
    defaultVariants: {
      tone: 'neutral',
      size: 'md',
    },
  },
);

// ─── Props ────────────────────────────────────────────────────────────────────

export interface TabBadgeProps {
  /** The numeric count to display. */
  count: number;
  /** Count above which tone switches to 'warning'. @default 5 */
  warnAt?: number;
  /** Count above which tone switches to 'danger'. @default 20 */
  dangerAt?: number;
  /** When true, renders nothing when count is 0. @default true */
  hideZero?: boolean;
  /** Size variant. @default 'md' */
  size?: 'sm' | 'md';
  /** Additional className. */
  className?: string;
}

// ─── Component ────────────────────────────────────────────────────────────────

export function TabBadge({
  count,
  warnAt = 5,
  dangerAt = 20,
  hideZero = true,
  size = 'md',
  className,
}: TabBadgeProps) {
  const t = useT('tab_badge');
  if (hideZero && count === 0) return null;

  const tone = tabBadgeTone(count, warnAt, dangerAt);

  const display = count > 99 ? '99+' : String(count);
  const ariaLabel = t('items').replace('{n}', String(count));

  return (
    <span className={cn(badgeVariants({ tone, size }), className)} aria-label={ariaLabel}>
      {display}
    </span>
  );
}