peakskills/components/team-review/skill-matrix.tsx

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { TeamMemberProfile, SkillGap } from "@/lib/team-review-types";
import { UserCheck, GraduationCap } from "lucide-react";
import { TechIcon } from "@/components/icons/tech-icon";

interface SkillMatrixProps {
  members: TeamMemberProfile[];
  skillGaps: SkillGap[];
}

export function SkillMatrix({ members, skillGaps }: SkillMatrixProps) {
  // Filtrer les skills valides et les organiser par catégorie
  const validSkillGaps = skillGaps.filter(
    (skill) => skill.skillId && skill.skillName && skill.category
  );

  const skillsByCategory = validSkillGaps.reduce((acc, skill) => {
    if (!acc[skill.category]) {
      acc[skill.category] = [];
    }
    acc[skill.category].push(skill);
    return acc;
  }, {} as Record<string, SkillGap[]>);

  const getLevelBadge = (level: string | null) => {
    const colors = {
      never: "bg-white/5 text-slate-300",
      "not-autonomous": "bg-yellow-500/20 text-yellow-200",
      autonomous: "bg-green-500/20 text-green-200",
      expert: "bg-blue-500/20 text-blue-200",
    };

    return level ? (
      <Badge
        variant="secondary"
        className={colors[level as keyof typeof colors]}
      >
        {level}
      </Badge>
    ) : (
      <span className="text-slate-600">-</span>
    );
  };

  // Vérifier si nous avons des données valides
  if (validSkillGaps.length === 0 || members.length === 0) {
    return (
      <Card className="bg-white/5 border-white/10 backdrop-blur">
        <CardHeader>
          <CardTitle className="text-slate-200">
            Matrice des compétences
          </CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-slate-400">
            Aucune donnée disponible pour la matrice des compétences.
          </p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="bg-white/5 border-white/10 backdrop-blur">
      <CardHeader>
        <CardTitle className="text-slate-200">
          Matrice des compétences
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-8">
          {Object.entries(skillsByCategory).map(([category, skills]) => (
            <div key={`category-${category}`}>
              <h3 className="text-lg font-semibold text-slate-200 mb-4">
                {category}
              </h3>
              <div className="rounded-md border border-white/10">
                <Table>
                  <TableHeader>
                    <TableRow className="border-white/10">
                      <TableHead className="w-[200px] text-slate-300">
                        Compétence
                      </TableHead>
                      {members.map((member) => (
                        <TableHead
                          key={`header-${member.member.uuid}`}
                          className="text-slate-300"
                        >
                          {member.member.firstName} {member.member.lastName}
                        </TableHead>
                      ))}
                      <TableHead className="w-[120px] text-slate-300">
                        Couverture
                      </TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {skills.map((skill) => (
                      <TableRow
                        key={`skill-row-${skill.skillId}-${skill.category}`}
                        className="border-white/10"
                      >
                        <TableCell className="font-medium">
                          <div className="flex items-center gap-3">
                            <div className="w-8 h-8 rounded-lg bg-white/10 border border-white/20 flex items-center justify-center">
                              <TechIcon
                                iconName={skill.icon || ""}
                                className="w-4 h-4 text-blue-400"
                                fallbackText={skill.skillName}
                              />
                            </div>
                            <div className="flex items-center gap-2">
                              <span className="text-slate-200">
                                {skill.skillName}
                              </span>
                              {skill.risk === "high" && (
                                <Badge
                                  variant="destructive"
                                  className="bg-red-500/20 text-red-200 border-red-500/30"
                                >
                                  Risque
                                </Badge>
                              )}
                            </div>
                          </div>
                        </TableCell>
                        {members.map((member) => {
                          const memberSkill = member.skills.find(
                            (s) => s.skillId === skill.skillId
                          );
                          return (
                            <TableCell
                              key={`skill-${skill.skillId}-member-${member.member.uuid}`}
                            >
                              <div className="flex items-center gap-2 flex-wrap">
                                {getLevelBadge(memberSkill?.level || null)}
                                {memberSkill?.canMentor && (
                                  <Badge
                                    variant="outline"
                                    className="flex items-center gap-1 bg-green-500/10 text-green-200 border-green-500/30"
                                  >
                                    <UserCheck className="h-3 w-3" />
                                    <span className="text-xs">Mentor</span>
                                  </Badge>
                                )}
                                {memberSkill?.wantsToLearn && (
                                  <Badge
                                    variant="outline"
                                    className="flex items-center gap-1 bg-blue-500/10 text-blue-200 border-blue-500/30"
                                  >
                                    <GraduationCap className="h-3 w-3" />
                                    <span className="text-xs">Apprenant</span>
                                  </Badge>
                                )}
                              </div>
                            </TableCell>
                          );
                        })}
                        <TableCell>
                          <div className="flex items-center gap-2">
                            <div className="w-full bg-white/10 rounded-full h-2">
                              <div
                                className="bg-blue-500/50 h-2 rounded-full"
                                style={{
                                  width: `${Math.max(
                                    0,
                                    Math.min(100, skill.coverage || 0)
                                  )}%`,
                                }}
                              />
                            </div>
                            <span className="text-sm text-slate-400 whitespace-nowrap">
                              {Math.round(skill.coverage || 0)}%
                            </span>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}