/* ============================================================
   Screen: Progress Monitoring — student × subject matrix
   ============================================================ */
(function () {
  const DB = window.DB;
  const GROUPS = [
    { g: 1, name: "Lang & Lit" }, { g: 2, name: "Lang Acq." }, { g: 3, name: "Individuals" },
    { g: 4, name: "Sciences" }, { g: 5, name: "Maths" }, { g: 6, name: "Arts" },
  ];
  const RATINGS = {
    strong:  { label: "Strong", color: "var(--stable)", soft: "var(--stable-soft)", line: "var(--stable-line)" },
    ok:      { label: "On track", color: "var(--ink-2)", soft: "var(--surface-2)", line: "var(--line-2)" },
    weak:    { label: "Weak", color: "oklch(0.5 0.15 55)", soft: "var(--watch-soft)", line: "var(--watch-line)" },
    concern: { label: "Concern", color: "var(--critical)", soft: "var(--critical-soft)", line: "var(--critical-line)" },
  };
  const ORDER = ["strong", "ok", "weak", "concern"];

  function ratingOf(sub) {
    let r = sub.grade >= 6 ? "strong" : sub.grade === 5 ? "ok" : sub.grade === 4 ? "weak" : "concern";
    if (sub.trend <= -2 && r === "ok") r = "weak";
    return r;
  }
  function abbrev(name) {
    return name
      .replace("English A: Lang & Lit", "Eng A").replace("Russian A: Literature", "Rus A").replace("Uzbek A: Literature", "Uzb A")
      .replace("English B", "Eng B").replace("French B", "Fr B").replace("Spanish ab initio", "Spa")
      .replace("Business Management", "Bus Mgmt").replace("Environmental Systems", "ESS")
      .replace("Mathematics AA", "Math AA").replace("Mathematics AI", "Math AI")
      .replace("Computer Science", "Comp Sci").replace("Visual Arts", "Visual");
  }

  function Progress({ role, navigate }) {
    const teacher = role === "teacher";
    const [cls, setCls] = React.useState("all");
    const [edits, setEdits] = React.useState({});
    const [sel, setSel] = React.useState(null);

    let students = DB.STUDENTS.filter((s) => !teacher || s.cls === "C");
    if (cls !== "all") students = students.filter((s) => s.cls === cls);
    students = [...students].sort((a, b) => b.risk - a.risk);

    const getRating = (sid, g) => {
      const k = sid + "-" + g;
      if (edits[k]) return edits[k];
      const sub = DB.student(sid).subjects.find((x) => x.g === g);
      return sub ? ratingOf(sub) : null;
    };
    const cycle = (sid, g) => {
      const cur = getRating(sid, g); if (!cur) return;
      setEdits((e) => ({ ...e, [sid + "-" + g]: ORDER[(ORDER.indexOf(cur) + 1) % ORDER.length] }));
    };

    // column distributions
    const colDist = GROUPS.map((grp) => {
      const d = { strong: 0, ok: 0, weak: 0, concern: 0 };
      students.forEach((s) => { const r = getRating(s.id, grp.g); if (r) d[r]++; });
      return d;
    });
    const flagsOf = (sid) => GROUPS.reduce((n, grp) => { const r = getRating(sid, grp.g); return n + (r === "weak" || r === "concern" ? 1 : 0); }, 0);
    const totalConcern = students.reduce((n, s) => n + (getRating(s.id, 4) === "concern" ? 1 : 0), 0);

    return (
      <div className="screen">
        <div className="between" style={{ marginBottom: 16 }}>
          <div>
            <h2 style={{ fontSize: 19 }}>{t("Progress Monitoring")}</h2>
            <p className="muted" style={{ fontSize: 13, marginTop: 4 }}>{t("Performance rating per student across IB Groups 1–6. This academic signal feeds the At-Risk Radar. Click a cell to re-rate.")}</p>
          </div>
          <button className="btn btn-sm" onClick={() => navigate("radar")}><Icon name="radar" size={14} />{t("Open Radar")}</button>
        </div>

        {/* toolbar */}
        <div className="toolbar" style={{ marginBottom: 12 }}>
          <div className="seg">
            {["all", "A", "B", "C", "D"].filter((c) => !teacher || c === "all" || c === "C").map((c) => (
              <button key={c} className={cls === c ? "on" : ""} onClick={() => setCls(c)}>{c === "all" ? t("All classes") : t("Class") + " " + c}</button>
            ))}
          </div>
          <div className="row wrap" style={{ gap: 14, marginLeft: "auto" }}>
            {ORDER.map((r) => (
              <span key={r} className="row" style={{ gap: 6 }}>
                <span style={{ width: 12, height: 12, borderRadius: 3, background: RATINGS[r].soft, border: "1px solid " + RATINGS[r].line }}></span>
                <span style={{ fontSize: 11.5, color: "var(--muted)" }}>{t(RATINGS[r].label)}</span>
              </span>
            ))}
          </div>
        </div>

        {/* matrix */}
        <div className="panel" style={{ overflow: "hidden" }}>
          <div style={{ overflowX: "auto" }}>
            <table className="tbl matrix-tbl">
              <thead>
                <tr>
                  <th style={{ minWidth: 190 }}>{t("Student")}</th>
                  {GROUPS.map((grp) => (
                    <th key={grp.g} className="mx-col">
                      <span className="mono faint" style={{ fontSize: 9 }}>G{grp.g}</span>
                      <span style={{ display: "block", fontSize: 10.5 }}>{t(grp.name)}</span>
                    </th>
                  ))}
                  <th className="num" style={{ width: 70 }}>{t("Flags")}</th>
                </tr>
              </thead>
              <tbody>
                {students.map((s) => {
                  const flags = flagsOf(s.id);
                  return (
                    <tr key={s.id}>
                      <td>
                        <button className="mx-name" onClick={() => navigate("student/" + s.id)}>
                          <Avatar name={s.name} color={s.avatar} size={24} />
                          <span style={{ minWidth: 0 }}>
                            <span style={{ display: "block", fontWeight: 600, fontSize: 12.5, whiteSpace: "nowrap" }}>{s.name}</span>
                            <span className="muted mono" style={{ fontSize: 9.5 }}>{s.cls} · {s.prog}</span>
                          </span>
                        </button>
                      </td>
                      {GROUPS.map((grp) => {
                        const sub = s.subjects.find((x) => x.g === grp.g);
                        const r = getRating(s.id, grp.g);
                        if (!sub) return <td key={grp.g} className="mx-cell"><span className="mx-empty">–</span></td>;
                        const R = RATINGS[r];
                        return (
                          <td key={grp.g} className="mx-cell">
                            <button className="mx-tile" style={{ background: R.soft, borderColor: R.line, color: R.color }}
                              onClick={() => cycle(s.id, grp.g)}
                              onMouseEnter={() => setSel({ s, sub, r })} onMouseLeave={() => setSel(null)}>
                              <span className="mx-grade mono">{sub.grade}</span>
                              <span className="mx-sub">{abbrev(sub.name)}<span className={sub.level === "HL" ? "mx-hl" : "mx-sl"}>{sub.level}</span></span>
                              {sub.trend ? <span className="mx-trend">{sub.trend > 0 ? "▲" : "▼"}</span> : null}
                            </button>
                          </td>
                        );
                      })}
                      <td className="num">
                        {flags ? <span className="badge" style={{ color: flags >= 3 ? "var(--critical)" : "oklch(0.5 0.15 55)", background: flags >= 3 ? "var(--critical-soft)" : "var(--watch-soft)", borderColor: flags >= 3 ? "var(--critical-line)" : "var(--watch-line)" }}>{flags}</span> : <span className="faint mono">0</span>}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
              <tfoot>
                <tr className="mx-foot">
                  <td><span className="eyebrow">{t("Group distribution")}</span></td>
                  {colDist.map((d, i) => (
                    <td key={i} className="mx-cell">
                      <StackBar parts={[
                        { label: t("Strong"), value: d.strong, color: "var(--stable)" },
                        { label: t("On track"), value: d.ok, color: "var(--line-2)" },
                        { label: t("Weak"), value: d.weak, color: "var(--watch)" },
                        { label: t("Concern"), value: d.concern, color: "var(--critical)" },
                      ]} height={6} />
                    </td>
                  ))}
                  <td></td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>

        {/* feed note */}
        <div className="feed-note">
          <Icon name="radar" size={15} />
          <span><b>{totalConcern}</b> {totalConcern === 1 ? t("student is") : t("students are")} {t("a science (Group 4) concern, and")} <b>{students.filter((s) => flagsOf(s.id) >= 2).length}</b> {students.filter((s) => flagsOf(s.id) >= 2).length === 1 ? t("student has") : t("students have")} {t("two or more weak subjects — these signals weight directly into the academic factor of each risk score.")}</span>
        </div>

        {/* hover detail */}
        {sel ? (
          <div className="mx-pop">
            <div className="row" style={{ gap: 8, marginBottom: 6 }}>
              <span className={ "badge " + ({ strong: "stable", ok: "", weak: "watch", concern: "crit" }[sel.r]) }><span className="dot"></span>{t(RATINGS[sel.r].label)}</span>
              <span className={sel.sub.level === "HL" ? "tag-hl" : "tag-sl"}>{sel.sub.level}</span>
            </div>
            <div style={{ fontWeight: 600, fontSize: 13 }}>{sel.sub.name}</div>
            <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{sel.s.name} · {sel.s.cls}</div>
            <div className="row" style={{ gap: 16, marginTop: 8 }}>
              <span><span className="eyebrow">{t("Current")}</span><div className="mono" style={{ fontWeight: 600 }}>{sel.sub.grade}/7</div></span>
              <span><span className="eyebrow">{t("Predicted")}</span><div className="mono" style={{ fontWeight: 600 }}>{sel.sub.predicted}/7</div></span>
              <span><span className="eyebrow">{t("Trend")}</span><div className="mono" style={{ fontWeight: 600 }}>{sel.sub.trend > 0 ? "+" + sel.sub.trend : sel.sub.trend || "—"}</div></span>
            </div>
          </div>
        ) : null}
      </div>
    );
  }

  window.SCREENS = window.SCREENS || {};
  window.SCREENS.progress = Progress;
})();