'use client';

import type { VendorReview } from '@/types/api';
import { cn } from '@/lib/utils';

interface ReviewCardProps {
  review: VendorReview;
}

function StarRating({ rating }: { rating: 1 | 2 | 3 | 4 | 5 }) {
  return (
    <span
      aria-label={`${rating} out of 5 stars`}
      className="flex items-center gap-0.5"
      role="img"
    >
      {Array.from({ length: 5 }).map((_, i) => (
        <span
          key={i}
          className={cn(
            'text-base leading-none',
            i < rating ? 'text-amber-400' : 'text-neutral-200',
          )}
          aria-hidden
        >
          ★
        </span>
      ))}
    </span>
  );
}

export function ReviewCard({ review }: ReviewCardProps) {
  const formattedDate = new Intl.DateTimeFormat('en-EG', {
    year: 'numeric',
    month: 'short',
  }).format(new Date(review.created_at));

  return (
    <div
      data-testid="review-card"
      className="rounded-xl border border-neutral-200 bg-white p-4 space-y-3"
    >
      {/* Header: avatar + rating + date */}
      <div className="flex items-start gap-3">
        {/* Author initial avatar */}
        <div
          className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-primary-100 text-sm font-semibold text-primary-700"
          aria-hidden
        >
          {review.author_initial.toUpperCase()}
        </div>

        <div className="flex-1 min-w-0">
          <div className="flex items-center justify-between gap-2">
            <StarRating rating={review.rating} />
            <time
              dateTime={review.created_at}
              className="text-xs text-neutral-400 flex-shrink-0"
            >
              {formattedDate}
            </time>
          </div>
        </div>
      </div>

      {/* Review body */}
      <p className="text-sm text-neutral-700 leading-relaxed">{review.body}</p>

      {/* Vendor response */}
      {review.vendor_response && (
        <div className="ms-4 border-s-2 border-neutral-200 ps-3 space-y-1">
          <p className="text-xs font-semibold text-neutral-500">Vendor response</p>
          <p className="text-sm text-neutral-600 leading-relaxed">
            {review.vendor_response.body}
          </p>
        </div>
      )}
    </div>
  );
}