resume-export.js

// ============================================
// 简历导出页面 - HTML 模板
// ============================================

const resumePageTemplate = `
<!-- PAGE 3: 简历导出 -->
<section class="page-section" id="page3" role="tabpanel">
  <div class="grid-2col">

    <!-- 左侧：简历预览 -->
    <div>
      <div class="card resume-card" style="margin-bottom:var(--space-5);">
        <div class="card-corner tl"></div><div class="card-corner tr"></div>
        <div class="card-corner bl"></div><div class="card-corner br"></div>

        <!-- 纸张效果容器 -->
        <div class="resume-paper" id="resumePreview">
          <div class="resume-corner tl"></div><div class="resume-corner tr"></div>
          <div class="resume-corner bl"></div><div class="resume-corner br"></div>

          <!-- 简历头部 -->
          <div class="resume-head">
            <div class="resume-head-deco">
              <span class="line"></span>
              <svg viewBox="0 0 24 24">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14 2 14 8 20 8"/>
              </svg>
              <span class="line"></span>
            </div>
            <div class="resume-title">学业成长简历</div>
            <div class="resume-subtitle">Academic Growth Portfolio · 记录你的每一步成长</div>
            <div class="resume-summary-row" id="resumeSummary">
              <div class="summary-chip">
                <span class="chip-value" id="summaryGpa">--</span>
                <span class="chip-label">GPA</span>
                <span class="chip-sub">总绩点</span>
              </div>
              <div class="summary-chip">
                <span class="chip-value" id="summaryCourses">0</span>
                <span class="chip-label">课程</span>
                <span class="chip-sub">已修</span>
              </div>
              <div class="summary-chip">
                <span class="chip-value" id="summaryCredits">0</span>
                <span class="chip-label">学分</span>
                <span class="chip-sub">总学分</span>
              </div>
              <div class="summary-chip">
                <span class="chip-value" id="summaryRecords">0</span>
                <span class="chip-label">经历</span>
                <span class="chip-sub">项目数</span>
              </div>
            </div>
          </div>

          <!-- 教育背景 -->
          <div class="resume-block">
            <div class="resume-block-title">
              <svg viewBox="0 0 24 24">
                <path d="M22 10L12 4 2 10l10 6 10-6z"/>
                <path d="M6 12v5c3 3 9 3 12 0v-5"/>
              </svg>
              <span class="resume-block-title-text">教育背景</span>
              <span class="block-num">§ 01</span>
              <span class="block-line"></span>
            </div>
            <div id="resumeCourses"></div>
          </div>

          <!-- 竞赛经历 -->
          <div class="resume-block">
            <div class="resume-block-title">
              <svg viewBox="0 0 24 24">
                <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5C7 4 6 8 6 9z"/>
                <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5C17 4 18 8 18 9z"/>
                <path d="M4 22h16"/><path d="M10 22V2h4v20"/>
              </svg>
              <span class="resume-block-title-text">竞赛经历</span>
              <span class="block-num">§ 02</span>
              <span class="block-line"></span>
            </div>
            <div id="resumeCompetitions"></div>
          </div>

          <!-- 实习经历 -->
          <div class="resume-block">
            <div class="resume-block-title">
              <svg viewBox="0 0 24 24">
                <rect x="2" y="7" width="20" height="14" rx="2"/>
                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
              </svg>
              <span class="resume-block-title-text">实习经历</span>
              <span class="block-num">§ 03</span>
              <span class="block-line"></span>
            </div>
            <div id="resumeInternships"></div>
          </div>

          <!-- 科研项目 -->
          <div class="resume-block">
            <div class="resume-block-title">
              <svg viewBox="0 0 24 24">
                <path d="M9 2L15 8 13 10 7 4z"/>
                <path d="M4 6L10 12 8 14 2 8z"/>
                <path d="M14 10L20 16 18 18 12 12z"/>
                <path d="M12 22L18 16"/><path d="M7 4L12 22"/>
              </svg>
              <span class="resume-block-title-text">科研项目</span>
              <span class="block-num">§ 04</span>
              <span class="block-line"></span>
            </div>
            <div id="resumeResearch"></div>
          </div>
        </div>

        <!-- 导出横幅 -->
        <div class="export-banner">
          <div class="export-text">
            <svg viewBox="0 0 24 24" width="16" height="16" style="stroke:var(--accent-rose);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
              <polyline points="7 10 12 15 17 10"/>
              <line x1="12" y1="15" x2="12" y2="3"/>
            </svg>
            <strong>一键导出</strong>你的学业故事
            <span style="color:var(--ink-tertiary)">— PDF 格式</span>
          </div>
          <button class="btn-download" id="exportResumeBtn">
            <svg viewBox="0 0 24 24">
              <path d="M12 3v12"/><path d="M7 10l5 5 5-5"/><path d="M5 21h14"/>
            </svg>
            PDF 下载
          </button>
        </div>
      </div>
    </div>

    <!-- 右侧：智能画像 + 数据总览 -->
    <div>
      <div class="card eval-card" style="margin-bottom:var(--space-5);">
        <div class="card-corner tl"></div><div class="card-corner tr"></div>
        <div class="card-corner bl"></div><div class="card-corner br"></div>
        <h2 class="card-title">智能画像</h2>
        <p class="card-subtitle">Smart Evaluation · 根据你的数据自动生成</p>

        <div id="evalTagsContainer" class="badge-tags">
          <div class="empty-slot" style="flex:1;min-width:100%">
            开始记录你的学业旅程，解锁专属标签
          </div>
        </div>

        <div id="evalSummary" class="eval-summary" style="display:none;"></div>
      </div>

      <div class="card stat-card">
        <div class="card-corner tl"></div><div class="card-corner tr"></div>
        <div class="card-corner bl"></div><div class="card-corner br"></div>
        <h2 class="card-title">数据总览</h2>
        <p class="card-subtitle">Data Snapshot · 你的每一次记录</p>
        <div id="quickStats">
          <div class="stat-row">
            <span class="stat-label">
              <svg viewBox="0 0 24 24">
                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
              </svg>总 GPA
            </span>
            <span class="stat-value" id="statGpa">--</span>
          </div>
          <div class="stat-row">
            <span class="stat-label">
              <svg viewBox="0 0 24 24">
                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                <path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/>
              </svg>已修学分
            </span>
            <span class="stat-value" id="statCredits">0</span>
          </div>
          <div class="stat-row">
            <span class="stat-label">
              <svg viewBox="0 0 24 24">
                <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5C7 4 6 8 6 9z"/>
                <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5C17 4 18 8 18 9z"/>
                <path d="M10 22V2h4v20"/>
              </svg>竞赛记录
            </span>
            <span class="stat-value" id="statComp">0</span>
          </div>
          <div class="stat-row">
            <span class="stat-label">
              <svg viewBox="0 0 24 24">
                <rect x="2" y="7" width="20" height="14" rx="2"/>
                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
              </svg>实习记录
            </span>
            <span class="stat-value" id="statIntern">0</span>
          </div>
          <div class="stat-row">
            <span class="stat-label">
              <svg viewBox="0 0 24 24">
                <path d="M9 2L15 8 13 10 7 4z"/>
                <path d="M4 6L10 12 8 14 2 8z"/>
                <path d="M14 10L20 16 18 18 12 12z"/>
              </svg>科研项目
            </span>
            <span class="stat-value" id="statResearch">0</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
`;

