"use client";

import { Users, Building2 } from "lucide-react";
import {
  TreeCategoryHeader,
  TreeItemRow,
  TeamMetrics,
} from "@/components/admin";
import { Team as TeamType } from "@/lib/types";
import { TeamStats } from "@/lib/admin-types";

interface TeamsListProps {
  filteredTeamsByDirection: Record<string, TeamType[]>;
  expandedDirections: Set<string>;
  onToggleDirection: (direction: string) => void;
  onEditTeam: (team: TeamType) => void;
  onDeleteTeam: (teamId: string) => void;
  onDeleteDirection: (direction: string) => void;
  onViewMembers: (team: TeamType) => void;
  getTeamStats: (teamId: string) => TeamStats | undefined;
}

export function TeamsList({
  filteredTeamsByDirection,
  expandedDirections,
  onToggleDirection,
  onEditTeam,
  onDeleteTeam,
  onDeleteDirection,
  onViewMembers,
  getTeamStats,
}: TeamsListProps) {
  return (
    <>
      {Object.entries(filteredTeamsByDirection).map(
        ([direction, directionTeams], index) => (
          <div key={direction}>
            <TreeCategoryHeader
              category={direction}
              isExpanded={expandedDirections.has(direction)}
              onToggle={() => onToggleDirection(direction)}
              icon={<Building2 className="w-5 h-5 text-blue-400" />}
              itemCount={directionTeams.length}
              itemLabel="équipe"
              showSeparator={index > 0}
              onDelete={() => onDeleteDirection(direction)}
              canDelete={true}
              isDirection={true}
            />

            {/* Liste des teams de la direction */}
            {expandedDirections.has(direction) && (
              <div className="bg-slate-950/30">
                {directionTeams.map((team, teamIndex) => {
                  const stats = getTeamStats(team.id);
                  return (
                    <TreeItemRow
                      key={team.id}
                      icon={<Users className="w-5 h-5 text-green-400" />}
                      title={team.name}
                      badges={
                        stats
                          ? [
                              {
                                text: `${stats.totalMembers} membres`,
                                variant: "outline",
                              },
                            ]
                          : []
                      }
                      onEdit={() => onEditTeam(team)}
                      onDelete={() => onDeleteTeam(team.id)}
                      onViewMembers={() => onViewMembers(team)}
                      canDelete={!stats || stats.totalMembers === 0}
                      showSeparator={teamIndex > 0}
                      hasMembers={stats ? stats.totalMembers > 0 : false}
                      additionalInfo={
                        stats ? (
                          <TeamMetrics
                            averageSkillLevel={stats.averageSkillLevel}
                            skillCoverage={stats.skillCoverage}
                            topSkillsCount={stats.topSkills.length}
                            totalMembers={stats.totalMembers}
                          />
                        ) : (
                          <p className="text-slate-500 text-xs">
                            Aucune donnée disponible
                          </p>
                        )
                      }
                    />
                  );
                })}
              </div>
            )}
          </div>
        )
      )}
    </>
  );
}