'use client';
/**
 * FraudStatusStrip — above-fold status bar for the Fraud dashboard.
 * Shows N items need review · ₪X quarantined · M held payouts · FP rate Y%.
 * Empty state = success state: system healthy, no items pending review.
 */
import { useT } from '@/lib/i18n/react';
import { Badge } from '@/components/ui/primitives/Badge';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/overlays/Tooltip';
import { cn } from '@/lib/cn';
import { formatAgorotShekels } from '@/lib/money';

export interface FraudStats {
  items_need_review: number;
  quarantined_agorot: number;
  held_payouts_count: number;
  false_positive_rate_pct: number | null;
}

interface Props {
  stats: FraudStats;
}

export function FraudStatusStrip({ stats }: Props) {
  const t = useT('admin_affiliates');
  const isEmpty = stats.items_need_review === 0;

  if (isEmpty) {
    return (
      <div
        role="status"
        aria-live="polite"
        className="flex items-center gap-x-2 rounded-lg bg-[var(--color-success-subtle)] px-4 py-3"
      >
        <span className="text-sm font-medium text-[var(--color-success)]">
          {t('fraud_strip_empty')}
        </span>
      </div>
    );
  }

  const quarantinedDisplay = formatAgorotShekels(stats.quarantined_agorot);
  const fpDisplay =
    stats.false_positive_rate_pct === null
      ? t('fraud_widget_fp_rate_no_data')
      : `${stats.false_positive_rate_pct}%`;

  return (
    <TooltipProvider>
      <div
        role="status"
        aria-live="polite"
        className="flex flex-wrap gap-3 rounded-lg border border-[var(--color-warning-border)] bg-[var(--color-warning-subtle)] px-4 py-3"
      >
        <StripBadge
          data-motion-safe
          label={t('fraud_strip_items_need_review').replace(
            '{{count}}',
            String(stats.items_need_review),
          )}
          tone="warning"
        />
        <StripBadge
          label={t('fraud_strip_quarantined').replace('{{amount}}', quarantinedDisplay)}
          tone="neutral"
          tooltip={t('fraud_strip_quarantined_tooltip')}
        />
        <StripBadge
          label={t('fraud_strip_held_payouts').replace(
            '{{count}}',
            String(stats.held_payouts_count),
          )}
          tone="neutral"
        />
        <StripBadge
          label={t('fraud_strip_fp_rate').replace('{{rate}}', fpDisplay)}
          tone="neutral"
        />
      </div>
    </TooltipProvider>
  );
}

interface StripBadgeProps {
  label: string;
  tone: 'warning' | 'neutral';
  tooltip?: string;
  [k: string]: unknown;
}

function StripBadge({ label, tone, tooltip, ...props }: StripBadgeProps) {
  const badge = (
    <Badge tone={tone} size="md" className={cn('text-sm')} {...props}>
      {label}
    </Badge>
  );

  if (!tooltip) return badge;

  return (
    <Tooltip>
      <TooltipTrigger asChild>{badge}</TooltipTrigger>
      <TooltipContent>{tooltip}</TooltipContent>
    </Tooltip>
  );
}