peakskills/components/admin/management/pages/users-management.tsx

"use client";

import { useState, useEffect } from "react";
import { Users, User, Trash2, Building2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { useToast } from "@/hooks/use-toast";
import {
  AdminManagementService,
  Team,
} from "@/services/admin-management-service";
import {
  TreeCategoryHeader,
  TreeItemRow,
} from "@/components/admin";
import { TreeViewPage } from "../tree-view-page";
import { useTreeView } from "@/hooks/use-tree-view";
import { useFormDialog } from "@/hooks/use-form-dialog";

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 [userFormData, setUserFormData] = useState<UserFormData>({
    firstName: "",
    lastName: "",
    teamId: "",
  });
  const { toast } = useToast();
  const { isCreateDialogOpen, openCreateDialog, closeCreateDialog } = useFormDialog();

  // Utilisation du hook factorisé
  const {
    filteredDataByCategory: filteredUsersByTeam,
    expandedCategories: expandedTeams,
    toggleCategory: toggleTeam,
    expandAll,
    collapseAll,
  } = useTreeView({
    data: users,
    searchFields: ['firstName', 'lastName'],
    groupBy: (user) => user.teamName || "Sans équipe",
    searchTerm,
    onSearchChange: setSearchTerm,
  });

  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);
    }
  };

  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: "" });
      closeCreateDialog();

      // 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>
    );
  }

  const headerActions = (
    <Dialog open={isCreateDialogOpen} onOpenChange={closeCreateDialog}>
      <DialogTrigger asChild>
        <Button onClick={openCreateDialog}>
          <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={closeCreateDialog}
            >
              Annuler
            </Button>
            <Button onClick={handleCreateUser}>Créer</Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );

  const 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>
  );

  return (
    <TreeViewPage
      title="Gestion des utilisateurs"
      description="Gérez les utilisateurs de votre organisation"
      searchTerm={searchTerm}
      onSearchChange={setSearchTerm}
      onExpandAll={expandAll}
      onCollapseAll={collapseAll}
      searchPlaceholder="Rechercher un utilisateur..."
      hasContent={Object.keys(filteredUsersByTeam).length > 0}
      emptyState={emptyState}
      headerActions={headerActions}
    >
      {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>
        )
      )}
    </TreeViewPage>
  );
}