peakskills/components/admin/overview/admin-overview-cards.tsx

"use client";

import { Users, Target, Building2, UserCheck } from "lucide-react";
import { Team, SkillCategory } from "@/lib/types";
import { TeamStats, DirectionStats } from "@/services/admin-service";

interface AdminOverviewCardsProps {
  teams: Team[];
  skillCategories: SkillCategory[];
  teamStats: TeamStats[];
  directionStats: DirectionStats[];
  selectedDirections: string[];
  selectedTeams: string[];
  getFilteredTeamStats: () => TeamStats[];
  getFilteredDirectionStats: () => DirectionStats[];
}

export function AdminOverviewCards({
  teams,
  skillCategories,
  teamStats,
  directionStats,
  selectedDirections,
  selectedTeams,
  getFilteredTeamStats,
  getFilteredDirectionStats,
}: AdminOverviewCardsProps) {
  const hasFilters = selectedDirections.length > 0 || selectedTeams.length > 0;

  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
      <div className="bg-gradient-to-br from-blue-900/30 to-blue-800/20 backdrop-blur-sm border border-blue-600/30 rounded-xl p-3 hover:from-blue-800/40 hover:to-blue-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
        <div className="flex items-center justify-between mb-2">
          <div className="p-1.5 bg-blue-500/30 border border-blue-500/40 rounded-lg">
            <Users className="h-4 w-4 text-blue-300" />
          </div>
          <div className="text-xs text-blue-200 font-medium">
            {hasFilters ? "FILTRÉES" : "TOTAL"}
          </div>
        </div>
        <div className="space-y-0.5">
          <p className="text-xl font-bold text-white">
            {hasFilters ? getFilteredTeamStats().length : teams.length}
          </p>
          <p className="text-xs text-blue-200">
            {hasFilters ? "Équipes filtrées" : "Équipes"}
          </p>
          {hasFilters && (
            <p className="text-xs text-blue-300">sur {teams.length} au total</p>
          )}
        </div>
      </div>

      <div className="bg-gradient-to-br from-green-900/30 to-green-800/20 backdrop-blur-sm border border-green-600/30 rounded-xl p-3 hover:from-green-800/40 hover:to-green-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
        <div className="flex items-center justify-between mb-2">
          <div className="p-1.5 bg-green-500/30 border border-green-500/40 rounded-lg">
            <UserCheck className="h-4 w-4 text-green-300" />
          </div>
          <div className="text-xs text-green-200 font-medium">
            {hasFilters ? "FILTRÉS" : "TOTAL"}
          </div>
        </div>
        <div className="space-y-0.5">
          <p className="text-xl font-bold text-white">
            {hasFilters
              ? getFilteredTeamStats().reduce(
                  (sum, t) => sum + t.totalMembers,
                  0
                )
              : teamStats.reduce((sum, t) => sum + t.totalMembers, 0)}
          </p>
          <p className="text-xs text-green-200">
            {hasFilters ? "Membres filtrés" : "Membres"}
          </p>
          {hasFilters && (
            <p className="text-xs text-green-300">
              sur {teamStats.reduce((sum, t) => sum + t.totalMembers, 0)} au
              total
            </p>
          )}
        </div>
      </div>

      <div className="bg-gradient-to-br from-purple-900/30 to-purple-800/20 backdrop-blur-sm border border-purple-600/30 rounded-xl p-3 hover:from-purple-800/40 hover:to-purple-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
        <div className="flex items-center justify-between mb-2">
          <div className="p-1.5 bg-purple-500/30 border border-purple-500/40 rounded-lg">
            <Building2 className="h-4 w-4 text-purple-300" />
          </div>
          <div className="text-xs text-purple-200 font-medium">
            {hasFilters ? "FILTRÉES" : "TOTAL"}
          </div>
        </div>
        <div className="space-y-0.5">
          <p className="text-xl font-bold text-white">
            {hasFilters
              ? getFilteredDirectionStats().length
              : directionStats.length}
          </p>
          <p className="text-xs text-purple-200">
            {hasFilters ? "Directions filtrées" : "Directions"}
          </p>
          {hasFilters && (
            <p className="text-xs text-purple-300">
              sur {directionStats.length} au total
            </p>
          )}
        </div>
      </div>

      <div className="bg-gradient-to-br from-orange-900/30 to-orange-800/20 backdrop-blur-sm border border-orange-600/30 rounded-xl p-3 hover:from-orange-800/40 hover:to-orange-700/30 transition-all duration-300 shadow-lg hover:shadow-xl">
        <div className="flex items-center justify-between mb-2">
          <div className="p-1.5 bg-orange-500/30 border border-orange-500/40 rounded-lg">
            <Target className="h-4 w-4 text-orange-300" />
          </div>
          <div className="text-xs text-orange-200 font-medium">RÉFÉRENTIEL</div>
        </div>
        <div className="space-y-0.5">
          <p className="text-xl font-bold text-white">
            {skillCategories.reduce(
              (sum, cat) => sum + (cat.skills?.length || 0),
              0
            )}
          </p>
          <p className="text-xs text-orange-200">Compétences suivies</p>
          <p className="text-xs text-orange-300">
            {skillCategories.length} catégories
          </p>
        </div>
      </div>
    </div>
  );
}