peakskills/components/evaluation/skill-evaluation-card.tsx

import { ExternalLink, Info, X, UserCheck, GraduationCap } from "lucide-react";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Skill, SkillLevel, SKILL_LEVELS, SkillEvaluation } from "@/lib/types";
import { TechIcon } from "@/components/icons/tech-icon";

interface SkillEvaluationCardProps {
  skill: Skill;
  skillEvaluation: SkillEvaluation;
  onUpdateSkill: (skillId: string, level: SkillLevel) => void;
  onUpdateMentorStatus: (skillId: string, canMentor: boolean) => void;
  onUpdateLearningStatus: (skillId: string, wantsToLearn: boolean) => void;
  onRemoveSkill: (skillId: string) => void;
}

function getLevelColor(level: Exclude<SkillLevel, null>) {
  switch (level) {
    case "never":
      return "bg-red-500";
    case "not-autonomous":
      return "bg-amber-500";
    case "autonomous":
      return "bg-green-500";
    case "expert":
      return "bg-violet-500";
  }
}

function getLevelColorBorder(level: Exclude<SkillLevel, null>) {
  switch (level) {
    case "never":
      return "border-red-500";
    case "not-autonomous":
      return "border-amber-500";
    case "autonomous":
      return "border-green-500";
    case "expert":
      return "border-violet-500";
  }
}

export function SkillEvaluationCard({
  skill,
  skillEvaluation,
  onUpdateSkill,
  onUpdateMentorStatus,
  onUpdateLearningStatus,
  onRemoveSkill,
}: SkillEvaluationCardProps) {
  const currentLevel = skillEvaluation.level;
  return (
    <div className="group relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-3 hover:bg-white/10 hover:border-white/20 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/10">
      <div className="flex items-center justify-between">
        {/* Skill Info */}
        <div className="flex items-center gap-3 flex-1 min-w-0">
          <div className="w-8 h-8 rounded-lg bg-white/10 border border-white/20 flex items-center justify-center group-hover:bg-white/20 transition-colors flex-shrink-0">
            <TechIcon
              iconName={skill.icon}
              className="w-4 h-4 text-blue-400"
              fallbackText={skill.name}
            />
          </div>

          <div className="flex items-center gap-2 flex-1 min-w-0">
            <h4 className="font-semibold text-white text-sm truncate">
              {skill.name}
            </h4>

            {/* Info tooltip */}
            <Tooltip>
              <TooltipTrigger asChild>
                <button className="text-slate-400 hover:text-blue-400 transition-colors flex-shrink-0">
                  <Info className="h-3 w-3" />
                </button>
              </TooltipTrigger>
              <TooltipContent className="max-w-sm">
                <div className="space-y-2">
                  <p className="text-sm">{skill.description}</p>
                  {skill.links.length > 0 && (
                    <div className="space-y-1">
                      <p className="text-xs font-medium">Liens utiles :</p>
                      {skill.links.map((link, index) => (
                        <a
                          key={index}
                          href={link}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="flex items-center gap-1 text-xs text-blue-400 hover:text-blue-300"
                        >
                          <ExternalLink className="h-3 w-3" />
                          {new URL(link).hostname}
                        </a>
                      ))}
                    </div>
                  )}
                </div>
              </TooltipContent>
            </Tooltip>
          </div>
        </div>

        {/* Level Selection */}
        <div className="flex items-center gap-3 flex-shrink-0 ml-4">
          {Object.entries(SKILL_LEVELS).map(([value, label]) => {
            const isSelected = currentLevel === value;
            const levelValue = value as Exclude<SkillLevel, null>;
            return (
              <div key={value} className="flex items-center gap-1.5">
                <button
                  onClick={() => onUpdateSkill(skill.id, levelValue)}
                  className={`
                    relative w-4 h-4 rounded-md border-2 transition-all hover:scale-110
                    ${
                      isSelected
                        ? `${getLevelColor(levelValue)} ${getLevelColorBorder(
                            levelValue
                          )} shadow-lg`
                        : "bg-white/5 border-white/20 hover:border-white/30 hover:bg-white/10"
                    }
                  `}
                >
                  {isSelected && (
                    <div className="absolute inset-0.5 bg-white rounded-sm"></div>
                  )}
                </button>
                <span
                  className={`text-xs font-medium transition-colors cursor-pointer ${
                    isSelected
                      ? "text-white"
                      : "text-slate-400 hover:text-slate-300"
                  }`}
                  onClick={() => onUpdateSkill(skill.id, levelValue)}
                >
                  {label}
                </span>
              </div>
            );
          })}

          {/* Mentor and Learning Status Icons */}
          <div className="flex items-center gap-1.5 ml-2 border-l border-white/10 pl-2">
            {/* Mentor Icon */}
            <Tooltip>
              <TooltipTrigger asChild>
                <button
                  onClick={() =>
                    onUpdateMentorStatus(skill.id, !skillEvaluation.canMentor)
                  }
                  className={`p-1 rounded-md transition-all hover:scale-110 ${
                    skillEvaluation.canMentor
                      ? "bg-green-500/20 text-green-400 hover:bg-green-500/30"
                      : "text-slate-400 hover:text-green-400 hover:bg-green-500/10"
                  }`}
                >
                  <UserCheck className="h-4 w-4" />
                </button>
              </TooltipTrigger>
              <TooltipContent>
                <p className="text-xs">
                  {skillEvaluation.canMentor
                    ? "Peut mentorer"
                    : "Peut mentorer"}
                </p>
              </TooltipContent>
            </Tooltip>

            {/* Learning Icon */}
            <Tooltip>
              <TooltipTrigger asChild>
                <button
                  onClick={() =>
                    onUpdateLearningStatus(
                      skill.id,
                      !skillEvaluation.wantsToLearn
                    )
                  }
                  className={`p-1 rounded-md transition-all hover:scale-110 ${
                    skillEvaluation.wantsToLearn
                      ? "bg-blue-500/20 text-blue-400 hover:bg-blue-500/30"
                      : "text-slate-400 hover:text-blue-400 hover:bg-blue-500/10"
                  }`}
                >
                  <GraduationCap className="h-4 w-4" />
                </button>
              </TooltipTrigger>
              <TooltipContent>
                <p className="text-xs">
                  {skillEvaluation.wantsToLearn
                    ? "Veut apprendre"
                    : "J'aimerais apprendre"}
                </p>
              </TooltipContent>
            </Tooltip>
          </div>

          {/* Remove button */}
          <div className="flex items-center ml-2 border-l border-white/10 pl-2">
            <Tooltip>
              <TooltipTrigger asChild>
                <button
                  onClick={() => onRemoveSkill(skill.id)}
                  className="p-1 rounded-lg hover:bg-red-500/20 transition-colors"
                >
                  <X className="h-3 w-3 text-slate-400 hover:text-red-400" />
                </button>
              </TooltipTrigger>
              <TooltipContent>
                <p className="text-xs">Supprimer cette technologie</p>
              </TooltipContent>
            </Tooltip>
          </div>
        </div>
      </div>
    </div>
  );
}