import { useState, useEffect, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { jobAPI, interviewAPI, studentAPI } from "@/services/api";
import { mapJobList, mapInterviewList } from "@/utils/dataMapper";
import JobList from "./components/JobList";
import { useDispatch } from "react-redux";
import { setLoadingTrue, setLoadingFalse } from "@/store/slices/loadingSlice";
// 从Redux store中获取loading状态
import "./index.css";

const CompanyJobsPage = () => {
  const dispatch = useDispatch();

  const [jobs, setJobs] = useState([]);
  const [interviews, setInterviews] = useState([]);
  const [isExpand, setIsExpand] = useState(false); // 是否展开

  const navigate = useNavigate();

  const fetchData = async () => {
    try {
      dispatch(setLoadingTrue());
      // Get current user's student ID from API
      let studentId = null;
      try {
        const currentStudent = await studentAPI.getCurrentStudent();
        studentId = currentStudent?.id;
      } catch (err) {
        console.log("Could not get current student:", err);
      }

      // Fetch jobs (and interviews if we have a student ID)
      const jobsData = await jobAPI.getList({
        page: 1,
        pageSize: 10,
        isActive: true,
      });

      let interviewsData = { data: [] };
      if (studentId) {
        try {
          interviewsData = await interviewAPI.getList({
            studentId: studentId,
            status: "SCHEDULED",
          });
        } catch (err) {
          console.log("No interviews found or API error");
        }
      }

      // Map data to frontend format
      const mappedJobs = mapJobList(jobsData.data || jobsData);
      const mappedInterviews = mapInterviewList(
        interviewsData.data || interviewsData
      );

      setJobs(mappedJobs);
      setInterviews(mappedInterviews);
    } catch (error) {
      dispatch(setLoadingFalse());

      console.error("Failed to fetch data:", error);
      // Fallback to empty data
      setJobs([]);
      setInterviews([]);
    } finally {
      dispatch(setLoadingFalse());
    }
  };

  const handleJobWrapperClick = () => {
    navigate("/company-jobs-list");
  };

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

  return (
    <div className="company-jobs-page-wrapper">
      <div className="company-jobs-page">
        <div className="company-jobs-page-left" onClick={handleJobWrapperClick}>
          <p className="company-jobs-page-title">企业内推岗位库</p>
          <div className="company-jobs-page-left-list-wrapper">
            <JobList data={jobs} backgroundColor="#F7F8FA" />
          </div>
        </div>
        <div className="company-jobs-page-interview-wrapper">
          <div
            className={`${
              isExpand
                ? "company-jobs-page-interview"
                : "company-jobs-page-interview company-jobs-page-interview-expand"
            }`}
          >
            <p className="company-jobs-page-title">内推岗位面试</p>
            <ul className="company-jobs-page-interview-list">
              {interviews.length > 0 ? (
                interviews.map((item) => (
                  <li
                    className="company-jobs-page-interview-item"
                    key={item.id}
                  >
                    <div className="company-jobs-page-interview-item-info">
                      <p className="company-jobs-page-interview-item-info-position">
                        {item.position}
                      </p>
                      {item.job?.tags?.length > 0 ? (
                        <ul className="company-jobs-page-interview-item-info-tags">
                          {item.job.tags.map((tag) => (
                            <li
                              className="company-jobs-page-interview-item-info-tag"
                              key={tag}
                            >
                              {tag}
                            </li>
                          ))}
                        </ul>
                      ) : null}
                      <span className="company-jobs-page-interview-item-info-salary">
                        {item.job?.salary || "面议"}
                      </span>
                    </div>
                    <div className="company-jobs-page-interview-item-btn-wrapper">
                      <span>{item.interviewTime}</span>
                      <div
                        className={`company-jobs-page-interview-item-btn ${
                          item.status !== "COMPLETED" &&
                          "company-jobs-page-interview-item-btn-active"
                        }`}
                      >
                        {item.statusText}
                      </div>
                    </div>
                  </li>
                ))
              ) : (
                <li className="company-jobs-page-interview-item">
                  <p
                    style={{
                      color: "#999",
                      textAlign: "center",
                      width: "100%",
                    }}
                  >
                    暂无面试安排
                  </p>
                </li>
              )}
            </ul>
          </div>
        </div>
        <div
          className={
            isExpand
              ? "company-jobs-page-process-wrapper-expand"
              : "company-jobs-page-process-wrapper-close"
          }
        >
          <div
            className="company-jobs-page-process-wrapper-title"
            onClick={() => setIsExpand(!isExpand)}
          >
            岗位陪跑流程
          </div>
          <div className="company-jobs-page-process-content">
            <div className="company-jobs-page-process-item-icon icon1">
              <p>内推岗位简历投递</p>
            </div>
            <div className="company-jobs-page-process-item-round-dot icon2" />
            <div className="company-jobs-page-process-item-icon icon3">
              <p>岗位简历接收</p>
            </div>
            <div className="company-jobs-page-process-item-icon icon4">
              <p>面试时间地点确定</p>
            </div>
            <div className="company-jobs-page-process-item-icon icon5">
              <p>参与企业面试</p>
            </div>
            <div className="company-jobs-page-process-item-round-dot icon6" />
            <div className="company-jobs-page-process-item-icon icon7">
              <p>企业offer发送</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CompanyJobsPage;