peakskills/components/admin/users-management.tsx

"use client";

import { useState, useEffect, useMemo } from "react";
import { Users, User, Trash2, Search, Building2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useToast } from "@/hooks/use-toast";
import {
  AdminManagementService,
  Team,
} from "@/services/admin-management-service";
import {
  TreeViewContainer,
  TreeCategoryHeader,
  TreeItemRow,
  TreeSearchControls,
} from "@/components/admin";

interface User {
  uuid: string;
  firstName: string;
  lastName: string;
  teamName?: string;
  hasEvaluations: boolean;
}

interface UserFormData {
  firstName: string;
  lastName: string;
  teamId: string;
}

export function UsersManagement() {
  const [users, setUsers] = useState<User[]>([]);
  const [teams, setTeams] = useState<Team[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [deletingUserId, setDeletingUserId] = useState<string | null>(null);
  const [searchTerm, setSearchTerm] = useState("");
  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
  const [userFormData, setUserFormData] = useState<UserFormData>({
    firstName: "",
    lastName: "",
    teamId: "",
  });
  const { toast } = useToast();

  // État pour les équipes ouvertes/fermées
  const [expandedTeams, setExpandedTeams] = useState<Set<string>>(new Set());

  // Grouper les utilisateurs par équipe et filtrer en fonction de la recherche
  const filteredUsersByTeam = useMemo(() => {
    // Grouper les utilisateurs par équipe
    const usersByTeam = users.reduce((acc, user) => {
      const teamKey = user.teamName || "Sans équipe";
      if (!acc[teamKey]) {
        acc[teamKey] = [];
      }
      acc[teamKey].push(user);
      return acc;
    }, {} as Record<string, User[]>);

    // Filtrer les utilisateurs en fonction de la recherche
    return Object.entries(usersByTeam).reduce((acc, [teamName, teamUsers]) => {
      const filteredUsers = teamUsers.filter((user) => {
        const matchesSearch =
          user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
          user.lastName.toLowerCase().includes(searchTerm.toLowerCase()) ||
          (user.teamName &&
            user.teamName.toLowerCase().includes(searchTerm.toLowerCase()));
        return matchesSearch;
      });

      if (filteredUsers.length > 0) {
        acc[teamName] = filteredUsers;
      }
      return acc;
    }, {} as Record<string, User[]>);
  }, [users, searchTerm]);

  useEffect(() => {
    fetchUsers();
    fetchTeams();
  }, []);

  const fetchUsers = async () => {
    setIsLoading(true);
    setError(null);
    try {
      const response = await fetch("/api/admin/users");
      if (!response.ok) {
        throw new Error("Erreur lors de la récupération des utilisateurs");
      }
      const usersData = await response.json();
      setUsers(usersData);
    } catch (err: any) {
      setError(err.message || "Erreur lors du chargement des utilisateurs");
    } finally {
      setIsLoading(false);
    }
  };

  const fetchTeams = async () => {
    try {
      const teamsData = await AdminManagementService.getTeams();
      setTeams(teamsData);
    } catch (error) {
      console.error("Error fetching teams:", error);
    }
  };

  // Fonctions pour gérer l'expansion des équipes
  const toggleTeam = useMemo(
    () => (teamName: string) => {
      setExpandedTeams((prev) => {
        const newExpanded = new Set(prev);
        if (newExpanded.has(teamName)) {
          newExpanded.delete(teamName);
        } else {
          newExpanded.add(teamName);
        }
        return newExpanded;
      });
    },
    []
  );

  const expandAll = useMemo(
    () => () => {
      setExpandedTeams(new Set(Object.keys(filteredUsersByTeam)));
    },
    [filteredUsersByTeam]
  );

  const collapseAll = useMemo(
    () => () => {
      setExpandedTeams(new Set());
    },
    []
  );

  // Ouvrir automatiquement les équipes qui contiennent des résultats lors de la recherche
  useEffect(() => {
    if (searchTerm.trim()) {
      const teamsWithResults = Object.keys(filteredUsersByTeam);
      setExpandedTeams(new Set(teamsWithResults));
    }
    // Ne pas fermer automatiquement les équipes si pas de recherche
    // Cela évite que les équipes se ferment lors de la suppression d'utilisateurs
  }, [searchTerm]); // Retiré filteredUsersByTeam de la dépendance

  const handleCreateUser = async () => {
    if (!userFormData.firstName || !userFormData.lastName) {
      toast({
        title: "Erreur",
        description: "Veuillez remplir tous les champs obligatoires",
        variant: "destructive",
      });
      return;
    }

    try {
      // TODO: Implémenter la création d'utilisateur
      toast({
        title: "Succès",
        description: "Utilisateur créé avec succès",
      });

      setUserFormData({ firstName: "", lastName: "", teamId: "" });
      setIsCreateDialogOpen(false);

      // Rafraîchir la liste
      fetchUsers();
    } catch (error: any) {
      toast({
        title: "Erreur",
        description:
          error.message || "Erreur lors de la création de l'utilisateur",
        variant: "destructive",
      });
    }
  };

  const handleDeleteUser = async (user: User) => {
    if (user.teamName) {
      toast({
        title: "Action impossible",
        description:
          "Retirez d'abord l'utilisateur de son équipe avant de le supprimer",
        variant: "destructive",
      });
      return;
    }

    if (
      !confirm(
        `Êtes-vous sûr de vouloir supprimer définitivement ${user.firstName} ${user.lastName} ?\n\nCette action supprimera aussi toutes ses évaluations par skills et est irréversible.`
      )
    ) {
      return;
    }

    setDeletingUserId(user.uuid);
    try {
      await AdminManagementService.deleteUser(user.uuid);

      // Mettre à jour la liste locale
      setUsers((prev) => prev.filter((u) => u.uuid !== user.uuid));

      toast({
        title: "Succès",
        description: `${user.firstName} ${user.lastName} a été supprimé avec succès`,
      });
    } catch (err: any) {
      toast({
        title: "Erreur",
        description:
          err.message || "Erreur lors de la suppression de l'utilisateur",
        variant: "destructive",
      });
    } finally {
      setDeletingUserId(null);
    }
  };

  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold text-white">
            Gestion des utilisateurs
          </h2>
          <Button disabled>
            <Users className="w-4 h-4 mr-2" />
            Créer un utilisateur
          </Button>
        </div>
        <div className="space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="flex items-center gap-3 p-3">
              <div className="w-8 h-8 rounded-full bg-slate-700 animate-pulse" />
              <div className="flex-1 space-y-2">
                <div className="h-4 bg-slate-700 rounded animate-pulse w-32" />
                <div className="h-3 bg-slate-700 rounded animate-pulse w-24" />
              </div>
              <div className="w-20 h-8 bg-slate-700 rounded animate-pulse" />
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold text-white">
            Gestion des utilisateurs
          </h2>
        </div>
        <div className="text-center py-8">
          <div className="w-12 h-12 rounded-full bg-red-500/20 flex items-center justify-center mx-auto mb-4">
            <Users className="w-6 h-6 text-red-400" />
          </div>
          <p className="text-red-400 mb-4">{error}</p>
          <Button onClick={fetchUsers} variant="outline">
            Réessayer
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* En-tête avec bouton de création */}
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold text-white">
          Gestion des utilisateurs
        </h2>
        <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
          <DialogTrigger asChild>
            <Button>
              <Users className="w-4 h-4 mr-2" />
              Créer un utilisateur
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[500px]">
            <DialogHeader>
              <DialogTitle>Créer un nouvel utilisateur</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div>
                <Label htmlFor="user-first-name">Prénom *</Label>
                <Input
                  id="user-first-name"
                  value={userFormData.firstName}
                  onChange={(e) =>
                    setUserFormData({
                      ...userFormData,
                      firstName: e.target.value,
                    })
                  }
                  placeholder="Prénom de l'utilisateur"
                />
              </div>
              <div>
                <Label htmlFor="user-last-name">Nom *</Label>
                <Input
                  id="user-last-name"
                  value={userFormData.lastName}
                  onChange={(e) =>
                    setUserFormData({
                      ...userFormData,
                      lastName: e.target.value,
                    })
                  }
                  placeholder="Nom de l'utilisateur"
                />
              </div>
              <div>
                <Label htmlFor="user-team">Équipe</Label>
                <Select
                  value={userFormData.teamId}
                  onValueChange={(value) =>
                    setUserFormData({ ...userFormData, teamId: value })
                  }
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Sélectionner une équipe (optionnel)" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="">Aucune équipe</SelectItem>
                    {teams.map((team) => (
                      <SelectItem key={team.id} value={team.id}>
                        {team.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="flex justify-end gap-2 pt-4">
                <Button
                  variant="outline"
                  onClick={() => setIsCreateDialogOpen(false)}
                >
                  Annuler
                </Button>
                <Button onClick={handleCreateUser}>Créer</Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      </div>

      {/* Filtres et contrôles */}
      <TreeSearchControls
        searchTerm={searchTerm}
        onSearchChange={setSearchTerm}
        onExpandAll={expandAll}
        onCollapseAll={collapseAll}
        placeholder="Rechercher un utilisateur..."
      />

      {/* Vue arborescente des utilisateurs */}
      <TreeViewContainer
        hasContent={Object.keys(filteredUsersByTeam).length > 0}
        emptyState={
          <div className="text-center py-8">
            <Users className="w-10 h-10 text-slate-500 mx-auto mb-3" />
            <h3 className="text-base font-medium text-slate-400 mb-1">
              {searchTerm ? "Aucun utilisateur trouvé" : "Aucun utilisateur"}
            </h3>
            <p className="text-sm text-slate-500">
              {searchTerm
                ? "Essayez de modifier vos critères de recherche"
                : "Commencez par créer votre premier utilisateur"}
            </p>
          </div>
        }
      >
        {Object.entries(filteredUsersByTeam).map(
          ([teamName, teamUsers], index) => (
            <div key={teamName}>
              <TreeCategoryHeader
                category={teamName}
                isExpanded={expandedTeams.has(teamName)}
                onToggle={() => toggleTeam(teamName)}
                icon={<Building2 className="w-5 h-5 text-blue-400" />}
                itemCount={teamUsers.length}
                itemLabel="utilisateur"
                showSeparator={index > 0}
                canDelete={false}
                isDirection={false}
              />

              {/* Liste des utilisateurs de l'équipe */}
              {expandedTeams.has(teamName) && (
                <div className="bg-slate-950/30">
                  {teamUsers.map((user, userIndex) => (
                    <TreeItemRow
                      key={user.uuid}
                      icon={<User className="w-5 h-5 text-green-400" />}
                      title={`${user.firstName} ${user.lastName}`}
                      badges={[
                        {
                          text: user.hasEvaluations
                            ? "A des évaluations"
                            : "Aucune évaluation",
                          variant: user.hasEvaluations ? "default" : "outline",
                        },
                      ]}
                      onDelete={() => handleDeleteUser(user)}
                      canDelete={!user.teamName}
                      showSeparator={userIndex > 0}
                      additionalInfo={
                        <p className="text-slate-500 text-xs">
                          {user.teamName
                            ? `Équipe: ${user.teamName}`
                            : "Aucune équipe"}
                        </p>
                      }
                    />
                  ))}
                </div>
              )}
            </div>
          )
        )}
      </TreeViewContainer>
    </div>
  );
}