got-gaming/components/admin/EventManagement.tsx

"use client";

import { useState, useTransition } from "react";
import { calculateEventStatus } from "@/lib/eventStatus";
import { createEvent, updateEvent, deleteEvent } from "@/actions/admin/events";
import {
  Input,
  Textarea,
  Button,
  Card,
  Badge,
  Modal,
  CloseButton,
  Avatar,
} from "@/components/ui";
import { updateUser } from "@/actions/admin/users";

interface Event {
  id: string;
  date: string;
  name: string;
  description: string;
  type: "ATELIER" | "KATA" | "PRESENTATION" | "LEARNING_HOUR";
  status: "UPCOMING" | "LIVE" | "PAST";
  room?: string | null;
  time?: string | null;
  maxPlaces?: number | null;
  createdAt: string;
  updatedAt: string;
  registrationsCount?: number;
}

interface EventRegistration {
  id: string;
  userId: string;
  eventId: string;
  createdAt: string;
  user: {
    id: string;
    username: string;
    avatar: string | null;
    score: number;
    level: number;
    hp: number;
    maxHp: number;
    xp: number;
    maxXp: number;
  };
}

interface EventFormData {
  date: string;
  name: string;
  description: string;
  type: "ATELIER" | "KATA" | "PRESENTATION" | "LEARNING_HOUR";
  room?: string;
  time?: string;
  maxPlaces?: number;
}

const eventTypes: Event["type"][] = [
  "ATELIER",
  "KATA",
  "PRESENTATION",
  "LEARNING_HOUR",
];
const getEventTypeLabel = (type: Event["type"]) => {
  switch (type) {
    case "ATELIER":
      return "Atelier";
    case "KATA":
      return "Kata";
    case "PRESENTATION":
      return "Présentation";
    case "LEARNING_HOUR":
      return "Learning Hour";
    default:
      return type;
  }
};

const getStatusLabel = (status: Event["status"]) => {
  switch (status) {
    case "UPCOMING":
      return "À venir";
    case "LIVE":
      return "En cours";
    case "PAST":
      return "Passé";
    default:
      return status;
  }
};

interface EventManagementProps {
  initialEvents: Event[];
}

