/**
 * Review Card Component
 * Displays product review with rating, comment, and helpful count
 */

import React, { useState } from 'react';
import { Star, ThumbsUp, CheckCircle, MessageCircle } from 'lucide-react';
import type { ProductReview } from '../../../types/marketplace.types';

interface ReviewCardProps {
  review: ProductReview;
  onMarkHelpful?: (reviewId: string) => void;
}

export const ReviewCard: React.FC<ReviewCardProps> = ({ review, onMarkHelpful }) => {
  const [isHelpful, setIsHelpful] = useState(false);

  const handleMarkHelpful = () => {
    if (!isHelpful) {
      setIsHelpful(true);
      onMarkHelpful?.(review.id);
    }
  };

  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr);
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    });
  };

  return (
    <div className="bg-gray-800/50 rounded-xl border border-gray-700 p-5">
      {/* Header */}
      <div className="flex items-start gap-4 mb-4">
        {/* Avatar */}
        {review.userAvatar ? (
          <img
            src={review.userAvatar}
            alt={review.userName}
            className="w-10 h-10 rounded-full object-cover"
          />
        ) : (
          <div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-gray-400 font-medium">
            {review.userName.charAt(0).toUpperCase()}
          </div>
        )}

        {/* User info and rating */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <h4 className="font-medium text-white">{review.userName}</h4>
            {review.verified && (
              <span className="flex items-center gap-1 text-xs text-green-400">
                <CheckCircle className="w-3.5 h-3.5" />
                Verified Purchase
              </span>
            )}
          </div>

          {/* Rating and date */}
          <div className="flex items-center gap-3">
            <div className="flex items-center gap-1">
              {[1, 2, 3, 4, 5].map((star) => (
                <Star
                  key={star}
                  className={`w-4 h-4 ${
                    star <= review.rating
                      ? 'text-yellow-400 fill-yellow-400'
                      : 'text-gray-600'
                  }`}
                />
              ))}
            </div>
            <span className="text-sm text-gray-500">{formatDate(review.createdAt)}</span>
          </div>
        </div>
      </div>

      {/* Review title */}
      {review.title && (
        <h5 className="font-semibold text-white mb-2">{review.title}</h5>
      )}

      {/* Review content */}
      <p className="text-gray-300 mb-4 leading-relaxed">{review.comment}</p>

      {/* Provider response */}
      {review.response && (
        <div className="bg-gray-900/50 rounded-lg p-4 mb-4 border-l-2 border-blue-500">
          <div className="flex items-center gap-2 mb-2">
            <MessageCircle className="w-4 h-4 text-blue-400" />
            <span className="text-sm font-medium text-blue-400">Provider Response</span>
            <span className="text-xs text-gray-500">
              {formatDate(review.response.respondedAt)}
            </span>
          </div>
          <p className="text-gray-400 text-sm">{review.response.comment}</p>
        </div>
      )}

      {/* Actions */}
      <div className="flex items-center justify-between pt-3 border-t border-gray-700">
        <button
          onClick={handleMarkHelpful}
          disabled={isHelpful}
          className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors ${
            isHelpful
              ? 'bg-blue-500/20 text-blue-400 cursor-not-allowed'
              : 'text-gray-400 hover:text-white hover:bg-gray-700'
          }`}
        >
          <ThumbsUp className={`w-4 h-4 ${isHelpful ? 'fill-current' : ''}`} />
          Helpful ({review.helpful + (isHelpful ? 1 : 0)})
        </button>
      </div>
    </div>
  );
};

export default ReviewCard;
