"use client"

import { Stars } from "./Stars"
import { User } from "lucide-react"

type Props = {
  review: any
  showUser?: boolean
  showEmail?: boolean
}

export default function ReviewCard({ review, showUser = true, showEmail = false }: Props) {
  const created = review?.createdAt ? new Date(review.createdAt) : null
  const userName = review?.userId 
    ? `${review.userId.firstName || ''} ${review.userId.lastName || ''}`.trim() || 'Anonymous User'
    : 'Anonymous User'
  const userInitials = review?.userId
    ? `${review.userId.firstName?.[0] || ''}${review.userId.lastName?.[0] || ''}`.toUpperCase() || 'AU'
    : 'AU'

  return (
    <div className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm hover:shadow-md transition-shadow">
      {/* User Info Header */}
      {showUser && (
        <div className="flex items-start gap-3 mb-4">
          {review?.userId?.profilePicture ? (
            <img
              src={review.userId.profilePicture}
              alt={userName}
              className="h-12 w-12 rounded-full object-cover ring-2 ring-slate-100"
            />
          ) : (
            <div className="h-12 w-12 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-semibold text-sm ring-2 ring-slate-100">
              {userInitials}
            </div>
          )}
          <div className="flex-1 min-w-0">
            <div className="flex items-center justify-between gap-2">
              <h4 className="font-semibold text-slate-900 text-base">{userName}</h4>
              {review.status && review.status !== 'approved' && (
                <span className="text-xs px-2.5 py-1 rounded-full bg-blue-100 text-blue-700 capitalize font-medium">
                  {review.status}
                </span>
              )}
            </div>
            {showEmail && review?.userId?.email && (
              <p className="text-sm text-slate-500 mt-0.5">{review.userId.email}</p>
            )}
            <div className="flex items-center gap-2 mt-1">
              <Stars value={review.rating || 0} readOnly size={16} />
              <span className="text-sm text-slate-600">({review.rating}/5)</span>
              <span className="text-slate-300">•</span>
              <span className="text-sm text-slate-500">
                {created ? created.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : ''}
              </span>
            </div>
          </div>
        </div>
      )}

      {/* Review Content */}
      {review.comment && (
        <div className="text-slate-700 leading-relaxed mb-4 whitespace-pre-wrap">
          {review.comment}
        </div>
      )}

      {/* Media Gallery */}
      {Array.isArray(review.media) && review.media.length > 0 && (
        <div className="grid grid-cols-3 gap-2 mb-3">
          {review.media.map((m: any, idx: number) => (
            <div key={idx} className="relative aspect-square rounded-lg overflow-hidden bg-slate-100">
              {m.type === 'video' ? (
                <video src={m.url} controls className="w-full h-full object-cover" />
              ) : (
                <img src={m.url} alt={`Review media ${idx + 1}`} className="w-full h-full object-cover" />
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  )}