import { ExternalLink, BookOpen, Target, Info } from "lucide-react";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Skill, SkillLevel, SKILL_LEVELS } from "@/lib/types";
import { getTechIcon } from "@/components/icons/tech-icons";

interface SkillEvaluationCardProps {
  skill: Skill;
  currentLevel: SkillLevel;
  onUpdateSkill: (skillId: string, level: SkillLevel) => 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,
  currentLevel,
  onUpdateSkill,
}: SkillEvaluationCardProps) {
  const TechIcon = getTechIcon(skill.id);

  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 className="w-4 h-4 text-blue-400" />
          </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>
            );
          })}

          {/* Goal buttons */}
          <div className="flex items-center gap-1 ml-2 border-l border-white/10 pl-2">
            <Tooltip>
              <TooltipTrigger asChild>
                <button className="p-1 rounded-lg hover:bg-white/10 transition-colors">
                  <BookOpen className="h-3 w-3 text-slate-400 hover:text-blue-400" />
                </button>
              </TooltipTrigger>
              <TooltipContent>
                <p className="text-xs">Envie d'apprendre</p>
              </TooltipContent>
            </Tooltip>

            <Tooltip>
              <TooltipTrigger asChild>
                <button className="p-1 rounded-lg hover:bg-white/10 transition-colors">
                  <Target className="h-3 w-3 text-slate-400 hover:text-green-400" />
                </button>
              </TooltipTrigger>
              <TooltipContent>
                <p className="text-xs">Peut encadrer</p>
              </TooltipContent>
            </Tooltip>
          </div>
        </div>
      </div>
    </div>
  );
}