// app.js
// 沃林学生管理系统前端逻辑（Vue 3 Options API）
const { createApp } = Vue;

const API = "/api";

// 统计接口配置：key -> { url, method, headers, rowKeys, headerMap }
const STAT_CONFIG = {
  byAge: {
    url: () => `/statistics/students/by-age?op=${S.params.op}` +
      (S.params.op === "between"
        ? `&min_value=${S.params.min_value}&max_value=${S.params.max_value}`
        : `&value=${S.params.value}`),
    pick: (s) => ({ 学号: s.stu_id, 姓名: s.stu_name, 班级: s.class_name, 性别: s.gender, 年龄: s.age, 状态: s.status }),
  },
  genderStats: {
    url: () => "/statistics/class/gender-stats",
    pick: (r) => ({ 班级ID: r.class_id, 班级: r.class_name, 总人数: r.total, 男: r.male, 女: r.female }),
  },
  allAbove: {
    url: () => `/statistics/score/all-above?line=${S.params.line}`,
    pick: (r) => ({ 学号: r.stu_id, 姓名: r.stu_name, 班级: r.class_name, 考核次数: r.exam_count, 最低分: r.min_score, 明细: JSON.stringify(r.scores) }),
  },
  fail: {
    url: () => `/statistics/score/fail?times=${S.params.times}`,
    pick: (r) => ({ 学号: r.stu_id, 姓名: r.stu_name, 班级: r.class_name, 不及格次数: r.fail_count, 明细: JSON.stringify(r.fail_details) }),
  },
  classAvg: {
    url: () => `/statistics/score/class-avg?order=${S.params.order}` +
      (S.params.exam_id ? `&exam_id=${S.params.exam_id}` : ""),
    pick: (r) => ({ 考核序次: `第${r.exam_id}次`, 班级ID: r.class_id, 班级: r.class_name, 平均分: r.avg_score }),
  },
  topSalary: {
    url: () => `/statistics/employment/top-salary?n=${S.params.n}`,
    pick: (r) => ({ 学号: r.stu_id, 姓名: r.stu_name, 班级: r.class_name, offer时间: r.job_time, 公司: r.company_name, 薪资: r.salary }),
  },
  duration: {
    url: () => "/statistics/employment/duration",
    pick: (r) => ({ 学号: r.stu_id, 姓名: r.stu_name, 班级: r.class_name, 开放时间: r.employment_open_time, offer时间: r.job_time, 就业时长: r.duration_days < 0 ? "未就业" : r.duration_days + " 天" }),
  },
  classAvgDuration: {
    url: () => "/statistics/employment/class-avg-duration",
    pick: (r) => ({ 班级ID: r.class_id, 班级: r.class_name, 进入就业人数: r.opened_count, 已拿offer人数: r.offered_count, 平均就业时长: r.avg_duration_days + " 天" }),
  },
  volatility: {
    url: () => `/statistics/score/volatility?top_n=${S.params.top_n}`,
    pick: (r) => ({ 学号: r.stu_id, 姓名: r.stu_name, 班级: r.class_name, 最高分: r.max_score, 最低分: r.min_score, 最大分差: r.diff }),
  },
  funnel: {
    url: () => "/statistics/employment/funnel",
    pick: (r) => ({ 班级ID: r.class_id, 班级: r.class_name, 总人数: r.total, 已就业: r.employed, 高薪人数: r.high_salary, 就业率: r.employment_rate + "%" }),
  },
};

// 状态对象（非响应式共享，供 STAT_CONFIG 读取）
const S = {
  params: { op: "gt", value: 25, min_value: 20, max_value: 30, line: 80, times: 2, n: 10, exam_id: "", order: "desc", top_n: 5 },
};