// ============================================
// 简历导出页面 - 数据与渲染逻辑
// ============================================

// 工具函数
function esc(s) {
  return String(s).replace(/[&<>"']/g, c => ({
    '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;'
  }[c]));
}

function calcTotalGpa(courses) {
  if (!courses || !courses.length) return null;
  let totalWeight = 0, totalCredits = 0;
  for (const c of courses) {
    const credit = parseFloat(c.credits);
    if (credit <= 0) continue;
    totalWeight += calcGpa(parseFloat(c.score)) * credit;
    totalCredits += credit;
  }
  return totalCredits === 0 ? null : totalWeight / totalCredits;
}

function calcTotalCredits(courses) {
  if (!courses || !courses.length) return 0;
  return courses.reduce((s, c) => s + parseFloat(c.credits || 0), 0);
}

function calcGpa(score) {
  if (score == null || score < 0) return 0;
  return Math.max(0, Math.min(4, score / 10 - 5));
}

// 智能画像标签配置（含对应图标）
const tagIconMap = {
  '学霸':     '<svg viewBox="0 0 24 24"><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M6 12v5c2 2 10 2 12 0v-5"/></svg>',
  '学神':     '<svg viewBox="0 0 24 24"><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M6 12v5c2 2 10 2 12 0v-5"/></svg>',
  '实践达人': '<svg viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>',
  '科研新星': '<svg viewBox="0 0 24 24"><path d="M9 2L15 8 13 10 7 4z"/><path d="M4 6L10 12 8 14 2 8z"/><path d="M14 10L20 16 18 18 12 12z"/></svg>',
  '竞赛能手': '<svg viewBox="0 0 24 24"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5C7 4 6 8 6 9z"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5C17 4 18 8 18 9z"/><path d="M10 22V2h4v20"/></svg>',
  '全面发展': '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 3v18M3 12h18"/></svg>',
  'default':  '<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/></svg>'
};

