'use client';

import { StarPicker } from './star-picker';
import { cn } from '@/lib/utils';
import type { Review, ReviewSummary } from '@alqove/api-client';

// SSR-safe: pin locale + UTC so server and client render the same string.
const DATE_FORMATTER = new Intl.DateTimeFormat('en-US', {
  month: 'short',
  day: 'numeric',
  year: 'numeric',
  timeZone: 'UTC',
});

function formatDate(iso: string): string {
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return '';
  return DATE_FORMATTER.format(d);
}

export interface ReviewCardReportStatus {
  count: number;
  latest_outcome: 'keep' | 'hide' | null;
  latest_state: 'open' | 'resolved' | null;
}

interface Props {
  review: Review | ReviewSummary;
  buyerName?: string;
  /**
   * Seller-only: report-status rollup for this review. When `count > 0` a
   * small pill is rendered next to the rating stars. The public + buyer
   * surfaces should NOT pass this prop — leaking report state to non-sellers
   * would expose moderation activity.
   */
  reportStatus?: ReviewCardReportStatus;
}

const DIM_LABELS: Array<{ key: keyof Review & keyof ReviewSummary; label: string }> = [
  { key: 'rating_item_as_described' as const, label: 'Item' },
  { key: 'rating_shipping_speed' as const, label: 'Shipping' },
  { key: 'rating_communication' as const, label: 'Communication' },
  { key: 'rating_packaging' as const, label: 'Packaging' },
];

function reportPillLabel(status: ReviewCardReportStatus): string | null {
  if (status.count <= 0) return null;
  if (status.latest_state === 'open') return 'Reported, under review';
  if (status.latest_state === 'resolved' && status.latest_outcome === 'keep') {
    return 'Reported, kept';
  }
  if (status.latest_state === 'resolved' && status.latest_outcome === 'hide') {
    return 'Reported, hidden';
  }
  return null;
}

export function ReviewCard({ review, buyerName, reportStatus }: Props) {
  const name =
    buyerName ?? ('buyer' in review && review.buyer?.name ? review.buyer.name : 'Buyer');
  const pillLabel = reportStatus ? reportPillLabel(reportStatus) : null;
  return (
    <article className="rounded-lg border border-slate-200 bg-white p-4">
      <header className="flex items-start justify-between">
        <div>
          <div className="font-medium text-slate-900">{name}</div>
          <div className="mt-1 flex flex-wrap items-center gap-2">
            <StarPicker value={review.rating} readOnly size="sm" />
            <span className="text-xs text-slate-500">{formatDate(review.created_at)}</span>
            {reportStatus && pillLabel && (
              <span
                data-testid="review-report-pill"
                data-state={reportStatus.latest_state ?? ''}
                data-outcome={reportStatus.latest_outcome ?? ''}
                className={cn(
                  'rounded px-2 py-0.5 text-xs',
                  reportStatus.latest_state === 'open' && 'bg-slate-100 text-slate-600',
                  reportStatus.latest_state === 'resolved' &&
                    reportStatus.latest_outcome === 'keep' &&
                    'bg-amber-100 text-amber-800',
                  reportStatus.latest_state === 'resolved' &&
                    reportStatus.latest_outcome === 'hide' &&
                    'bg-red-100 text-red-700',
                )}
              >
                {pillLabel}
              </span>
            )}
          </div>
        </div>
        {review.edited_at && (
          <span className="text-xs text-slate-400">edited {formatDate(review.edited_at)}</span>
        )}
      </header>

      <dl className="mt-3 grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-slate-600 sm:grid-cols-4">
        {DIM_LABELS.map((d) => (
          <div key={d.key} className="flex items-center gap-1.5">
            <dt className="shrink-0">{d.label}:</dt>
            <dd>
              <StarPicker value={review[d.key] as number} readOnly size="sm" />
            </dd>
          </div>
        ))}
      </dl>

      {review.title && (
        <h4 className="mt-3 text-sm font-semibold text-slate-900">{review.title}</h4>
      )}
      <p className="mt-1 whitespace-pre-wrap text-sm text-slate-700">{review.body}</p>

      {review.photos.length > 0 && (
        <div className="mt-3 flex flex-wrap gap-2">
          {review.photos.map((p, i) => (
            <a
              key={i}
              href={p.url}
              target="_blank"
              rel="noopener noreferrer"
              className="block h-16 w-16 overflow-hidden rounded border border-slate-200"
            >
              <img
                src={p.thumb_url ?? p.url}
                alt=""
                className="h-full w-full object-cover"
              />
            </a>
          ))}
        </div>
      )}
    </article>
  );
}