"use client";

import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import {
  Users,
  TrendingUp,
  BarChart3,
  ExternalLink,
  Target,
  Award,
  Star,
  ChevronRight,
  Baby,
  User,
  Zap,
  Crown,
  AlertTriangle,
} from "lucide-react";
import { TechIcon } from "@/components/icons/tech-icon";
import { getImportanceColors } from "@/lib/tech-colors";

interface TeamStatsRowProps {
  teamId: string;
  teamName: string;
  direction: string;
  totalMembers: number;
  averageSkillLevel: number;
  topSkills: Array<{
    skillName: string;
    averageLevel: number;
    color?: string;
    icon?: string;
    importance: "incontournable" | "majeure" | "standard";
    coverage: number;
  }>;
  skillCoverage: number;
  criticalSkillsCoverage: {
    incontournable: number;
    majeure: number;
  };
  onViewDetails?: () => void;
  onViewReport?: () => void;
}

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

export 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";
}

export 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 getProgressColor(percentage: number): string {
  if (percentage < 30) return "bg-red-500";
  if (percentage < 60) return "bg-orange-500";
  if (percentage < 80) return "bg-blue-500";
  return "bg-green-500";
}

export function TeamStatsRow({
  teamId,
  teamName,
  direction,
  totalMembers,
  averageSkillLevel,
  topSkills,
  skillCoverage,
  criticalSkillsCoverage,
  onViewDetails,
  onViewReport,
}: TeamStatsRowProps) {
  // Calculer les alertes sur les compétences critiques
  const hasIncontournableAlert = criticalSkillsCoverage.incontournable < 75;
  const hasMajeureAlert = criticalSkillsCoverage.majeure < 60;

  return (
    <div className="group bg-gradient-to-r from-slate-800/50 to-slate-700/40 backdrop-blur-sm border border-slate-600/40 rounded-xl p-4 hover:from-slate-700/60 hover:to-slate-600/50 hover:border-slate-500/50 transition-all duration-300 shadow-lg hover:shadow-xl">
      {/* Layout horizontal compact */}
      <div className="flex items-center gap-6">
        {/* Informations de base */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-3 mb-2">
            <h3 className="text-lg font-semibold text-white truncate">
              {teamName}
            </h3>
            <div className="px-2 py-1 bg-slate-700/60 border border-slate-500/40 rounded-md">
              <div className="flex items-center gap-1.5">
                <Users className="h-3 w-3 text-slate-300" />
                <span className="text-xs text-slate-200">{totalMembers}</span>
              </div>
            </div>
          </div>

          {/* Mini barre de progression */}
          <div className="w-full max-w-xs">
            <div className="flex items-center justify-between mb-1">
              <span className="text-xs text-slate-300">Niveau</span>
              <span className="text-xs text-slate-200">
                {((averageSkillLevel / 3) * 100).toFixed(0)}%
              </span>
            </div>
            <div className="w-full bg-slate-700/60 rounded-full h-1.5">
              <div
                className={`h-1.5 rounded-full transition-all duration-300 shadow-sm ${
                  averageSkillLevel < 0.5
                    ? "bg-gradient-to-r from-red-500 to-red-400"
                    : averageSkillLevel < 1.5
                    ? "bg-gradient-to-r from-orange-500 to-orange-400"
                    : averageSkillLevel < 2.5
                    ? "bg-gradient-to-r from-blue-500 to-blue-400"
                    : "bg-gradient-to-r from-green-500 to-green-400"
                }`}
                style={{ width: `${(averageSkillLevel / 3) * 100}%` }}
              />
            </div>
          </div>
        </div>

        {/* Indicateurs clés compacts */}
        <div className="flex items-center gap-4">
          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <div className="text-center">
                  <div
                    className={`text-sm font-bold ${
                      criticalSkillsCoverage.incontournable < 75
                        ? "text-red-400"
                        : "text-green-400"
                    }`}
                  >
                    {criticalSkillsCoverage.incontournable.toFixed(0)}%
                  </div>
                  <div className="text-xs text-slate-300">Incont.</div>
                </div>
              </TooltipTrigger>
              <TooltipContent>
                <p className="text-xs">
                  Couverture des compétences incontournables
                  <br />
                  Objectif : 75%
                </p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>

          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <div className="text-center">
                  <div
                    className={`text-sm font-bold ${
                      criticalSkillsCoverage.majeure < 60
                        ? "text-red-400"
                        : "text-green-400"
                    }`}
                  >
                    {criticalSkillsCoverage.majeure.toFixed(0)}%
                  </div>
                  <div className="text-xs text-slate-300">Maj.</div>
                </div>
              </TooltipTrigger>
              <TooltipContent>
                <p className="text-xs">
                  Couverture des compétences majeures
                  <br />
                  Objectif : 60%
                </p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>

          <TooltipProvider>
            <Tooltip>
              <TooltipTrigger asChild>
                <div
                  className={`px-2.5 py-1.5 border rounded-lg text-center cursor-help shadow-sm ${getSkillLevelBadgeClasses(
                    averageSkillLevel
                  )}`}
                >
                  <span className="text-xs font-semibold">
                    {averageSkillLevel < 0.5
                      ? "D"
                      : averageSkillLevel < 1.5
                      ? "I"
                      : averageSkillLevel < 2.5
                      ? "A"
                      : "E"}
                  </span>
                </div>
              </TooltipTrigger>
              <TooltipContent>
                <p className="text-xs">
                  {getSkillLevelLabel(averageSkillLevel)}
                </p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </div>

        {/* Top skills mini */}
        <div className="flex items-center gap-2">
          {topSkills.slice(0, 3).map((skill, idx) => {
            const colors = getImportanceColors(skill.importance);
            const target =
              skill.importance === "incontournable"
                ? 75
                : skill.importance === "majeure"
                ? 60
                : 0;
            const isUnderTarget = target > 0 && skill.coverage < target;

            return (
              <TooltipProvider key={idx}>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <div
                      className={`relative px-2 py-1 border rounded-md text-center min-w-[60px] shadow-sm ${
                        isUnderTarget
                          ? "bg-red-500/20 border-red-500/30"
                          : "bg-green-500/20 border-green-500/30"
                      }`}
                    >
                      <div
                        className={`text-xs font-medium truncate mb-1 ${
                          isUnderTarget ? "text-red-400" : "text-green-400"
                        }`}
                      >
                        {skill.skillName}
                      </div>
                      <div
                        className={`text-xs font-bold ${
                          isUnderTarget ? "text-red-400" : "text-green-400"
                        }`}
                      >
                        {skill.coverage.toFixed(0)}%
                      </div>
                    </div>
                  </TooltipTrigger>
                  <TooltipContent>
                    <div className="text-xs">
                      <p className="font-medium">{skill.skillName}</p>
                      <p className="text-slate-400">
                        {skill.importance === "incontournable"
                          ? "Compétence incontournable"
                          : skill.importance === "majeure"
                          ? "Compétence majeure"
                          : "Compétence standard"}
                      </p>
                      {target > 0 && (
                        <p
                          className={
                            isUnderTarget ? "text-red-400" : "text-green-400"
                          }
                        >
                          Objectif : {target}%
                        </p>
                      )}
                    </div>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            );
          })}
        </div>

        {/* Actions compactes */}
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={onViewReport}
            className="h-8 px-3 bg-slate-700/50 border-slate-500/40 text-white hover:bg-slate-600/60 hover:border-slate-400/50 shadow-sm"
          >
            <ExternalLink className="h-3 w-3" />
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={onViewDetails}
            className="h-8 px-3 bg-slate-700/50 border-slate-500/40 text-white hover:bg-slate-600/60 hover:border-slate-400/50 shadow-sm"
          >
            <ChevronRight className="h-3 w-3" />
          </Button>
        </div>
      </div>
    </div>
  );
}