client/src/pages/LeaderboardPage/LeaderboardPage.jsx

import React, { useState, useEffect } from "react";
import {
  Box,
  CircularProgress,
  Stack,
  Button,
  FormControlLabel,
  Switch,
  TextField,
  InputAdornment,
  Typography,
} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import Logo from "../../components/Logo/Logo";
import PageHeader from "../../components/PageHeader/PageHeader";
import LeaderboardSection from "../../components/LeaderboardSection";
import LeaderboardFilters from "../../components/LeaderboardFilters/LeaderboardFilters";
import { alpha } from "@mui/material/styles";
import API_URLS from "../../config/api";
import {
  LeaderboardProvider,
  useLeaderboard,
} from "../../context/LeaderboardContext";

const LeaderboardPageContent = () => {
  const [loading, setLoading] = useState(true);
  const { setLeaderboards, filterLeaderboards, sections, allSections } =
    useLeaderboard();

  useEffect(() => {
    fetch(API_URLS.leaderboards)
      .then((res) => res.json())
      .then((data) => {
        const leaderboardsArray = Array.isArray(data)
          ? data
          : Object.values(data).filter((item) => Array.isArray(item))[0];
        setLeaderboards(leaderboardsArray);
        setLoading(false);
      })
      .catch((error) => {
        console.error("Error fetching leaderboards:", error);
        setLoading(false);
      });
  }, [setLeaderboards]);

  return (
    <Box
      sx={{
        width: "100%",
        ph: 2,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Box
        sx={{ display: "flex", justifyContent: "center", pt: 6, mb: -4, pb: 0 }}
      >
        <Logo />
      </Box>

      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          textAlign: "center",
          mb: 0,
          mt: 6,
          gap: 2,
        }}
      >
        <Typography fontWeight="bold" variant="h3" component="h1">
          Leaderboards on the Hub
        </Typography>
        <Typography variant="h6" color="text.secondary">
          <span style={{ fontWeight: 600 }}>Discover</span> and{" "}
          <span style={{ fontWeight: 600 }}>explore</span> all leaderboards from
          the <span style={{ fontWeight: 600 }}>Hugging Face community</span>
        </Typography>
      </Box>

      {loading ? (
        <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
          <CircularProgress />
        </Box>
      ) : (
        <Box
          sx={{
            width: "100%",
            maxWidth: "1200px",
            mx: "auto",
            mt: 4,
          }}
        >
          <LeaderboardFilters allSections={allSections} />

          {sections.map(({ id, title, data }) => (
            <Box key={id} id={id}>
              <LeaderboardSection
                title={title}
                leaderboards={filterLeaderboards(data)}
              />
            </Box>
          ))}
        </Box>
      )}
    </Box>
  );
};

const LeaderboardPage = () => {
  return (
    <LeaderboardProvider>
      <LeaderboardPageContent />
    </LeaderboardProvider>
  );
};

export default LeaderboardPage;