"use client";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Users, Building2 } from "lucide-react";
import { TeamStats, DirectionStats } from "@/services/admin-service";
import { DirectionOverview, TeamStatsCard } from "@/components/admin";

interface AdminContentTabsProps {
  getFilteredDirectionStats: () => DirectionStats[];
  getFilteredTeamStats: () => TeamStats[];
  onViewTeamDetails: (team: TeamStats) => void;
  onExportTeamReport: (team: TeamStats) => void;
}

export function AdminContentTabs({
  getFilteredDirectionStats,
  getFilteredTeamStats,
  onViewTeamDetails,
  onExportTeamReport,
}: AdminContentTabsProps) {
  return (
    <Tabs defaultValue="directions" className="w-full">
      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-1 mb-6 w-fit mx-auto">
        <TabsList className="grid w-full grid-cols-2 bg-transparent border-0">
          <TabsTrigger
            value="directions"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
          >
            Vue par Direction
          </TabsTrigger>
          <TabsTrigger
            value="teams"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
          >
            Vue par Équipe
          </TabsTrigger>
        </TabsList>
      </div>

      <TabsContent value="directions" className="space-y-6">
        <div className="grid gap-6">
          {getFilteredDirectionStats().length > 0 ? (
            getFilteredDirectionStats().map((direction) => (
              <DirectionOverview
                key={direction.direction}
                direction={direction.direction}
                teams={direction.teams}
                totalMembers={direction.totalMembers}
                averageSkillLevel={direction.averageSkillLevel}
                topCategories={direction.topCategories}
                onViewTeamDetails={onViewTeamDetails}
                onExportTeamReport={onExportTeamReport}
              />
            ))
          ) : (
            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-12 text-center">
              <div className="p-3 bg-slate-500/20 border border-slate-500/30 rounded-xl w-fit mx-auto mb-4">
                <Building2 className="h-6 w-6 text-slate-400" />
              </div>
              <h3 className="text-lg font-medium text-white mb-2">
                Aucune direction trouvée
              </h3>
              <p className="text-slate-400 text-sm">
                Aucune direction ne correspond aux filtres sélectionnés.
              </p>
            </div>
          )}
        </div>
      </TabsContent>

      <TabsContent value="teams" className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {getFilteredTeamStats().length > 0 ? (
            getFilteredTeamStats().map((team) => (
              <TeamStatsCard
                key={team.teamId}
                teamId={team.teamId}
                teamName={team.teamName}
                direction={team.direction}
                totalMembers={team.totalMembers}
                averageSkillLevel={team.averageSkillLevel}
                topSkills={team.topSkills}
                skillCoverage={team.skillCoverage}
                onViewDetails={() => onViewTeamDetails(team)}
                onViewReport={() => onExportTeamReport(team)}
              />
            ))
          ) : (
            <div className="col-span-full">
              <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-12 text-center">
                <div className="p-3 bg-slate-500/20 border border-slate-500/30 rounded-xl w-fit mx-auto mb-4">
                  <Users className="h-6 w-6 text-slate-400" />
                </div>
                <h3 className="text-lg font-medium text-white mb-2">
                  Aucune équipe trouvée
                </h3>
                <p className="text-slate-400 text-sm">
                  Aucune équipe ne correspond aux filtres sélectionnés.
                </p>
              </div>
            </div>
          )}
        </div>
      </TabsContent>
    </Tabs>
  );
}