got-gaming/components/admin/HouseManagement.tsx

"use client";

import { useState, useEffect, useTransition } from "react";
import {
  Input,
  Textarea,
  Button,
  Card,
  Badge,
  Modal,
  CloseButton,
  Avatar,
} from "@/components/ui";
import { updateHouse, deleteHouse, removeMember } from "@/actions/admin/houses";

interface House {
  id: string;
  name: string;
  description: string | null;
  creatorId: string;
  creator: {
    id: string;
    username: string;
    avatar: string | null;
  };
  createdAt: string;
  updatedAt: string;
  membersCount: number;
  memberships: Array<{
    id: string;
    role: string;
    joinedAt: string;
    user: {
      id: string;
      username: string;
      avatar: string | null;
      score: number;
      level: number;
    };
  }>;
}

interface HouseFormData {
  name: string;
  description: string;
}

const getRoleLabel = (role: string) => {
  switch (role) {
    case "OWNER":
      return "👑 Propriétaire";
    case "ADMIN":
      return "⚡ Admin";
    case "MEMBER":
      return "👤 Membre";
    default:
      return role;
  }
};

const getRoleColor = (role: string) => {
  switch (role) {
    case "OWNER":
      return "var(--accent)";
    case "ADMIN":
      return "var(--primary)";
    case "MEMBER":
      return "var(--muted-foreground)";
    default:
      return "var(--gray)";
  }
};