// 获取智能标签
function getEvalTags(data) {
  const tags = [];
  const gpa = calcTotalGpa(data.courses);
  const practiceTotal = data.records.competition.length
                     + data.records.internship.length
                     + data.records.research.length;

  if (gpa !== null && gpa > 3.8) tags.push({ name: '学神', type: 'rose' });
  else if (gpa !== null && gpa > 3.0) tags.push({ name: '学霸', type: 'sage' });

  if (practiceTotal > 3) tags.push({ name: '实践达人', type: 'sage' });
  if (data.records.research.length >= 2) tags.push({ name: '科研新星', type: 'rose' });
  if (gpa !== null && gpa > 3.0 && practiceTotal > 3) {
    tags.push({ name: '全面发展', type: 'warm' });
  }
  return tags;
}

// 生成智能评价
function generateSummary(data) {
  const gpa = calcTotalGpa(data.courses);
  const gpaStr = gpa !== null ? gpa.toFixed(2) : '--';
  const courseCount = data.courses.length;
  const recordCount = data.records.competition.length
                    + data.records.internship.length
                    + data.records.research.length;

  if (courseCount === 0 && recordCount === 0) return '';

  let s = `你目前共记录了 ${courseCount} 门课程`;
  if (gpa !== null) s += `, GPA ${gpaStr}`;
  if (recordCount > 0) s += `, 以及 ${recordCount} 项实践经历`;
  s += '。';

  if (gpa !== null && gpa > 3.8) s += ' 学业表现卓越，堪称学神级别！';
  else if (gpa !== null && gpa > 3.0) s += ' 学业成绩优异，继续保持！';
  else if (gpa !== null && gpa > 0) s += ' 继续努力，未来可期！';

  if (recordCount > 5) s += ' 实践经历丰富，综合能力突出。';
  else if (recordCount > 0) s += ' 实践经历正在积累中，加油！';

  return s;
}

