zeling_f/src/pages/Resume/Create/index.tsx

import React, { useState, useRef, useCallback, useEffect } from 'react';
import { Input, Button, Select, message, ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import {
  PlusOutlined,
  DeleteOutlined,
  UserOutlined,
  BankOutlined,
  ReadOutlined,
  FileSearchOutlined,
  ArrowLeftOutlined,
  LoadingOutlined,
  CheckCircleFilled,
  ClockCircleOutlined,
  RocketOutlined,
} from '@ant-design/icons';
import { useNavigate, useSearchParams, request } from '@umijs/max';
import Navbar from '../../Home/components/Navbar';
import Footer from '../../Home/components/Footer';
import styles from './index.less';

const { TextArea } = Input;

interface WorkExp {
  company: string;
  position: string;
  startDate: string;
  endDate: string;
  description: string;
}

interface Education {
  school: string;
  major: string;
  degree: string;
  startDate: string;
  endDate: string;
  description: string;
}

const PROGRESS_STEPS = [
  { label: '提交表单数据', duration: 2000 },
  { label: 'AI 正在分析岗位要求', duration: 6000 },
  { label: 'AI 正在生成简历内容', duration: 12000 },
  { label: '正在填充 Word 模板', duration: 8000 },
  { label: '正在上传文件', duration: 3000 },
];

const degreeOptions = [
  { value: '博士', label: '博士' },
  { value: '硕士', label: '硕士' },
  { value: '本科', label: '本科' },
  { value: '大专', label: '大专' },
];

const emptyWork = (): WorkExp => ({ company: '', position: '', startDate: '', endDate: '', description: '' });
const emptyEdu = (): Education => ({ school: '', major: '', degree: '', startDate: '', endDate: '', description: '' });

const ResumeCreate: React.FC = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const templateId = searchParams.get('templateId') || '1';
  const templateTitle = searchParams.get('templateTitle') || '';

  // Form fields
  const [resumeName, setResumeName] = useState('');
  const [jobIntention, setJobIntention] = useState('');
  const [expectedSalary, setExpectedSalary] = useState('');
  const [preferredCity, setPreferredCity] = useState('');
  const [language, setLanguage] = useState('中文');
  const [jobDescription, setJobDescription] = useState('');
  const [workList, setWorkList] = useState<WorkExp[]>([emptyWork()]);
  const [eduList, setEduList] = useState<Education[]>([emptyEdu()]);

  // Generation state
  const [generating, setGenerating] = useState(false);
  const [progressStep, setProgressStep] = useState(0);
  const timerRef = useRef<any>(null);

  // Cleanup timers on unmount
  useEffect(() => {
    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
  }, []);

  // Work experience helpers
  const addWork = () => setWorkList([...workList, emptyWork()]);
  const removeWork = (i: number) => setWorkList(workList.filter((_, idx) => idx !== i));
  const updateWork = (i: number, field: keyof WorkExp, val: string) => {
    const list = [...workList];
    list[i] = { ...list[i], [field]: val };
    setWorkList(list);
  };

  // Education helpers
  const addEdu = () => setEduList([...eduList, emptyEdu()]);
  const removeEdu = (i: number) => setEduList(eduList.filter((_, idx) => idx !== i));
  const updateEdu = (i: number, field: keyof Education, val: string) => {
    const list = [...eduList];
    list[i] = { ...list[i], [field]: val };
    setEduList(list);
  };

  // Animate progress steps
  const animateProgress = useCallback(() => {
    let step = 0;
    setProgressStep(0);
    const next = () => {
      if (step < PROGRESS_STEPS.length - 1) {
        timerRef.current = setTimeout(() => {
          step++;
          setProgressStep(step);
          next();
        }, PROGRESS_STEPS[step].duration);
      }
    };
    next();
  }, []);

  // Generate resume
  const handleGenerate = async () => {
    if (!resumeName.trim()) { message.warning('请输入简历名称'); return; }
    if (!jobIntention.trim()) { message.warning('请输入求职意向'); return; }
    if (!jobDescription.trim()) { message.warning('请粘贴岗位描述/JD'); return; }

    setGenerating(true);
    animateProgress();

    try {
      const payload: any = {
        resumeName: resumeName.trim(),
        jobIntention: jobIntention.trim(),
        jobDescription: jobDescription.trim(),
        templateId,
      };
      if (expectedSalary.trim()) payload.expectedSalary = expectedSalary.trim();
      if (preferredCity.trim()) payload.preferredCity = preferredCity.trim();
      if (language) payload.language = language;

      const validWork = workList.filter(w => w.company.trim() || w.position.trim());
      if (validWork.length) payload.workExperience = validWork;

      const validEdu = eduList.filter(e => e.school.trim() || e.major.trim());
      if (validEdu.length) payload.education = validEdu;

      const res = await request('/api/resume/student/ai/generate', {
        method: 'POST',
        data: payload,
        timeout: 120000,
      });

      if (res.code === 0 && res.data?.url) {
        setProgressStep(PROGRESS_STEPS.length - 1);
        if (timerRef.current) clearTimeout(timerRef.current);
        message.success('简历生成成功');
        // 跳转到预览页
        navigate(`/resume/preview?url=${encodeURIComponent(res.data.url)}&name=${encodeURIComponent(resumeName.trim())}`);
      } else {
        message.error(res.message || '生成失败，请重试');
      }
    } catch (err: any) {
      message.error(err?.message || '请求超时或网络异常，请重试');
    } finally {
      setGenerating(false);
      if (timerRef.current) clearTimeout(timerRef.current);
    }
  };

  const handleCancel = () => navigate(-1);

  return (
    <ConfigProvider locale={zhCN}>
      <div className={styles.createPage}>
        <div className={styles.navbarWrap}><Navbar solidBg /></div>

        <div className={styles.contentArea}>
          {/* Top bar */}
          <div className={styles.topBar}>
            <span className={styles.backLink} onClick={handleCancel}>
              <ArrowLeftOutlined /> 返回模板列表
            </span>
          </div>

          {/* Header */}
          <div className={styles.headerCard}>
            <div className={styles.headerCardInner}>
              <h1 className={styles.pageTitle}>AI 智能生成简历</h1>
              {templateTitle && <span className={styles.templateBadge}>模板：{decodeURIComponent(templateTitle)}</span>}
            </div>
            <p className={styles.headerDesc}>填写以下信息，AI 将根据岗位要求为你量身定制简历</p>
          </div>

          {/* Loading overlay */}
          {generating && (
            <div className={styles.loadingOverlay}>
              <div className={styles.loadingCard}>
                <div className={styles.loadingSpinner}><LoadingOutlined /></div>
                <h2 className={styles.loadingTitle}>AI 正在为你生成简历</h2>
                <p className={styles.loadingHint}>预计需要 10~30 秒，请耐心等待</p>
                <div className={styles.progressSteps}>
                  {PROGRESS_STEPS.map((s, i) => (
                    <div key={i} className={`${styles.stepItem} ${i < progressStep ? styles.stepDone : ''} ${i === progressStep ? styles.stepActive : ''}`}>
                      <span className={styles.stepDot}>
                        {i < progressStep ? <CheckCircleFilled /> : i === progressStep ? <LoadingOutlined /> : <ClockCircleOutlined />}
                      </span>
                      <span className={styles.stepLabel}>{s.label}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* Section 1: Basic Info */}
          <div className={styles.section}>
            <div className={styles.sectionHeader}>
              <div className={styles.sectionIcon}><UserOutlined /></div>
              <span className={styles.sectionTitle}>基本信息</span>
              <span className={styles.sectionHint}>带 * 为必填项</span>
            </div>
            <div className={styles.formGrid4}>
              <div className={styles.formItem}>
                <label className={styles.label}><span className={styles.required}>*</span> 简历名称</label>
                <Input className={styles.input} placeholder="如：Java开发工程师简历" value={resumeName} onChange={e => setResumeName(e.target.value)} />
              </div>
              <div className={styles.formItem}>
                <label className={styles.label}><span className={styles.required}>*</span> 求职意向</label>
                <Input className={styles.input} placeholder="如：Java开发工程师" value={jobIntention} onChange={e => setJobIntention(e.target.value)} />
              </div>
              <div className={styles.formItem}>
                <label className={styles.label}>期望薪资</label>
                <Input className={styles.input} placeholder="如：15-20K" value={expectedSalary} onChange={e => setExpectedSalary(e.target.value)} />
              </div>
              <div className={styles.formItem}>
                <label className={styles.label}>意向城市</label>
                <Input className={styles.input} placeholder="如：上海" value={preferredCity} onChange={e => setPreferredCity(e.target.value)} />
              </div>
            </div>
            <div className={styles.formRowSingle}>
              <div className={styles.formItem}>
                <label className={styles.label}>语种</label>
                <Select className={styles.select} value={language} onChange={setLanguage}
                  popupClassName={styles.selectDropdown}
                  options={[{ value: '中文', label: '中文' }, { value: '英文', label: '英文' }]} />
              </div>
            </div>
          </div>

          {/* Section 2: Work Experience */}
          <div className={styles.section}>
            <div className={styles.sectionHeader}>
              <div className={styles.sectionIcon}><BankOutlined /></div>
              <span className={styles.sectionTitle}>工作/实习经历</span>
              <span className={styles.sectionHint}>选填，可添加多段经历</span>
            </div>
            {workList.map((w, i) => (
              <div key={i} className={styles.expCard}>
                <div className={styles.expCardHeader}>
                  <span className={styles.expBadge}>经历 {i + 1}</span>
                  {workList.length > 1 && (
                    <Button type="text" danger icon={<DeleteOutlined />} onClick={() => removeWork(i)}>删除</Button>
                  )}
                </div>
                <div className={styles.formGrid4}>
                  <div className={styles.formItem}>
                    <label className={styles.label}>公司名称</label>
                    <Input className={styles.input} placeholder="公司名称" value={w.company} onChange={e => updateWork(i, 'company', e.target.value)} />
                  </div>
                  <div className={styles.formItem}>
                    <label className={styles.label}>职位</label>
                    <Input className={styles.input} placeholder="职位名称" value={w.position} onChange={e => updateWork(i, 'position', e.target.value)} />
                  </div>
                  <div className={styles.formItem}>
                    <label className={styles.label}>开始时间</label>
                    <Input className={styles.input} placeholder="如：2022.07" value={w.startDate} onChange={e => updateWork(i, 'startDate', e.target.value)} />
                  </div>
                  <div className={styles.formItem}>
                    <label className={styles.label}>结束时间</label>
                    <Input className={styles.input} placeholder="如：至今" value={w.endDate} onChange={e => updateWork(i, 'endDate', e.target.value)} />
                  </div>
                </div>
                <div className={styles.formItemFull}>
                  <label className={styles.label}>工作描述</label>
                  <TextArea className={styles.textarea} rows={3} placeholder="简要描述工作内容" value={w.description} onChange={e => updateWork(i, 'description', e.target.value)} />
                </div>
              </div>
            ))}
            <div className={styles.addBtnWrap}>
              <Button className={styles.addBtn} icon={<PlusOutlined />} onClick={addWork}>添加经历</Button>
            </div>
          </div>

          {/* Section 3: Education */}
          <div className={styles.section}>
            <div className={styles.sectionHeader}>
              <div className={styles.sectionIcon}><ReadOutlined /></div>
              <span className={styles.sectionTitle}>教育背景</span>
              <span className={styles.sectionHint}>选填，可添加多段教育经历</span>
            </div>
            {eduList.map((e, i) => (
              <div key={i} className={styles.expCard}>
                <div className={styles.expCardHeader}>
                  <span className={styles.expBadge}>教育 {i + 1}</span>
                  {eduList.length > 1 && (
                    <Button type="text" danger icon={<DeleteOutlined />} onClick={() => removeEdu(i)}>删除</Button>
                  )}
                </div>
                <div className={styles.formGrid4}>
                  <div className={styles.formItem}>
                    <label className={styles.label}>学校名称</label>
                    <Input className={styles.input} placeholder="学校名称" value={e.school} onChange={ev => updateEdu(i, 'school', ev.target.value)} />
                  </div>
                  <div className={styles.formItem}>
                    <label className={styles.label}>专业</label>
                    <Input className={styles.input} placeholder="专业名称" value={e.major} onChange={ev => updateEdu(i, 'major', ev.target.value)} />
                  </div>
                  <div className={styles.formItem}>
                    <label className={styles.label}>学历</label>
                    <Select className={styles.selectFull} value={e.degree || undefined} onChange={v => updateEdu(i, 'degree', v)}
                      popupClassName={styles.selectDropdown} placeholder="选择学历" options={degreeOptions} />
                  </div>
                  <div className={styles.formItem}>
                    <label className={styles.label}>开始时间</label>
                    <Input className={styles.input} placeholder="如：2018.09" value={e.startDate} onChange={ev => updateEdu(i, 'startDate', ev.target.value)} />
                  </div>
                  <div className={styles.formItem}>
                    <label className={styles.label}>结束时间</label>
                    <Input className={styles.input} placeholder="如：2022.06" value={e.endDate} onChange={ev => updateEdu(i, 'endDate', ev.target.value)} />
                  </div>
                </div>
                <div className={styles.formItemFull}>
                  <label className={styles.label}>主修课程/描述</label>
                  <TextArea className={styles.textarea} rows={3} placeholder="主修课程或其他描述" value={e.description} onChange={ev => updateEdu(i, 'description', ev.target.value)} />
                </div>
              </div>
            ))}
            <div className={styles.addBtnWrap}>
              <Button className={styles.addBtn} icon={<PlusOutlined />} onClick={addEdu}>添加教育经历</Button>
            </div>
          </div>

          {/* Section 4: Job Description */}
          <div className={styles.section}>
            <div className={styles.sectionHeader}>
              <div className={styles.sectionIcon}><FileSearchOutlined /></div>
              <span className={styles.sectionTitle}>岗位描述 / JD</span>
              <span className={styles.sectionHint}>必填，直接粘贴招聘要求即可</span>
            </div>
            <div className={styles.formItemFull}>
              <label className={styles.label}><span className={styles.required}>*</span> 应聘岗位要求</label>
              <TextArea className={styles.textarea} rows={6}
                placeholder="请粘贴目标岗位的招聘要求，AI 将根据 JD 为你量身定制简历内容..."
                value={jobDescription} onChange={e => setJobDescription(e.target.value)} />
            </div>
          </div>

          {/* Footer actions */}
          <div className={styles.footerActions}>
            <Button className={styles.cancelBtn} onClick={handleCancel}>取消</Button>
            <Button type="primary" className={styles.generateBtn} loading={generating} onClick={handleGenerate}>
              {generating ? 'AI 生成中...' : <><RocketOutlined /> AI 生成简历</>}
            </Button>
          </div>
        </div>

        <Footer />
      </div>
    </ConfigProvider>
  );
};

export default ResumeCreate;