// @design-system: domain/VendorKpiTile
/**
 * VendorKpiTile — compact KPI metric card for the vendor dashboard.
 *
 * Shows a metric label, value, and an optional delta (change vs previous period)
 * with up/warn/down/neutral color variants.
 *
 * @example
 * ```tsx
 * <VendorKpiTile
 *   label={t('orders_today')}
 *   value="12"
 *   delta="+3"
 *   deltaVariant="up"
 * />
 * ```
 *
 * Tokens used:
 *   --color-surface-raised, --color-border-subtle,
 *   --color-text-primary, --color-text-muted,
 *   --color-success-600, --color-warning-600, --color-danger-600,
 *   --spacing-4, --radius-xl
 */

import { cn } from '@/lib/cn';
import { KPI_VARIANT_CONFIG, type KpiDeltaVariant } from './variants';

export interface VendorKpiTileProps {
  /** Metric label — e.g. "Orders Today" */
  label: string;
  /** Formatted metric value — e.g. "12" or "₪1,200" */
  value: string;
  /** Formatted delta string — e.g. "+3" or "-5%" */
  delta?: string;
  /** Color/icon variant for the delta. Default: 'neutral'. */
  deltaVariant?: KpiDeltaVariant;
  /** Accessible description for the delta chip (e.g. comparison period). */
  deltaTooltip?: string;
  /** Extra classes (avoid overriding tokens). */
  className?: string;
  /** Optional test id for E2E selectors. */
  'data-testid'?: string;
}

/**
 * VendorKpiTile
 *
 * A11y: tile is a `<article>` with a visually-hidden label for screen readers.
 * Tokens: `--color-surface-raised`, `--color-border-subtle`.
 */
export function VendorKpiTile({
  label,
  value,
  delta,
  deltaVariant = 'neutral',
  deltaTooltip,
  className,
  'data-testid': dataTestId,
}: VendorKpiTileProps) {
  const config = KPI_VARIANT_CONFIG[deltaVariant];

  return (
    <article
      className={cn(
        'bg-surface-raised border-border-subtle flex flex-col gap-1 rounded-xl border px-4 py-4',
        className,
      )}
      aria-label={label}
      data-testid={dataTestId}
    >
      {/* Metric label */}
      <p className="text-text-muted text-xs font-medium" aria-hidden="true">
        {label}
      </p>

      {/* Metric value */}
      <p className="text-text-primary text-2xl leading-none font-bold tabular-nums">{value}</p>

      {/* Delta */}
      {delta && (
        <p
          className={cn('text-xs font-medium tabular-nums', config.deltaClass)}
          aria-label={deltaTooltip ? `${delta}. ${deltaTooltip}` : delta}
          title={deltaTooltip}
        >
          <span aria-hidden="true">{config.arrow} </span>
          {delta}
        </p>
      )}
    </article>
  );
}