"use client";

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { User, Award, BookOpen, X } from "lucide-react";
import { TeamMember } from "@/services/admin-service";

interface TeamMemberModalProps {
  isOpen: boolean;
  onClose: () => void;
  member: TeamMember | null;
}

function getSkillLevelLabel(level: number): string {
  if (level < 0.5) return "Débutant";
  if (level < 1.5) return "Intermé.";
  if (level < 2.5) return "Avancé";
  return "Expert";
}

function getSkillLevelColor(level: number): string {
  if (level < 0.5) return "bg-red-500";
  if (level < 1.5) return "bg-orange-500";
  if (level < 2.5) return "bg-blue-500";
  return "bg-green-500";
}

function getSkillLevelBadgeClasses(level: number): string {
  if (level < 0.5) return "bg-red-500/20 border-red-500/30 text-red-300";
  if (level < 1.5)
    return "bg-orange-500/20 border-orange-500/30 text-orange-300";
  if (level < 2.5) return "bg-blue-500/20 border-blue-500/30 text-blue-300";
  return "bg-green-500/20 border-green-500/30 text-green-300";
}

export function TeamMemberModal({
  isOpen,
  onClose,
  member,
}: TeamMemberModalProps) {
  if (!member) return null;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl bg-slate-900/95 border-white/20 text-white max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="p-2 bg-blue-500/20 border border-blue-500/30 rounded-xl">
                <User className="h-5 w-5 text-blue-400" />
              </div>
              <div>
                <span className="text-xl">
                  {member.firstName} {member.lastName}
                </span>
                <p className="text-sm text-slate-400 font-normal">
                  Membre depuis le{" "}
                  {new Date(member.joinDate).toLocaleDateString()}
                </p>
              </div>
            </div>
            <Button
              variant="ghost"
              size="sm"
              onClick={onClose}
              className="text-slate-400 hover:text-white"
            >
              <X className="h-4 w-4" />
            </Button>
          </DialogTitle>
        </DialogHeader>

        <div className="space-y-6">
          {/* Stats du membre */}
          <div className="grid grid-cols-3 gap-4">
            <div className="bg-white/5 border border-white/10 rounded-xl p-4 text-center">
              <div className="text-2xl font-bold text-white">
                {member.skills.length}
              </div>
              <div className="text-sm text-slate-400">Compétences évaluées</div>
            </div>
            <div className="bg-white/5 border border-white/10 rounded-xl p-4 text-center">
              <div className="text-2xl font-bold text-green-300">
                {
                  member.skills.filter((s) => s.level >= 2 && s.canMentor)
                    .length
                }
              </div>
              <div className="text-sm text-slate-400">Peut mentorer</div>
            </div>
            <div className="bg-white/5 border border-white/10 rounded-xl p-4 text-center">
              <div className="text-2xl font-bold text-blue-300">
                {member.skills.filter((s) => s.wantsToLearn).length}
              </div>
              <div className="text-sm text-slate-400">Souhaite apprendre</div>
            </div>
          </div>

          {/* Compétences détaillées */}
          <div>
            <h4 className="font-medium mb-4 text-lg">
              Portfolio de compétences
            </h4>
            <div className="space-y-2 max-h-96 overflow-y-auto">
              {member.skills
                .sort((a, b) => b.level - a.level)
                .map((skill, idx) => (
                  <div
                    key={idx}
                    className="flex items-center justify-between p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-colors"
                  >
                    <div className="flex-1">
                      <div className="flex items-center justify-between mb-2">
                        <div>
                          <div className="font-medium text-white">
                            {skill.skillName}
                          </div>
                          <div className="text-sm text-slate-400">
                            {skill.category}
                          </div>
                        </div>
                        <div
                          className={`px-2 py-1 border rounded-lg text-center ${getSkillLevelBadgeClasses(
                            skill.level
                          )}`}
                        >
                          <span className="text-xs font-medium">
                            {getSkillLevelLabel(skill.level)}
                          </span>
                        </div>
                      </div>

                      <div className="w-full bg-white/10 rounded-full h-2 mb-2">
                        <div
                          className={`h-2 rounded-full transition-all ${getSkillLevelColor(
                            skill.level
                          )
                            .replace("bg-", "bg-gradient-to-r from-")
                            .replace("-500", "-400")}`}
                          style={{ width: `${(skill.level / 3) * 100}%` }}
                        />
                      </div>

                      <div className="flex items-center gap-2">
                        {skill.canMentor && (
                          <Badge
                            variant="outline"
                            className="text-xs text-green-300 border-green-500/30"
                          >
                            <Award className="h-3 w-3 mr-1" />
                            Mentor
                          </Badge>
                        )}
                        {skill.wantsToLearn && (
                          <Badge
                            variant="outline"
                            className="text-xs text-blue-300 border-blue-500/30"
                          >
                            <BookOpen className="h-3 w-3 mr-1" />
                            Apprenant
                          </Badge>
                        )}
                      </div>
                    </div>
                  </div>
                ))}
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}