import { useState } from 'react';
import { motion } from 'framer-motion';
import { Star } from 'lucide-react';

const StarRating = ({ 
  rating, 
  onRatingChange, 
  maxStars = 5, 
  size = 24, 
  color = '#ffc107', 
  readOnly = false,
  className = ''
}) => {
  const [hoverRating, setHoverRating] = useState(null);

  const handleClick = (value) => {
    if (!readOnly && onRatingChange) {
      onRatingChange(value);
    }
  };

  const handleMouseEnter = (value) => {
    if (!readOnly) {
      setHoverRating(value);
    }
  };

  const handleMouseLeave = () => {
    if (!readOnly) {
      setHoverRating(null);
    }
  };

  const getStarIcon = (index) => {
    const currentRating = hoverRating !== null ? hoverRating : rating;
    
    if (currentRating > index) {
      const hasHalfStar = currentRating % 1 > 0.5 && index + 0.5 <= currentRating;
      if (hasHalfStar) {
        // For half star, we'll use a combination approach or just show full star
        // Since we don't have StarOutline, we'll approximate with full stars
        return <Star className={`w-${size} h-${size} text-${color}`} />;
      }
      return <Star className={`w-${size} h-${size} text-${color}`} />;
    }
    return <Star className={`w-${size} h-${size} text-gray-400`} />;
  };

  return (
    <div className={`flex gap-1 ${className}`} onMouseLeave={handleMouseLeave}>
      {[...Array(maxStars)].map((_, index) => (
        <motion.div
          key={index}
          whileHover={{ scale: readOnly ? 1 : 1.1 }}
          onClick={() => handleClick(index + 1)}
          onMouseEnter={() => handleMouseEnter(index + 1)}
        >
          {getStarIcon(index)}
        </motion.div>
      ))}
    </div>
  );
};

export default StarRating;

// Helper functions
export function getStarCount(rating, maxStars = 5) {
  return Math.round(rating * maxStars) / maxStars;
}

export function formatRating(rating) {
  if (rating === 0) return 'لا يوجد تقييم';
  return `${rating.toFixed(1)}`; // Show 1 decimal place
}

export function getRatingColor(rating) {
  if (rating >= 4.5) return 'text-green-600';
  if (rating >= 3.5) return 'text-yellow-600';
  if (rating >= 2.5) return 'text-orange-600';
  return 'text-red-600';
}

export function getRatingText(rating) {
  if (rating >= 4.5) return 'ممتاز';
  if (rating >= 3.5) return 'جيد جداً';
  if (rating >= 2.5) return 'جيد';
  if (rating >= 1.5) return 'مقبول';
  return 'ضعيف';
}