// @design-system: domain/ReviewCard

import { cn } from '@/lib/cn';
import { Icon } from '@/components/ui/icons/Icon';
import { useT } from '@/lib/i18n/react';
import { useLocale } from '@/lib/i18n/react';
import { formatDate } from '@/lib/format';

/** Props for ReviewCard */
export interface ReviewCardProps {
  /** Reviewer's display name. */
  reviewerName: string;
  /** Rating out of 5. */
  rating: number;
  /** Review body text. */
  body: string;
  /** ISO date string. */
  date: string;
  /** Optional vendor reply text. */
  vendorReply?: string;
  /** Optional request removal callback. */
  onRequestRemoval?: () => void;
  /** Additional class names. */
  className?: string;
}

/**
 * ReviewCard - review + optional vendor reply + date + rating stars.
 *
 * @example
 * ```tsx
 * <ReviewCard
 *   reviewerName="Avi Cohen"
 *   rating={4}
 *   body="Great coffee!"
 *   date="2026-04-01"
 *   vendorReply="Thank you!"
 * />
 * ```
 */
export function ReviewCard({
  reviewerName,
  rating,
  body,
  date,
  vendorReply,
  onRequestRemoval,
  className,
}: ReviewCardProps) {
  const t = useT('domain_review');
  const { locale } = useLocale();

  const clampedRating = Math.min(5, Math.max(0, Math.round(rating)));

  return (
    <article
      className={cn(
        'bg-surface-base border-border-default flex flex-col gap-3 rounded-xl border p-4',
        className,
      )}
    >
      {/* Header: name + stars + date */}
      <div className="flex items-start justify-between gap-2">
        <div>
          <p className="text-text-primary text-sm font-semibold">{reviewerName}</p>
          <div className="mt-0.5 flex gap-0.5" aria-label={`Rating: ${clampedRating} out of 5`}>
            {(['star-1', 'star-2', 'star-3', 'star-4', 'star-5'] as const).map(
              (starKey, starIndex) => (
                <Icon
                  key={starKey}
                  name="Star"
                  size="xs"
                  className={starIndex < clampedRating ? 'text-warning-500' : 'text-neutral-300'}
                  aria-hidden={true}
                />
              ),
            )}
          </div>
        </div>
        <time dateTime={date} className="text-text-muted shrink-0 text-xs">
          {formatDate(date, locale)}
        </time>
      </div>

      {/* Body */}
      <p className="text-text-secondary text-sm">{body}</p>

      {/* Vendor reply */}
      {vendorReply && (
        <div className="bg-surface-inset rounded-lg border border-neutral-100 px-3 py-2">
          <p className="text-text-secondary text-xs font-semibold">{t('reply_prefix')}</p>
          <p className="text-text-secondary mt-0.5 text-sm">{vendorReply}</p>
        </div>
      )}

      {/* Request removal */}
      {onRequestRemoval && (
        <button
          type="button"
          onClick={onRequestRemoval}
          className="text-danger-600 hover:text-danger-700 focus-visible:ring-danger-500 self-start text-xs underline focus-visible:ring-2 focus-visible:outline-none"
        >
          {t('request_removal')}
        </button>
      )}
    </article>
  );
}