const app = createApp({
  data() {
    return {
      token: localStorage.getItem("token") || "",
      me: { username: "", role: "" },
      loading: false,
      tip: "",
      loginForm: { username: "admin", password: "admin123" },
      tabs: [
        { key: "students", label: "学生管理" },
        { key: "scores", label: "成绩管理" },
        { key: "employment", label: "就业管理" },
        { key: "classes", label: "班级管理" },
        { key: "teachers", label: "老师管理" },
        { key: "statistics", label: "统计分析" },
        { key: "filter", label: "高级筛选" },
      ],
      tab: "students",
      // 学生
      students: [], stuTotal: 0, stuPage: 1,
      stuQ: { stu_id: "", stu_name: "", class_id: "", status: "" },
      showStu: false, stuForm: {},
      // 成绩
      scores: [], scoreQ: { stu_id: "", exam_id: "" }, scoreWarning: "",
      showScore: false, scoreForm: {},
      // 就业
      employment: [], empTotal: 0, empPage: 1,
      empQ: { stu_id: "", company_name: "", salary_min: "", salary_max: "" },
      showEmp: false, empFormMode: "open", empForm: {},
      // 班级 / 老师
      classes: [], showClass: false, classForm: {},
      teachers: [], teacherTotal: 0, teacherPage: 1, showTeacher: false, teacherForm: {},
      // 统计
      statKey: "", statRows: [], statParams: S.params,
      // 高级筛选
      filterJson: "", filterRows: [],
    };
  },
  computed: {
    roleLabel() {
      return { admin: "管理员", teacher: "教师", student: "学生" }[this.me.role] || this.me.role;
    },
    statKeys() {
      return this.statRows.length ? Object.keys(this.statRows[0]) : [];
    },
    statHeaders() {
      return this.statKeys;
    },
  },
  methods: {
    // ==================== 基础 ====================
    async api(path, method = "GET", body = null, raw = false) {
      const opt = {
        method,
        headers: { Authorization: "Bearer " + this.token },
      };
      if (body !== null) {
        opt.headers["Content-Type"] = "application/json";
        opt.body = JSON.stringify(body);
      }
      const resp = await fetch(API + path, opt);
      if (resp.status === 401) {
        this.logout(true);
        throw new Error("登录已失效，请重新登录");
      }
      if (!resp.ok) {
        let detail = `请求失败(${resp.status})`;
        try { detail = (await resp.json()).detail || detail; } catch (e) {}
        // detail 可能是 pydantic 校验数组
        if (Array.isArray(detail)) detail = detail.map((d) => `${d.loc.join(".")}: ${d.msg}`).join("; ");
        throw new Error(detail);
      }
      if (resp.status === 204) return null;
      return raw ? resp : resp.json();
    },
    flash(msg, ok = true) {
      this.tip = msg;
      setTimeout(() => (this.tip = ""), ok ? 2500 : 5000);
    },
    logout(silent = false) {
      localStorage.removeItem("token");
      this.token = "";
      this.me = { username: "", role: "" };
      if (!silent) this.tip = "";
    },
    async login() {
      this.loading = true;
      this.tip = "";
      try {
        const resp = await fetch(API + "/auth/login", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(this.loginForm),
        });
        if (!resp.ok) throw new Error((await resp.json()).detail || "登录失败");
        const data = await resp.json();
        this.token = data.access_token;
        localStorage.setItem("token", this.token);
        await this.afterLogin();
      } catch (e) {
        this.tip = e.message;
      } finally {
        this.loading = false;
      }
    },
    async afterLogin() {
      try {
        this.me = await this.api("/auth/me");
        await Promise.all([this.loadClasses(), this.loadStudents(1), this.loadTeachers(1)]);
        this.switchTab(this.me.role === "student" ? "students" : this.tab);
        this.flash("登录成功");
      } catch (e) {
        this.tip = e.message;
      }
    },
    switchTab(key) {
      this.tab = key;
      const loaders = {
        students: () => this.loadStudents(1),
        scores: () => this.loadScores(),
        employment: () => this.loadEmployment(1),
        classes: () => this.loadClasses(),
        teachers: () => this.loadTeachers(1),
      };
      if (loaders[key]) loaders[key]();
    },
    closeAll() {
      this.showStu = this.showScore = this.showEmp = this.showClass = this.showTeacher = false;
    },

    // ==================== 学生 ====================
    async loadStudents(page = 1) {
      try {
        const q = new URLSearchParams();
        if (this.stuQ.stu_id) q.set("stu_id", this.stuQ.stu_id);
        if (this.stuQ.stu_name) q.set("stu_name", this.stuQ.stu_name);
        if (this.stuQ.class_id) q.set("class_id", this.stuQ.class_id);
        if (this.stuQ.status) q.set("status", this.stuQ.status);
        q.set("skip", (page - 1) * 10);
        q.set("limit", 10);
        const data = await this.api("/students/total_query?" + q.toString());
        this.students = data.items;
        this.stuTotal = data.total;
        this.stuPage = page;
      } catch (e) { this.flash(e.message, false); }
    },
    resetStuQ() { this.stuQ = { stu_id: "", stu_name: "", class_id: "", status: "" }; this.loadStudents(1); },
    openStuForm(s = null) {
      this.stuForm = s
        ? { ...s, _editing: true }
        : { stu_id: "", class_id: this.classes[0]?.class_id, stu_name: "", gender: "男", age: 20, education: "本科", major: "", native_place: "", graduate_school: "", advisor_id: 1, enroll_time: "", graduate_time: "", status: "在读" };
      this.showStu = true;
    },
    async saveStudent() {
      try {
        if (this.stuForm._editing) {
          await this.api(`/students/update?stu_id=${this.stuForm.stu_id}`, "PUT", {
            stu_name: this.stuForm.stu_name, native_place: this.stuForm.native_place,
            graduate_school: this.stuForm.graduate_school, major: this.stuForm.major,
            education: this.stuForm.education, age: this.stuForm.age, gender: this.stuForm.gender,
            status: this.stuForm.status,
          });
          this.flash("学生更新成功");
        } else {
          const body = { ...this.stuForm };
          if (body.stu_id) body.stu_id = Number(body.stu_id); else delete body.stu_id;
          await this.api("/students/add", "POST", body);
          this.flash("学生创建成功");
        }
        this.closeAll();
        this.loadStudents(this.stuPage);
      } catch (e) { this.flash(e.message, false); }
    },
    async delStudent(s) {
      if (!confirm(`确认删除学生 ${s.stu_name}（${s.stu_id}）？`)) return;
      try { await this.api(`/students/delete?stu_id=${s.stu_id}`, "DELETE"); this.flash("删除成功"); this.loadStudents(this.stuPage); }
      catch (e) { this.flash(e.message, false); }
    },

    // ==================== 成绩 ====================
    async loadScores() {
      try {
        const q = new URLSearchParams();
        if (this.scoreQ.stu_id) q.set("stu_id", this.scoreQ.stu_id);
        if (this.scoreQ.exam_id) q.set("exam_id", this.scoreQ.exam_id);
        if (!q.toString()) { this.scores = []; this.flash("请输入学号或考核序次查询", false); return; }
        const data = await this.api("/scores/query?" + q.toString());
        this.scores = data.items;
        this.scoreWarning = "";
      } catch (e) { this.flash(e.message, false); }
    },
    openScoreForm(s = null) {
      this.scoreForm = s
        ? { stu_id: s.stu_id, exam_id: s.exam_id, score: s.score, _editing: true }
        : { stu_id: "", exam_id: 1, score: 80 };
      this.showScore = true;
    },
    async saveScore() {
      try {
        if (this.scoreForm._editing) {
          await this.api(`/scores/update?stu_id=${this.scoreForm.stu_id}&exam_id=${this.scoreForm.exam_id}`, "PUT", { score: this.scoreForm.score });
          this.flash("成绩修改成功");
        } else {
          const data = await this.api("/scores/add", "POST", { stu_id: this.scoreForm.stu_id, exam_id: this.scoreForm.exam_id, score: this.scoreForm.score });
          if (data.warning) { this.scoreWarning = data.warning; this.flash(data.warning, false); }
          else this.flash("成绩录入成功");
        }
        this.closeAll();
        if (this.scoreQ.stu_id || this.scoreQ.exam_id) this.loadScores();
      } catch (e) { this.flash(e.message, false); }
    },
    async delScore(s) {
      if (!confirm(`确认删除第 ${s.exam_id} 次考核成绩？`)) return;
      try { await this.api("/scores/delete", "POST", { stu_id: s.stu_id, exam_id: s.exam_id }); this.flash("删除成功"); this.loadScores(); }
      catch (e) { this.flash(e.message, false); }
    },

    // ==================== 就业 ====================
    async loadEmployment(page = 1) {
      try {
        const q = new URLSearchParams();
        if (this.empQ.stu_id) q.set("stu_id", this.empQ.stu_id);
        if (this.empQ.company_name) q.set("company_name", this.empQ.company_name);
        if (this.empQ.salary_min !== "" && this.empQ.salary_min !== null) q.set("salary_min", this.empQ.salary_min);
        if (this.empQ.salary_max !== "" && this.empQ.salary_max !== null) q.set("salary_max", this.empQ.salary_max);
        q.set("skip", (page - 1) * 10);
        q.set("limit", 10);
        const data = await this.api("/employment/total_query?" + q.toString());
        this.employment = data.items;
        this.empTotal = data.total;
        this.empPage = page;
      } catch (e) { this.flash(e.message, false); }
    },
    openEmpEdit(e) {
      this.empFormMode = "edit";
      this.empForm = { stu_id: e.stu_id, company_name: e.company_name, salary: e.salary };
      this.showEmp = true;
    },
    async saveEmployment() {
      try {
        if (this.empFormMode === "open") {
          await this.api("/employment/open", "POST", { stu_id: this.empForm.stu_id, employment_open_time: this.empForm.employment_open_time });
          this.flash("就业开放登记成功，学生状态已更新为『进入就业』");
        } else if (this.empFormMode === "offer") {
          await this.api("/employment/offer", "POST", this.empForm);
          this.flash("offer 登记成功，学生状态已更新为『已就业』");
        } else {
          await this.api(`/employment/update?stu_id=${this.empForm.stu_id}`, "PUT", { company_name: this.empForm.company_name, salary: this.empForm.salary });
          this.flash("就业信息更新成功");
        }
        this.closeAll();
        this.loadEmployment(this.empPage);
      } catch (e) { this.flash(e.message, false); }
    },
    async delEmployment(e) {
      if (!confirm(`确认删除 ${e.stu_name} 的就业信息？学生状态将回退为在读。`)) return;
      try { await this.api(`/employment/delete?stu_id=${e.stu_id}`, "DELETE"); this.flash("删除成功"); this.loadEmployment(this.empPage); }
      catch (err) { this.flash(err.message, false); }
    },

    // ==================== 班级 ====================
    async loadClasses() {
      try {
        const data = await this.api("/classes/total_query?limit=200");
        this.classes = data.items;
      } catch (e) { this.flash(e.message, false); }
    },
    openClassForm(c = null) {
      this.classForm = c ? { ...c } : { class_id: "", class_name: "", start_time: "" };
      this.showClass = true;
    },
    async saveClass() {
      try {
        if (this.classForm.class_id && !this.classForm._editing) {
          await this.api("/classes/add", "POST", { class_id: Number(this.classForm.class_id), class_name: this.classForm.class_name, start_time: this.classForm.start_time });
        } else if (this.classForm._editing) {
          await this.api(`/classes/update?class_id=${this.classForm.class_id}`, "PUT", { class_name: this.classForm.class_name, start_time: this.classForm.start_time });
        } else {
          await this.api("/classes/add", "POST", { class_name: this.classForm.class_name, start_time: this.classForm.start_time });
        }
        this.flash("班级保存成功");
        this.closeAll();
        this.loadClasses();
      } catch (e) { this.flash(e.message, false); }
    },
    async delClass(c) {
      if (!confirm(`确认删除班级 ${c.class_name}？`)) return;
      try { await this.api(`/classes/delete?class_id=${c.class_id}`, "DELETE"); this.flash("删除成功"); this.loadClasses(); }
      catch (e) { this.flash(e.message, false); }
    },

    // ==================== 老师 ====================
    async loadTeachers(page = 1) {
      try {
        const data = await this.api(`/teachers/teacher/total_query?skip=${(page - 1) * 10}&limit=10`);
        this.teachers = data.items;
        this.teacherTotal = data.total;
        this.teacherPage = page;
      } catch (e) { this.flash(e.message, false); }
    },
    openTeacherForm(t = null) {
      this.teacherForm = t ? { ...t, _editing: true } : { teacher_name: "", job_name: "主讲", class_id: this.classes[0]?.class_id };
      this.showTeacher = true;
    },
    async saveTeacher() {
      try {
        if (this.teacherForm._editing) {
          await this.api(`/teachers/teacher/update?teacher_id=${this.teacherForm.teacher_id}`, "PUT", {
            class_id: this.teacherForm.class_id, teacher_name: this.teacherForm.teacher_name, job_name: this.teacherForm.job_name,
          });
        } else {
          await this.api("/teachers/teacher/add", "POST", {
            class_id: this.teacherForm.class_id, teacher_name: this.teacherForm.teacher_name, job_name: this.teacherForm.job_name,
          });
        }
        this.flash("老师保存成功");
        this.closeAll();
        this.loadTeachers(this.teacherPage);
      } catch (e) { this.flash(e.message, false); }
    },
    async delTeacher(t) {
      if (!confirm(`确认删除老师 ${t.teacher_name}？`)) return;
      try { await this.api(`/teachers/teacher/delete?teacher_id=${t.teacher_id}`, "DELETE"); this.flash("删除成功"); this.loadTeachers(this.teacherPage); }
      catch (e) { this.flash(e.message, false); }
    },

    // ==================== 统计 ====================
    runStat(key) {
      this.statKey = key;
      this.statRows = [];
      // 只有需要参数的统计自动执行一次默认查询
      if (!["byAge", "allAbove", "fail", "topSalary", "classAvg", "volatility"].includes(key)) this.doStat();
    },
    async doStat() {
      const cfg = STAT_CONFIG[this.statKey];
      if (!cfg) return;
      try {
        const data = await this.api(cfg.url());
        this.statRows = data.map(cfg.pick);
      } catch (e) { this.flash(e.message, false); }
    },

    // ==================== 高级筛选 ====================
    resetFilterJson() {
      this.filterJson = JSON.stringify(
        {
          model: "student",
          rules: [
            { field: "age", operator: ">", value: 20 },
            {
              logic: "OR",
              sub_rules: [
                { field: "salary", operator: ">=", value: 10000 },
                { field: "class_name", operator: "like", value: "Java" },
              ],
            },
          ],
        },
        null,
        2
      );
    },
    async runFilter() {
      try {
        const body = JSON.parse(this.filterJson);
        const data = await this.api("/statistics/filter", "POST", body);
        this.filterRows = data.items;
        this.flash(`筛选完成，共命中 ${data.total} 条记录`);
      } catch (e) {
        this.flash("筛选失败：" + e.message, false);
      }
    },
  },
  mounted() {
    if (this.token) this.afterLogin();
    this.resetFilterJson();
  },
});

// 分页组件
app.component("pager", {
  props: ["page", "total"],
  emits: ["go"],
  computed: {
    pages() {
      return Math.max(1, Math.ceil((this.total || 0) / 10));
    },
  },
  template: `
    <div class="pager" v-if="pages > 1">
      <button class="btn mini" :disabled="page <= 1" @click="$emit('go', page - 1)">上一页</button>
      <span>第 {{ page }} / {{ pages }} 页（共 {{ total }} 条）</span>
      <button class="btn mini" :disabled="page >= pages" @click="$emit('go', page + 1)">下一页</button>
    </div>
  `,
});

app.mount("#app");