const APP_BRAND_NAME = "S-lake高校雷达网";

const state = {
  route: "home",
  params: {},
  user: JSON.parse(localStorage.getItem("slakeUser") || "null"),
  profile: JSON.parse(localStorage.getItem("slakeProfile") || "{}"),
  signedCourseIds: JSON.parse(localStorage.getItem("slakeSignedCourses") || "[1,2]"),
  signedActivityIds: JSON.parse(localStorage.getItem("slakeSignedActivities") || "[1]"),
  calendarMonth: "2026-05",
  activityCalendarMonth: "2026-05",
  selectedDate: "2026-05-15",
  signupSessionId: null,
  demands: [
    {
      id: 1,
      type: "技术合作",
      title: "寻找工业视觉缺陷检测场景",
      status: "跟进中",
      date: "2026-05-18",
      description: "希望对接具备真实产线数据的企业，共同验证实验室算法。"
    },
    {
      id: 2,
      type: "产业资源",
      title: "先进材料中试资源对接",
      status: "已受理",
      date: "2026-05-14",
      description: "需要寻找小批量中试平台，验证材料稳定性和制备工艺。"
    }
  ]
};

const data = {
  banner: {
    title: "连接高校科研与产业资源",
    subtitle: "课程、活动、资讯与伙伴需求一站触达"
  },
  courses: [
    {
      id: 5,
      title: "高校科技成果转化实战营",
      category: "成果转化",
      status: "进行中",
      date: "2026-05-25",
      time: "09:30-17:30",
      location: "苏州工业园区 · 科创中心",
      teacher: "林清源 老师",
      university: "S-lake 先进技术发展中心",
      seats: 80,
      signed: 72,
      signupStartDate: "2026-05-01",
      signupEndDate: "2026-05-24",
      summary: "围绕高校成果筛选、产业需求拆解和项目路演，进行全天实战训练。",
      audience: ["高校科研团队负责人", "科技成果转化经理人", "产业投资与孵化服务人员"],
      agenda: ["成果筛选方法", "产业需求访谈", "路演材料打磨"]
    },
    {
      id: 1,
      title: "AI 科研成果转化闭门课",
      category: "AI",
      status: "报名中",
      date: "2026-06-12",
      endDate: "2026-06-14",
      time: "14:00-17:00",
      location: "苏州工业园区 · 元禾会议中心",
      teacher: "陈知远 教授",
      university: "上海交通大学",
      seats: 48,
      signed: 31,
      signupStartDate: "2026-05-01",
      signupEndDate: "2026-06-11",
      promoUrl: "assets/course-detail-banner.svg",
      summary: "面向高校科研团队和产业伙伴，拆解 AI 技术从论文、样机到商业落地的关键路径。",
      audience: ["AI 方向高校老师与博士后团队", "关注 AI 项目落地的企业研发负责人", "科技成果转化与投资机构代表"],
      agenda: ["成果转化案例复盘", "产业需求匹配", "闭门交流"]
    },
    {
      id: 2,
      title: "先进材料项目投融资工作坊",
      category: "材料",
      status: "报名中",
      date: "2026-06-20",
      endDate: "2026-06-21",
      time: "09:30-12:00",
      location: "南京大学苏州校区",
      teacher: "李明澈 教授",
      university: "南京大学",
      seats: 36,
      signed: 18,
      signupStartDate: "2026-05-10",
      signupEndDate: "2026-06-19",
      summary: "聚焦新材料项目早期验证、知识产权梳理和资本沟通材料准备。",
      audience: ["先进材料科研团队", "材料项目创业者", "关注硬科技投资的产业方与基金代表"],
      agenda: ["技术路线表达", "专利与样品验证", "融资路演点评"]
    },
    {
      id: 3,
      title: "机器人感知技术应用沙龙",
      category: "机器人",
      status: "未开始",
      date: "2026-07-05",
      time: "19:00-21:00",
      location: "杭州未来科技城 · 智能制造中心",
      teacher: "王亦然 博士",
      university: "浙江大学",
      seats: 100,
      signed: 100,
      signupStartDate: "2026-05-01",
      signupEndDate: "2026-07-04",
      summary: "邀请高校实验室与企业研发负责人交流多模态感知、边缘计算和场景验证。",
      audience: ["机器人与智能制造方向科研人员", "企业算法、硬件与产品负责人", "关注机器人场景验证的产业伙伴"],
      agenda: ["前沿论文导读", "企业应用分享", "自由问答"]
    },
    {
      id: 4,
      title: "高校成果转化基础训练营",
      category: "成果转化",
      status: "已结束",
      date: "2026-05-15",
      time: "10:00-12:00",
      location: "苏州工业园区 · 路演厅",
      teacher: "周行之 老师",
      university: "S-lake 先进技术发展中心",
      seats: 60,
      signed: 56,
      signupStartDate: "2026-04-01",
      signupEndDate: "2026-05-14",
      summary: "面向初次参与成果转化的科研团队，讲解需求识别、商业化路径和对接材料准备。",
      audience: ["首次参与成果转化的科研团队", "高校院系科研秘书与项目经理", "早期科技创业团队"],
      agenda: ["成果转化流程", "报名材料准备", "案例答疑"]
    },
    {
      id: 6,
      title: "生物医药转化专题课",
      category: "生物医药",
      status: "报名中",
      date: "2026-06-24",
      time: "14:00-16:30",
      location: "上海张江科学会堂",
      teacher: "赵闻笛 教授",
      university: "复旦大学",
      seats: 50,
      signed: 22,
      signupStartDate: "2026-05-01",
      signupEndDate: "2026-06-23",
      summary: "围绕生物医药项目临床前验证、产业合作和转化路径展开专题分享。",
      audience: ["生物医药科研团队", "医疗器械与药企研发负责人", "关注生命科学项目的投资机构"],
      agenda: ["临床前验证", "产业合作路径", "转化案例讨论"]
    }
  ],
  activities: [
    {
      id: 1,
      title: "长三角高校科技成果对接日",
      date: "2026-06-18",
      time: "13:30-18:00",
      location: "苏州国际科技园",
      status: "报名中",
      signupStartDate: "2026-05-01",
      signupEndDate: "2026-06-17",
      summary: "组织高校团队、投资机构、产业方集中对接，推动技术需求和科研成果精准匹配。",
      sessions: [
        { id: 101, title: "上午对接专场", date: "2026-06-18", time: "13:30-16:00", venue: "苏州国际科技园 A厅", capacity: 80, signed: 72 },
        { id: 102, title: "下午路演专场", date: "2026-06-18", time: "16:00-18:00", venue: "苏州国际科技园 B厅", capacity: 60, signed: 60 }
      ]
    },
    {
      id: 2,
      title: "青年科学家伙伴交流晚宴",
      date: "2026-06-28",
      time: "18:30-20:30",
      location: "苏州金鸡湖会议中心",
      status: "邀请制",
      summary: "面向正式伙伴开放的小规模交流活动，促进跨校、跨学科合作。"
    },
    {
      id: 3,
      title: "产业需求闭门沟通会",
      date: "2026-05-12",
      time: "14:00-16:00",
      location: "元禾控股会议室",
      status: "已结束",
      summary: "围绕企业真实技术需求，与高校老师进行小范围闭门沟通。"
    },
    {
      id: 4,
      title: "高校青年 PI 技术路演",
      date: "2026-06-24",
      time: "15:00-17:30",
      location: "苏州工业园区 · 路演中心",
      status: "报名中",
      signupStartDate: "2026-05-15",
      signupEndDate: "2026-06-23",
      summary: "邀请高校青年 PI 展示前沿技术方向，与产业方、投资机构进行现场交流。",
      sessions: [
        { id: 401, title: "路演上半场", date: "2026-06-24", time: "15:00-16:15", venue: "路演中心 1号厅", capacity: 50, signed: 22 },
        { id: 402, title: "路演下半场", date: "2026-06-24", time: "16:15-17:30", venue: "路演中心 1号厅", capacity: 50, signed: 10 }
      ]
    }
  ],
  news: [
    {
      id: 1,
      title: "高校雷达网完成首批 AI 方向老师画像更新",
      tag: "平台动态",
      date: "2026-05-20",
      summary: "围绕论文、项目、专利和产业合作意向，平台完成长三角首批重点老师画像更新。",
      content: "高校雷达网近期完成 AI 方向首批重点老师画像更新，覆盖多模态大模型、具身智能、智能制造等方向。后续平台将继续补充材料、生物医药和机器人方向数据。"
    },
    {
      id: 2,
      title: "元禾先进技术发展中心启动伙伴需求共创机制",
      tag: "伙伴服务",
      date: "2026-05-16",
      summary: "正式伙伴可通过移动端发布技术、产业、资金、场地等类型需求。",
      content: "为提升高校科研团队和产业资源的连接效率，平台面向正式伙伴开放需求发布入口。需求提交后，运营团队将在后台进行分派和跟进。"
    }
  ]
};

