peakskills/components/admin/team-detail/team-metrics-cards.tsx

"use client";

import { Users, BarChart3, Award, BookOpen, Target } from "lucide-react";

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 TeamMetricsCardsProps {
  totalMembers: number;
  teamInsights: TeamInsights;
  skillCoverage: number;
}

function getSkillLevelLabel(level: number): string {
  if (level < 0.5) return "Débutant";
  if (level < 1.5) return "Intermé.";
  if (level < 2.5) return "Avancé";
  return "Expert";
}

export function TeamMetricsCards({
  totalMembers,
  teamInsights,
  skillCoverage,
}: TeamMetricsCardsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
        <div className="flex items-center gap-3 mb-4">
          <div className="p-2 bg-green-500/20 border border-green-500/30 rounded-xl">
            <Users className="h-4 w-4 text-green-400" />
          </div>
          <span className="text-slate-300 font-medium text-sm">Membres</span>
        </div>
        <div className="text-2xl font-bold text-white">{totalMembers}</div>
        <div className="text-xs text-slate-400 mt-1">personnes actives</div>
      </div>

      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
        <div className="flex items-center gap-3 mb-4">
          <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
            <BarChart3 className="h-4 w-4 text-blue-400" />
          </div>
          <span className="text-slate-300 font-medium text-sm">
            Niveau équipe
          </span>
        </div>
        <div className="text-2xl font-bold text-white">
          {((teamInsights.averageTeamLevel / 3) * 100).toFixed(0)}%
        </div>
        <div className="text-xs text-slate-400 mt-1">
          {getSkillLevelLabel(teamInsights.averageTeamLevel)}
        </div>
      </div>

      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
        <div className="flex items-center gap-3 mb-4">
          <div className="p-2 bg-red-500/20 border border-red-500/30 rounded-xl">
            <Target className="h-4 w-4 text-red-400" />
          </div>
          <span className="text-slate-300 font-medium text-sm">
            Incontournables
          </span>
        </div>
        <div
          className={`text-2xl font-bold ${
            teamInsights.criticalSkillsCoverage.incontournable < 75
              ? "text-red-400"
              : "text-green-400"
          }`}
        >
          {teamInsights.criticalSkillsCoverage.incontournable.toFixed(0)}%
        </div>
        <div className="text-xs text-slate-400 mt-1">
          {teamInsights.skillGaps.incontournable} à renforcer
        </div>
      </div>

      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
        <div className="flex items-center gap-3 mb-4">
          <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
            <Target className="h-4 w-4 text-blue-400" />
          </div>
          <span className="text-slate-300 font-medium text-sm">Majeures</span>
        </div>
        <div
          className={`text-2xl font-bold ${
            teamInsights.criticalSkillsCoverage.majeure < 60
              ? "text-red-400"
              : "text-green-400"
          }`}
        >
          {teamInsights.criticalSkillsCoverage.majeure.toFixed(0)}%
        </div>
        <div className="text-xs text-slate-400 mt-1">
          {teamInsights.skillGaps.majeure} à renforcer
        </div>
      </div>

      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 hover:bg-white/10 transition-colors">
        <div className="flex items-center gap-3 mb-4">
          <div className="p-2 bg-orange-500/20 border border-orange-500/30 rounded-xl">
            <Award className="h-4 w-4 text-orange-400" />
          </div>
          <span className="text-slate-300 font-medium text-sm">Expertises</span>
        </div>
        <div className="text-2xl font-bold text-white">
          {teamInsights.totalExperts}
        </div>
        <div className="text-xs text-slate-400 mt-1">
          {teamInsights.strongSkills.incontournable +
            teamInsights.strongSkills.majeure}{" "}
          critiques maîtrisées
        </div>
      </div>
    </div>
  );
}