"use client";

import { BarChart3, Target, Star } from "lucide-react";
import { TeamStats } from "@/lib/admin-types";
import { TechIcon } from "@/components/icons/tech-icon";
import {
  COVERAGE_OBJECTIVES,
  isCoverageBelowObjective,
} from "@/lib/evaluation-utils";

interface SkillAnalysis {
  skillName: string;
  category: string;
  importance: "incontournable" | "majeure" | "standard";
  icon?: 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;
  coverage: number;
}

interface TeamInsights {
  averageTeamLevel: number;
  totalExperts: number;
  totalLearners: number;
  skillGaps: {
    incontournable: number;
    majeure: number;
    standard: number;
  };
  strongSkills: {
    incontournable: number;
    majeure: number;
    standard: number;
  };
  criticalSkillsCoverage: {
    incontournable: number;
    majeure: 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 border rounded-md ${
                        skill.importance === "incontournable"
                          ? "bg-red-500/20 border-red-500/30"
                          : skill.importance === "majeure"
                          ? "bg-blue-500/20 border-blue-500/30"
                          : "bg-slate-500/20 border-slate-500/30"
                      }`}
                    >
                      <TechIcon
                        iconName={skill.icon}
                        className={`w-3 h-3 ${
                          skill.importance === "incontournable"
                            ? "text-red-400"
                            : skill.importance === "majeure"
                            ? "text-blue-400"
                            : "text-slate-400"
                        }`}
                      />
                    </div>
                  )}
                  <div>
                    <span className="text-white font-medium text-sm group-hover:text-white transition-colors">
                      {skill.skillName}
                    </span>
                    <div
                      className={`text-[10px] ${
                        skill.importance === "incontournable"
                          ? "text-red-400"
                          : skill.importance === "majeure"
                          ? "text-blue-400"
                          : "text-slate-400"
                      }`}
                    >
                      {skill.importance === "incontournable"
                        ? "Incontournable"
                        : skill.importance === "majeure"
                        ? "Majeure"
                        : "Standard"}
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <div
                    className={`text-xs ${
                      skill.importance === "standard"
                        ? "text-slate-400"
                        : isCoverageBelowObjective(
                            skill.coverage,
                            skill.importance
                          )
                        ? "text-red-400"
                        : "text-green-400"
                    }`}
                  >
                    {skill.coverage.toFixed(0)}%
                  </div>
                  <div
                    className={`w-3 h-3 rounded-full ${getSkillLevelColor(
                      skill.averageLevel
                    )}`}
                  />
                </div>
              </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>

      {/* Compétences critiques */}
      <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-red-400" />
          Compétences critiques
        </h3>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Incontournables */}
          <div>
            <div className="flex items-center justify-between mb-4">
              <h4 className="text-sm font-medium text-red-400">
                Incontournables
              </h4>
              <div className="text-sm">
                <span className="text-green-400">
                  {teamInsights.strongSkills.incontournable}
                </span>
                <span className="text-slate-400"> / </span>
                <span className="text-slate-300">
                  {teamInsights.strongSkills.incontournable +
                    teamInsights.skillGaps.incontournable}
                </span>
              </div>
            </div>
            <div className="space-y-2">
              {skillAnalysis
                .filter((s) => s.importance === "incontournable")
                .sort((a, b) => b.coverage - a.coverage)
                .map((skill, idx) => (
                  <div
                    key={idx}
                    className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
                  >
                    <div className="flex items-center gap-2">
                      {skill.icon && (
                        <div className="p-1.5 bg-red-500/20 border border-red-500/30 rounded-md">
                          <TechIcon
                            iconName={skill.icon}
                            className="w-3 h-3 text-red-400"
                          />
                        </div>
                      )}
                      <span className="text-sm text-slate-300">
                        {skill.skillName}
                      </span>
                    </div>
                    <div className="flex items-center gap-3">
                      <span
                        className={`text-sm font-medium ${
                          isCoverageBelowObjective(
                            skill.coverage,
                            skill.importance
                          )
                            ? "text-red-400"
                            : "text-green-400"
                        }`}
                      >
                        {skill.coverage.toFixed(0)}%
                      </span>
                      <div className="w-16 bg-white/10 rounded-full h-1.5">
                        <div
                          className={`h-1.5 rounded-full ${
                            isCoverageBelowObjective(
                              skill.coverage,
                              skill.importance
                            )
                              ? "bg-red-500"
                              : "bg-green-500"
                          }`}
                          style={{ width: `${skill.coverage}%` }}
                        />
                      </div>
                    </div>
                  </div>
                ))}
            </div>
          </div>

          {/* Majeures */}
          <div>
            <div className="flex items-center justify-between mb-4">
              <h4 className="text-sm font-medium text-blue-400">Majeures</h4>
              <div className="text-sm">
                <span className="text-green-400">
                  {teamInsights.strongSkills.majeure}
                </span>
                <span className="text-slate-400"> / </span>
                <span className="text-slate-300">
                  {teamInsights.strongSkills.majeure +
                    teamInsights.skillGaps.majeure}
                </span>
              </div>
            </div>
            <div className="space-y-2">
              {skillAnalysis
                .filter((s) => s.importance === "majeure")
                .sort((a, b) => b.coverage - a.coverage)
                .map((skill, idx) => (
                  <div
                    key={idx}
                    className="flex items-center justify-between p-2 bg-white/5 rounded-lg"
                  >
                    <div className="flex items-center gap-2">
                      {skill.icon && (
                        <div className="p-1.5 bg-blue-500/20 border border-blue-500/30 rounded-md">
                          <TechIcon
                            iconName={skill.icon}
                            className="w-3 h-3 text-blue-400"
                          />
                        </div>
                      )}
                      <span className="text-sm text-slate-300">
                        {skill.skillName}
                      </span>
                    </div>
                    <div className="flex items-center gap-3">
                      <span
                        className={`text-sm font-medium ${
                          isCoverageBelowObjective(
                            skill.coverage,
                            skill.importance
                          )
                            ? "text-red-400"
                            : "text-green-400"
                        }`}
                      >
                        {skill.coverage.toFixed(0)}%
                      </span>
                      <div className="w-16 bg-white/10 rounded-full h-1.5">
                        <div
                          className={`h-1.5 rounded-full ${
                            isCoverageBelowObjective(
                              skill.coverage,
                              skill.importance
                            )
                              ? "bg-red-500"
                              : "bg-green-500"
                          }`}
                          style={{ width: `${skill.coverage}%` }}
                        />
                      </div>
                    </div>
                  </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">
                Compétences incontournables
              </span>
              <div className="flex items-center gap-3">
                <span
                  className={`text-sm font-bold ${
                    isCoverageBelowObjective(
                      teamInsights.criticalSkillsCoverage.incontournable,
                      "incontournable"
                    )
                      ? "text-red-400"
                      : "text-green-400"
                  }`}
                >
                  {teamInsights.criticalSkillsCoverage.incontournable.toFixed(
                    0
                  )}
                  %
                </span>
                <div className="w-16 bg-white/10 rounded-full h-2">
                  <div
                    className={`h-2 rounded-full ${
                      isCoverageBelowObjective(
                        teamInsights.criticalSkillsCoverage.incontournable,
                        "incontournable"
                      )
                        ? "bg-red-500"
                        : "bg-green-500"
                    }`}
                    style={{
                      width: `${teamInsights.criticalSkillsCoverage.incontournable}%`,
                    }}
                  />
                </div>
                <span className="text-xs text-slate-400">
                  {teamInsights.skillGaps.incontournable} à renforcer
                </span>
              </div>
            </div>

            <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <span className="text-slate-300">Compétences majeures</span>
              <div className="flex items-center gap-3">
                <span
                  className={`text-sm font-bold ${
                    isCoverageBelowObjective(
                      teamInsights.criticalSkillsCoverage.majeure,
                      "majeure"
                    )
                      ? "text-red-400"
                      : "text-green-400"
                  }`}
                >
                  {teamInsights.criticalSkillsCoverage.majeure.toFixed(0)}%
                </span>
                <div className="w-16 bg-white/10 rounded-full h-2">
                  <div
                    className={`h-2 rounded-full ${
                      isCoverageBelowObjective(
                        teamInsights.criticalSkillsCoverage.majeure,
                        "majeure"
                      )
                        ? "bg-red-500"
                        : "bg-green-500"
                    }`}
                    style={{
                      width: `${teamInsights.criticalSkillsCoverage.majeure}%`,
                    }}
                  />
                </div>
                <span className="text-xs text-slate-400">
                  {teamInsights.skillGaps.majeure} à renforcer
                </span>
              </div>
            </div>

            <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <span className="text-slate-300">Compétences standards</span>
              <div className="flex items-center gap-3">
                <span className="text-sm font-bold text-white">
                  {teamInsights.skillGaps.standard}
                </span>
                <span className="text-xs text-slate-400">à renforcer</span>
              </div>
            </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>
    </>
  );
}