"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,
} from "lucide-react";
import { TechIcon } from "@/components/icons/tech-icon";

interface TeamStatsRowProps {
  teamId: string;
  teamName: string;
  direction: string;
  totalMembers: number;
  averageSkillLevel: number;
  topSkills: Array<{
    skillName: string;
    averageLevel: number;
    color?: string;
    icon?: string;
  }>;
  skillCoverage: 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,
  onViewDetails,
  onViewReport,
}: TeamStatsRowProps) {
  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">
          <div className="text-center">
            <div className="text-sm font-bold text-white">
              {averageSkillLevel.toFixed(1)}
            </div>
            <div className="text-xs text-slate-300">/ 3.0</div>
          </div>

          <div className="text-center">
            <div className="text-sm font-bold text-white">
              {skillCoverage.toFixed(0)}%
            </div>
            <div className="text-xs text-slate-300">Couv.</div>
          </div>

          <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) => (
            <div
              key={idx}
              className={`px-2 py-1 border rounded-md text-center min-w-[60px] shadow-sm ${getSkillLevelBadgeClasses(
                skill.averageLevel
              )}`}
            >
              <div className="text-xs font-medium text-white truncate mb-1">
                {skill.skillName}
              </div>
              <div className="text-xs font-bold">
                {((skill.averageLevel / 3) * 100).toFixed(0)}%
              </div>
            </div>
          ))}
        </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>
  );
}