SweetHome/app/components/ratings/RatingForm.js

import { useState } from 'react';
import { motion } from 'framer-motion';
import { Star, Edit2, X, Check, Clock } from 'lucide-react';
import StarRating from './StarRating.js';
import toast, { Toaster } from 'react-hot-toast';
import { rateProperty, rateCustomer, getUserPropertyRating, canRateProperty } from '../../utils/ratings.js';

const RatingForm = ({ 
  propertyId, 
  userId, 
  propertyOwner = false,
  initialRating = 0,
  initialComment = '',
  onSubmitSuccess
}) => {
  const [rating, setRating] = useState(initialRating);
  const [comment, setComment] = useState(initialComment);
  const [loading, setLoading] = useState(false);
  const [showForm, setShowForm] = useState(false);
  const [userRating, setUserRating] = useState(null);

  // Check if user has already rated
  useState(() => {
    async function fetchUserRating() {
      try {
        const rating = await getUserPropertyRating(propertyId, userId);
        if (rating) {
          setUserRating(rating);
          setRating(rating.rating);
          setComment(rating.comment || '');
        }
      } catch (error) {
        console.error('[RatingForm] Failed to fetch user rating:', error);
      }
    }
    
    if (propertyId && userId) {
      fetchUserRating();
    }
  }, [propertyId, userId]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!rating) {
      toast.error('يرجى إعطاء تقييم من 1 إلى 5 نجوم');
      return;
    }

    setLoading(true);
    
    try {
      const ratingData = {
        propertyId,
        customerId: userId,
        rating,
        comment: comment.trim() || null
      };

      await rateProperty(ratingData);
      
      toast.success('تم إرسال التقييم بنجاح!');
      
      // Reset form
      setRating(0);
      setComment('');
      setShowForm(false);
      
      if (onSubmitSuccess) {
        onSubmitSuccess();
      }
    } catch (error) {
      console.error('[RatingForm] Failed to submit rating:', error);
      toast.error('حدث خطأ أثناء إرسال التقييم. يرجى المحاولة مرة أخرى.');
    } finally {
      setLoading(false);
    }
  };

  const handleEdit = () => {
    setShowForm(true);
    setRating(userRating?.rating || 0);
    setComment(userRating?.comment || '');
  };

  const handleCancel = () => {
    setShowForm(false);
    setRating(userRating?.rating || 0);
    setComment(userRating?.comment || '');
  };

  if (!propertyId || !userId) {
    return null;
  }

  return (
    <div className="space-y-4">
      <Toaster position="top-center" reverseOrder={false} />
      
      {/* Display existing rating */}
      {userRating && !showForm && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-gray-50 rounded-xl p-4 border border-gray-200"
        >
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <Star className="w-5 h-5 text-amber-500" />
              <span className="font-medium text-gray-900">{userRating.rating}</span>
              <span className="text-sm text-gray-500">من 5</span>
            </div>
            <button
              onClick={handleEdit}
              className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 transition-colors flex items-center gap-1"
            >
              <Edit2 className="w-4 h-4" />
              تعديل
            </button>
          </div>
          
          {userRating.comment && (
            <div className="text-gray-600 text-sm mb-3 line-clamp-3">
              "{userRating.comment}"
            </div>
          )}
          
          <div className="flex items-center gap-2 text-xs text-gray-400">
            <Clock className="w-3 h-3" />
            <span>{userRating.createdAt ? new Date(userRating.createdAt).toLocaleDateString('ar-SA') : ''}</span>
          </div>
        </motion.div>
      )}

      {/* Rating form */}
      {showForm && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm"
        >
          <form onSubmit={handleSubmit}>
            <div className="mb-4">
              <label className="block text-sm font-medium text-gray-700 mb-2">
                تقييمك للعقار
              </label>
              <div className="flex items-center gap-2">
                <StarRating
                  rating={rating}
                  onRatingChange={setRating}
                  readOnly={false}
                  size={28}
                  color="#ffc107"
                />
                <span className="text-lg font-bold text-gray-900">{rating || '1'}</span>
                <span className="text-sm text-gray-400">/5</span>
              </div>
            </div>

            <div className="mb-4">
              <label className="block text-sm font-medium text-gray-700 mb-2">
                تعليق (اختياري)
              </label>
              <textarea
                rows="3"
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                placeholder="شارك تجربتك مع العقار..."
                className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all resize-none"
              />
            </div>

            <div className="flex gap-3">
              <button
                type="button"
                onClick={handleCancel}
                disabled={loading}
                className="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                إلغاء
              </button>
              <button
                type="submit"
                disabled={loading || !rating}
                className="flex-1 px-4 py-2 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-1"
              >
                {loading ? (
                  <div className="w-4 h-4 border-2 border-white/50 border-t-white rounded-full animate-spin" />
                ) : (
                  <Check className="w-5 h-5" />
                )}
                {loading ? 'إرسال' : 'إرسال التقييم'}
              </button>
            </div>
          </form>
        </motion.div>
      )}

      {/* Add rating button */}
      {!userRating && !showForm && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-amber-50 border-2 border-amber-200 rounded-xl p-4 text-center cursor-pointer hover:border-amber-300 transition-all"
          onClick={() => setShowForm(true)}
        >
          <Star className="w-8 h-8 text-amber-500 mx-auto mb-2" />
          <h3 className="font-bold text-amber-700 mb-2">قيّم هذا العقار</h3>
          <p className="text-sm text-amber-600">شارك تجربتك مع المستأجرين الآخرين</p>
        </motion.div>
      )}
    </div>
  );
};

export default RatingForm;