got-gaming/components/FeedbackModal.tsx

"use client";

import { useState, useEffect, useTransition, type FormEvent } from "react";
import { useSession } from "next-auth/react";
import { createFeedback } from "@/actions/events/feedback";

interface Event {
  id: string;
  name: string;
  date: string;
  description: string;
}

interface Feedback {
  id: string;
  rating: number;
  comment: string | null;
}

interface FeedbackModalProps {
  eventId: string | null;
  eventName?: string;
  onClose: () => void;
}

export default function FeedbackModal({
  eventId,
  eventName: _eventName,
  onClose,
}: FeedbackModalProps) {
  const { status } = useSession();
  const [event, setEvent] = useState<Event | null>(null);
  const [existingFeedback, setExistingFeedback] = useState<Feedback | null>(
    null
  );
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");
  const [success, setSuccess] = useState(false);
  const [, startTransition] = useTransition();

  const [rating, setRating] = useState(0);
  const [comment, setComment] = useState("");

  // Réinitialiser les états quand eventId change
  useEffect(() => {
    if (eventId) {
      setEvent(null);
      setExistingFeedback(null);
      setRating(0);
      setComment("");
      setError("");
      setSuccess(false);
      setLoading(true);
    }
  }, [eventId]);

  const fetchEventAndFeedback = async () => {
    if (!eventId) return;

    try {
      // Récupérer l'événement
      const eventResponse = await fetch(`/api/events/${eventId}`);
      if (!eventResponse.ok) {
        setError("Événement introuvable");
        setLoading(false);
        return;
      }
      const eventData = await eventResponse.json();
      setEvent(eventData);

      // Récupérer le feedback existant si disponible
      const feedbackResponse = await fetch(`/api/feedback/${eventId}`);
      if (feedbackResponse.ok) {
        const feedbackData = await feedbackResponse.json();
        if (feedbackData.feedback) {
          setExistingFeedback(feedbackData.feedback);
          setRating(feedbackData.feedback.rating);
          setComment(feedbackData.feedback.comment || "");
        } else {
          // Pas de feedback existant, réinitialiser
          setRating(0);
          setComment("");
        }
      } else {
        // Pas de feedback existant, réinitialiser
        setRating(0);
        setComment("");
      }
    } catch {
      setError("Erreur lors du chargement des données");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (status === "unauthenticated") {
      onClose();
      return;
    }

    if (status === "authenticated" && eventId) {
      fetchEventAndFeedback();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [status, eventId]);

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    if (!eventId) return;

    setError("");
    setSuccess(false);

    if (rating === 0) {
      setError("Veuillez sélectionner une note");
      return;
    }

    setSubmitting(true);

    startTransition(async () => {
      try {
        const result = await createFeedback(eventId, {
          rating,
          comment: comment.trim() || null,
        });

        if (!result.success) {
          setError(result.error || "Erreur lors de l'enregistrement");
          setSubmitting(false);
          return;
        }

        setSuccess(true);
        if (result.data) {
          setExistingFeedback({
            id: result.data.id,
            rating: result.data.rating,
            comment: result.data.comment,
          });
        }

        // Fermer la modale après 1.5 secondes
        setTimeout(() => {
          onClose();
        }, 1500);
      } catch {
        setError("Erreur lors de l'enregistrement");
      } finally {
        setSubmitting(false);
      }
    });
  };

  const handleClose = () => {
    if (!submitting) {
      onClose();
    }
  };

  if (!eventId) return null;

  return (
    <div
      className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
      onClick={handleClose}
    >
      <div
        className="bg-black border-2 border-pixel-gold/70 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="p-8">
          {/* Header */}
          <div className="flex items-center justify-between mb-6">
            <h1 className="text-4xl font-gaming font-black">
              <span className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent">
                FEEDBACK
              </span>
            </h1>
            <button
              onClick={handleClose}
              disabled={submitting}
              className="text-gray-400 hover:text-pixel-gold text-3xl font-bold transition disabled:opacity-50 disabled:cursor-not-allowed"
            >
              ×
            </button>
          </div>

          {loading ? (
            <div className="text-white text-center py-8">Chargement...</div>
          ) : !event ? (
            <div className="text-red-400 text-center py-8">
              Événement introuvable
            </div>
          ) : (
            <>
              <p className="text-gray-400 text-sm text-center mb-2">
                {existingFeedback
                  ? "Modifier votre feedback pour"
                  : "Donnez votre avis sur"}
              </p>
              <p className="text-pixel-gold text-lg font-semibold text-center mb-8">
                {event.name}
              </p>

              {success && (
                <div className="bg-green-900/50 border border-green-500/50 text-green-400 px-4 py-3 rounded text-sm mb-6">
                  Feedback enregistré avec succès !
                </div>
              )}

              {error && (
                <div className="bg-red-900/50 border border-red-500/50 text-red-400 px-4 py-3 rounded text-sm mb-6">
                  {error}
                </div>
              )}

              <form onSubmit={handleSubmit} className="space-y-6">
                {/* Rating */}
                <div>
                  <label className="block text-sm font-semibold text-gray-300 mb-4 uppercase tracking-wider">
                    Note
                  </label>
                  <div className="flex items-center justify-center gap-2">
                    {[1, 2, 3, 4, 5].map((star) => (
                      <button
                        key={star}
                        type="button"
                        onClick={() => setRating(star)}
                        disabled={submitting}
                        className={`text-4xl transition-transform hover:scale-110 disabled:hover:scale-100 ${
                          star <= rating
                            ? "text-pixel-gold"
                            : "text-gray-600 hover:text-gray-500"
                        }`}
                        aria-label={`Noter ${star} étoile${star > 1 ? "s" : ""}`}
                      >
                        ★
                      </button>
                    ))}
                  </div>
                  <p className="text-gray-500 text-xs text-center mt-2">
                    {rating > 0 && `${rating}/5`}
                  </p>
                </div>

                {/* Comment */}
                <div>
                  <label
                    htmlFor="comment"
                    className="block text-sm font-semibold text-gray-300 mb-2 uppercase tracking-wider"
                  >
                    Commentaire (optionnel)
                  </label>
                  <textarea
                    id="comment"
                    value={comment}
                    onChange={(e) => setComment(e.target.value)}
                    rows={6}
                    maxLength={1000}
                    disabled={submitting}
                    className="w-full px-4 py-3 bg-black/60 border border-pixel-gold/30 rounded text-white placeholder-gray-500 focus:outline-none focus:border-pixel-gold transition resize-none disabled:opacity-50"
                    placeholder="Partagez votre expérience, vos suggestions..."
                  />
                  <p className="text-gray-500 text-xs mt-1 text-right">
                    {comment.length}/1000 caractères
                  </p>
                </div>

                {/* Submit Button */}
                <button
                  type="submit"
                  disabled={submitting || rating === 0}
                  className="w-full px-6 py-3 border border-pixel-gold/50 bg-black/60 text-white uppercase text-sm tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {submitting
                    ? "Enregistrement..."
                    : existingFeedback
                      ? "Modifier le feedback"
                      : "Envoyer le feedback"}
                </button>
              </form>
            </>
          )}
        </div>
      </div>
    </div>
  );
}