export default function EventManagement({ initialEvents }: EventManagementProps) {
  const [events, setEvents] = useState<Event[]>(initialEvents);
  const [editingEvent, setEditingEvent] = useState<Event | null>(null);
  const [isCreating, setIsCreating] = useState(false);
  const [saving, setSaving] = useState(false);
  const [viewingRegistrations, setViewingRegistrations] =
    useState<Event | null>(null);
  const [registrations, setRegistrations] = useState<EventRegistration[]>([]);
  const [loadingRegistrations, setLoadingRegistrations] = useState(false);
  const [editingScores, setEditingScores] = useState<Record<string, number>>(
    {}
  );
  const [savingScore, setSavingScore] = useState<string | null>(null);
  const [formData, setFormData] = useState<EventFormData>({
    date: "",
    name: "",
    description: "",
    type: "ATELIER",
    room: "",
    time: "",
    maxPlaces: undefined,
  });

  const fetchEvents = async () => {
    try {
      const response = await fetch("/api/admin/events");
      if (response.ok) {
        const data = await response.json();
        setEvents(data);
      }
    } catch (error) {
      console.error("Error fetching events:", error);
    }
  };

  const handleCreate = () => {
    setIsCreating(true);
    setEditingEvent(null);
    setFormData({
      date: "",
      name: "",
      description: "",
      type: "ATELIER",
      room: "",
      time: "",
      maxPlaces: undefined,
    });
  };

  const handleEdit = (event: Event) => {
    setEditingEvent(event);
    setIsCreating(false);
    // Convertir la date ISO en format YYYY-MM-DD pour l'input date
    const dateValue = event.date ? new Date(event.date).toISOString().split('T')[0] : "";
    setFormData({
      date: dateValue,
      name: event.name,
      description: event.description,
      type: event.type,
      room: event.room || "",
      time: event.time || "",
      maxPlaces: event.maxPlaces || undefined,
    });
  };

  const [, startTransition] = useTransition();

  const handleSave = async () => {
    setSaving(true);
    startTransition(async () => {
      try {
        let result;
        if (isCreating) {
          result = await createEvent(formData);
        } else if (editingEvent) {
          result = await updateEvent(editingEvent.id, formData);
        }

        if (result?.success) {
          await fetchEvents();
          setEditingEvent(null);
          setIsCreating(false);
          setFormData({
            date: "",
            name: "",
            description: "",
            type: "ATELIER",
            room: "",
            time: "",
            maxPlaces: undefined,
          });
        } else {
          alert(result?.error || "Erreur lors de la sauvegarde");
        }
      } catch (error) {
        console.error("Error saving event:", error);
        alert("Erreur lors de la sauvegarde");
      } finally {
        setSaving(false);
      }
    });
  };

  const handleDelete = async (eventId: string) => {
    if (!confirm("Êtes-vous sûr de vouloir supprimer cet événement ?")) {
      return;
    }

    startTransition(async () => {
      try {
        const result = await deleteEvent(eventId);

        if (result.success) {
          await fetchEvents();
        } else {
          alert(result.error || "Erreur lors de la suppression");
        }
      } catch (error) {
        console.error("Error deleting event:", error);
        alert("Erreur lors de la suppression");
      }
    });
  };

  const handleCancel = () => {
    setEditingEvent(null);
    setIsCreating(false);
    setFormData({
      date: "",
      name: "",
      description: "",
      type: "ATELIER",
      room: "",
      time: "",
      maxPlaces: undefined,
    });
  };

  const handleViewRegistrations = async (event: Event) => {
    setViewingRegistrations(event);
    setLoadingRegistrations(true);
    try {
      const response = await fetch(
        `/api/admin/events/${event.id}/registrations`
      );
      if (response.ok) {
        const data = await response.json();
        setRegistrations(data);
        // Initialiser les scores d'édition avec les scores actuels
        const scoresMap: Record<string, number> = {};
        data.forEach((reg: EventRegistration) => {
          scoresMap[reg.user.id] = reg.user.score;
        });
        setEditingScores(scoresMap);
      } else {
        alert("Erreur lors de la récupération des inscrits");
      }
    } catch (error) {
      console.error("Error fetching registrations:", error);
      alert("Erreur lors de la récupération des inscrits");
    } finally {
      setLoadingRegistrations(false);
    }
  };

  const handleCloseRegistrations = () => {
    setViewingRegistrations(null);
    setRegistrations([]);
    setEditingScores({});
  };

  const handleScoreChange = (userId: string, newScore: number) => {
    setEditingScores({
      ...editingScores,
      [userId]: newScore,
    });
  };

  const handleSaveScore = async (userId: string) => {
    const newScore = editingScores[userId];
    if (newScore === undefined) return;

    setSavingScore(userId);
    startTransition(async () => {
      try {
        const result = await updateUser(userId, { score: newScore });
        if (result.success) {
          // Mettre à jour le score dans la liste locale
          setRegistrations((prev) =>
            prev.map((reg) =>
              reg.user.id === userId
                ? { ...reg, user: { ...reg.user, score: newScore } }
                : reg
            )
          );
        } else {
          alert(result.error || "Erreur lors de la mise à jour du score");
        }
      } catch (error) {
        console.error("Error updating score:", error);
        alert("Erreur lors de la mise à jour du score");
      } finally {
        setSavingScore(null);
      }
    });
  };

  return (
    <div className="space-y-4">
      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 mb-4">
        <h3 className="text-lg sm:text-xl font-gaming font-bold text-pixel-gold break-words">
          Événements ({events.length})
        </h3>
        {!isCreating && !editingEvent && (
          <Button
            onClick={handleCreate}
            variant="success"
            size="sm"
            className="whitespace-nowrap flex-shrink-0"
          >
            + Nouvel événement
          </Button>
        )}
      </div>

      {/* Modal de création/édition */}
      {(isCreating || editingEvent) && (
        <Modal
          isOpen={isCreating || !!editingEvent}
          onClose={handleCancel}
          size="lg"
        >
          <div className="p-6">
            <div className="flex items-center justify-between mb-4">
              <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
                {isCreating ? "Créer un événement" : "Modifier l'événement"}
              </h4>
              <CloseButton onClick={handleCancel} size="lg" />
            </div>
            <div className="space-y-4">
              <Input
                type="date"
                label="Date"
                value={formData.date}
                onChange={(e) =>
                  setFormData({ ...formData, date: e.target.value })
                }
                className="text-xs sm:text-sm px-3 py-2"
              />
              <Input
                type="text"
                label="Nom"
                value={formData.name}
                onChange={(e) =>
                  setFormData({ ...formData, name: e.target.value })
                }
                placeholder="Nom de l'événement"
                className="text-xs sm:text-sm px-3 py-2"
              />
              <Textarea
                label="Description"
                value={formData.description}
                onChange={(e) =>
                  setFormData({ ...formData, description: e.target.value })
                }
                placeholder="Description de l'événement"
                rows={4}
                className="text-xs sm:text-sm px-3 py-2"
              />
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs sm:text-sm text-gray-300 mb-1">
                    Type
                  </label>
                  <select
                    value={formData.type}
                    onChange={(e) =>
                      setFormData({
                        ...formData,
                        type: e.target.value as Event["type"],
                      })
                    }
                    className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
                  >
                    {eventTypes.map((type) => (
                      <option key={type} value={type}>
                        {getEventTypeLabel(type)}
                      </option>
                    ))}
                  </select>
                </div>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <Input
                  type="text"
                  label="Salle"
                  value={formData.room || ""}
                  onChange={(e) =>
                    setFormData({ ...formData, room: e.target.value })
                  }
                  placeholder="Ex: Nautilus"
                  className="text-xs sm:text-sm px-3 py-2"
                />
                <Input
                  type="text"
                  label="Heure"
                  value={formData.time || ""}
                  onChange={(e) =>
                    setFormData({ ...formData, time: e.target.value })
                  }
                  placeholder="Ex: 11h-12h"
                  className="text-xs sm:text-sm px-3 py-2"
                />
                <Input
                  type="number"
                  label="Places max"
                  value={formData.maxPlaces || ""}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      maxPlaces: e.target.value
                        ? parseInt(e.target.value)
                        : undefined,
                    })
                  }
                  placeholder="Ex: 25"
                  className="text-xs sm:text-sm px-3 py-2"
                />
              </div>
              <div className="flex flex-col sm:flex-row gap-2">
                <Button
                  onClick={handleSave}
                  variant="success"
                  size="md"
                  disabled={saving}
                >
                  {saving ? "Enregistrement..." : "Enregistrer"}
                </Button>
                <Button onClick={handleCancel} variant="secondary" size="md">
                  Annuler
                </Button>
              </div>
            </div>
          </div>
        </Modal>
      )}

      {events.length === 0 ? (
        <div className="text-center text-gray-400 py-8">
          Aucun événement trouvé
        </div>
      ) : (
        <div className="space-y-3">
          {events.map((event) => {
            const status = calculateEventStatus(event.date);
            const statusVariant =
              status === "UPCOMING"
                ? "success"
                : status === "LIVE"
                  ? "warning"
                  : "default";

            return (
              <Card key={event.id} variant="default" className="p-3 sm:p-4">
                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
                  <div className="flex-1 min-w-0">
                    <div className="flex flex-wrap items-center gap-2 sm:gap-3 mb-2">
                      <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
                        {event.name}
                      </h4>
                      <Badge variant="default" size="sm">
                        {getEventTypeLabel(event.type)}
                      </Badge>
                      <Badge variant={statusVariant} size="sm">
                        {getStatusLabel(status)}
                      </Badge>
                    </div>
                    <p className="text-gray-400 text-xs sm:text-sm mb-2 break-words">
                      {event.description}
                    </p>
                    <div className="flex flex-wrap items-center gap-2 sm:gap-4 mt-2">
                      <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
                        Date: {new Date(event.date).toLocaleDateString("fr-FR")}
                      </p>
                      {event.room && (
                        <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
                          📍 Salle: {event.room}
                        </p>
                      )}
                      {event.time && (
                        <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
                          🕐 Heure: {event.time}
                        </p>
                      )}
                      {event.maxPlaces && (
                        <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
                          👥 Places: {event.maxPlaces}
                        </p>
                      )}
                      <Badge variant="info" size="sm">
                        {event.registrationsCount || 0} inscrit
                        {event.registrationsCount !== 1 ? "s" : ""}
                      </Badge>
                    </div>
                  </div>
                  {!isCreating && !editingEvent && (
                    <div className="flex gap-2 sm:ml-4 flex-shrink-0 flex-wrap">
                      <Button
                        onClick={() => handleViewRegistrations(event)}
                        variant="primary"
                        size="sm"
                        className="whitespace-nowrap"
                      >
                        Inscrits ({event.registrationsCount || 0})
                      </Button>
                      <Button
                        onClick={() => handleEdit(event)}
                        variant="primary"
                        size="sm"
                        className="whitespace-nowrap"
                      >
                        Modifier
                      </Button>
                      <Button
                        onClick={() => handleDelete(event.id)}
                        variant="danger"
                        size="sm"
                        className="whitespace-nowrap"
                      >
                        Supprimer
                      </Button>
                    </div>
                  )}
                </div>
              </Card>
            );
          })}
        </div>
      )}

      {/* Modal des inscrits */}
      {viewingRegistrations && (
        <Modal
          isOpen={!!viewingRegistrations}
          onClose={handleCloseRegistrations}
          size="lg"
        >
          <div className="p-6">
            <div className="flex items-center justify-between mb-4">
              <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
                Inscrits à &quot;{viewingRegistrations.name}&quot;
              </h4>
              <CloseButton onClick={handleCloseRegistrations} size="lg" />
            </div>

            {loadingRegistrations ? (
              <div className="text-center text-gray-400 py-8">
                Chargement...
              </div>
            ) : registrations.length === 0 ? (
              <div className="text-center text-gray-400 py-8">
                Aucun inscrit pour cet événement
              </div>
            ) : (
              <div className="space-y-3 max-h-[60vh] overflow-y-auto">
                {registrations.map((registration) => {
                  const user = registration.user;
                  const currentScore = editingScores[user.id] ?? user.score;
                  const isSaving = savingScore === user.id;

                  return (
                    <Card
                      key={registration.id}
                      variant="default"
                      className="p-3 sm:p-4"
                    >
                      <div className="flex flex-col sm:flex-row sm:items-center gap-3">
                        <div className="flex items-center gap-3 flex-1 min-w-0">
                          <Avatar
                            src={user.avatar}
                            username={user.username}
                            size="md"
                            borderClassName="border-2 border-pixel-gold/50"
                          />
                          <div className="flex-1 min-w-0">
                            <h5 className="text-pixel-gold font-bold text-sm sm:text-base break-words">
                              {user.username}
                            </h5>
                            <p className="text-gray-400 text-xs sm:text-sm">
                              Niveau {user.level} • HP: {user.hp}/{user.maxHp} •
                              XP: {user.xp}/{user.maxXp}
                            </p>
                          </div>
                        </div>
                        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-3 flex-shrink-0">
                          <div className="flex items-center gap-2">
                            <label className="text-xs sm:text-sm text-gray-300 whitespace-nowrap">
                              Score:
                            </label>
                            <input
                              type="number"
                              value={currentScore}
                              onChange={(e) =>
                                handleScoreChange(
                                  user.id,
                                  parseInt(e.target.value) || 0
                                )
                              }
                              disabled={isSaving}
                              className="w-24 px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center disabled:opacity-50"
                            />
                          </div>
                          <div className="flex gap-1 sm:gap-2">
                            <button
                              onClick={() =>
                                handleScoreChange(user.id, currentScore - 100)
                              }
                              disabled={isSaving}
                              className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0 disabled:opacity-50"
                            >
                              -100
                            </button>
                            <button
                              onClick={() =>
                                handleScoreChange(user.id, currentScore + 100)
                              }
                              disabled={isSaving}
                              className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0 disabled:opacity-50"
                            >
                              +100
                            </button>
                            <button
                              onClick={() => handleSaveScore(user.id)}
                              disabled={isSaving || currentScore === user.score}
                              className="px-2 sm:px-3 py-1 border border-pixel-gold/50 bg-pixel-gold/20 text-pixel-gold text-[10px] sm:text-xs rounded hover:bg-pixel-gold/30 transition flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                              {isSaving ? "..." : "Sauver"}
                            </button>
                          </div>
                        </div>
                      </div>
                    </Card>
                  );
                })}
              </div>
            )}
          </div>
        </Modal>
      )}
    </div>
  );
}