const app = document.querySelector("#app");
const title = document.querySelector("#pageTitle");
const tabbar = document.querySelector("#tabbar");
const topAction = document.querySelector("#topAction");
const backBtn = document.querySelector("#backBtn");
const courseSignupModal = document.querySelector("#courseSignupModal");
const signupSuccessModal = document.querySelector("#signupSuccessModal");
const signupSuccessTitle = document.querySelector("#signupSuccessTitle");
const signupSuccessMessage = document.querySelector("#signupSuccessMessage");
const signupModalTitle = document.querySelector("#signupModalTitle");
const signupCourseTitle = document.querySelector("#signupCourseTitle");
const signupCourseId = document.querySelector("#signupCourseId");
const signupType = document.querySelector("#signupType");
const signupPhoneError = document.querySelector("#signupPhoneError");
const demoToday = "2026-05-25";
const minCalendarMonth = "2026-05";

function escapeHtml(value) {
  return String(value ?? "")
    .replaceAll("&", "&")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}

function go(route, params = {}) {
  state.route = route;
  state.params = params;
  history.pushState({ route, params }, "", `#${route}${params.id ? `/${params.id}` : ""}`);
  render();
}

function replaceRoute(route, params = {}) {
  state.route = route;
  state.params = params;
  history.replaceState({ route, params }, "", `#${route}${params.id ? `/${params.id}` : ""}`);
  render();
}

function findById(list, id) {
  return list.find((item) => String(item.id) === String(id));
}

function toast(message) {
  openSignupSuccess(message, "操作成功");
}

function profileAvatarSrc() {
  return state.profile?.avatar || "assets/profile-avatar.jpg";
}

function openSignupSuccess(message = "已为你同步到报名日程", modalTitle = "报名成功") {
  signupSuccessTitle.textContent = modalTitle;
  signupSuccessMessage.textContent = message;
  signupSuccessModal.classList.add("visible");
  signupSuccessModal.setAttribute("aria-hidden", "false");
}

function closeSignupSuccess() {
  signupSuccessModal.classList.remove("visible");
  signupSuccessModal.setAttribute("aria-hidden", "true");
}

function parseDateOnly(dateText) {
  return new Date(`${dateText}T00:00:00`);
}

function isWithinSignupWindow(startText, endText, todayText = demoToday) {
  const today = parseDateOnly(todayText);
  if (startText && today < parseDateOnly(startText)) return false;
  if (endText && today > parseDateOnly(endText)) return false;
  return true;
}

function hasCourseCapacity(course) {
  const capacity = Number(course.seats) || 0;
  if (capacity <= 0) return true;
  return Number(course.signed) < capacity;
}

function isCourseSignupOpen(course) {
  if (!isWithinSignupWindow(course.signupStartDate, course.signupEndDate)) return false;
  if (!hasCourseCapacity(course)) return false;
  if (getCourseStatus(course) === "已结束") return false;
  return true;
}

function canShowCourseSignupButton(course) {
  return isCourseSignupOpen(course) && !state.signedCourseIds.includes(course.id);
}

function getActivityDisplayStatus(activity) {
  if (isWithinSignupWindow(activity.signupStartDate, activity.signupEndDate)) return "报名中";
  return getActivityStatus(activity);
}

function isActivitySignupOpen(activity) {
  if (!isWithinSignupWindow(activity.signupStartDate, activity.signupEndDate)) return false;
  if (getActivityDisplayStatus(activity) !== "报名中") return false;
  return Array.isArray(activity.sessions) && activity.sessions.some((session) => hasSessionCapacity(session));
}

function hasSessionCapacity(session) {
  const capacity = Number(session.capacity) || 0;
  if (capacity <= 0) return true;
  return Number(session.signed) < capacity;
}

function canShowActivitySignupButton(activity) {
  return isActivitySignupOpen(activity) && !state.signedActivityIds.includes(activity.id);
}

function openCourseSignup(id) {
  const course = findById(data.courses, id);
  if (!course || !canShowCourseSignupButton(course)) return;
  signupCourseId.value = id;
  signupType.value = "course";
  state.signupSessionId = null;
  signupModalTitle.textContent = "课程报名";
  signupCourseTitle.textContent = course.title;
  signupPhoneError.textContent = "";
  hideSignupSessionBlock();
  courseSignupModal.classList.add("visible");
  courseSignupModal.setAttribute("aria-hidden", "false");
}

function openActivitySignup(id) {
  const activity = findById(data.activities, id);
  if (!activity || !canShowActivitySignupButton(activity)) return;
  signupCourseId.value = id;
  signupType.value = "activity";
  signupModalTitle.textContent = "活动报名";
  signupCourseTitle.textContent = activity.title;
  signupPhoneError.textContent = "";
  renderSignupSessionOptions(activity);
  state.signupSessionId = null;
  courseSignupModal.classList.add("visible");
  courseSignupModal.setAttribute("aria-hidden", "false");
}

function hideSignupSessionBlock() {
  const block = document.querySelector("#signupSessionBlock");
  if (block) block.hidden = true;
  const err = document.querySelector("#signupSessionError");
  if (err) err.textContent = "";
}

function renderSignupSessionOptions(activity) {
  const block = document.querySelector("#signupSessionBlock");
  const list = document.querySelector("#signupSessionOptions");
  if (!block || !list) return;
  const sessions = activity.sessions || [];
  list.innerHTML = sessions.map((session) => {
    const full = !hasSessionCapacity(session);
    const active = state.signupSessionId === session.id;
    return `
      <button
        type="button"
        class="signup-session-option ${active ? "active" : ""}"
        data-session-id="${session.id}"
        ${full ? "disabled" : ""}
      >
        <strong>${escapeHtml(session.title)}</strong>
        <span>${escapeHtml(session.date)} ${escapeHtml(session.time)} · ${escapeHtml(session.venue)}</span>
        <span>${full ? "名额已满" : `剩余 ${Math.max(Number(session.capacity) - Number(session.signed), 0)} / ${session.capacity} 人`}</span>
      </button>
    `;
  }).join("");
  block.hidden = sessions.length === 0;
}

function closeCourseSignup() {
  courseSignupModal.classList.remove("visible");
  courseSignupModal.setAttribute("aria-hidden", "true");
  signupPhoneError.textContent = "";
  state.signupSessionId = null;
  hideSignupSessionBlock();
  document.querySelector("#courseSignupForm").reset();
}

function isValidMobile(phone) {
  return /^1[3-9]\d{9}$/.test(phone);
}

function tag(text, type = "") {
  return `<span class="tag ${type}">${escapeHtml(text)}</span>`;
}

function persistSignup(type) {
  if (type === "course") {
    localStorage.setItem("slakeSignedCourses", JSON.stringify(state.signedCourseIds));
  } else {
    localStorage.setItem("slakeSignedActivities", JSON.stringify(state.signedActivityIds));
  }
}

function getStatusByDate(dateText) {
  if (dateText === demoToday) return "进行中";
  if (dateText < demoToday) return "已结束";
  return "未开始";
}