// ============================================
// 渲染函数
// ============================================
function renderPage3() {
  const courses = appData.courses;
  const gpa = calcTotalGpa(courses);
  const gpaStr = gpa !== null ? gpa.toFixed(2) : '--';
  const totalCredits = calcTotalCredits(courses);
  const totalRecords = appData.records.competition.length
                     + appData.records.internship.length
                     + appData.records.research.length;

  // 1) 头部 summary chips
  document.getElementById('summaryGpa').textContent = gpaStr;
  document.getElementById('summaryCourses').textContent = courses.length;
  document.getElementById('summaryCredits').textContent = totalCredits.toFixed(1);
  document.getElementById('summaryRecords').textContent = totalRecords;

  // 2) 课程列表
  const rc = document.getElementById('resumeCourses');
  if (courses.length === 0) {
    rc.innerHTML = '<div class="empty-slot">暂无课程记录 — 添加第一门课程开始你的旅程</div>';
  } else {
    rc.innerHTML = courses.map(c => `
      <div class="course-row">
        <span class="course-name">${esc(c.name)}</span>
        <span class="course-detail">
          <span class="score">${c.score}</span>
          <span class="sep">·</span>
          <span>${c.credits} 学分</span>
        </span>
      </div>
    `).join('');
  }

  // 3) 经历时间线
  const renderRecords = (cid, type, label) => {
    const c = document.getElementById(cid);
    const r = appData.records[type] || [];
    if (r.length === 0) {
      c.innerHTML = `<div class="empty-slot">暂无${label}记录</div>`;
      return;
    }
    c.innerHTML = r.map(item => `
      <div class="timeline-item">
        <div class="timeline-title">${esc(item.name)}</div>
        <div class="timeline-meta">
          ${item.time ? esc(item.time) : ''}
          ${item.role ? ' · ' + esc(item.role) : ''}
        </div>
      </div>
    `).join('');
  };
  renderRecords('resumeCompetitions', 'competition', '竞赛');
  renderRecords('resumeInternships',  'internship',  '实习');
  renderRecords('resumeResearch',     'research',    '科研');

  // 4) 智能画像徽章
  const tags = getEvalTags(appData);
  const tc = document.getElementById('evalTagsContainer');
  const se = document.getElementById('evalSummary');

  if (tags.length === 0 && courses.length === 0) {
    tc.innerHTML = '<div class="empty-slot" style="flex:1;min-width:100%">开始记录你的学业旅程，解锁专属标签</div>';
    se.style.display = 'none';
  } else {
    tc.innerHTML = tags.map(tag => {
      const icon = tagIconMap[tag.name] || tagIconMap['default'];
      const cls = tag.type === 'rose' ? 'tag-rose'
                : tag.type === 'warm' ? 'tag-warm'
                : tag.type === 'sage' ? 'tag-sage' : '';
      return `
        <div class="badge-tag ${cls}">
          ${icon}
          <span class="badge-label">${tag.name}</span>
          <span class="badge-sub">UNLOCKED</span>
        </div>
      `;
    }).join('');

    const s = generateSummary(appData);
    if (s) { se.textContent = s; se.style.display = 'block'; }
    else   { se.style.display = 'none'; }
  }
}

// 数据总览快速更新
function updateQuickStats() {
  const gpa = calcTotalGpa(appData.courses);
  document.getElementById('statGpa').textContent     = gpa !== null ? gpa.toFixed(2) : '--';
  document.getElementById('statCredits').textContent = calcTotalCredits(appData.courses).toFixed(1);
  document.getElementById('statComp').textContent     = appData.records.competition.length;
  document.getElementById('statIntern').textContent  = appData.records.internship.length;
  document.getElementById('statResearch').textContent = appData.records.research.length;
}

// ============================================
// 导出 PDF 功能
// ============================================
function exportResume() {
  // 此处接入 html2pdf.js 或浏览器打印 API
  // 示例：使用浏览器打印
  const printContent = document.getElementById('resumePreview').innerHTML;
  const win = window.open('', '_blank');
  win.document.write(`
    <html>
      <head>
        <title>学业成长简历</title>
        <link rel="stylesheet" href="./resume-export.css">
        <style>body{padding:40px;background:#FFFDF5}</style>
      </head>
      <body>${printContent}</body>
    </html>
  `);
  win.document.close();
  win.focus();
  setTimeout(() => { win.print(); }, 300);
}

// 绑定事件
document.getElementById('exportResumeBtn').addEventListener('click', exportResume);