export default function HouseManagement() {
  const [houses, setHouses] = useState<House[]>([]);
  const [loading, setLoading] = useState(true);
  const [editingHouse, setEditingHouse] = useState<House | null>(null);
  const [saving, setSaving] = useState(false);
  const [deletingHouseId, setDeletingHouseId] = useState<string | null>(null);
  const [viewingMembers, setViewingMembers] = useState<House | null>(null);
  const [removingMemberId, setRemovingMemberId] = useState<string | null>(null);
  const [formData, setFormData] = useState<HouseFormData>({
    name: "",
    description: "",
  });
  const [, startTransition] = useTransition();

  useEffect(() => {
    fetchHouses();
  }, []);

  const fetchHouses = async () => {
    try {
      const response = await fetch("/api/admin/houses");
      if (response.ok) {
        const data = await response.json();
        setHouses(data);
      }
    } catch (error) {
      console.error("Error fetching houses:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleEdit = (house: House) => {
    setEditingHouse(house);
    setFormData({
      name: house.name,
      description: house.description || "",
    });
  };

  const handleSave = async () => {
    if (!editingHouse) return;

    setSaving(true);
    startTransition(async () => {
      try {
        const result = await updateHouse(editingHouse.id, {
          name: formData.name,
          description: formData.description || null,
        });

        if (result.success) {
          await fetchHouses();
          setEditingHouse(null);
          setFormData({ name: "", description: "" });
        } else {
          alert(result.error || "Erreur lors de la mise à jour");
        }
      } catch (error) {
        console.error("Error updating house:", error);
        alert("Erreur lors de la mise à jour");
      } finally {
        setSaving(false);
      }
    });
  };

  const handleDelete = async (houseId: string) => {
    if (
      !confirm(
        "Êtes-vous sûr de vouloir supprimer cette maison ? Cette action est irréversible et supprimera tous les membres."
      )
    ) {
      return;
    }

    setDeletingHouseId(houseId);
    startTransition(async () => {
      try {
        const result = await deleteHouse(houseId);

        if (result.success) {
          await fetchHouses();
        } else {
          alert(result.error || "Erreur lors de la suppression");
        }
      } catch (error) {
        console.error("Error deleting house:", error);
        alert("Erreur lors de la suppression");
      } finally {
        setDeletingHouseId(null);
      }
    });
  };

  const handleCancel = () => {
    setEditingHouse(null);
    setFormData({ name: "", description: "" });
  };

  const handleRemoveMember = async (houseId: string, memberId: string) => {
    if (
      !confirm(
        "Êtes-vous sûr de vouloir retirer ce membre de la maison ? Cette action lui retirera des points."
      )
    ) {
      return;
    }

    setRemovingMemberId(memberId);
    startTransition(async () => {
      try {
        const result = await removeMember(houseId, memberId);

        if (result.success) {
          // Récupérer les maisons mises à jour
          const response = await fetch("/api/admin/houses");
          if (response.ok) {
            const updatedHouses = await response.json();
            setHouses(updatedHouses);
            // Mettre à jour la modal si elle est ouverte
            if (viewingMembers) {
              const updatedHouse = updatedHouses.find((h: House) => h.id === houseId);
              if (updatedHouse) {
                setViewingMembers(updatedHouse);
              } else {
                // Si la maison n'existe plus, fermer la modal
                setViewingMembers(null);
              }
            }
          }
        } else {
          alert(result.error || "Erreur lors du retrait du membre");
        }
      } catch (error) {
        console.error("Error removing member:", error);
        alert("Erreur lors du retrait du membre");
      } finally {
        setRemovingMemberId(null);
      }
    });
  };

  const formatNumber = (num: number) => {
    return num.toLocaleString("en-US");
  };

  if (loading) {
    return <div className="text-center text-gray-400 py-8">Chargement...</div>;
  }

  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">
          Maisons ({houses.length})
        </h3>
      </div>

      {/* Modal d'édition */}
      {editingHouse && (
        <Modal isOpen={!!editingHouse} 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">
                Modifier la maison
              </h4>
              <CloseButton onClick={handleCancel} size="lg" />
            </div>
            <div className="space-y-4">
              <Input
                type="text"
                label="Nom de la maison"
                value={formData.name}
                onChange={(e) =>
                  setFormData({ ...formData, name: e.target.value })
                }
                placeholder="Nom de la maison"
                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 la maison"
                rows={4}
                className="text-xs sm:text-sm px-3 py-2"
              />
              <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>
      )}

      {/* Modal des membres */}
      {viewingMembers && (
        <Modal
          isOpen={!!viewingMembers}
          onClose={() => setViewingMembers(null)}
          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">
                Membres de &quot;{viewingMembers.name}&quot;
              </h4>
              <CloseButton onClick={() => setViewingMembers(null)} size="lg" />
            </div>

            {viewingMembers.memberships.length === 0 ? (
              <div className="text-center text-gray-400 py-8">
                Aucun membre dans cette maison
              </div>
            ) : (
              <div className="space-y-3 max-h-[60vh] overflow-y-auto">
                {viewingMembers.memberships.map((membership) => {
                  const roleColor = getRoleColor(membership.role);
                  return (
                    <Card
                      key={membership.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={membership.user.avatar}
                            username={membership.user.username}
                            size="md"
                            borderClassName="border-2"
                            style={{
                              borderColor: roleColor,
                            }}
                          />
                          <div className="flex-1 min-w-0">
                            <h5 className="text-pixel-gold font-bold text-sm sm:text-base break-words">
                              {membership.user.username}
                            </h5>
                            <p className="text-gray-400 text-xs sm:text-sm">
                              Niveau {membership.user.level} • Score:{" "}
                              {formatNumber(membership.user.score)}
                            </p>
                          </div>
                        </div>
                        <div className="flex items-center gap-2 flex-shrink-0">
                          <Badge
                            variant="default"
                            size="sm"
                            style={{
                              color: roleColor,
                              backgroundColor: `color-mix(in srgb, ${roleColor} 15%, transparent)`,
                              borderColor: `color-mix(in srgb, ${roleColor} 30%, transparent)`,
                            }}
                          >
                            {getRoleLabel(membership.role)}
                          </Badge>
                          {membership.role !== "OWNER" && (
                            <Button
                              onClick={() =>
                                handleRemoveMember(
                                  viewingMembers.id,
                                  membership.user.id
                                )
                              }
                              variant="danger"
                              size="sm"
                              disabled={removingMemberId === membership.user.id}
                              className="whitespace-nowrap"
                            >
                              {removingMemberId === membership.user.id
                                ? "..."
                                : "Retirer"}
                            </Button>
                          )}
                        </div>
                      </div>
                    </Card>
                  );
                })}
              </div>
            )}
          </div>
        </Modal>
      )}

      {houses.length === 0 ? (
        <div className="text-center text-gray-400 py-8">
          Aucune maison trouvée
        </div>
      ) : (
        <div className="space-y-3">
          {houses.map((house) => {
            return (
              <Card key={house.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">
                        {house.name}
                      </h4>
                      <Badge variant="info" size="sm">
                        {house.membersCount} membre
                        {house.membersCount !== 1 ? "s" : ""}
                      </Badge>
                    </div>
                    {house.description && (
                      <p className="text-gray-400 text-xs sm:text-sm mb-2 break-words">
                        {house.description}
                      </p>
                    )}
                    <div className="flex flex-wrap items-center gap-2 sm:gap-4 mt-2">
                      <div className="flex items-center gap-2">
                        <Avatar
                          src={house.creator.avatar}
                          username={house.creator.username}
                          size="sm"
                          borderClassName="border border-pixel-gold/50"
                        />
                        <p className="text-gray-500 text-[10px] sm:text-xs">
                          Créée par {house.creator.username}
                        </p>
                      </div>
                      <p className="text-gray-500 text-[10px] sm:text-xs whitespace-nowrap">
                        Créée le{" "}
                        {new Date(house.createdAt).toLocaleDateString("fr-FR")}
                      </p>
                    </div>
                  </div>
                  {!editingHouse && (
                    <div className="flex gap-2 sm:ml-4 flex-shrink-0 flex-wrap">
                      <Button
                        onClick={() => setViewingMembers(house)}
                        variant="primary"
                        size="sm"
                        className="whitespace-nowrap"
                      >
                        Membres ({house.membersCount})
                      </Button>
                      <Button
                        onClick={() => handleEdit(house)}
                        variant="primary"
                        size="sm"
                        className="whitespace-nowrap"
                      >
                        Modifier
                      </Button>
                      <Button
                        onClick={() => handleDelete(house.id)}
                        variant="danger"
                        size="sm"
                        disabled={deletingHouseId === house.id}
                        className="whitespace-nowrap"
                      >
                        {deletingHouseId === house.id ? "..." : "Supprimer"}
                      </Button>
                    </div>
                  )}
                </div>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
}