function getCourseEndDate(course) {
  return course.endDate || course.date;
}

function getActivityEndDate(activity) {
  return activity.endDate || activity.date;
}

function isCourseOnDate(course, dateText) {
  return course.date <= dateText && dateText <= getCourseEndDate(course);
}

function isActivityOnDate(activity, dateText) {
  return activity.date <= dateText && dateText <= getActivityEndDate(activity);
}

function daysBetween(startText, endText) {
  const start = new Date(`${startText}T00:00:00`);
  const end = new Date(`${endText}T00:00:00`);
  return Math.round((end - start) / 86400000);
}

function getCourseStatus(course) {
  if (course.date <= demoToday && demoToday <= getCourseEndDate(course)) return "进行中";
  if (getCourseEndDate(course) < demoToday) return "已结束";
  return "未开始";
}

function getActivityStatus(activity) {
  if (activity.date <= demoToday && demoToday <= getActivityEndDate(activity)) return "进行中";
  if (getActivityEndDate(activity) < demoToday) return "已结束";
  return "未开始";
}

function statusTag(status) {
  const map = { "未开始": "blue", "进行中": "green", "已结束": "" };
  return tag(status, map[status] || "");
}

function statusClass(status) {
  const map = { "未开始": "pending", "进行中": "active", "已结束": "done" };
  return map[status] || "pending";
}

function coverClass(category) {
  if (category.includes("AI")) return "cover-ai";
  if (category.includes("材料")) return "cover-material";
  if (category.includes("机器人")) return "cover-robot";
  return "cover-transfer";
}

function sortByCourseTime(courses) {
  return [...courses].sort((a, b) => {
    const aTime = new Date(`${a.date} ${a.time.split("-")[0]}`.replace(/-/g, "/")).getTime();
    const bTime = new Date(`${b.date} ${b.time.split("-")[0]}`.replace(/-/g, "/")).getTime();
    return aTime - bTime;
  });
}

function sortByStatusThenTime(courses) {
  const order = { "进行中": 0, "未开始": 1, "已结束": 2 };
  return [...courses].sort((a, b) => {
    const statusDelta = order[getCourseStatus(a)] - order[getCourseStatus(b)];
    if (statusDelta) return statusDelta;
    const aTime = new Date(`${a.date} ${a.time.split("-")[0]}`.replace(/-/g, "/")).getTime();
    const bTime = new Date(`${b.date} ${b.time.split("-")[0]}`.replace(/-/g, "/")).getTime();
    return aTime - bTime;
  });
}

function renderHome() {
  const availableCourses = data.courses.filter((course) => getCourseStatus(course) !== "已结束");
  const hotCourses = sortByCourseTime(availableCourses).slice(0, 3).map(courseCard).join("");
  const latestCourses = sortByCourseTime(availableCourses).slice(0, 3).map(courseCard).join("");
  return `
    <section class="college-home">
      <div class="wechat-status">
        <span>09:11</span>
        <span class="status-icons status-svg" aria-hidden="true">
          <svg viewBox="0 0 94 22" width="62" height="15" role="img">
            <rect x="0" y="13" width="4" height="7" rx="1.5" fill="#111"></rect>
            <rect x="7" y="10" width="4" height="10" rx="1.5" fill="#111"></rect>
            <rect x="14" y="6" width="4" height="14" rx="1.5" fill="#111"></rect>
            <rect x="21" y="2" width="4" height="18" rx="1.5" fill="#111"></rect>
            <path d="M36 8.5c5.2-4.5 12.8-4.5 18 0" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round"></path>
            <path d="M40 13c2.9-2.4 7.1-2.4 10 0" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round"></path>
            <circle cx="45" cy="17.5" r="2.2" fill="#111"></circle>
            <rect x="63" y="5" width="25" height="13" rx="4" fill="none" stroke="#111" stroke-width="2"></rect>
            <rect x="66.5" y="8.5" width="14.5" height="6" rx="3" fill="#24c867"></rect>
            <path d="M75.5 5.8l-4.3 6.2h4l-3 5.6 7-7h-4.1l2.4-4.8z" fill="#ffdf4d" stroke="#111" stroke-width=".7" stroke-linejoin="round"></path>
            <rect x="89" y="9" width="3" height="5" rx="1.5" fill="#111"></rect>
          </svg>
        </span>
      </div>

      <div class="mini-nav">
        <div class="mini-title">${APP_BRAND_NAME}</div>
        <div class="mini-capsule">
          <span class="capsule-dot"><i></i><i></i><i></i></span>
          <span class="capsule-line"></span>
          <span class="capsule-circle"></span>
        </div>
      </div>

      <div class="college-hero">
        <button class="course-banner-v2" type="button" data-detail="course" data-id="1" aria-label="查看 AI科研成果转化闭门课详情">
          <div class="course-banner-main">
            <div class="course-banner-kicker">AI成果转化</div>
            <div class="course-banner-title">AI科研成果转化闭门课</div>
            <div class="course-banner-meta">
              <span>报名中</span>
              <i></i>
              <span>31/48人</span>
              <i></i>
              <span>6月12日 14:00</span>
            </div>
          </div>
          <div class="course-banner-visual" aria-hidden="true">
            <div class="campus-skyline">
              <span></span><span></span><span></span><span></span>
            </div>
            <div class="ai-chip"></div>
            <div class="radar-path"></div>
            <div class="visual-dot dot-one"></div>
            <div class="visual-dot dot-two"></div>
            <div class="visual-dot dot-three"></div>
          </div>
        </button>
        <div class="slider-count">
          <span class="slider-dot active"></span>
          <span class="slider-dot"></span>
          <span class="slider-dot"></span>
        </div>
      </div>

      <div class="home-content">
        <section class="home-quick-grid">
          ${serviceItem("course", "课程列表", "", "courses")}
          ${serviceItem("activity", "活动列表", "", "activities")}
          ${serviceItem("calendar", "课程日历", "", "calendar")}
        </section>

        <section class="section">
          <div class="section-head feature-section-head">
            <div class="section-title-group">
              <h2 class="section-title">热门课程</h2>
            </div>
            <button class="section-more" data-go="courses" type="button">全部</button>
          </div>
          <div class="stack">${hotCourses}</div>
        </section>

        <section class="section">
          <div class="section-head feature-section-head">
            <div class="section-title-group">
              <h2 class="section-title">最新课程</h2>
            </div>
            <button class="section-more" data-go="courses" type="button">全部</button>
          </div>
          <div class="stack">${latestCourses}</div>
        </section>
      </div>
    </section>
  `;
}

function renderCalendarCells() {
  const [year, month] = state.calendarMonth.split("-").map(Number);
  const first = new Date(year, month - 1, 1);
  const start = new Date(year, month - 1, 1 - first.getDay());
  const cells = Array.from({ length: 35 }, (_, index) => {
    const date = new Date(start);
    date.setDate(start.getDate() + index);
    const dateText = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
    return {
      day: String(date.getDate()),
      dateText,
      muted: date.getMonth() !== month - 1,
      past: dateText < demoToday,
      courses: data.courses.filter((item) => isCourseOnDate(item, dateText))
    };
  });

  return cells.map((cell, index) => {
    const weekStart = cells[Math.floor(index / 7) * 7].dateText;
    const weekEnd = cells[Math.floor(index / 7) * 7 + 6].dateText;
    const event = cell.courses.map((course) => {
      const visibleStart = course.date > weekStart ? course.date : weekStart;
      if (cell.dateText !== visibleStart) return "";
      const visibleEnd = getCourseEndDate(course) < weekEnd ? getCourseEndDate(course) : weekEnd;
      const spanDays = daysBetween(visibleStart, visibleEnd) + 1;
      return `<div class="calendar-event ${statusClass(getCourseStatus(course))} span-event" style="--span-days:${spanDays}">${escapeHtml(course.title)}</div>`;
    }).join("");
    const hasCourse = cell.courses.length > 0;
    const signedMark = cell.courses.some((course) => state.signedCourseIds.includes(course.id))
      ? `<i class="signed-check" aria-hidden="true"></i>`
      : "";
    return `
      <button
        class="date-cell ${cell.muted ? "prev-month" : ""} ${cell.past ? "past-date" : ""} ${hasCourse ? "has-course" : "no-course"} ${hasCourse && cell.dateText === state.selectedDate ? "selected" : ""}"
        ${hasCourse ? `data-date="${cell.dateText}"` : "disabled"}
        type="button"
      >
        <span>${cell.day}</span>
        ${signedMark}
        ${event}
      </button>
    `;
  }).join("");
}

