import { useState } from "react";
import { Radio } from "@arco-design/web-react";
import Modal from "@/components/Modal";
import "./index.css";

export default ({ visible, onClose, data }) => {
  const [position, setPosition] = useState("1");
  const onRadioChange = (value) => {
    setPosition(value);
  };

  const handleCloseModal = () => {
    onClose();
  };

  // 获取当前简历数据
  const currentTemplate = data?.selectedTemplate;
  const studentInfo = currentTemplate?.studentInfo;
  const positionTitle = currentTemplate?.position || "岗位名称";

  // 转换数据格式
  let resumeData = {
    educational_experience: ["相关专业大学 本科"],
    project_experience: [],
    core_skills: [],
    compound_skills: [],
    personal_summary: "暂无个人总结"
  };

  if (studentInfo) {
    // 处理教育经历
    if (studentInfo.education) {
      resumeData.educational_experience = [
        `${studentInfo.education.university || '苏州信息职业技术学院'} ${studentInfo.education.period || '2020.9 - 2023.6'}`
      ];
    } else {
      resumeData.educational_experience = studentInfo.educational_experience || ["相关专业大学 本科"];
    }
    
    // 处理项目经历 - 支持新格式
    if (studentInfo.projectExperience) {
      // 新格式：projectExperience是字符串
      resumeData.project_experience = [{
        name: "项目经历",
        description: studentInfo.projectExperience
      }];
    } else if (studentInfo.project_experience) {
      // 旧格式兼容
      if (Array.isArray(studentInfo.project_experience)) {
        resumeData.project_experience = studentInfo.project_experience;
      } else if (typeof studentInfo.project_experience === 'object') {
        const proj = studentInfo.project_experience;
        resumeData.project_experience = [
          {
            name: proj.project_name || proj.position || "实习项目",
            description: proj.description || "参与项目实施"
          }
        ];
      }
    }
    
    // 处理专业技能 - 支持新格式
    if (studentInfo.skills) {
      // 新格式：skills是字符串
      resumeData.skills_text = studentInfo.skills;
    } else {
      // 旧格式兼容
      resumeData.core_skills = studentInfo.core_skills || [];
      resumeData.compound_skills = studentInfo.compound_skills || [];
    }
    
    // 处理个人总结 - 支持新格式
    resumeData.personal_summary = studentInfo.personalSummary || studentInfo.personal_summary || "具有扎实的专业基础和实践经验";
  }

  return (
    <Modal visible={visible} onClose={handleCloseModal}>
      <div className="resume-info-modal">
        <i className="close-icon" onClick={handleCloseModal} />
        <Radio.Group
          type="button"
          name="position"
          className="resume-info-modal-radio-group"
          value={position}
          onChange={onRadioChange}
        >
          <Radio value="1">原始版</Radio>
          <Radio value="2">个人修改版</Radio>
          <Radio value="3">个人修改版</Radio>
        </Radio.Group>
        <p className="resume-info-modal-title">{positionTitle}</p>
        <ul className="resume-info-moda-list">
          {/* 教育经历 */}
          {resumeData.educational_experience && resumeData.educational_experience.length > 0 && (
            <li className="resume-info-moda-item">
              <p className="resume-info-moda-item-title">教育经历</p>
              <ul className="educational-experience-list">
                {resumeData.educational_experience.map((edu, index) => (
                  <li key={index} className="educational-experience-list-item">
                    <p className="school-name">{edu}</p>
                  </li>
                ))}
              </ul>
            </li>
          )}
          {/* 项目经历 */}
          {resumeData.project_experience && resumeData.project_experience.length > 0 && (
            <li className="resume-info-moda-item">
              <p className="resume-info-moda-item-title">项目经历</p>
              <ul className="project-experience-list">
                {resumeData.project_experience.map((project, index) => (
                  <li key={index} className="project-experience-list-item">
                    <div className="project-info-wrapper">
                      <div className="project-info">
                        <p className="project-name">{project.name || `项目${index + 1}`}</p>
                      </div>
                    </div>
                    <p className="project-desc">
                      {project.description}
                    </p>
                  </li>
                ))}
              </ul>
            </li>
          )}
          {/* 专业技能 */}
          <li className="resume-info-moda-item">
            <p className="resume-info-moda-item-title">专业技能</p>
            {resumeData.skills_text ? (
              <div className="professional-skills-content" style={{ whiteSpace: 'pre-wrap', lineHeight: '1.8', padding: '0 20px' }}>
                {resumeData.skills_text}
              </div>
            ) : (
              <ul className="professional-skills-list">
                {resumeData.core_skills && resumeData.core_skills.length > 0 && (
                  <li className="professional-skills-list-item">
                    <p className="skill-name">核心能力</p>
                    <div className="core-capabilities-list">
                      {resumeData.core_skills.map((skill, index) => (
                        <p key={index} className="core-capabilities-list-item">
                          {skill}
                        </p>
                      ))}
                    </div>
                  </li>
                )}
                {resumeData.compound_skills && resumeData.compound_skills.length > 0 && (
                  <li className="professional-skills-list-item">
                    <p className="skill-name">复合能力</p>
                    <div className="core-capabilities-list">
                      {resumeData.compound_skills.map((skill, index) => (
                        <p key={index} className="core-capabilities-list-item">
                          {skill}
                        </p>
                      ))}
                    </div>
                  </li>
                )}
              </ul>
            )}
          </li>
          {/* 个人总结 */}
          {resumeData.personal_summary && resumeData.personal_summary.trim() !== '' && (
            <li className="resume-info-moda-item">
              <p className="resume-info-moda-item-title">个人总结</p>
              <div className="personal-summary-content">
                <p>{resumeData.personal_summary}</p>
              </div>
            </li>
          )}
          {/* 对应课程单元 */}
          <li className="resume-info-moda-item">
            <p className="resume-info-moda-item-title">对应课程单元</p>
            <ul className="corresponding-course-units-list">
              <li className="corresponding-course-units-list-item">
                <div className="tag">方向1</div>
                <ul className="course-units-list">
                  <li className="course-units-list-item">课程单元名称</li>
                  <li className="course-units-list-item">课程单元名称</li>
                  <li className="course-units-list-item">课程单元名称</li>
                  <li className="course-units-list-item">课程单元名称</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </Modal>
  );
};