"use client";

import { BarChart3, Target, Star } from "lucide-react";
import { TeamStats } from "@/services/admin-service";
import { TechIcon } from "@/components/icons/tech-icon";

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 TeamOverviewTabProps {
  team: TeamStats;
  teamInsights: TeamInsights;
  skillAnalysis: SkillAnalysis[];
}

function getSkillLevelColor(level: number): string {
  if (level < 0.5) return "bg-red-500";
  if (level < 1.5) return "bg-orange-500";
  if (level < 2.5) return "bg-blue-500";
  return "bg-green-500";
}

export function TeamOverviewTab({
  team,
  teamInsights,
  skillAnalysis,
}: TeamOverviewTabProps) {
  return (
    <>
      {/* Top Skills avec design amélioré */}
      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
        <h3 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
          <Star className="h-5 w-5 text-yellow-400" />
          Top Compétences de l'équipe
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {team.topSkills.slice(0, 6).map((skill, idx) => (
            <div
              key={idx}
              className="bg-white/5 border border-white/10 rounded-xl p-4 hover:bg-white/10 transition-colors group"
            >
              <div className="flex items-center justify-between mb-3">
                <div className="flex items-center gap-2">
                  {skill.icon && (
                    <div className="p-1.5 bg-white/10 border border-white/20 rounded-md">
                      <TechIcon
                        iconName={skill.icon}
                        className="w-3 h-3 text-white"
                      />
                    </div>
                  )}
                  <span className="text-white font-medium text-sm group-hover:text-white transition-colors">
                    {skill.skillName}
                  </span>
                </div>
                <div
                  className={`w-3 h-3 rounded-full ${getSkillLevelColor(
                    skill.averageLevel
                  )}`}
                />
              </div>
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-2xl font-bold text-white">
                    {skill.averageLevel.toFixed(1)}
                  </span>
                  <span className="text-xs text-slate-400">
                    {skill.averageLevel < 0.5
                      ? "Débutant"
                      : skill.averageLevel < 1.5
                      ? "Intermé."
                      : skill.averageLevel < 2.5
                      ? "Avancé"
                      : "Expert"}
                  </span>
                </div>
                <div className="w-full bg-white/10 rounded-full h-2">
                  <div
                    className={`h-2 rounded-full transition-all ${
                      skill.averageLevel < 0.5
                        ? "bg-gradient-to-r from-red-500 to-red-400"
                        : skill.averageLevel < 1.5
                        ? "bg-gradient-to-r from-orange-500 to-orange-400"
                        : skill.averageLevel < 2.5
                        ? "bg-gradient-to-r from-blue-500 to-blue-400"
                        : "bg-gradient-to-r from-green-500 to-green-400"
                    }`}
                    style={{
                      width: `${(skill.averageLevel / 3) * 100}%`,
                    }}
                  />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Distribution des niveaux */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
          <h3 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
            <BarChart3 className="h-5 w-5 text-blue-400" />
            Répartition des niveaux par compétence
          </h3>
          <div className="space-y-4">
            {(() => {
              // Calculer la répartition par compétence individuelle
              const allSkills = team.members.flatMap((m) => m.skills);
              const totalSkills = allSkills.length;

              const levelDistribution = {
                expert: allSkills.filter((s) => s.level === 3).length,
                autonomous: allSkills.filter((s) => s.level === 2).length,
                notAutonomous: allSkills.filter((s) => s.level === 1).length,
                never: allSkills.filter((s) => s.level === 0).length,
              };

              return [
                {
                  label: "Expert",
                  count: levelDistribution.expert,
                  total: totalSkills,
                  color: "bg-green-500",
                },
                {
                  label: "Autonome",
                  count: levelDistribution.autonomous,
                  total: totalSkills,
                  color: "bg-blue-500",
                },
                {
                  label: "Pas autonome",
                  count: levelDistribution.notAutonomous,
                  total: totalSkills,
                  color: "bg-orange-500",
                },
                {
                  label: "Jamais utilisé",
                  count: levelDistribution.never,
                  total: totalSkills,
                  color: "bg-red-500",
                },
              ].map((level, idx) => (
                <div
                  key={idx}
                  className="flex items-center justify-between p-3 bg-white/5 rounded-lg"
                >
                  <div className="flex items-center gap-3">
                    <div className={`w-3 h-3 rounded-full ${level.color}`} />
                    <span className="text-white font-medium">
                      {level.label}
                    </span>
                  </div>
                  <div className="flex items-center gap-3">
                    <span className="text-white font-bold">{level.count}</span>
                    <div className="w-16 bg-white/10 rounded-full h-2">
                      <div
                        className={`h-2 rounded-full ${level.color}`}
                        style={{
                          width: `${(level.count / level.total) * 100}%`,
                        }}
                      />
                    </div>
                    <span className="text-xs text-slate-400 w-10 text-right">
                      {((level.count / level.total) * 100).toFixed(0)}%
                    </span>
                  </div>
                </div>
              ));
            })()}
          </div>
        </div>

        <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
          <h3 className="text-lg font-semibold text-white mb-6 flex items-center gap-2">
            <Target className="h-5 w-5 text-purple-400" />
            Métriques clés
          </h3>
          <div className="space-y-4">
            <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <span className="text-slate-300">Couverture des compétences</span>
              <span className="text-white font-bold">
                {team.skillCoverage.toFixed(1)}%
              </span>
            </div>
            <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <span className="text-slate-300">Compétences fortes</span>
              <span className="text-white font-bold">
                {teamInsights.strongSkills}
              </span>
            </div>
            <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <span className="text-slate-300">Objectifs d'apprentissage</span>
              <span className="text-white font-bold">
                {teamInsights.totalLearners}
              </span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}