function renderCourseCalendarBlock() {
  const isMinMonth = state.calendarMonth <= minCalendarMonth;
  return `
    <section class="college-calendar inline-calendar">
      <div class="month-bar">
        <button type="button" ${isMinMonth ? "disabled" : 'data-month="-1"'}>‹</button>
        <span>${escapeHtml(state.calendarMonth.replace("-", "年"))}月</span>
        <button type="button" data-month="1">›</button>
      </div>
      <div class="calendar-legend">
        <span><i class="legend-dot pending"></i>未开始</span>
        <span><i class="legend-dot active"></i>进行中</span>
        <span><i class="legend-dot done"></i>已结束</span>
      </div>
      <div class="week-grid">
        <span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
      </div>
      <div class="date-grid" data-calendar-grid>
        ${renderCalendarCells()}
      </div>
    </section>
  `;
}

function renderActivityCalendarCells() {
  const [year, month] = state.activityCalendarMonth.split("-").map(Number);
  const first = new Date(year, month - 1, 1);
  const start = new Date(year, month - 1, 1 - first.getDay());
  const cells = Array.from({ length: 35 }, (_, index) => {
    const date = new Date(start);
    date.setDate(start.getDate() + index);
    const dateText = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
    return {
      day: String(date.getDate()),
      dateText,
      muted: date.getMonth() !== month - 1,
      past: dateText < demoToday,
      activities: data.activities.filter((item) => isActivityOnDate(item, dateText))
    };
  });

  return cells.map((cell, index) => {
    const weekStart = cells[Math.floor(index / 7) * 7].dateText;
    const weekEnd = cells[Math.floor(index / 7) * 7 + 6].dateText;
    const hasActivity = cell.activities.length > 0;
    const event = cell.activities.map((activity) => {
      const visibleStart = activity.date > weekStart ? activity.date : weekStart;
      if (cell.dateText !== visibleStart) return "";
      const visibleEnd = getActivityEndDate(activity) < weekEnd ? getActivityEndDate(activity) : weekEnd;
      const spanDays = daysBetween(visibleStart, visibleEnd) + 1;
      return `<div class="calendar-event ${statusClass(getActivityStatus(activity))} span-event" style="--span-days:${spanDays}">${escapeHtml(activity.title)}</div>`;
    }).join("");
    const signedMark = cell.activities.some((activity) => state.signedActivityIds.includes(activity.id))
      ? `<i class="signed-check" aria-hidden="true"></i>`
      : "";
    return `
      <button
        class="date-cell ${cell.muted ? "prev-month" : ""} ${cell.past ? "past-date" : ""} ${hasActivity ? "has-course" : "no-course"}"
        ${hasActivity ? `data-activity-date="${cell.dateText}"` : "disabled"}
        type="button"
      >
        <span>${cell.day}</span>
        ${signedMark}
        ${event}
      </button>
    `;
  }).join("");
}

function renderActivityCalendarBlock() {
  const isMinMonth = state.activityCalendarMonth <= minCalendarMonth;
  return `
    <section class="college-calendar inline-calendar">
      <div class="month-bar">
        <button type="button" ${isMinMonth ? "disabled" : 'data-activity-month="-1"'}>‹</button>
        <span>${escapeHtml(state.activityCalendarMonth.replace("-", "年"))}月</span>
        <button type="button" data-activity-month="1">›</button>
      </div>
      <div class="calendar-legend">
        <span><i class="legend-dot pending"></i>未开始</span>
        <span><i class="legend-dot active"></i>进行中</span>
        <span><i class="legend-dot done"></i>已结束</span>
      </div>
      <div class="week-grid">
        <span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
      </div>
      <div class="date-grid" data-calendar-grid>
        ${renderActivityCalendarCells()}
      </div>
    </section>
  `;
}

function serviceItem(icon, titleText, desc, route) {
  return `
    <button class="service-item" data-go="${route}">
      <div class="icon-box">${serviceIcon(icon)}</div>
      <div class="service-main">${escapeHtml(titleText)}</div>
      ${desc ? `<div class="service-sub">${escapeHtml(desc)}</div>` : ""}
    </button>
  `;
}

function serviceIcon(icon) {
  const icons = {
    course: `
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M5.5 5.8c0-1 0.8-1.8 1.8-1.8H18c0.6 0 1 .4 1 1v13.2c0 .6-.4 1-1 1H7.3c-1 0-1.8-.8-1.8-1.8V5.8Z"></path>
        <path d="M8.2 7.2h7.4M8.2 10.2h6.2M7.4 16.4H19"></path>
      </svg>
    `,
    activity: `
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M7 14.2c2.3-3.8 4.5-5.7 7.2-6.6l2.8-.9-.9 2.8c-.9 2.7-2.8 4.9-6.6 7.2L7 14.2Z"></path>
        <path d="M7.2 14.5 5 19l4.5-2.2M13.8 7.8l2.4 2.4"></path>
      </svg>
    `,
    calendar: `
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M6.5 5.5h11c.8 0 1.5.7 1.5 1.5v10.5c0 .8-.7 1.5-1.5 1.5h-11c-.8 0-1.5-.7-1.5-1.5V7c0-.8.7-1.5 1.5-1.5Z"></path>
        <path d="M8 4v3M16 4v3M5 9h14M8.2 12.4h2.2M13.6 12.4h2.2M8.2 15.6h2.2M13.6 15.6h2.2"></path>
      </svg>
    `
  };
  return icons[icon] || "";
}

function courseCard(item) {
  const status = getCourseStatus(item);
  const signed = state.signedCourseIds.includes(item.id);
  return `
    <article class="card course-card" data-detail="course" data-id="${item.id}">
      <div class="course-body">
        <div class="course-card-top">
          <div>
            <div class="course-category-inline">${escapeHtml(item.category)}</div>
            <div class="item-title">${escapeHtml(item.title)}</div>
          </div>
          ${statusTag(status)}
        </div>
        <div class="course-foot">
          <div class="course-foot-info">
            <span>${escapeHtml(item.date)} ${escapeHtml(item.time)}</span>
            <span>${escapeHtml(item.location)}</span>
            <span>${escapeHtml(item.teacher)} · ${escapeHtml(item.university)}</span>
          </div>
          <div class="course-foot-action">
            <div class="seat-count"><span class="seat-signed">${item.signed}</span><span class="seat-divider"></span><span class="seat-total">${item.seats}</span><span class="seat-unit">人</span></div>
            ${canShowCourseSignupButton(item) ? `<button class="signup-text-btn" data-signup-course="${item.id}" type="button">我要报名</button>` : ""}
          </div>
        </div>
      </div>
    </article>
  `;
}

