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

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="bg-white/5 border-white/10">
              <AlertDescription className="text-slate-300">
                {recommendation}
              </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>
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}