import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { mockData } from "@/data/mockData";
import JobList from "./components/JobList";

import "./index.css";

const CompanyJobsPage = () => {
  const { companyJobs } = mockData;
  const [isExpand, setIsExpand] = useState(false); // 是否展开

  const navigate = useNavigate();

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

  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={companyJobs?.companyPositions}
              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">
              {companyJobs?.internalPositions?.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?.tags?.length > 0 ? (
                      <ul className="company-jobs-page-interview-item-info-tags">
                        {item?.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.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>
              ))}
            </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;