import { useState, useEffect } from "react";
import StartClass from "./components/StartClass";
import QuickAccess from "./components/QuickAccess";
import CalendarTaskModule from "./components/CalendarTaskModule";
import StudyStatus from "./components/StudyStatus";
import Rank from "@/components/Rank";
import StageProgress from "@/components/StageProgress";
import TaskList from "./components/TaskList";
import { getClassRanking } from "@/services/dashboard";
import "./index.css";

const Dashboard = () => {
  const [rankingData, setRankingData] = useState(null);
  const [rankingLoading, setRankingLoading] = useState(true);

  useEffect(() => {
    fetchRankingData();
  }, []);

  const fetchRankingData = async () => {
    try {
      setRankingLoading(true);
      const response = await getClassRanking();
      if (response) {
        setRankingData(response);
      }
    } catch (error) {
      console.error('Failed to fetch ranking data:', error);
    } finally {
      setRankingLoading(false);
    }
  };

  return (
    <div className="dashboard">
      <StageProgress showBlockageAlert={true} />

      <div className="dashboard-grid">
        <StartClass />
        <QuickAccess />
        <CalendarTaskModule />
        <StudyStatus />
        <Rank data={rankingData} loading={rankingLoading} />
        <TaskList />
      </div>
    </div>
  );
};

export default Dashboard;