"use client";

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

interface TeamInsights {
  averageTeamLevel: number;
  totalExperts: number;
  totalLearners: number;
  skillGaps: number;
  strongSkills: 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-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">compétences expertes</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-purple-500/20 border border-purple-500/30 rounded-xl">
            <BookOpen className="h-4 w-4 text-purple-400" />
          </div>
          <span className="text-slate-300 font-medium text-sm">
            Apprentissages
          </span>
        </div>
        <div className="text-2xl font-bold text-white">
          {teamInsights.totalLearners}
        </div>
        <div className="text-xs text-slate-400 mt-1">
          objectifs d'apprentissage
        </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">Lacunes</span>
        </div>
        <div className="text-2xl font-bold text-white">
          {teamInsights.skillGaps}
        </div>
        <div className="text-xs text-slate-400 mt-1">
          compétences à renforcer
        </div>
      </div>
    </div>
  );
}