// @design-system: domain/MerchantCard
// Registered at /design-system#merchantcard-domain

'use client';

import type { VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';
import { MerchantAvatar } from '../MerchantAvatar/MerchantAvatar';
import { merchantCardVariants } from './variants';

/** Minimal merchant data required by MerchantCard */
export interface MerchantCardMerchant {
  id: string;
  name: string;
  logoUrl?: string | null;
  /** category is string[] in DB — display first entry */
  category?: string[] | null;
  city?: string | null;
  isFollowed?: boolean;
}

export interface MerchantCardProps extends VariantProps<typeof merchantCardVariants> {
  merchant: MerchantCardMerchant;
  /** Called when follow/unfollow button is pressed */
  onFollowToggle?: (merchantId: string, follow: boolean) => void;
  className?: string;
}

/**
 * MerchantCard — displays a merchant tile in four layout variants.
 *
 * grid   — square tile for merchant grid pages
 * scroll — compact tile for horizontal scroll strips
 * row    — full-width row for lists (favorites, search results)
 * header — minimal inline chip for use inside deal/business page headers
 *
 * @example
 * <MerchantCard merchant={m} variant="grid" onFollowToggle={toggle} />
 */
export function MerchantCard({ merchant, variant, onFollowToggle, className }: MerchantCardProps) {
  const t = useT('merchant_card');

  const isCompact = variant === 'scroll' || variant === 'grid';
  const isHeader = variant === 'header';

  const displayCategory = merchant.category?.[0] ?? null;

  const followLabel = merchant.isFollowed
    ? t('unfollow_aria').replace('{{name}}', merchant.name)
    : t('follow_aria').replace('{{name}}', merchant.name);

  const followButton = onFollowToggle && !isHeader && (
    <button
      type="button"
      aria-pressed={merchant.isFollowed}
      aria-label={followLabel}
      onClick={(e) => {
        e.preventDefault();
        onFollowToggle(merchant.id, !merchant.isFollowed);
      }}
      className={cn(
        'rounded-full border px-3 py-0.5 text-xs font-medium',
        'duration-fast transition-colors',
        'focus-visible:outline-brand-primary-500 focus-visible:outline-2 focus-visible:outline-offset-2',
        merchant.isFollowed
          ? 'border-border-strong bg-surface-subtle text-text-secondary hover:bg-danger-50 hover:text-danger-600 hover:border-danger-300'
          : 'border-brand-primary-300 bg-brand-primary-50 text-brand-primary-700 hover:bg-brand-primary-100',
      )}
    >
      {merchant.isFollowed ? t('unfollow') : t('follow')}
    </button>
  );

  if (isCompact) {
    return (
      <article
        className={cn(merchantCardVariants({ variant }), className)}
        aria-label={merchant.name}
      >
        <MerchantAvatar merchant={merchant} size={variant === 'grid' ? 'lg' : 'md'} />
        <div className="flex flex-col items-center gap-0.5 text-center">
          <span className="text-text-primary line-clamp-1 text-sm font-semibold">
            {merchant.name}
          </span>
          {displayCategory && (
            <span className="text-text-muted line-clamp-1 text-xs">{displayCategory}</span>
          )}
          {merchant.city && !displayCategory && (
            <span className="text-text-muted text-xs">{merchant.city}</span>
          )}
        </div>
        {followButton}
      </article>
    );
  }

  if (isHeader) {
    return (
      <div className={cn(merchantCardVariants({ variant }), className)}>
        <MerchantAvatar merchant={merchant} size="sm" />
        <span className="text-text-primary text-sm font-medium">{merchant.name}</span>
        {merchant.city && <span className="text-text-muted text-xs">· {merchant.city}</span>}
      </div>
    );
  }

  // row variant
  return (
    <article
      className={cn(merchantCardVariants({ variant }), className)}
      aria-label={merchant.name}
    >
      <MerchantAvatar merchant={merchant} size="md" />
      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
        <span className="text-text-primary truncate text-sm font-semibold">{merchant.name}</span>
        <div className="text-text-muted flex items-center gap-1.5 text-xs">
          {displayCategory && <span>{displayCategory}</span>}
          {displayCategory && merchant.city && <span aria-hidden>·</span>}
          {merchant.city && <span>{merchant.city}</span>}
        </div>
      </div>
      {followButton}
    </article>
  );
}