"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 "@/lib/admin-types";

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-6xl bg-slate-900/95 border-white/20 text-white max-h-[90vh] 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="flex items-center gap-4 bg-white/5 border border-white/10 rounded-xl p-3">
            <div className="flex items-center gap-2">
              <div className="text-lg font-bold text-white">
                {member.skills.length}
              </div>
              <div className="text-xs text-slate-400">compétences</div>
            </div>
            <div className="h-8 w-px bg-white/10" />
            <div className="flex items-center gap-2">
              <Award className="h-4 w-4 text-green-400" />
              <div className="text-lg font-bold text-green-400">
                {
                  member.skills.filter((s) => s.level >= 2 && s.canMentor)
                    .length
                }
              </div>
              <div className="text-xs text-slate-400">mentorables</div>
            </div>
            <div className="h-8 w-px bg-white/10" />
            <div className="flex items-center gap-2">
              <BookOpen className="h-4 w-4 text-blue-400" />
              <div className="text-lg font-bold text-blue-400">
                {member.skills.filter((s) => s.wantsToLearn).length}
              </div>
              <div className="text-xs text-slate-400">à apprendre</div>
            </div>
          </div>

          {/* Compétences détaillées */}
          <div className="bg-white/5 border border-white/10 rounded-xl overflow-hidden">
            <div className="p-3 border-b border-white/10 flex items-center justify-between">
              <h4 className="font-medium text-sm text-slate-200">
                Portfolio de compétences
              </h4>
              <div className="flex items-center gap-2 text-xs text-slate-400">
                <div className="flex items-center gap-2 text-[10px]">
                  <div className="flex items-center gap-1">
                    <div className="w-1 h-4 rounded-sm bg-red-500" />
                    Inc.
                  </div>
                  <div className="flex items-center gap-1">
                    <div className="w-1 h-4 rounded-sm bg-blue-500" />
                    Maj.
                  </div>
                  <div className="h-4 w-px bg-white/10" />
                  <div className="flex items-center gap-1">
                    <div className="w-2 h-2 rounded-full bg-green-500" />
                    Exp.
                  </div>
                  <div className="flex items-center gap-1">
                    <div className="w-2 h-2 rounded-full bg-blue-500" />
                    Auto.
                  </div>
                  <div className="flex items-center gap-1">
                    <div className="w-2 h-2 rounded-full bg-orange-500" />
                    Prog.
                  </div>
                  <div className="flex items-center gap-1">
                    <div className="w-2 h-2 rounded-full bg-red-500" />
                    Déb.
                  </div>
                </div>
              </div>
            </div>
            <div className="max-h-[60vh] overflow-y-auto">
              <table className="w-full">
                <colgroup>
                  <col className="w-[50%]" />
                  <col className="w-[25%]" />
                  <col className="w-[25%]" />
                </colgroup>
                <thead>
                  <tr className="border-b border-white/10">
                    <th className="text-left py-2 px-3 text-xs font-medium text-slate-400">
                      Compétence
                    </th>
                    <th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
                      Niveau
                    </th>
                    <th className="text-center py-2 px-2 text-xs font-medium text-slate-400">
                      Statut
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {member.skills
                    .sort((a, b) => {
                      // D'abord par importance
                      const importanceOrder = {
                        incontournable: 2,
                        majeure: 1,
                        standard: 0,
                      };
                      const importanceDiff =
                        importanceOrder[b.importance] -
                        importanceOrder[a.importance];
                      if (importanceDiff !== 0) return importanceDiff;

                      // Ensuite par niveau de maîtrise
                      return b.level - a.level;
                    })
                    .map((skill, idx) => (
                      <tr
                        key={idx}
                        className="border-b border-white/5 hover:bg-white/5"
                      >
                        <td className="py-2 px-3">
                          <div className="flex items-center gap-2">
                            <div
                              className={`w-1 h-6 rounded-sm ${
                                skill.importance === "incontournable"
                                  ? "bg-red-500"
                                  : skill.importance === "majeure"
                                  ? "bg-blue-500"
                                  : "bg-slate-500"
                              }`}
                            />
                            <div>
                              <div className="text-sm text-slate-200">
                                {skill.skillName}
                              </div>
                              <div className="flex items-center gap-1">
                                <div className="text-xs text-slate-400">
                                  {skill.category}
                                </div>
                                <span className="text-xs text-slate-400">
                                  •
                                </span>
                                <div
                                  className={`text-[10px] ${
                                    skill.importance === "incontournable"
                                      ? "text-red-400"
                                      : skill.importance === "majeure"
                                      ? "text-blue-400"
                                      : "text-slate-400"
                                  }`}
                                >
                                  {skill.importance === "incontournable"
                                    ? "Inc."
                                    : skill.importance === "majeure"
                                    ? "Maj."
                                    : "Std."}
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td className="py-2 px-2">
                          <div className="flex items-center justify-center gap-2">
                            <div
                              className={`text-sm font-medium ${getSkillLevelBadgeClasses(
                                skill.level
                              )}`}
                            >
                              {skill.level.toFixed(1)}
                            </div>
                            <div className="w-12 bg-white/10 rounded-full h-1">
                              <div
                                className={`h-1 rounded-full ${getSkillLevelColor(
                                  skill.level
                                )}`}
                                style={{ width: `${(skill.level / 3) * 100}%` }}
                              />
                            </div>
                          </div>
                        </td>
                        <td className="py-2 px-2">
                          <div className="flex items-center justify-center gap-1">
                            {skill.canMentor && (
                              <Badge
                                variant="outline"
                                className="text-[10px] text-green-300 border-green-500/30 px-1"
                              >
                                <Award className="h-2.5 w-2.5 mr-0.5" />
                                Mentor
                              </Badge>
                            )}
                            {skill.wantsToLearn && (
                              <Badge
                                variant="outline"
                                className="text-[10px] text-blue-300 border-blue-500/30 px-1"
                              >
                                <BookOpen className="h-2.5 w-2.5 mr-0.5" />
                                Apprenant
                              </Badge>
                            )}
                          </div>
                        </td>
                      </tr>
                    ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}