SweetHomeWeb/app/components/ratings/CustomerRatingForm.js

'use client';

import { useState } from 'react';
import { X, Loader2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import toast from 'react-hot-toast';
import StarRating from './StarRating';
import { addCustomerRating } from '../../utils/ratings';

const RatingField = ({ label, value, onChange }) => (
  <div className="space-y-2">
    <label className="block text-sm font-medium text-gray-700">{label} <span className="text-red-500">*</span></label>
    <StarRating rating={value} onRatingChange={onChange} size={28} />
    {value === 0 && <p className="text-xs text-red-500">{/* required text handled in parent */}</p>}
  </div>
);

export default function CustomerRatingForm({ reservationId, onSuccess, onCancel }) {
  const { t } = useTranslation();
  const [furnitureIntegrityRating, setFurnitureIntegrityRating] = useState(0);
  const [termsComplianceRating, setTermsComplianceRating] = useState(0);
  const [renterBehaviorRating, setRenterBehaviorRating] = useState(0);
  const [comment, setComment] = useState('');
  const [loading, setLoading] = useState(false);

  const validate = () => {
    if (furnitureIntegrityRating === 0) return t('ratings.furnitureIntegrity');
    if (termsComplianceRating === 0) return t('ratings.termsCompliance');
    if (renterBehaviorRating === 0) return t('ratings.renterBehavior');
    return null;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const missing = validate();
    if (missing) {
      toast.error(t('ratings.pleaseRate') + ': ' + missing);
      return;
    }

    setLoading(true);
    try {
      await addCustomerRating({
        reservationId,
        furnitureIntegrityRating,
        termsComplianceRating,
        renterBehaviorRating,
        comment: comment.trim() || null,
      });
      toast.success(t('ratings.customerRatingSubmitted'));
      onSuccess?.();
    } catch (err) {
      toast.error(t('ratings.submitError'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-6 max-w-lg mx-auto">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-xl font-bold text-gray-900">{t('ratings.customerRating')}</h3>
        {onCancel && (
          <button onClick={onCancel} className="text-gray-400 hover:text-gray-600">
            <X size={20} />
          </button>
        )}
      </div>
      <form onSubmit={handleSubmit} className="space-y-5">
        <RatingField label={t('ratings.furnitureIntegrity')} value={furnitureIntegrityRating} onChange={setFurnitureIntegrityRating} />
        <RatingField label={t('ratings.termsCompliance')} value={termsComplianceRating} onChange={setTermsComplianceRating} />
        <RatingField label={t('ratings.renterBehavior')} value={renterBehaviorRating} onChange={setRenterBehaviorRating} />
        <div>
          <label className="block text-sm font-medium text-gray-700">{t('ratings.commentLabel')}</label>
          <textarea
            rows={3}
            value={comment}
            onChange={(e) => setComment(e.target.value)}
            className="w-full mt-1 px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
            placeholder={t('ratings.commentPlaceholder')}
          />
        </div>
        <button
          type="submit"
          disabled={loading}
          className="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 rounded-xl transition flex items-center justify-center gap-2 disabled:opacity-50"
        >
          {loading && <Loader2 className="w-5 h-5 animate-spin" />}
          {loading ? t('ratings.sending') : t('ratings.submitRating')}
        </button>
      </form>
    </div>
  );
}