"use client";

import { Star, BarChart3, Target } 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
          </h3>
          <div className="space-y-4">
            {[
              {
                label: "Expert",
                count: team.members.filter(
                  (m) =>
                    m.skills.reduce((avg, s) => avg + s.level, 0) /
                      m.skills.length >=
                    2.5
                ).length,
                color: "bg-green-500",
              },
              {
                label: "Avancé",
                count: team.members.filter((m) => {
                  const avg =
                    m.skills.reduce((avg, s) => avg + s.level, 0) /
                    m.skills.length;
                  return avg >= 2 && avg < 2.5;
                }).length,
                color: "bg-blue-500",
              },
              {
                label: "Intermédiaire",
                count: team.members.filter((m) => {
                  const avg =
                    m.skills.reduce((avg, s) => avg + s.level, 0) /
                    m.skills.length;
                  return avg >= 1 && avg < 2;
                }).length,
                color: "bg-orange-500",
              },
              {
                label: "Débutant",
                count: team.members.filter(
                  (m) =>
                    m.skills.reduce((avg, s) => avg + s.level, 0) /
                      m.skills.length <
                    1
                ).length,
                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 / team.totalMembers) * 100}%`,
                      }}
                    />
                  </div>
                  <span className="text-xs text-slate-400 w-10 text-right">
                    {((level.count / team.totalMembers) * 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 className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <span className="text-slate-300">Mentors disponibles</span>
              <span className="text-white font-bold">
                {skillAnalysis.reduce(
                  (sum, skill) =>
                    sum + skill.experts.filter((e) => e.canMentor).length,
                  0
                )}
              </span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}