"use client";

import { User, Award, BookOpen } from "lucide-react";
import { TeamMember } from "@/lib/admin-types";

interface TeamMembersTabProps {
  members: TeamMember[];
  onMemberClick: (member: TeamMember) => void;
}

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";
}

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";
}

function getSkillLevelBadgeClasses(level: number): string {
  if (level < 0.5) return "bg-red-500/20 border-red-500/30 text-red-300";
  if (level < 1.5)
    return "bg-orange-500/20 border-orange-500/30 text-orange-300";
  if (level < 2.5) return "bg-blue-500/20 border-blue-500/30 text-blue-300";
  return "bg-green-500/20 border-green-500/30 text-green-300";
}

export function TeamMembersTab({
  members,
  onMemberClick,
}: TeamMembersTabProps) {
  return (
    <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl">
      <div className="overflow-hidden">
        <table className="w-full">
          <thead>
            <tr className="border-b border-white/10">
              <th className="text-left py-2 px-4 text-xs font-medium text-slate-400">
                Membre
              </th>
              <th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
                Niveau
              </th>
              <th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
                Compétences
              </th>
              <th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
                Expertises
              </th>
              <th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
                Objectifs
              </th>
            </tr>
          </thead>
          <tbody>
            {members.map((member) => {
              const memberAvg =
                member.skills.reduce((sum, skill) => sum + skill.level, 0) /
                member.skills.length;
              const expertSkills = member.skills.filter(
                (s) => s.level >= 2 && s.canMentor
              ).length;
              const learningGoals = member.skills.filter(
                (s) => s.wantsToLearn
              ).length;

              return (
                <tr
                  key={member.uuid}
                  className="border-b border-white/5 hover:bg-white/5 cursor-pointer"
                  onClick={() => onMemberClick(member)}
                >
                  <td className="py-2 px-4">
                    <div className="flex items-center gap-2">
                      <div className="p-1.5 bg-blue-500/20 border border-blue-500/30 rounded-lg">
                        <User className="h-3 w-3 text-blue-400" />
                      </div>
                      <div>
                        <div className="text-sm text-slate-200">
                          {member.firstName} {member.lastName}
                        </div>
                        <div className="text-xs text-slate-400">
                          {new Date(member.joinDate).toLocaleDateString()}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td className="py-2 px-2">
                    <div className="flex items-center justify-center gap-2">
                      <div
                        className={`text-sm font-medium ${getSkillLevelBadgeClasses(
                          memberAvg
                        )}`}
                      >
                        {memberAvg.toFixed(1)}
                      </div>
                      <div className="w-12 bg-white/10 rounded-full h-1">
                        <div
                          className={`h-1 rounded-full ${getSkillLevelColor(
                            memberAvg
                          )}`}
                          style={{ width: `${(memberAvg / 3) * 100}%` }}
                        />
                      </div>
                    </div>
                  </td>
                  <td className="py-2 px-2 text-center">
                    <span className="text-sm text-slate-300 font-medium">
                      {member.skills.length}
                    </span>
                  </td>
                  <td className="py-2 px-2">
                    <div className="flex items-center justify-center gap-2">
                      <Award className="h-3 w-3 text-green-400" />
                      <span className="text-sm text-green-400 font-medium">
                        {expertSkills}
                      </span>
                    </div>
                  </td>
                  <td className="py-2 px-2">
                    <div className="flex items-center justify-center gap-2">
                      <BookOpen className="h-3 w-3 text-blue-400" />
                      <span className="text-sm text-blue-400 font-medium">
                        {learningGoals}
                      </span>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}