function renderCourses() {
  const categories = ["全部", ...new Set(data.courses.map((course) => course.category).filter((category) => category !== "机器人"))];
  const active = state.params.category || "全部";
  const activeStatus = state.params.courseStatus || "";
  const keyword = state.params.keyword || "";
  const courses = (active === "全部" ? data.courses : data.courses.filter((course) => course.category === active))
    .filter((course) => {
      const status = getCourseStatus(course);
      const matchStatus = activeStatus ? status === activeStatus : status !== "已结束";
      const matchKeyword = !keyword || `${course.title}${course.teacher}${course.location}`.includes(keyword);
      return matchStatus && matchKeyword;
    });
  const sortedCourses = sortByStatusThenTime(courses);
  const statuses = ["进行中", "未开始", "已结束"];
  return `
    <form class="search-form" id="courseSearchForm">
      <input class="input" name="keyword" placeholder="搜索课程名称、讲师、地点" value="${escapeHtml(keyword)}">
      <button class="btn btn-primary" type="submit">搜索</button>
      <button class="btn btn-calendar" data-go="calendar" type="button">课程日历</button>
    </form>
    <div class="filter-bar">
      ${categories.map((item) => `<button class="filter ${item === active ? "active" : ""}" data-category="${escapeHtml(item)}">${escapeHtml(item)}</button>`).join("")}
    </div>
    <div class="filter-bar status-filter">
      ${statuses.map((item) => `<button class="filter ${item === activeStatus ? "active" : ""}" data-course-status="${escapeHtml(item)}">${escapeHtml(item)}</button>`).join("")}
    </div>
    <div class="stack">${sortedCourses.map(courseCard).join("")}</div>
  `;
}

function renderMyCourses() {
  const signed = data.courses.filter((item) => state.signedCourseIds.includes(item.id));
  const statuses = ["全部", "未开始", "进行中", "已结束"];
  const activeStatus = statuses.includes(state.params.myCourseStatus) ? state.params.myCourseStatus : "全部";
  const courses = activeStatus === "全部" ? signed : signed.filter((item) => getCourseStatus(item) === activeStatus);
  return `
    <div class="filter-bar status-filter my-status-filter">
      ${statuses.map((item) => `<button class="filter ${item === activeStatus ? "active" : ""}" data-my-course-status="${escapeHtml(item)}">${escapeHtml(item)}</button>`).join("")}
    </div>
    <div class="stack">
      ${courses.length ? courses.map((item) => `
        <article class="card course-card" data-detail="course" data-id="${item.id}">
          <div class="course-body">
            <div class="course-card-top">
              <div>
                <div class="course-category-inline">${escapeHtml(item.category)}</div>
                <div class="item-title">${escapeHtml(item.title)}</div>
              </div>
              ${statusTag(getCourseStatus(item))}
            </div>
            <div class="course-foot">
              <div class="course-foot-info">
                <span>${escapeHtml(item.date)} ${escapeHtml(item.time)}</span>
                <span>${escapeHtml(item.location)}</span>
                <span>${escapeHtml(item.teacher)} · ${escapeHtml(item.university)}</span>
              </div>
            </div>
          </div>
        </article>
      `).join("") : `<div class="empty">暂无${activeStatus === "全部" ? "已报名" : activeStatus}课程</div>`}
    </div>
  `;
}

function renderCourseDetailSignupButton(item) {
  if (state.signedCourseIds.includes(item.id)) {
    return `<button class="btn detail-signup-btn detail-signed-btn" type="button" disabled>已报名</button>`;
  }
  if (!isCourseSignupOpen(item)) {
    return "";
  }
  return `<button class="btn btn-primary detail-signup-btn" data-signup-course="${item.id}" type="button">我要报名</button>`;
}

function renderCourseDetail() {
  const item = findById(data.courses, state.params.id);
  if (!item) return `<div class="empty">课程不存在</div>`;
  const signupButton = renderCourseDetailSignupButton(item);

  if (item.promoUrl) {
    return `
      <div class="course-detail-page course-detail-promo">
        <article class="card detail-head course-promo-head">
          <h1 class="course-detail-title">${escapeHtml(item.title)}</h1>
        </article>
        <div class="course-promo-image-wrap">
          <img class="course-promo-image" src="${escapeHtml(item.promoUrl)}" alt="${escapeHtml(item.title)}">
        </div>
        ${signupButton}
      </div>
    `;
  }

  return `
    <div class="course-detail-page">
      <article class="card detail-head">
        <h1 class="course-detail-title">${escapeHtml(item.title)}</h1>
        <div class="course-cover compact ${coverClass(item.category)}">
          <img src="assets/course-detail-banner.svg" alt="" aria-hidden="true">
        </div>
        <div class="detail-summary">${escapeHtml(item.summary)}</div>
      </article>

      <section class="card section detail-module">
        <h2 class="section-title">课程安排</h2>
        <div class="course-schedule">
          ${scheduleItem("时间", `${item.date} ${item.time}`)}
          ${scheduleItem("地点", item.location)}
          ${scheduleItem("名额", `${item.signed}/${item.seats} 人`)}
          ${item.signupEndDate ? scheduleItem("报名截止", item.signupEndDate) : ""}
        </div>
      </section>

      <section class="card section detail-module">
        <h2 class="section-title">主讲师资</h2>
        <div class="teacher-card">
          <div class="teacher-name">${escapeHtml(item.teacher)}</div>
          <div class="teacher-meta">${escapeHtml(item.university)}</div>
          <div class="teacher-desc">长期关注${escapeHtml(item.category)}方向科研成果转化与产业应用。</div>
        </div>
      </section>

      <section class="card section detail-module">
        <h2 class="section-title">招生对象</h2>
        <div class="agenda-list">
          ${(item.audience || []).map((audience) => `<div class="agenda-item">${escapeHtml(audience)}</div>`).join("")}
        </div>
      </section>
      ${signupButton}
    </div>
  `;
}

function infoRow(label, value) {
  return `<div class="info-row"><span>${escapeHtml(label)}</span><span>${escapeHtml(value)}</span></div>`;
}

function scheduleItem(label, value) {
  return `<div class="schedule-item">${escapeHtml(label)}：${escapeHtml(value)}</div>`;
}

function renderActivities() {
  const categories = ["全部", "路演对接", "伙伴交流", "产业需求"];
  const active = state.params.activityCategory || "全部";
  const activeStatus = state.params.activityStatus || "";
  const keyword = state.params.activityKeyword || "";
  const activities = data.activities.filter((item) => {
    const matchCategory = active === "全部" || item.title.includes(active.replace("交流", ""));
    const status = getActivityStatus(item);
    const matchStatus = activeStatus ? status === activeStatus : true;
    const matchKeyword = !keyword || `${item.title}${item.location}${item.summary}`.includes(keyword);
    return matchCategory && matchStatus && matchKeyword;
  });
  const statuses = ["未开始", "进行中", "已结束"];
  return `
    <form class="search-form" id="activitySearchForm">
      <input class="input" name="keyword" placeholder="搜索活动名称、地点" value="${escapeHtml(keyword)}">
      <button class="btn btn-primary" type="submit">搜索</button>
      <button class="btn btn-calendar" data-go="activityCalendar" type="button">活动日历</button>
    </form>
    <div class="filter-bar">
      ${categories.map((item) => `<button class="filter ${item === active ? "active" : ""}" data-activity-category="${escapeHtml(item)}">${escapeHtml(item)}</button>`).join("")}
    </div>
    <div class="filter-bar status-filter">
      ${statuses.map((item) => `<button class="filter ${item === activeStatus ? "active" : ""}" data-activity-status="${escapeHtml(item)}">${escapeHtml(item)}</button>`).join("")}
    </div>
    <div class="stack">${activities.map(activityCard).join("")}</div>
  `;
}

function renderMyActivities() {
  const signed = data.activities.filter((item) => state.signedActivityIds.includes(item.id));
  const statuses = ["全部", "未开始", "进行中", "已结束"];
  const activeStatus = statuses.includes(state.params.myActivityStatus) ? state.params.myActivityStatus : "全部";
  const activities = activeStatus === "全部" ? signed : signed.filter((item) => getActivityStatus(item) === activeStatus);
  return `
    <div class="filter-bar status-filter my-status-filter">
      ${statuses.map((item) => `<button class="filter ${item === activeStatus ? "active" : ""}" data-my-activity-status="${escapeHtml(item)}">${escapeHtml(item)}</button>`).join("")}
    </div>
    <div class="stack">
      ${activities.length ? activities.map((item) => `
        <article class="card" data-detail="activity" data-id="${item.id}">
          <div class="course-card-top">
            <div>
              <div class="item-title">${escapeHtml(item.title)}</div>
            </div>
            ${statusTag(getActivityStatus(item))}
          </div>
          <div class="summary">${escapeHtml(item.summary)}</div>
          <div class="meta">${escapeHtml(item.date)} ${escapeHtml(item.time)} · ${escapeHtml(item.location)}</div>
        </article>
      `).join("") : `<div class="empty">暂无${activeStatus === "全部" ? "已报名" : activeStatus}活动</div>`}
    </div>
  `;
}

