client/src/components/LeaderboardSection/index.jsx

import React from "react";
import { Box } from "@mui/material";
import { useLeaderboard } from "../../context/LeaderboardContext";
import SectionHeader from "./components/SectionHeader";
import LanguageList from "./components/LanguageList";
import LeaderboardGrid from "./components/LeaderboardGrid";
import EmptyState from "./components/EmptyState";
import { useLanguageStats } from "./hooks/useLanguageStats";

const ITEMS_PER_PAGE = 4;

const LeaderboardSection = ({
  title,
  leaderboards,
  filteredLeaderboards,
  id,
}) => {
  const {
    expandedSections,
    setExpandedSections,
    selectedLanguage,
    setSelectedLanguage,
    searchQuery,
    selectedCategories,
  } = useLeaderboard();

  const isExpanded = expandedSections.has(id);

  const { languages, languageStats, LANGUAGE_FAMILIES, findLanguageFamily } =
    useLanguageStats(leaderboards, filteredLeaderboards);

  // Filtrer pour n'avoir que les leaderboards approuvés
  const approvedLeaderboards = filteredLeaderboards.filter(
    (leaderboard) => leaderboard.approval_status === "approved"
  );

  // On ne retourne null que si on n'a pas de leaderboards bruts
  if (!leaderboards) return null;

  // Déterminer si on doit paginer ou montrer tous les leaderboards
  const shouldShowAll =
    (selectedCategories.size === 1 && selectedCategories.has(id)) || // Une seule catégorie sélectionnée ET c'est celle-ci
    (selectedCategories.size > 1 && id === "combined") || // Plusieurs catégories ET c'est la section combinée
    isExpanded; // Section dépliée (quelle que soit la sélection)

  // Si on doit tout montrer, on ne divise pas la liste
  const displayedLeaderboards = shouldShowAll
    ? approvedLeaderboards
    : approvedLeaderboards.slice(0, ITEMS_PER_PAGE);

  const remainingLeaderboards = shouldShowAll
    ? []
    : approvedLeaderboards.slice(ITEMS_PER_PAGE);

  // Calculate how many skeletons we need (seulement si on ne montre pas tout)
  const skeletonsNeeded = shouldShowAll
    ? 0
    : Math.max(0, 4 - approvedLeaderboards.length);

  // On affiche le bouton expand seulement quand on n'a pas de sélection
  const showExpandButton = selectedCategories.size === 0;

  // Le bouton est actif seulement s'il y a plus de 4 leaderboards
  const isExpandButtonEnabled = approvedLeaderboards.length > ITEMS_PER_PAGE;

  const toggleExpanded = () => {
    setExpandedSections((prev) => {
      const newSet = new Set(prev);
      if (isExpanded) {
        newSet.delete(id);
      } else {
        newSet.add(id);
      }
      return newSet;
    });
  };

  // Déterminer si on doit afficher la liste des langues
  const showLanguageList =
    languages &&
    selectedCategories.size > 0 &&
    (id === "language" ||
      (selectedCategories.size > 1 && selectedCategories.has("language")));

  return (
    <Box sx={{ mb: 6 }}>
      <SectionHeader
        title={title}
        count={approvedLeaderboards.length}
        isExpanded={isExpanded}
        onToggleExpand={toggleExpanded}
        showExpandButton={showExpandButton}
        isExpandButtonEnabled={isExpandButtonEnabled}
      />

      {showLanguageList && (
        <LanguageList
          languages={languages}
          languageStats={languageStats}
          selectedLanguage={selectedLanguage}
          onLanguageSelect={setSelectedLanguage}
          LANGUAGE_FAMILIES={LANGUAGE_FAMILIES}
          findLanguageFamily={findLanguageFamily}
        />
      )}

      {approvedLeaderboards.length === 0 ? (
        <EmptyState title={title} searchQuery={searchQuery} />
      ) : (
        <LeaderboardGrid
          displayedLeaderboards={displayedLeaderboards}
          remainingLeaderboards={remainingLeaderboards}
          isExpanded={isExpanded}
          skeletonsNeeded={skeletonsNeeded}
          id={id}
        />
      )}
    </Box>
  );
};

export default LeaderboardSection;