"use client";

import { User, Building2 } from "lucide-react";
import { TreeCategoryHeader, TreeItemRow } from "@/components/admin";

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

interface UsersListProps {
  filteredUsersByTeam: Record<string, User[]>;
  expandedTeams: Set<string>;
  onToggleTeam: (teamName: string) => void;
  onDeleteUser: (user: User) => void;
}

export function UsersList({
  filteredUsersByTeam,
  expandedTeams,
  onToggleTeam,
  onDeleteUser,
}: UsersListProps) {
  return (
    <>
      {Object.entries(filteredUsersByTeam).map(
        ([teamName, teamUsers], index) => (
          <div key={teamName}>
            <TreeCategoryHeader
              category={teamName}
              isExpanded={expandedTeams.has(teamName)}
              onToggle={() => onToggleTeam(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={() => onDeleteUser(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>
        )
      )}
    </>
  );
}