import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { TeamMemberProfile, SkillGap } from "@/lib/team-review-types";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { UserCheck } from "lucide-react";

interface MentorshipSectionProps {
  members: TeamMemberProfile[];
  skillGaps: SkillGap[];
}

export function MentorshipSection({
  members,
  skillGaps,
}: MentorshipSectionProps) {
  // Trouver les mentors potentiels
  const mentors = members.filter((member) => member.mentorSkills > 0);

  // Organiser les opportunités de mentorat par mentor
  const mentorshipOpportunities = mentors.map((mentor) => {
    const opportunities = mentor.skills
      .filter((skill) => skill.canMentor)
      .map((skill) => {
        const gap = skillGaps.find((g) => g.skillId === skill.skillId);
        if (!gap) return null;

        const learners = members.filter((member) =>
          member.skills.some(
            (s) =>
              s.skillId === skill.skillId &&
              s.wantsToLearn &&
              ["never", "not-autonomous"].includes(s.level)
          )
        );

        return {
          skill: skill.skillName,
          category: skill.category,
          learners,
        };
      })
      .filter(Boolean);

    return {
      mentor,
      opportunities,
    };
  });

  return (
    <Card className="bg-white/5 border-white/10 backdrop-blur">
      <CardHeader>
        <CardTitle className="text-slate-200">
          Opportunités de mentorat
        </CardTitle>
      </CardHeader>
      <CardContent>
        <ScrollArea className="h-[400px]">
          <div className="space-y-6">
            {mentorshipOpportunities.map(({ mentor, opportunities }) => (
              <div key={mentor.member.uuid} className="space-y-4">
                <div className="flex items-center gap-3">
                  <Avatar className="bg-white/10 border border-white/20">
                    <AvatarFallback className="text-slate-200 bg-transparent">
                      {mentor.member.firstName[0]}
                      {mentor.member.lastName[0]}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <h3 className="font-semibold text-slate-200">
                      {mentor.member.firstName} {mentor.member.lastName}
                    </h3>
                    <p className="text-sm text-slate-400">
                      {mentor.mentorSkills} compétences en mentorat
                    </p>
                  </div>
                </div>

                <div className="pl-12 space-y-3">
                  {opportunities.map(
                    (opp, idx) =>
                      opp && (
                        <div key={idx} className="space-y-2">
                          <div className="flex items-center gap-2">
                            <Badge
                              variant="outline"
                              className="bg-white/5 text-slate-300 border-white/20"
                            >
                              {opp.category}
                            </Badge>
                            <span className="font-medium text-slate-300">
                              {opp.skill}
                            </span>
                          </div>
                          {opp.learners.length > 0 && (
                            <div className="pl-4">
                              <p className="text-sm text-slate-400 mb-2">
                                Apprenants potentiels :
                              </p>
                              <div className="flex flex-wrap gap-2">
                                {opp.learners.map((learner) => (
                                  <Badge
                                    key={learner.member.uuid}
                                    variant="outline"
                                    className="bg-blue-500/10 text-blue-200 border-blue-500/30"
                                  >
                                    {learner.member.firstName}{" "}
                                    {learner.member.lastName}
                                  </Badge>
                                ))}
                              </div>
                            </div>
                          )}
                        </div>
                      )
                  )}
                </div>
              </div>
            ))}
          </div>
        </ScrollArea>
      </CardContent>
    </Card>
  );
}