// @design-system: domain/VendorFunnelChart
/**
 * VendorFunnelChart — conversion funnel visualization.
 *
 * Steps: Impressions → Clicks → Joins → Redemptions
 * Each step renders as a horizontal bar sized relative to impressions (100%).
 * Bar darkens through the funnel to indicate drop-off.
 *
 * Accessible: uses role="list", each step is role="listitem" with aria-label.
 * Respects prefers-reduced-motion (no animation when reduced).
 *
 * Tokens: `--color-brand-primary-400/500/600/700/800`,
 *          `--color-surface-raised`, `--color-border`, `--color-text-*`
 */

'use client';

import { cn } from '@/lib/cn';
import { formatInteger } from '@/lib/format.js';
import { useT } from '@/lib/i18n/react';

export interface FunnelStep {
  /** Step identifier. */
  key: 'total_deals' | 'active_deals' | 'units_sold' | 'orders';
  /** Absolute count. */
  value: number;
}

export interface VendorFunnelChartProps {
  /** Ordered funnel steps. Must include at least impressions. */
  steps: FunnelStep[];
  /** Extra class names. */
  className?: string;
}

const stepColors: Record<FunnelStep['key'], string> = {
  total_deals: 'bg-brand-primary-400',
  active_deals: 'bg-brand-primary-500',
  units_sold: 'bg-brand-primary-700',
  orders: 'bg-brand-primary-800',
};

const stepLabelKeys: Record<FunnelStep['key'], FunnelStep['key']> = {
  total_deals: 'total_deals',
  active_deals: 'active_deals',
  units_sold: 'units_sold',
  orders: 'orders',
};

/**
 * VendorFunnelChart
 *
 * Tokens: `--color-brand-primary-400` through `--color-brand-primary-800`
 */
export function VendorFunnelChart({ steps, className }: VendorFunnelChartProps) {
  const t = useT('vendor_funnel_chart');

  const max = steps[0]?.value ?? 0;

  return (
    <section aria-label={t('title')} className={cn('flex flex-col gap-1', className)}>
      <ul className="flex flex-col gap-2">
        {steps.map((step) => {
          const pct = max > 0 ? Math.round((step.value / max) * 100) : 0;
          const label = t(stepLabelKeys[step.key]);
          return (
            <li
              key={step.key}
              aria-label={`${label}: ${step.value} (${pct}%)`}
              className="grid grid-cols-[90px_1fr_auto] items-center gap-2.5"
            >
              <span className="text-text-secondary truncate text-sm">{label}</span>
              <div
                role="progressbar"
                aria-valuenow={pct}
                aria-valuemin={0}
                aria-valuemax={100}
                aria-label={label}
                className="h-6 overflow-hidden rounded-md bg-neutral-100"
              >
                <div
                  className={cn(
                    'flex h-full items-center rounded-md px-2',
                    'motion-safe:transition-[width]',
                    stepColors[step.key],
                  )}
                  style={{ width: `${pct}%` }}
                >
                  {pct > 20 && (
                    <span className="text-xs font-[var(--font-en)] font-bold text-white tabular-nums">
                      {formatInteger(step.value)}
                    </span>
                  )}
                </div>
              </div>
              <span className="text-text-muted min-w-10 text-end text-xs font-[var(--font-en)] tabular-nums">
                {pct}%
              </span>
            </li>
          );
        })}
      </ul>
    </section>
  );
}