function activityCard(item) {
  const status = getActivityDisplayStatus(item);
  const statusTagHtml = status === "报名中" ? tag(status, "brand") : statusTag(status);
  return `
    <article class="card" data-detail="activity" data-id="${item.id}">
      <div class="row between">
        <span></span>
        ${statusTagHtml}
      </div>
      <div class="title">${escapeHtml(item.title)}</div>
      <div class="summary">${escapeHtml(item.summary)}</div>
      <div class="meta">${escapeHtml(item.date)} ${escapeHtml(item.time)} · ${escapeHtml(item.location)}</div>
      ${canShowActivitySignupButton(item) ? `<button class="signup-text-btn activity-signup-link" data-signup-activity="${item.id}" type="button">我要报名</button>` : ""}
    </article>
  `;
}

function renderActivityDetailSignupButton(item) {
  if (state.signedActivityIds.includes(item.id)) {
    return `<button class="btn detail-signup-btn detail-signed-btn" type="button" disabled>已报名</button>`;
  }
  if (!isActivitySignupOpen(item)) {
    return "";
  }
  return `<button class="btn btn-primary detail-signup-btn" data-signup-activity="${item.id}" type="button">我要报名</button>`;
}

function renderActivityDetail() {
  const item = findById(data.activities, state.params.id);
  if (!item) return `<div class="empty">活动不存在</div>`;
  const status = getActivityDisplayStatus(item);
  const signupButton = renderActivityDetailSignupButton(item);
  const sessions = (item.sessions || []).map((session) => {
    const full = !hasSessionCapacity(session);
    return `
      <div class="agenda-item">
        <strong>${escapeHtml(session.title)}</strong>
        <div>${escapeHtml(session.date)} ${escapeHtml(session.time)} · ${escapeHtml(session.venue)}</div>
        <div>${full ? "名额已满" : `剩余 ${Math.max(Number(session.capacity) - Number(session.signed), 0)} / ${session.capacity} 人`}</div>
      </div>
    `;
  }).join("");
  return `
    <article class="card detail-head">
      ${status === "报名中" ? tag(status, "brand") : statusTag(status)}
      <div class="detail-title">${escapeHtml(item.title)}</div>
      <div class="summary">${escapeHtml(item.summary)}</div>
    </article>
    <section class="card section">
      ${infoRow("日期", item.date)}
      ${infoRow("时间", item.time)}
      ${infoRow("地点", item.location)}
      ${item.signupEndDate ? infoRow("报名截止", item.signupEndDate) : ""}
    </section>
    ${sessions ? `<section class="card section detail-module"><h2 class="section-title">活动场次</h2><div class="agenda-list">${sessions}</div></section>` : ""}
    ${signupButton}
  `;
}

function newsCard(item) {
  return `
    <article class="card news-list-card" data-detail="news" data-id="${item.id}">
      <div class="news-list-row">
        <div class="news-list-main">
          <span class="news-list-tag">${escapeHtml(item.tag)}</span>
          <span class="news-list-title">${escapeHtml(item.title)}</span>
        </div>
      </div>
      <div class="news-list-date">${escapeHtml(item.date)}</div>
    </article>
  `;
}

function renderDiscover() {
  const categories = ["全部", "行业动态", "政策信息", "平台动态"];
  const active = state.params.newsCategory || "全部";
  const news = data.news.filter((item) => active === "全部" || item.tag === active);
  return `
    <div class="filter-bar">
      ${categories.map((item) => `<button class="filter ${item === active ? "active" : ""}" data-news-category="${escapeHtml(item)}">${escapeHtml(item)}</button>`).join("")}
    </div>
    <div class="stack">${news.map(newsCard).join("")}</div>
  `;
}

function renderNewsDetail() {
  const item = findById(data.news, state.params.id);
  if (!item) return `<div class="empty">资讯不存在</div>`;
  return `
    <article class="card news-detail-card">
      <h1 class="news-detail-title">${escapeHtml(item.title)}</h1>
      <div class="news-detail-date">${escapeHtml(item.date)}</div>
      <p class="news-detail-content">${escapeHtml(item.content)}</p>
    </article>
  `;
}

function renderCalendar() {
  return renderCourseCalendarBlock();
}

function renderActivityCalendar() {
  return renderActivityCalendarBlock();
}

function renderDemands() {
  return `
    <div class="section-head">
      <div>
        <h2 class="section-title">伙伴需求</h2>
        <div class="muted small" style="margin-top:5px">正式伙伴可提交技术、产业、资金等协作需求</div>
      </div>
      <button class="section-more" data-go="demandCreate" type="button">发布</button>
    </div>
    ${state.demands.length ? `<div class="stack">${state.demands.map(demandCard).join("")}</div>` : `<div class="empty">暂无需求</div>`}
  `;
}

function demandCard(item) {
  return `
    <article class="card">
      <div class="row between">${tag(item.type, "brand")}${tag(item.status)}</div>
      <div class="title">${escapeHtml(item.title)}</div>
      <div class="summary">${escapeHtml(item.description)}</div>
      <div class="muted small" style="margin-top:10px">${escapeHtml(item.date)}</div>
    </article>
  `;
}

function renderDemandCreate() {
  return `
    <form class="card" id="demandForm">
      <div class="field">
        <label class="form-label required" for="type">需求类型</label>
        <select class="select" id="type" name="type" required>
          <option value="">请选择</option>
          <option>资金对接</option>
          <option>招聘</option>
          <option>财法咨询</option>
          <option>场地空间</option>
          <option>技术合作</option>
          <option>其他</option>
        </select>
      </div>
      <div class="field">
        <label class="form-label required" for="demandTitle">需求标题</label>
        <input class="input" id="demandTitle" name="title" maxlength="40" required>
      </div>
      <div class="field">
        <label class="form-label required" for="description">需求描述</label>
        <textarea class="textarea" id="description" name="description" maxlength="300" required></textarea>
      </div>
      <button class="btn btn-primary" style="margin-top:18px" type="submit">提交需求</button>
    </form>
  `;
}

function renderProfile() {
  const user = state.user || {};
  const profile = state.profile || {};
  const isPartner = state.user ? Boolean(state.user.isPartner) : true;
  const displayName = profile.name || user.nickName || "王清萍";
  return `
    <section class="profile-hero-card">
      <div class="profile-hero-main">
        <div class="profile-avatar-upload">
          <img src="${escapeHtml(profileAvatarSrc())}" alt="王清萍头像">
        </div>
        <div class="profile-name-group">
          <div class="profile-name-line">${escapeHtml(displayName)}</div>
        </div>
      </div>
    </section>
    <section class="profile-menu-panel">
      ${menuItem("个人资料", "profileEdit", "profile")}
      ${menuItem("我的课程", "myCourses", "course")}
      ${menuItem("我的活动", "myActivities", "activity")}
      ${isPartner ? menuItem("需求发布", "demandCreate", "demand") : ""}
    </section>
  `;
}

function renderProfileEdit() {
  const profile = state.profile || {};
  return `
    <form class="card signup-form" id="profileForm">
      <label class="avatar large profile-edit-avatar" for="profileAvatarInput">
        <img id="profileAvatarPreview" src="${escapeHtml(profileAvatarSrc())}" alt="王清萍头像">
      </label>
      <input class="profile-avatar-input" id="profileAvatarInput" type="file" accept="image/*" capture="environment">
      <input class="input" name="name" placeholder="姓名" value="${escapeHtml(profile.name || "王清萍")}">
      <input class="input" name="company" placeholder="公司" value="${escapeHtml(profile.company || "")}">
      <input class="input" name="title" placeholder="职务" value="${escapeHtml(profile.title || "")}">
      <textarea class="textarea" name="research" placeholder="研究方向">${escapeHtml(profile.research || "")}</textarea>
      <button class="btn btn-primary" type="submit">保存资料</button>
    </form>
  `;
}

