import { TechIcon } from "@/components/icons/tech-icon";
import { getImportanceColors } from "@/lib/tech-colors";
import { UserEvaluation, SkillCategory } from "@/lib/types";

interface MentorSectionProps {
  className?: string;
  userEvaluation: UserEvaluation;
  skillCategories: SkillCategory[];
}

export function MentorSection({
  className = "",
  userEvaluation,
  skillCategories,
}: MentorSectionProps) {
  // Récupérer les compétences maîtrisées (expert uniquement)
  const masteredSkills = userEvaluation.evaluations.flatMap((cat) => {
    const skillCategory = skillCategories.find(
      (sc) => sc.category === cat.category
    );
    return cat.skills
      .filter((skill) => skill.level === "expert")
      .map((skill) => {
        const skillInfo = skillCategory?.skills.find(
          (s) => s.id === skill.skillId
        );
        return {
          id: skill.skillId,
          name: skillInfo?.name || skill.skillId,
          icon: skillInfo?.icon || "fas-code",
          level: skill.level,
          importance: skillInfo?.importance || "standard", // Récupérer l'importance depuis la base
        };
      });
  });

  // Récupérer les compétences où l'utilisateur peut être mentor
  const mentorSkills = userEvaluation.evaluations.flatMap((cat) => {
    const skillCategory = skillCategories.find(
      (sc) => sc.category === cat.category
    );
    return cat.skills
      .filter((skill) => skill.canMentor)
      .map((skill) => {
        const skillInfo = skillCategory?.skills.find(
          (s) => s.id === skill.skillId
        );
        return {
          id: skill.skillId,
          name: skillInfo?.name || skill.skillId,
          icon: skillInfo?.icon || "fas-code",
          level: skill.level,
          importance: skillInfo?.importance || "standard", // Récupérer l'importance depuis la base
        };
      });
  });

  // Récupérer les compétences que l'utilisateur veut apprendre
  const learningSkills = userEvaluation.evaluations.flatMap((cat) => {
    const skillCategory = skillCategories.find(
      (sc) => sc.category === cat.category
    );
    return cat.skills
      .filter((skill) => skill.wantsToLearn)
      .map((skill) => {
        const skillInfo = skillCategory?.skills.find(
          (s) => s.id === skill.skillId
        );
        return {
          id: skill.skillId,
          name: skillInfo?.name || skill.skillId,
          icon: skillInfo?.icon || "fas-code",
          level: skill.level,
          importance: skillInfo?.importance || "standard", // Récupérer l'importance depuis la base
        };
      });
  });

  return (
    <div
      className={`bg-white/5 border border-white/10 rounded-xl p-6 backdrop-blur-sm ${className}`}
    >
      <div className="space-y-6">
        {/* Technologies maîtrisées */}
        <div>
          <h3 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
            <span className="w-2 h-2 bg-green-400 rounded-full"></span>
            Technologies maîtrisées
          </h3>
          <div className="flex flex-wrap gap-3">
            {masteredSkills.length > 0 ? (
              masteredSkills.map((tech) => {
                const colors = getImportanceColors(tech.importance);
                return (
                  <div
                    key={tech.id}
                    className={`flex items-center gap-2 px-3 py-2 rounded-lg ${colors.bg} ${colors.border} border transition-all hover:scale-105`}
                  >
                    <TechIcon
                      iconName={tech.icon}
                      className="w-4 h-4"
                      fallbackText={tech.name}
                    />
                    <span className={`text-sm font-medium ${colors.text}`}>
                      {tech.name}
                    </span>
                    <span className="text-xs text-slate-400">Expert</span>
                  </div>
                );
              })
            ) : (
              <p className="text-slate-400 text-sm">
                Aucune technologie maîtrisée
              </p>
            )}
          </div>
        </div>

        {/* Peut mentorer */}
        <div>
          <h3 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
            <span className="w-2 h-2 bg-blue-400 rounded-full"></span>
            Peut mentorer
          </h3>
          <div className="flex flex-wrap gap-3">
            {mentorSkills.length > 0 ? (
              mentorSkills.map((tech) => {
                const colors = getImportanceColors(tech.importance);
                return (
                  <div
                    key={tech.id}
                    className={`flex items-center gap-2 px-3 py-2 rounded-lg ${colors.bg} ${colors.border} border transition-all hover:scale-105`}
                  >
                    <TechIcon
                      iconName={tech.icon}
                      className="w-4 h-4"
                      fallbackText={tech.name}
                    />
                    <span className={`text-sm font-medium ${colors.text}`}>
                      {tech.name}
                    </span>
                  </div>
                );
              })
            ) : (
              <p className="text-slate-400 text-sm">
                Aucune compétence mentor configurée
              </p>
            )}
          </div>
        </div>

        {/* Technologies à apprendre */}
        <div>
          <h3 className="text-lg font-semibold text-white mb-3 flex items-center gap-2">
            <span className="w-2 h-2 bg-yellow-400 rounded-full"></span>
            Veux apprendre
          </h3>
          <div className="flex flex-wrap gap-3">
            {learningSkills.length > 0 ? (
              learningSkills.map((tech) => {
                const colors = getImportanceColors(tech.importance);
                return (
                  <div
                    key={tech.id}
                    className={`flex items-center gap-2 px-3 py-2 rounded-lg ${colors.bg} ${colors.border} border transition-all hover:scale-105 opacity-80`}
                  >
                    <TechIcon
                      iconName={tech.icon}
                      className="w-4 h-4"
                      fallbackText={tech.name}
                    />
                    <span className={`text-sm font-medium ${colors.text}`}>
                      {tech.name}
                    </span>
                  </div>
                );
              })
            ) : (
              <p className="text-slate-400 text-sm">
                Aucun objectif d'apprentissage configuré
              </p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}