// @design-system: domain/VendorActivityFeed
/**
 * VendorActivityFeed + ActivityFeedItem
 *
 * Renders a scrollable stream of vendor-scoped events.
 * Each item has a colored dot (info=blue, warn=amber) + title + optional sub-text + time.
 *
 * Tokens: `--color-brand-primary-500`, `--color-warning-500`,
 *          `--color-surface-raised`, `--color-border`, `--color-text-*`
 */

'use client';

import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';

export type ActivityFeedTone = 'info' | 'warn';

export interface ActivityFeedItemProps {
  /** Stable item id when the feed source has one (e.g. outbox event id). */
  id?: string;
  /** Dot tone: info (blue) or warn (amber). */
  tone: ActivityFeedTone;
  /** Primary event description. */
  title: string;
  /** Optional secondary line. */
  sub?: string;
  /** Relative time string, e.g. "5 min ago". */
  time?: string;
  /** Extra class names. */
  className?: string;
}

export interface VendorActivityFeedProps {
  /** List of activity items. */
  items: ActivityFeedItemProps[];
  /** Called when "View all" is clicked. */
  onViewAll?: () => void;
  /** Max items to show before hiding rest. Default: all. */
  maxItems?: number;
  /** Extra class names. */
  className?: string;
}

const dotClasses: Record<ActivityFeedTone, string> = {
  info: 'bg-brand-primary-500',
  warn: 'bg-warning-500',
};

const dotAriaKey: Record<ActivityFeedTone, 'dot_info_aria' | 'dot_warn_aria'> = {
  info: 'dot_info_aria',
  warn: 'dot_warn_aria',
};

/**
 * ActivityFeedItem — single feed row with dot + title + sub + time.
 */
export function ActivityFeedItem({ tone, title, sub, time, className }: ActivityFeedItemProps) {
  const t = useT('vendor_activity_feed');

  return (
    <div className={cn('flex items-start gap-3 px-4 py-2.5', className)}>
      <div className="flex shrink-0 items-center justify-center pt-1">
        <span
          aria-label={t(dotAriaKey[tone])}
          className={cn('h-2 w-2 shrink-0 rounded-full', dotClasses[tone])}
        />
      </div>
      <div className="min-w-0 flex-1">
        <p className="text-text-primary text-sm leading-snug">{title}</p>
        {sub && <p className="text-text-muted mt-0.5 text-xs leading-snug">{sub}</p>}
      </div>
      {time && (
        <span className="text-text-muted shrink-0 pt-0.5 text-xs font-[var(--font-en)] tabular-nums">
          {time}
        </span>
      )}
    </div>
  );
}

/**
 * VendorActivityFeed — list of activity items with optional "View all" CTA.
 *
 * Tokens: `--color-surface-raised`, `--color-border`
 */
export function VendorActivityFeed({
  items,
  onViewAll,
  maxItems,
  className,
}: VendorActivityFeedProps) {
  const t = useT('vendor_activity_feed');
  const visible = maxItems != null ? items.slice(0, maxItems) : items;

  return (
    <section aria-label={t('title')} className={cn('flex flex-col', className)}>
      <div className="border-border flex items-center justify-between border-b px-4 py-3">
        <h2 className="text-text-primary text-sm font-semibold">{t('title')}</h2>
        {onViewAll && (
          <Button variant="ghost" size="sm" onClick={onViewAll}>
            {t('view_all')}
          </Button>
        )}
      </div>

      {visible.length === 0 ? (
        <p className="text-text-muted px-4 py-6 text-center text-sm">{t('empty')}</p>
      ) : (
        <div role="list" className="divide-border divide-y">
          {visible.map((item) => (
            <div
              key={item.id ?? `${item.title}-${item.time ?? ''}-${item.sub ?? ''}`}
              role="listitem"
            >
              <ActivityFeedItem {...item} />
            </div>
          ))}
        </div>
      )}
    </section>
  );
}