Product Reviews Extension

import React, { useState } from 'react';

interface Review {
  id: string;
  author: string;
  rating: number;
  comment: string;
  createdAt: string;
}

type ProductReviewsProps = {
  product: {
    productId: string;
    name: string;
  };
  reviews?: Review[];
  action?: string;
};

function StarRating({ rating, interactive = false, onChange }: { 
  rating: number; 
  interactive?: boolean; 
  onChange?: (rating: number) => void 
}) {
  return (
    <div className="flex gap-1">
      {[1, 2, 3, 4, 5].map((star) => (
        <button
          key={star}
          type="button"
          disabled={!interactive}
          onClick={() => interactive && onChange?.(star)}
          className={`text-2xl ${interactive ? 'cursor-pointer' : 'cursor-default'} ${
            star <= rating ? 'text-yellow-400' : 'text-gray-300'
          }`}
        >
          ★
        </button>
      ))}
    </div>
  );
}

export default function ProductReviews({ product, reviews = [], action }: ProductReviewsProps) {
  const [showForm, setShowForm] = useState(false);
  const [newReview, setNewReview] = useState({ 
    author: '', 
    rating: 5, 
    comment: '' 
  });

  const averageRating = reviews.length > 0
    ? reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length
    : 0;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    // Here you would normally submit to an API
    console.log('Submitting review:', newReview);
    setShowForm(false);
    setNewReview({ author: '', rating: 5, comment: '' });
  };

  return (
    <div className="bg-[#F8FAF9] border border-[#E8F5E9] rounded-lg p-6 mt-6">
      <div className="flex items-center justify-between mb-6">
        <h3 className="text-xl font-bold text-[#2D5A3D]">
          Reseñas de Clientes
        </h3>
        <button
          onClick={() => setShowForm(!showForm)}
          className="bg-[#2D5A3D] text-white px-4 py-2 rounded-lg hover:bg-[#1E3D2A] transition-colors text-sm"
        >
          {showForm ? 'Cancelar' : 'Escribir Reseña'}
        </button>
      </div>

      {reviews.length > 0 && (
        <div className="mb-6">
          <div className="flex items-center gap-4 mb-4">
            <StarRating rating={Math.round(averageRating)} />
            <span className="text-[#4A5568]">
              {averageRating.toFixed(1)} de 5 ({reviews.length} reseñas)
            </span>
          </div>
        </div>
      )}

      {showForm && (
        <form onSubmit={handleSubmit} className="bg-white border border-[#E8F5E9] rounded-lg p-4 mb-6">
          <h4 className="font-semibold text-[#2D5A3D] mb-4">Nueva Reseña</h4>
          <div className="mb-4">
            <label className="block text-sm font-medium text-[#4A5568] mb-2">
              Tu Nombre
            </label>
            <input
              type="text"
              value={newReview.author}
              onChange={(e) => setNewReview({ ...newReview, author: e.target.value })}
              required
              className="w-full px-4 py-2 border border-[#E8F5E9] rounded-lg focus:outline-none focus:border-[#2D5A3D]"
            />
          </div>
          <div className="mb-4">
            <label className="block text-sm font-medium text-[#4A5568] mb-2">
              Calificación
            </label>
            <StarRating
              rating={newReview.rating}
              interactive
              onChange={(rating) => setNewReview({ ...newReview, rating })}
            />
          </div>
          <div className="mb-4">
            <label className="block text-sm font-medium text-[#4A5568] mb-2">
              Tu Reseña
            </label>
            <textarea
              value={newReview.comment}
              onChange={(e) => setNewReview({ ...newReview, comment: e.target.value })}
              required
              rows={4}
              className="w-full px-4 py-2 border border-[#E8F5E9] rounded-lg focus:outline-none focus:border-[#2D5A3D]"
              placeholder="Comparte tu experiencia con este producto..."
            />
          </div>
          <button
            type="submit"
            className="bg-[#2D5A3D] text-white px-6 py-2 rounded-lg hover:bg-[#1E3D2A] transition-colors"
          >
            Enviar Reseña
          </button>
        </form>
      )}

      {reviews.length === 0 ? (
        <p className="text-[#4A5568] text-center py-4">
          Sé el primero en reseñar este producto.
        </p>
      ) : (
        <div className="space-y-4">
          {reviews.map((review) => (
            <div key={review.id} className="border-b border-[#E8F5E9] pb-4 last:border-0">
              <div className="flex items-center gap-2 mb-2">
                <StarRating rating={review.rating} />
                <span className="font-medium text-[#2D5A3D]">{review.author}</span>
              </div>
              <p className="text-[#4A5568] text-sm">{review.comment}</p>
              <p className="text-[#4A5568] text-xs mt-2">
                {new Date(review.createdAt).toLocaleDateString('es-ES')}
              </p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export const layout = {
  areaId: 'productPageBottom',
  sortOrder: 10
};

export const query = `
  query Query {
    product(id: getContextValue("productId")) {
      productId
      name
      reviews {
        id
        author
        rating
        comment
        createdAt
      }
    }
    action: url(routeId: "productReviews")
  }
`;