"use client";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { TeamOverviewTab } from "./team-overview-tab";
import { TeamSkillsTab } from "./team-skills-tab";
import { TeamMembersTab } from "./team-members-tab";
import { TeamInsightsTab } from "./team-insights-tab";
import { TeamStats, TeamMember } from "@/lib/admin-types";

interface SkillAnalysis {
  skillName: string;
  category: string;
  experts: Array<{
    name: string;
    level: number;
    canMentor: boolean;
  }>;
  learners: Array<{
    name: string;
    currentLevel: number;
  }>;
  averageLevel: number;
  totalEvaluations: number;
  expertCount: number;
  learnerCount: number;
  proficiencyRate: number;
}

interface TeamInsights {
  averageTeamLevel: number;
  totalExperts: number;
  totalLearners: number;
  skillGaps: number;
  strongSkills: number;
}

interface TeamDetailTabsProps {
  team: TeamStats;
  skillAnalysis: SkillAnalysis[];
  teamInsights: TeamInsights;
  onMemberClick: (member: TeamMember) => void;
}

export function TeamDetailTabs({
  team,
  skillAnalysis,
  teamInsights,
  onMemberClick,
}: TeamDetailTabsProps) {
  return (
    <Tabs defaultValue="overview" 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-4 bg-transparent border-0">
          <TabsTrigger
            value="overview"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
          >
            Vue d'ensemble
          </TabsTrigger>
          <TabsTrigger
            value="skills"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
          >
            Compétences
          </TabsTrigger>
          <TabsTrigger
            value="members"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
          >
            Membres
          </TabsTrigger>
          <TabsTrigger
            value="insights"
            className="data-[state=active]:bg-white/20 data-[state=active]:text-white text-slate-400 hover:text-white transition-colors"
          >
            Insights
          </TabsTrigger>
        </TabsList>
      </div>

      <TabsContent value="overview" className="space-y-6">
        <TeamOverviewTab
          team={team}
          teamInsights={teamInsights}
          skillAnalysis={skillAnalysis}
        />
      </TabsContent>

      <TabsContent value="skills" className="space-y-6">
        <TeamSkillsTab skillAnalysis={skillAnalysis} />
      </TabsContent>

      <TabsContent value="members" className="space-y-6">
        <TeamMembersTab members={team.members} onMemberClick={onMemberClick} />
      </TabsContent>

      <TabsContent value="insights" className="space-y-6">
        <TeamInsightsTab
          skillAnalysis={skillAnalysis}
          teamInsights={teamInsights}
        />
      </TabsContent>
    </Tabs>
  );
}