function renderAbout() {
  return `
    <article class="card">
      <h2 class="section-title">关于我们</h2>
      <p class="summary">高校雷达网用于连接高校科研人才、课程活动与产业资源，帮助政企与高校团队更高效地完成成果转化对接。</p>
      ${infoRow("联系电话", "0512-0000 0000")}
      ${infoRow("联系邮箱", "service@example.com")}
      ${infoRow("用户协议", "演示版本")}
      ${infoRow("隐私政策", "演示版本")}
    </article>
  `;
}

function profileMenuIcon(type) {
  const icons = {
    profile: "M7 5.5h10v13H7z M9.4 9h5.2 M9.4 12h5.2 M9.4 15h3.2",
    course: "M6 6.5c1.8-.9 3.7-.9 5.5 0v11c-1.8-.9-3.7-.9-5.5 0v-11z M12.5 6.5c1.8-.9 3.7-.9 5.5 0v11c-1.8-.9-3.7-.9-5.5 0v-11z",
    activity: "M7 5.5h10v13H7z M9 4v3 M15 4v3 M7 9h10 M10 12h4 M10 15h3",
    demand: "M12 5.5l1.8 3.7 4.1.6-3 2.9.7 4.1-3.6-1.9-3.6 1.9.7-4.1-3-2.9 4.1-.6L12 5.5z",
    star: "M12 5.4l1.9 3.8 4.2.6-3 2.9.7 4.2-3.8-2-3.8 2 .7-4.2-3-2.9 4.2-.6L12 5.4z",
    contact: "M7 15.5v-3.2a5 5 0 0 1 10 0v3.2 M7 15.5h2v2H7z M15 15.5h2v2h-2z M9 18.5h6"
  };
  return `
    <span class="menu-icon" aria-hidden="true">
      <svg viewBox="0 0 24 24"><path d="${icons[type] || icons.profile}"></path></svg>
    </span>
  `;
}

function menuItem(label, route, icon = "profile") {
  return `
    <button class="menu-item" data-go="${route}">
      ${profileMenuIcon(icon)}
      <span class="menu-copy">${escapeHtml(label)}</span>
      <span class="arrow">›</span>
    </button>
  `;
}

function renderLogin() {
  return `
    <section class="login-page">
      <div>
        <div class="brand-mark">S</div>
        <div class="brand-title">${APP_BRAND_NAME}</div>
        <div class="brand-subtitle">连接长三角高校科研人才、课程活动与产业伙伴需求</div>
      </div>
      <div class="card">
        <h2 class="section-title">登录演示</h2>
        <div class="muted" style="margin-top:10px;font-size:14px;line-height:1.6">纯 HTML 版本不调用微信授权，点击后写入本地演示身份。</div>
        <button class="btn btn-primary" style="margin-top:18px" data-auth="login">一键登录</button>
      </div>
    </section>
  `;
}

function formatDate(dateText) {
  const date = new Date(dateText.replace(/-/g, "/"));
  return `${String(date.getMonth() + 1).padStart(2, "0")}.${String(date.getDate()).padStart(2, "0")}`;
}

function formatWeekday(dateText) {
  return ["周日", "周一", "周二", "周三", "周四", "周五", "周六"][new Date(dateText.replace(/-/g, "/")).getDay()];
}

const titles = {
  home: APP_BRAND_NAME,
  courses: "课程学习",
  courseDetail: "课程详情",
  myCourses: "我的课程",
  activities: "活动参与",
  activityDetail: "活动详情",
  myActivities: "我的活动",
  activityCalendar: "活动日历",
  discover: "发现",
  newsDetail: "资讯详情",
  calendar: "课程日历",
  demands: "伙伴需求",
  demandCreate: "发布需求",
  profile: "我的",
  profileEdit: "个人资料",
  about: "关于我们",
  login: "登录"
};

const tabRoutes = ["home", "courses", "activities", "discover", "profile"];
const tabActiveRoute = {
  courseDetail: "courses",
  myCourses: "profile",
  calendar: "courses",
  activityDetail: "activities",
  myActivities: "profile",
  activityCalendar: "activities",
  newsDetail: "discover",
  demands: "profile",
  demandCreate: "profile",
  profileEdit: "profile",
  about: "profile",
  login: "profile"
};

function render() {
  const route = state.route;
  document.body.dataset.route = route;
  document.body.classList.toggle("home-route", route === "home");
  title.textContent = titles[route] || APP_BRAND_NAME;
  backBtn.classList.toggle("visible", !tabRoutes.includes(route));
  tabbar.style.display = "flex";
  topAction.textContent = state.user ? "已登录" : "登录";
  const activeTab = tabActiveRoute[route] || route;

  document.querySelectorAll(".tab-item").forEach((item) => {
    item.classList.toggle("active", item.dataset.route === activeTab);
  });

  const views = {
    home: renderHome,
    courses: renderCourses,
    courseDetail: renderCourseDetail,
    myCourses: renderMyCourses,
    activities: renderActivities,
    activityDetail: renderActivityDetail,
    myActivities: renderMyActivities,
    activityCalendar: renderActivityCalendar,
    discover: renderDiscover,
    newsDetail: renderNewsDetail,
    calendar: renderCalendar,
    demands: renderDemands,
    demandCreate: renderDemandCreate,
    profile: renderProfile,
    profileEdit: renderProfileEdit,
    about: renderAbout,
    login: renderLogin
  };

  app.innerHTML = (views[route] || renderHome)();
  app.scrollTop = 0;
  window.scrollTo({ top: 0, behavior: "auto" });
}

