"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

interface SkillAnalysis {
  skillName: string;
  category: 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;
}

interface TeamSkillsTabProps {
  skillAnalysis: SkillAnalysis[];
}

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 TeamSkillsTab({ skillAnalysis }: TeamSkillsTabProps) {
  const [selectedCategory, setSelectedCategory] = useState<string>("all");

  const categories = Array.from(new Set(skillAnalysis.map((s) => s.category)));
  const filteredSkills =
    selectedCategory === "all"
      ? skillAnalysis
      : skillAnalysis.filter((s) => s.category === selectedCategory);

  return (
    <>
      {/* Filtres par catégorie */}
      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-4">
        <div className="flex flex-wrap gap-2">
          <Button
            variant={selectedCategory === "all" ? "default" : "ghost"}
            size="sm"
            onClick={() => setSelectedCategory("all")}
            className={
              selectedCategory === "all"
                ? "bg-blue-500 text-white"
                : "text-slate-400 hover:text-white hover:bg-white/10"
            }
          >
            Toutes ({skillAnalysis.length})
          </Button>
          {categories.map((category) => (
            <Button
              key={category}
              variant={selectedCategory === category ? "default" : "ghost"}
              size="sm"
              onClick={() => setSelectedCategory(category)}
              className={
                selectedCategory === category
                  ? "bg-blue-500 text-white"
                  : "text-slate-400 hover:text-white hover:bg-white/10"
              }
            >
              {category} (
              {skillAnalysis.filter((s) => s.category === category).length})
            </Button>
          ))}
        </div>
      </div>

      {/* Liste des compétences détaillée */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
        {filteredSkills.map((skill, idx) => (
          <div
            key={idx}
            className="bg-white/5 border border-white/10 rounded-lg p-3 hover:bg-white/10 transition-colors"
          >
            <div className="flex items-center justify-between mb-2">
              <div className="min-w-0 flex-1">
                <h4 className="font-medium text-white text-sm truncate">
                  {skill.skillName}
                </h4>
                <p className="text-xs text-slate-400">{skill.category}</p>
              </div>
              <div
                className={`px-2 py-1 border rounded text-center ml-2 flex-shrink-0 ${getSkillLevelBadgeClasses(
                  skill.averageLevel
                )}`}
              >
                <span className="text-xs font-medium">
                  {getSkillLevelLabel(skill.averageLevel)}
                </span>
              </div>
            </div>

            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-xs text-slate-300">Niveau:</span>
                <span className="text-white font-semibold text-sm">
                  {skill.averageLevel.toFixed(1)}/3
                </span>
              </div>

              <div className="w-full bg-white/10 rounded-full h-1.5">
                <div
                  className={`h-1.5 rounded-full transition-all ${getSkillLevelColor(
                    skill.averageLevel
                  )
                    .replace("bg-", "bg-gradient-to-r from-")
                    .replace("-500", "-500 to-")
                    .replace("500 to-", "400")}`}
                  style={{ width: `${(skill.averageLevel / 3) * 100}%` }}
                />
              </div>

              <div className="grid grid-cols-3 gap-1 text-xs">
                <div className="text-center">
                  <div className="text-white font-semibold">
                    {skill.totalEvaluations}
                  </div>
                  <div className="text-slate-400 text-xs">Éval.</div>
                </div>
                <div className="text-center">
                  <div className="text-green-300 font-semibold">
                    {skill.expertCount}
                  </div>
                  <div className="text-slate-400 text-xs">Experts</div>
                </div>
                <div className="text-center">
                  <div className="text-blue-300 font-semibold">
                    {skill.learnerCount}
                  </div>
                  <div className="text-slate-400 text-xs">Appren.</div>
                </div>
              </div>

              {skill.experts.filter((e) => e.canMentor).length > 0 && (
                <div className="pt-2 border-t border-white/10">
                  <div className="text-xs text-slate-400 mb-1">Mentors:</div>
                  <div className="flex flex-wrap gap-1">
                    {skill.experts
                      .filter((e) => e.canMentor)
                      .slice(0, 2)
                      .map((expert, i) => (
                        <Badge
                          key={i}
                          variant="outline"
                          className="text-xs text-green-300 border-green-500/30 px-1 py-0.5"
                        >
                          {expert.name.split(" ")[0]}
                        </Badge>
                      ))}
                    {skill.experts.filter((e) => e.canMentor).length > 2 && (
                      <Badge
                        variant="outline"
                        className="text-xs text-slate-400 border-slate-500/30 px-1 py-0.5"
                      >
                        +{skill.experts.filter((e) => e.canMentor).length - 2}
                      </Badge>
                    )}
                  </div>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </>
  );
}