import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { X, Star, MessageSquare } from 'lucide-react';
import { useToast } from '../../../context/ToastContext';

interface ReviewProductModalProps {
  productTitle: string;
  onClose: () => void;
  onSubmit: (rating: number, comment: string) => void;
}

export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
  productTitle,
  onClose,
  onSubmit,
}) => {
  const { addToast } = useToast();
  const [rating, setRating] = useState(0);
  const [comment, setComment] = useState('');
  const [hoverRating, setHoverRating] = useState(0);

  const handleSubmit = () => {
    if (rating === 0) {
      addToast('Please select a rating', 'error');
      return;
    }
    onSubmit(rating, comment);
    onClose();
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
        <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white flex items-center gap-2">
            <MessageSquare className="w-4 h-4 text-kodo-cyan" /> Write Review
          </h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-gray-400 hover:text-white" />
          </button>
        </div>

        <div className="p-6 space-y-6">
          <div className="text-center">
            <p className="text-gray-400 text-sm mb-2">
              How was your experience with
            </p>
            <h4 className="font-bold text-white text-lg">{productTitle}?</h4>
          </div>

          <div className="flex justify-center gap-2">
            {[1, 2, 3, 4, 5].map((star) => (
              <button
                key={star}
                className="p-1 transition-transform hover:scale-110 focus:outline-none"
                onMouseEnter={() => setHoverRating(star)}
                onMouseLeave={() => setHoverRating(0)}
                onClick={() => setRating(star)}
              >
                <Star
                  className={`w-8 h-8 transition-colors ${
                    star <= (hoverRating || rating)
                      ? 'fill-kodo-gold text-kodo-gold'
                      : 'text-gray-600'
                  }`}
                />
              </button>
            ))}
          </div>

          <div>
            <label className="block text-xs font-bold text-gray-400 uppercase mb-2">
              Your Review
            </label>
            <textarea
              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-32"
              placeholder="Share your thoughts on the quality, usability, and value..."
              value={comment}
              onChange={(e) => setComment(e.target.value)}
            />
          </div>
        </div>

        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button
            variant="primary"
            onClick={handleSubmit}
            disabled={rating === 0}
          >
            Submit Review
          </Button>
        </div>
      </div>
    </div>
  );
};