function parseHash() {
  const [route = "home", id] = location.hash.replace(/^#/, "").split("/");
  replaceRoute(route || "home", id ? { id } : {});
}

document.addEventListener("click", (event) => {
  const goEl = event.target.closest("[data-go]");
  if (goEl) {
    go(goEl.dataset.go);
    return;
  }

  const signupCourseEl = event.target.closest("[data-signup-course]");
  if (signupCourseEl) {
    event.stopPropagation();
    const id = Number(signupCourseEl.dataset.signupCourse);
    openCourseSignup(id);
    return;
  }

  const sessionEl = event.target.closest("[data-session-id]");
  if (sessionEl && !sessionEl.disabled) {
    state.signupSessionId = Number(sessionEl.dataset.sessionId);
    const activity = findById(data.activities, Number(signupCourseId.value));
    if (activity) renderSignupSessionOptions(activity);
    const err = document.querySelector("#signupSessionError");
    if (err) err.textContent = "";
    return;
  }

  if (event.target.closest("[data-close-signup]") || event.target === courseSignupModal) {
    closeCourseSignup();
    return;
  }

  if (event.target.closest("[data-close-success]") || event.target === signupSuccessModal) {
    closeSignupSuccess();
    return;
  }

  const signupActivityEl = event.target.closest("[data-signup-activity]");
  if (signupActivityEl) {
    event.stopPropagation();
    const id = Number(signupActivityEl.dataset.signupActivity);
    openActivitySignup(id);
    return;
  }

  const detailEl = event.target.closest("[data-detail]");
  if (detailEl) {
    const map = {
      course: "courseDetail",
      activity: "activityDetail",
      news: "newsDetail"
    };
    go(map[detailEl.dataset.detail], { id: detailEl.dataset.id });
    return;
  }

  const categoryEl = event.target.closest("[data-category]");
  if (categoryEl) {
    state.params.category = categoryEl.dataset.category;
    render();
    return;
  }

  const courseStatusEl = event.target.closest("[data-course-status]");
  if (courseStatusEl) {
    const status = courseStatusEl.dataset.courseStatus;
    state.params.courseStatus = state.params.courseStatus === status ? "" : status;
    render();
    return;
  }

  const myCourseStatusEl = event.target.closest("[data-my-course-status]");
  if (myCourseStatusEl) {
    state.params.myCourseStatus = myCourseStatusEl.dataset.myCourseStatus;
    render();
    return;
  }

  const activityCategoryEl = event.target.closest("[data-activity-category]");
  if (activityCategoryEl) {
    state.params.activityCategory = activityCategoryEl.dataset.activityCategory;
    render();
    return;
  }

  const activityStatusEl = event.target.closest("[data-activity-status]");
  if (activityStatusEl) {
    const status = activityStatusEl.dataset.activityStatus;
    state.params.activityStatus = state.params.activityStatus === status ? "" : status;
    render();
    return;
  }

  const myActivityStatusEl = event.target.closest("[data-my-activity-status]");
  if (myActivityStatusEl) {
    state.params.myActivityStatus = myActivityStatusEl.dataset.myActivityStatus;
    render();
    return;
  }

  const newsCategoryEl = event.target.closest("[data-news-category]");
  if (newsCategoryEl) {
    state.params.newsCategory = newsCategoryEl.dataset.newsCategory;
    render();
    return;
  }

  const monthEl = event.target.closest("[data-month]");
  if (monthEl) {
    const [year, month] = state.calendarMonth.split("-").map(Number);
    const next = new Date(year, month - 1 + Number(monthEl.dataset.month), 1);
    const nextMonth = `${next.getFullYear()}-${String(next.getMonth() + 1).padStart(2, "0")}`;
    if (nextMonth < minCalendarMonth) return;
    state.calendarMonth = nextMonth;
    state.selectedDate = `${state.calendarMonth}-01`;
    render();
    return;
  }

  const activityMonthEl = event.target.closest("[data-activity-month]");
  if (activityMonthEl) {
    const [year, month] = state.activityCalendarMonth.split("-").map(Number);
    const next = new Date(year, month - 1 + Number(activityMonthEl.dataset.activityMonth), 1);
    const nextMonth = `${next.getFullYear()}-${String(next.getMonth() + 1).padStart(2, "0")}`;
    if (nextMonth < minCalendarMonth) return;
    state.activityCalendarMonth = nextMonth;
    render();
    return;
  }

  const dateEl = event.target.closest("[data-date]");
  if (dateEl) {
    state.selectedDate = dateEl.dataset.date;
    const dayCourse = data.courses.find((item) => isCourseOnDate(item, state.selectedDate));
    if (dayCourse) go("courseDetail", { id: dayCourse.id });
    return;
  }

  const activityDateEl = event.target.closest("[data-activity-date]");
  if (activityDateEl) {
    const dayActivity = data.activities.find((item) => isActivityOnDate(item, activityDateEl.dataset.activityDate));
    if (dayActivity) go("activityDetail", { id: dayActivity.id });
    return;
  }

  const signupEl = event.target.closest("[data-signup]");
  if (signupEl) {
    openSignupSuccess(signupEl.dataset.signup === "activity" ? "活动已同步到你的活动日程" : "课程已同步到你的课程日程");
    return;
  }

  const checkinEl = event.target.closest("[data-checkin]");
  if (checkinEl) {
    toast("签到成功");
    return;
  }

  const authEl = event.target.closest("[data-auth]");
  if (authEl) {
    if (authEl.dataset.auth === "logout") {
      state.user = null;
      localStorage.removeItem("slakeUser");
      toast("已退出登录");
      render();
      return;
    }

    state.user = {
      nickName: "高校伙伴",
      role: "正式伙伴",
      isPartner: true,
      openId: "mock-openid",
      unionId: "mock-unionid",
      organization: "S-lake 先进技术发展中心"
    };
    localStorage.setItem("slakeUser", JSON.stringify(state.user));
    toast("登录成功");
    go("profile");
  }
});

document.addEventListener("input", (event) => {
  if (event.target.matches("#courseSignupForm [name='phone']")) {
    signupPhoneError.textContent = "";
  }
});

document.addEventListener("change", (event) => {
  if (!event.target.matches("#profileAvatarInput")) return;
  const [file] = event.target.files || [];
  if (!file || !file.type.startsWith("image/")) return;
  const reader = new FileReader();
  reader.addEventListener("load", () => {
    state.profile = {
      ...(state.profile || {}),
      avatar: String(reader.result || "")
    };
    const preview = document.querySelector("#profileAvatarPreview");
    if (preview) preview.src = state.profile.avatar;
  });
  reader.readAsDataURL(file);
});

document.addEventListener("submit", (event) => {
  event.preventDefault();
  const form = new FormData(event.target);
  if (event.target.id === "courseSearchForm") {
    state.params.keyword = String(form.get("keyword") || "");
    render();
    return;
  }
  if (event.target.id === "activitySearchForm") {
    state.params.activityKeyword = String(form.get("keyword") || "");
    state.params.activityStatus = state.params.activityStatus || "";
    render();
    return;
  }
  if (event.target.id === "courseSignupForm") {
    const id = Number(form.get("courseId"));
    const type = String(form.get("signupType") || "course");
    const phone = String(form.get("phone") || "").trim();
    const sessionError = document.querySelector("#signupSessionError");
    if (type === "activity") {
      const activity = findById(data.activities, id);
      if (!activity || !canShowActivitySignupButton(activity)) {
        if (sessionError) sessionError.textContent = "当前不可报名";
        return;
      }
      const session = (activity.sessions || []).find((row) => row.id === state.signupSessionId);
      if (!session) {
        if (sessionError) sessionError.textContent = "请选择场次";
        return;
      }
      if (!hasSessionCapacity(session)) {
        if (sessionError) sessionError.textContent = "该场次名额已满";
        return;
      }
      if (sessionError) sessionError.textContent = "";
      if (phone && !isValidMobile(phone)) {
        signupPhoneError.textContent = "请输入正确的手机号";
        event.target.elements.phone.focus();
        return;
      }
      signupPhoneError.textContent = "";
      session.signed = Number(session.signed) + 1;
      if (!state.signedActivityIds.includes(id)) state.signedActivityIds.push(id);
      persistSignup("activity");
      closeCourseSignup();
      render();
      openSignupSuccess("活动已同步到你的活动日程");
      return;
    }

    const course = findById(data.courses, id);
    if (!course || !canShowCourseSignupButton(course)) return;
    if (!isValidMobile(phone)) {
      signupPhoneError.textContent = "请输入正确的手机号";
      event.target.elements.phone.focus();
      return;
    }
    signupPhoneError.textContent = "";
    course.signed = Number(course.signed) + 1;
    if (!state.signedCourseIds.includes(id)) state.signedCourseIds.push(id);
    persistSignup("course");
    closeCourseSignup();
    render();
    openSignupSuccess("课程已同步到你的课程日程");
    return;
  }
  if (event.target.id === "profileForm") {
    state.profile = {
      ...(state.profile || {}),
      name: form.get("name"),
      company: form.get("company"),
      title: form.get("title"),
      research: form.get("research")
    };
    localStorage.setItem("slakeProfile", JSON.stringify(state.profile));
    toast("资料已保存");
    go("profile");
    return;
  }
  if (event.target.id !== "demandForm") return;
  state.demands.unshift({
    id: Date.now(),
    type: form.get("type"),
    title: form.get("title"),
    description: form.get("description"),
    status: "已提交",
    date: "2026-05-25"
  });
  toast("需求已提交");
  go("demands");
});

tabbar.addEventListener("click", (event) => {
  const item = event.target.closest(".tab-item");
  if (item) go(item.dataset.route);
});

topAction.addEventListener("click", () => {
  if (!state.user) go("login");
});

backBtn.addEventListener("click", () => {
  history.length > 1 ? history.back() : go("home");
});

window.addEventListener("popstate", (event) => {
  if (event.state) {
    state.route = event.state.route;
    state.params = event.state.params || {};
    render();
    return;
  }
  parseHash();
});

parseHash();