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, getStudyRecordsProgress } from "@/services";
import "./index.css";

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

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

  // 获取班级排名数据
  const fetchRankingData = async () => {
    try {
      setRankingLoading(true);
      const response = await getClassRanking();
      if (response && response.success) {
        setRankingData(response.data);
      } else if (response) {
        // 兼容直接返回数据的情况
        setRankingData(response);
      }
    } catch (error) {
      console.error('Failed to fetch ranking data:', error);
    } finally {
      setRankingLoading(false);
    }
  };

  // 获取整体学习进度
  const fetchLearningProgressSummary = async () => {
    try {
      const res = await getStudyRecordsProgress();
      console.log("learningProgressSummary", res);
    } catch (error) {
      console.error('Failed to fetch learning progress:', error);
    }
  };

  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;