import { Zap, Circle, Minus, CheckCircle2 } from "lucide-react";
import { SKILL_LEVELS, SkillLevel } from "@/lib/types";

function getLevelConfig(level: Exclude<SkillLevel, null>) {
  switch (level) {
    case "never":
      return {
        bg: "bg-gradient-to-r from-red-500/20 to-red-600/20",
        border: "border-red-500/30",
        text: "text-red-600 dark:text-red-400",
        glow: "shadow-red-500/20",
        icon: Circle,
      };
    case "not-autonomous":
      return {
        bg: "bg-gradient-to-r from-amber-500/20 to-yellow-600/20",
        border: "border-amber-500/30",
        text: "text-amber-600 dark:text-amber-400",
        glow: "shadow-amber-500/20",
        icon: Minus,
      };
    case "autonomous":
      return {
        bg: "bg-gradient-to-r from-green-500/20 to-emerald-600/20",
        border: "border-green-500/30",
        text: "text-green-600 dark:text-green-400",
        glow: "shadow-green-500/20",
        icon: CheckCircle2,
      };
    case "expert":
      return {
        bg: "bg-gradient-to-r from-violet-500/20 to-purple-600/20",
        border: "border-violet-500/30",
        text: "text-violet-600 dark:text-violet-400",
        glow: "shadow-violet-500/20",
        icon: Zap,
      };
  }
}

const levelDescriptions = {
  never:
    "Je n'ai jamais utilisé cette technologie ou je n'en ai qu'une connaissance théorique très limitée.",
  "not-autonomous":
    "J'ai déjà utilisé cette technologie mais j'ai besoin d'aide ou de supervision pour l'utiliser efficacement.",
  autonomous:
    "Je maîtrise cette technologie et peux travailler de manière autonome dessus dans la plupart des situations.",
  expert:
    "J'ai une expertise avancée, je peux former d'autres personnes et résoudre des problèmes complexes.",
};

export function SkillLevelLegend() {
  return (
    <div className="mt-16 pt-8 border-t border-white/20">
      <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8">
        <h3 className="text-xl font-bold mb-6 text-white flex items-center gap-3">
          <Zap className="h-6 w-6 text-blue-400" />
          Légende des niveaux de compétence
        </h3>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {Object.entries(SKILL_LEVELS).map(([value, label]) => {
            const config = getLevelConfig(value as Exclude<SkillLevel, null>);
            const Icon = config.icon;
            const description =
              levelDescriptions[value as keyof typeof levelDescriptions];

            return (
              <div
                key={value}
                className="flex gap-4 p-4 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition-colors"
              >
                <div className="flex-shrink-0">
                  <div className="w-8 h-8 rounded-lg border-2 flex items-center justify-center bg-white/10">
                    <Icon className={`h-4 w-4 ${config.text}`} />
                  </div>
                </div>
                <div className="flex-1 space-y-1">
                  <h4 className="font-semibold text-white">{label}</h4>
                  <p className="text-sm text-slate-400 leading-relaxed">
                    {description}
                  </p>
                </div>
              </div>
            );
          })}
        </div>

        <div className="mt-6 p-4 rounded-xl bg-blue-500/10 border border-blue-500/20">
          <p className="text-sm text-blue-200 text-center">
            💡 <strong>Astuce :</strong> Soyez honnête dans votre
            auto-évaluation. Cela vous aidera à identifier vos points forts et
            les domaines à améliorer.
          </p>
        </div>
      </div>
    </div>
  );
}