import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { CategoryCoverage } from "@/lib/team-review-types";
import { Progress } from "@/components/ui/progress";
import { AlertTriangle, AlertCircle } from "lucide-react";

interface TeamInsightsProps {
  recommendations: string[];
  categoryCoverage: CategoryCoverage[];
}

export function TeamInsights({
  recommendations,
  categoryCoverage,
}: TeamInsightsProps) {
  return (
    <Card className="bg-white/5 border-white/10 backdrop-blur">
      <CardHeader>
        <CardTitle className="text-slate-200">
          Insights & Recommandations
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="space-y-4">
          {recommendations.map((recommendation, index) => (
            <Alert
              key={index}
              className={`${
                recommendation.includes("⚠️")
                  ? "bg-red-500/10 border-red-500/30"
                  : "bg-white/5 border-white/10"
              }`}
            >
              <AlertDescription
                className={`${
                  recommendation.includes("⚠️")
                    ? "text-red-200"
                    : "text-slate-300"
                } flex items-start gap-2`}
              >
                {recommendation.includes("⚠️") ? (
                  <AlertTriangle className="h-5 w-5 text-red-400 shrink-0" />
                ) : (
                  <AlertCircle className="h-5 w-5 text-blue-400 shrink-0" />
                )}
                <span>{recommendation.replace("⚠️ ", "")}</span>
              </AlertDescription>
            </Alert>
          ))}
        </div>

        <div className="space-y-6">
          <h3 className="font-semibold text-slate-200">
            Couverture par catégorie
          </h3>
          <div className="grid grid-cols-2 gap-4">
            {categoryCoverage.map((category) => (
              <div key={category.category} className="space-y-2">
                <div className="flex justify-between items-center">
                  <span
                    className="text-sm font-medium truncate text-slate-300"
                    title={category.category}
                  >
                    {category.category}
                  </span>
                  <span className="text-sm text-slate-400">
                    {Math.round(category.coverage)}%
                  </span>
                </div>
                <div className="h-2 w-full bg-white/10 rounded-full overflow-hidden">
                  <div
                    className="h-full bg-blue-500/50 rounded-full transition-all"
                    style={{
                      width: `${Math.min(
                        100,
                        Math.max(0, category.coverage)
                      )}%`,
                    }}
                  />
                </div>
                <div className="grid grid-cols-3 gap-2 text-xs text-slate-400">
                  <div>
                    <span className="font-medium text-slate-300">
                      {category.experts}
                    </span>{" "}
                    exp.
                  </div>
                  <div>
                    <span className="font-medium text-slate-300">
                      {category.mentors}
                    </span>{" "}
                    ment.
                  </div>
                  <div>
                    <span className="font-medium text-slate-300">
                      {category.learners}
                    </span>{" "}
                    app.
                  </div>
                </div>
                {/* Couverture des compétences critiques */}
                <div className="grid grid-cols-2 gap-2 pt-2">
                  <div className="space-y-1">
                    <div className="flex justify-between items-center">
                      <span className="text-xs text-slate-400">
                        Incontournables
                      </span>
                      <span className="text-xs font-medium text-red-300">
                        {category.criticalSkillsCoverage.incontournable}
                      </span>
                    </div>
                    <div className="h-1 w-full bg-white/10 rounded-full overflow-hidden">
                      <div
                        className="h-full bg-red-500/50 rounded-full transition-all"
                        style={{
                          width: `${Math.min(
                            100,
                            Math.max(
                              0,
                              category.criticalSkillsCoverage.incontournable
                            )
                          )}%`,
                        }}
                      />
                    </div>
                  </div>
                  <div className="space-y-1">
                    <div className="flex justify-between items-center">
                      <span className="text-xs text-slate-400">Majeures</span>
                      <span className="text-xs font-medium text-orange-300">
                        {category.criticalSkillsCoverage.majeure}
                      </span>
                    </div>
                    <div className="h-1 w-full bg-white/10 rounded-full overflow-hidden">
                      <div
                        className="h-full bg-orange-500/50 rounded-full transition-all"
                        style={{
                          width: `${Math.min(
                            100,
                            Math.max(0, category.criticalSkillsCoverage.majeure)
                          )}%`,
                        }}
                      />
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}