/* ============================================================
   ZENITH — Admin: Physical script workflow
   Paper II scripts are marked ON PAPER. The admin prints a copy of
   each student's uploaded answer sheet, hand-delivers it to a teacher
   (suggested from the digital claim), collects it back, and keys the
   marks in here. Each script is tracked through:
     not printed → printed → out for delivery → with teacher
                 → collected → marks entered
   ============================================================ */

const PHYS_ORDER = ["not_printed", "printed", "out_for_delivery", "with_teacher", "collected", "marks_entered"];

function physStageMeta(t) {
  return {
    not_printed:      { label: t("Not printed", "මුද්‍රණය නැත"),        tone: "grey"  },
    printed:          { label: t("Printed", "මුද්‍රණය කළා"),           tone: "blue"  },
    out_for_delivery: { label: t("Out for delivery", "බෙදාහැරීමට"),    tone: "amber" },
    with_teacher:     { label: t("With teacher", "ගුරු සතුව"),         tone: "amber" },
    collected:        { label: t("Collected", "එකතු කළා"),            tone: "blue"  },
    marks_entered:    { label: t("Marks entered", "ලකුණු ඇතුළත්"),     tone: "green" },
  };
}

function physSince(r) {
  return { printed: r.printedAt, out_for_delivery: r.dispatchedAt, with_teacher: r.handedAt,
    collected: r.collectedAt, marks_entered: r.enteredAt }[r.stage] || null;
}

function physAgo(iso) {
  if (!iso) return "";
  const h = Math.round((Date.now() - new Date(iso).getTime()) / 3.6e6);
  if (h < 1) return "· now";
  if (h < 24) return "· " + h + "h";
  return "· " + Math.round(h / 24) + "d";
}

function AdminPhysical() {
  const { lang } = useApp();
  const t = (en, si) => tx(lang, en, si);
  const D = window.ZDATA.admin || {};
  const rows = D.physical || [];
  const teachers = D.teachers || [];
  const [, force] = useState(0);
  const [entry, setEntry] = useState(null);       // row being mark-entered
  const [dispatchFor, setDispatchFor] = useState(null); // row awaiting a dispatch (teacher + note)
  const [q, setQ] = useState("");
  const [stage, setStage] = useState("all");
  const [busy, setBusy] = useState(null);

  const refresh = async () => { await window.ZDATA_load("admin"); force(x => x + 1); };

  if (entry) return <AdminMarkEntry row={entry} onBack={async () => { setEntry(null); await refresh(); }} />;

  const meta = physStageMeta(t);
  const print = async r => {
    setBusy(r.attemptId);
    try { await window.ZAPI.downloadScriptPDF(r.attemptId, r.sysId); await refresh(); }
    catch (e) { console.error("print failed", e); }
    finally { setBusy(null); }
  };
  const advance = async (r, target) => {
    setBusy(r.attemptId);
    try { await window.ZAPI.advancePhysical(r.attemptId, target); await refresh(); }
    catch (e) { console.error("advance failed", e); }
    finally { setBusy(null); }
  };
  const doDispatch = async (r, teacherAccountId, note) => {
    setBusy(r.attemptId);
    try { await window.ZAPI.advancePhysical(r.attemptId, "out_for_delivery", teacherAccountId, note); setDispatchFor(null); await refresh(); }
    catch (e) { console.error("dispatch failed", e); }
    finally { setBusy(null); }
  };
  const returnUnmarked = async r => {
    const note = window.prompt(t("Why is this script coming back unmarked? (returns it to 'printed')",
      "මෙම පත්‍රය ලකුණු නොකර ආපසු එන්නේ ඇයි? ('මුද්‍රණය' තත්ත්වයට ආපසු යයි)"));
    if (!note || !note.trim()) return;
    setBusy(r.attemptId);
    try { await window.ZAPI.returnPhysical(r.attemptId, note.trim()); await refresh(); }
    catch (e) { console.error("return failed", e); }
    finally { setBusy(null); }
  };

  const counts = {};
  PHYS_ORDER.forEach(s => counts[s] = 0);
  rows.forEach(r => { counts[r.stage] = (counts[r.stage] || 0) + 1; });

  const needle = q.trim().toLowerCase();
  const filtered = rows.filter(r =>
    (stage === "all" || r.stage === stage) &&
    (!needle || r.sysId.toLowerCase().includes(needle) || (r.paper || "").toLowerCase().includes(needle)
      || (r.teacherName || "").toLowerCase().includes(needle)
      || (r.suggestedTeacherName || "").toLowerCase().includes(needle))
  );

  // per-row primary action
  const nextAction = r => {
    if (r.stage === "not_printed")
      return <Btn kind="primary" size="sm" icon="printer" disabled={busy === r.attemptId} onClick={() => print(r)}>{t("Print", "මුද්‍රණය")}</Btn>;
    if (r.stage === "printed")
      return <Btn kind="primary" size="sm" icon="truck" disabled={busy === r.attemptId} onClick={() => setDispatchFor(r)}>{t("Dispatch", "බෙදාහැරීම")}</Btn>;
    if (r.stage === "out_for_delivery")
      return <Btn kind="primary" size="sm" icon="hand-arrow-down" disabled={busy === r.attemptId} onClick={() => advance(r, "with_teacher")}>{t("Handed over", "භාර දුන්නා")}</Btn>;
    if (r.stage === "with_teacher")
      return <Btn kind="primary" size="sm" icon="package" disabled={busy === r.attemptId} onClick={() => advance(r, "collected")}>{t("Collected", "එකතු කළා")}</Btn>;
    if (r.stage === "collected")
      return <Btn kind="green" size="sm" icon="pencil-simple-line" disabled={busy === r.attemptId} onClick={() => setEntry(r)}>{t("Enter marks", "ලකුණු ඇතුළත්")}</Btn>;
    return <Chip tone="green" icon="check-circle">{t("Done", "අවසන්")}</Chip>;
  };

  return (
    <div className="zfade" style={{ display: "flex", flexDirection: "column", gap: 22 }}>
      {/* stage pipeline KPIs */}
      <div className="grid grid--2mob" style={{ gridTemplateColumns: "repeat(6,1fr)" }}>
        {PHYS_ORDER.map(s => (
          <div key={s} className="card card--pad">
            <Stat num={counts[s] || 0} label={meta[s].label} tone={meta[s].tone === "grey" ? undefined : meta[s].tone} />
          </div>
        ))}
      </div>

      <div className="card" style={{ padding: "8px 4px 4px" }}>
        <div className="between" style={{ padding: "14px 18px 6px", flexWrap: "wrap", gap: 10 }}>
          <div>
            <p className="eyebrow" style={{ margin: 0 }}>{t("Physical script tracking", "භෞතික පත්‍ර ලුහුබැඳීම")}</p>
            <p style={{ fontSize: 13, color: "var(--fg-muted)", margin: "4px 0 0", maxWidth: 620, lineHeight: 1.5 }}>
              {t("Print each script, hand it to the suggested teacher, collect it back, then key the marks in. Marks are credited to the teacher who marked on paper.",
                 "සෑම පත්‍රයක්ම මුද්‍රණය කර, යෝජිත ගුරුවරයාට භාර දී, ආපසු එකතු කර, ලකුණු ඇතුළත් කරන්න. ලකුණු, කඩදාසියේ ලකුණු කළ ගුරුවරයාට හිමිවේ.")}
            </p>
          </div>
        </div>

        {rows.length === 0 ? (
          <p style={{ padding: "10px 18px 16px", margin: 0, fontSize: 14, color: "var(--fg-muted)" }}>
            {t("No active scripts to track yet.", "ලුහුබැඳීමට ක්‍රියාකාරී පත්‍ර නැත.")}
          </p>
        ) : (
          <React.Fragment>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10, padding: "4px 18px 14px", alignItems: "center" }}>
              <div style={{ position: "relative", flex: "1 1 220px", minWidth: 200 }}>
                <i className="ph ph-magnifying-glass" style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", fontSize: 16, color: "var(--fg-muted)" }}></i>
                <input value={q} onChange={e => setQ(e.target.value)}
                  placeholder={t("Search ID, paper, or teacher…", "හැඳුනුම, පත්‍රය, හෝ ගුරු සොයන්න…")}
                  style={{ width: "100%", border: "1.5px solid var(--border)", borderRadius: "var(--r-sm)",
                    padding: "9px 12px 9px 34px", fontSize: 13.5, outline: "none", fontFamily: "var(--font)" }} />
              </div>
              <div className="seg">
                {[["all", t("All", "සියල්ල")]].concat(PHYS_ORDER.map(s => [s, meta[s].label])).map(f => (
                  <button key={f[0]} className={stage === f[0] ? "on" : ""} onClick={() => setStage(f[0])}>{f[1]}</button>
                ))}
              </div>
            </div>

            <table className="tbl">
              <thead><tr>
                <th>{t("System ID", "පද්ධති හැඳුනුම")}</th>
                <th>{t("Paper", "පත්‍රය")}</th>
                <th>{t("Deliver to", "භාර දෙන්නේ")}</th>
                <th style={{ width: 150 }}>{t("Stage", "අදියර")}</th>
                <th style={{ width: 130 }}>{t("Progress", "ප්‍රගතිය")}</th>
                <th style={{ textAlign: "right", width: 230 }}>{t("Action", "ක්‍රියාව")}</th>
              </tr></thead>
              <tbody>
                {filtered.map(r => (
                  <tr key={r.attemptId}>
                    <td style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{r.sysId}</td>
                    <td style={{ color: "var(--fg-muted)" }}>
                      {r.paper}
                      {r.notes && <div style={{ fontSize: 12 }}>{t("Note:", "සටහන:")} {r.notes}</div>}
                    </td>
                    <td>
                      {r.teacherName
                        ? <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                            <Avatar name={r.teacherName} size={28} />
                            <span style={{ fontWeight: 600, fontSize: 13.5 }}>{r.teacherName}</span>
                          </div>
                        : r.suggestedTeacherName
                          ? <span className="chip chip--blue" title={t("From the digital marking claim", "ඩිජිටල් ලකුණු හිමිකමෙන්")}>
                              <i className="ph ph-lightbulb"></i>{t("Suggest:", "යෝජනා:")} {r.suggestedTeacherName}</span>
                          : <span style={{ color: "var(--fg-muted)", fontSize: 13.5 }}>—</span>}
                    </td>
                    <td>
                      <Chip tone={meta[r.stage].tone}>{meta[r.stage].label}</Chip>
                      {physSince(r) && <span style={{ display: "block", fontSize: 11.5, color: "var(--fg-muted)", marginTop: 3 }}>{physAgo(physSince(r))}</span>}
                    </td>
                    <td>
                      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                        <div style={{ flex: 1 }}><PBar value={r.marked} max={r.total || 6} color={r.stage === "marks_entered" ? "green" : "blue"} /></div>
                        <span style={{ fontSize: 12, color: "var(--fg-muted)", width: 28 }}>{r.marked}/{r.total || 6}</span>
                      </div>
                    </td>
                    <td style={{ textAlign: "right" }}>
                      <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", alignItems: "center", flexWrap: "wrap" }}>
                        {nextAction(r)}
                        {(r.stage === "out_for_delivery" || r.stage === "with_teacher") && (
                          <button className="btn btn--ghost btn--sm" disabled={busy === r.attemptId} onClick={() => returnUnmarked(r)}>
                            <i className="ph ph-arrow-u-up-left"></i>{t("Returned", "ආපසු")}
                          </button>
                        )}
                        {r.stage !== "not_printed" && r.stage !== "marks_entered" && (
                          <button className="btn btn--quiet btn--sm" title={t("Reprint", "නැවත මුද්‍රණය")}
                            disabled={busy === r.attemptId} onClick={() => print(r)}><i className="ph ph-printer"></i></button>
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </React.Fragment>
        )}
      </div>

      {dispatchFor && <DispatchModal script={dispatchFor} teachers={teachers} busy={busy === dispatchFor.attemptId}
        onCancel={() => setDispatchFor(null)} onConfirm={(tid, note) => doDispatch(dispatchFor, tid, note)} />}
    </div>
  );
}

/* Choose which teacher to hand the printed copy to (defaults to the digital-claim suggestion). */
function DispatchModal({ script, teachers, busy, onCancel, onConfirm }) {
  const { lang } = useApp();
  const t = (en, si) => tx(lang, en, si);
  // Default to whoever is already assigned to mark this script (the digital claim holder, or the
  // physical delivery teacher if one is already set). Dispatching commits this teacher as the marker.
  const assignedId = script.suggestedTeacherAccountId || script.teacherAccountId || "";
  const assignedName = script.suggestedTeacherName || script.teacherName || "";
  const [teacherId, setTeacherId] = useState(assignedId);
  const [note, setNote] = useState("");
  const differs = teacherId && assignedId && teacherId !== assignedId;
  const selStyle = { width: "100%", border: "1.5px solid var(--border)", borderRadius: "var(--r-sm)",
    padding: "10px 12px", fontSize: 14, outline: "none", fontFamily: "var(--font)", background: "#fff" };
  return (
    <div className="modal-backdrop" onClick={onCancel} style={{ position: "fixed", inset: 0, background: "rgba(20,28,50,.42)",
      display: "flex", alignItems: "center", justifyContent: "center", zIndex: 60 }}>
      <div className="card card--pad" onClick={e => e.stopPropagation()} style={{ width: 480, maxWidth: "92vw", display: "flex", flexDirection: "column", gap: 14 }}>
        <div>
          <p className="eyebrow" style={{ margin: 0 }}>{t("Dispatch for marking", "ලකුණු කිරීමට බෙදාහරින්න")}</p>
          <p style={{ margin: "6px 0 0", fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.5 }}>
            {t("Hand the printed copy of", "මුද්‍රිත පිටපත")} <strong>{script.sysId}</strong> {t("to:", "භාර දෙන්න:")}
          </p>
        </div>
        <select style={selStyle} value={teacherId} onChange={e => setTeacherId(e.target.value)} autoFocus>
          <option value="">{t("Choose teacher…", "ගුරුවරයෙකු තෝරන්න…")}</option>
          {teachers.map(tc => (
            <option key={tc.accountId} value={tc.accountId}>
              {tc.name}{tc.accountId === assignedId ? t("  (assigned)", "  (පවරා ඇත)") : ""}
            </option>
          ))}
        </select>
        <p style={{ margin: "-4px 0 0", fontSize: 12.5, color: "var(--fg-muted)", lineHeight: 1.5 }}>
          {assignedName
            ? <React.Fragment>{t("Assigned to", "පවරා ඇත්තේ")} <strong>{assignedName}</strong> {t("— dispatch keeps them, or pick someone else to reassign.", "— බෙදාහැරීමෙන් ඔවුන්ම තබා ගනී, නැතහොත් වෙනත් අයෙකු තෝරා නැවත පවරන්න.")}</React.Fragment>
            : t("No one is assigned yet — the teacher you pick becomes the marker from now on.", "තවම කිසිවෙකු පවරා නැත — ඔබ තෝරන ගුරුවරයා මෙතැන් සිට ලකුණුකරු වේ.")}
        </p>
        {differs && (
          <div className="card" style={{ padding: "10px 12px", background: "var(--amber-soft, #FEF3E2)", border: "1px solid #F0D19A",
            display: "flex", gap: 8, alignItems: "flex-start" }}>
            <i className="ph ph-warning" style={{ color: "#B7791F", fontSize: 18, flexShrink: 0, marginTop: 1 }}></i>
            <span style={{ fontSize: 12.5, color: "#8a5a12", lineHeight: 1.5 }}>
              {t("This teacher differs from the current marker — any digital marks already entered will be cleared so they start fresh.",
                 "මෙම ගුරුවරයා වත්මන් ලකුණුකරුගෙන් වෙනස් — දැනටමත් ඇතුළත් ඩිජිටල් ලකුණු ඉවත් වේ.")}
            </span>
          </div>
        )}
        <textarea value={note} onChange={e => setNote(e.target.value)}
          placeholder={t("Optional note (e.g. batch A, deliver by Friday)…", "විකල්ප සටහන…")}
          style={{ width: "100%", minHeight: 72, border: "1.5px solid var(--border)", borderRadius: "var(--r-sm)",
            padding: "10px 12px", fontSize: 14, lineHeight: 1.5, resize: "vertical", outline: "none" }} />
        <div className="between">
          <button className="btn btn--ghost btn--sm" onClick={onCancel}>{t("Cancel", "අවලංගු")}</button>
          <Btn kind="primary" icon="truck" disabled={busy || !teacherId} onClick={() => onConfirm(teacherId, note.trim())}>
            {t("Dispatch", "බෙදාහරින්න")}
          </Btn>
        </div>
      </div>
    </div>
  );
}

/* ---------- Admin keys in the marks from the collected paper ---------- */
function AdminMarkEntry({ row, onBack }) {
  const { lang } = useApp();
  const t = (en, si) => tx(lang, en, si);
  const [script, setScript] = useState(null);
  const [step, setStep] = useState(0);
  const [marks, setMarks] = useState({});
  const [comments, setComments] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const [, force] = useState(0);

  useEffect(() => {
    let alive = true;
    window.ZAPI.adminMarkingScript(row.attemptId).then(s => {
      if (!alive) return;
      const seq = (s.questions || []).slice().sort((a, b) => a.position - b.position);
      const m = {}, c = {};
      seq.forEach((qq, i) => { if (qq.awarded != null) m[i] = qq.awarded; c[i] = (qq.comment && qq.comment.en) || ""; });
      setMarks(m); setComments(c);
      setScript({ ...s, questions: seq });
    }).catch(e => console.error("load script failed", e));
    return () => { alive = false; };
  }, [row.attemptId]);

  if (!script) return (
    <div className="zfade" style={{ padding: 40, textAlign: "center", color: "var(--fg-muted)" }}>
      <i className="ph ph-spinner-gap" style={{ fontSize: 26 }}></i>
      <p style={{ marginTop: 10 }}>{t("Loading script…", "පත්‍රය පූරණය වෙමින්…")}</p>
    </div>
  );

  const seq = script.questions;
  const cur = seq[step];
  const totalMax = seq.reduce((a, q) => a + (q.max_marks || 0), 0);
  const got = Object.values(marks).reduce((a, b) => a + (Number(b) || 0), 0);
  const allMarked = seq.every((q, i) => marks[i] != null);

  const saveMark = (i, m) => {
    setMarks({ ...marks, [i]: m });
    try { window.ZAPI.adminMarkQuestion(row.attemptId, seq[i].position, m, { en: comments[i] || "", si: "" }); }
    catch (e) { console.error("mark failed", e); }
  };
  const saveComment = (i, text) => {
    if (marks[i] == null) return;
    try { window.ZAPI.adminMarkQuestion(row.attemptId, seq[i].position, marks[i], { en: text, si: "" }); }
    catch (e) { console.error("comment save failed", e); }
  };
  const complete = async () => {
    try { await window.ZAPI.adminCompleteMarking(row.attemptId); } catch (e) { console.error("complete failed", e); return; }
    setSubmitted(true);
  };

  return (
    <div className="zfade" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <div className="between" style={{ flexWrap: "wrap", gap: 12 }}>
        <button className="btn btn--quiet" style={{ paddingLeft: 0 }} onClick={onBack}><i className="ph ph-arrow-left"></i>{t("Back to physical scripts", "භෞතික පත්‍ර වෙත")}</button>
        <div style={{ display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
          <span className="chip chip--blue"><i className="ph ph-user-focus"></i>{t("Marked on paper by", "කඩදාසියේ ලකුණු කළේ")} {row.teacherName || "—"}</span>
          <div className="card" style={{ padding: "10px 18px", display: "flex", alignItems: "center", gap: 10 }}>
            <i className="ph ph-identification-badge" style={{ fontSize: 20, color: "var(--fg-muted)" }}></i>
            <div>
              <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "var(--tr-caps)", color: "var(--fg-muted)" }}>{t("System ID", "පද්ධති හැඳුනුම")}</div>
              <div style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{script.sysId}</div>
            </div>
          </div>
          <div className="card" style={{ padding: "10px 18px", textAlign: "center" }}>
            <div style={{ fontSize: 26, fontWeight: 600, color: "var(--blue)", lineHeight: 1 }}>{got}<span style={{ fontSize: 15, color: "var(--fg-muted)" }}>/{totalMax}</span></div>
            <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "var(--tr-caps)", color: "var(--fg-muted)", marginTop: 3 }}>{t("Running total", "දැනට එකතුව")}</div>
          </div>
        </div>
      </div>

      {/* question stepper */}
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        {seq.map((qq, i) => (
          <button key={i} onClick={() => setStep(i)}
            style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 13px", borderRadius: "var(--r-pill)",
              border: "1.5px solid", borderColor: i === step ? "var(--blue)" : "var(--border)",
              background: i === step ? "var(--blue-soft)" : "#fff", cursor: "pointer", fontSize: 13, fontWeight: 600 }}>
            <span style={{ width: 22, height: 22, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: 12, background: marks[i] != null ? "var(--green)" : "var(--grey-4)", color: marks[i] != null ? "#fff" : "var(--fg-muted)" }}>
              {marks[i] != null ? <i className="ph ph-check"></i> : i + 1}
            </span>
            {qq.topic}
          </button>
        ))}
      </div>

      {/* DOUBLE PANE */}
      <div className="grid" style={{ gridTemplateColumns: "1fr 1fr", alignItems: "start" }}>
        <div className="card" style={{ overflow: "hidden", position: "sticky", top: 84 }}>
          <div className="between" style={{ padding: "12px 16px", borderBottom: "1px solid var(--border)" }}>
            <span style={{ fontWeight: 600, fontSize: 13.5 }}><i className="ph ph-image" style={{ verticalAlign: "-3px", marginRight: 6, color: "var(--blue)" }}></i>{t("Answer sheet", "පිළිතුරු පත්‍රය")} · Q{step + 1}</span>
          </div>
          <div style={{ background: "#1B2740", aspectRatio: "3/4", display: "flex", alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden" }}>
            <AdminScriptImage attemptId={row.attemptId} position={cur.position} sysId={script.sysId} />
          </div>
        </div>

        <div className="card card--pad" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div>
            <div style={{ display: "flex", gap: 8, marginBottom: 10, flexWrap: "wrap" }}>
              <span className="chip chip--blue">{t("Part", "කොටස")} {cur.part}</span>
              <span className="chip chip--grey">{cur.max_marks} {t("marks", "ලකුණු")}</span>
              <span className="chip chip--grey">{cur.topic}</span>
            </div>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55, fontWeight: 500 }}>{cur.prompt}</p>
          </div>

          {cur.marking_scheme && (
            <details style={{ fontSize: 13.5 }}>
              <summary style={{ cursor: "pointer", color: "var(--blue)", fontWeight: 600 }}>{t("Marking scheme", "ලකුණු දීමේ පටිපාටිය")}</summary>
              <p style={{ margin: "8px 0 0", color: "var(--fg-muted)", lineHeight: 1.55 }}>{cur.marking_scheme}</p>
            </details>
          )}

          <hr className="hr" />

          <div>
            <p className="eyebrow" style={{ margin: "0 0 10px" }}>{t("Award marks", "ලකුණු දෙන්න")}</p>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {Array.from({ length: (cur.max_marks || 0) + 1 }, (_, m) => (
                <button key={m} onClick={() => saveMark(step, m)}
                  style={{ width: 36, height: 36, borderRadius: 9, border: "1.5px solid",
                    borderColor: marks[step] === m ? "var(--blue)" : "var(--border)",
                    background: marks[step] === m ? "var(--blue)" : "#fff",
                    color: marks[step] === m ? "#fff" : "var(--fg-muted)", fontWeight: 600, fontSize: 13.5, cursor: "pointer", transition: ".12s" }}>{m}</button>
              ))}
            </div>
          </div>

          <div>
            <p className="eyebrow" style={{ margin: "0 0 8px" }}>{t("Qualitative feedback", "ගුණාත්මක ප්‍රතිපෝෂණ")}</p>
            <textarea value={comments[step] || ""} onChange={e => setComments({ ...comments, [step]: e.target.value })}
              placeholder={t("Copy the teacher's written feedback here…", "ගුරුවරයාගේ ලිඛිත ප්‍රතිපෝෂණ මෙහි පිටපත් කරන්න…")}
              style={{ width: "100%", minHeight: 96, border: "1.5px solid var(--border)", borderRadius: "var(--r-sm)",
                padding: "12px 14px", fontSize: 14, lineHeight: 1.55, resize: "vertical", outline: "none" }}
              onFocus={e => e.target.style.borderColor = "var(--blue)"}
              onBlur={e => { e.target.style.borderColor = "var(--border)"; saveComment(step, e.target.value); }} />
          </div>

          <div className="between">
            <button className="btn btn--ghost btn--sm" disabled={step === 0} onClick={() => setStep(step - 1)}><i className="ph ph-arrow-left"></i>{t("Prev", "පෙර")}</button>
            <button className="btn btn--primary btn--sm" disabled={step === seq.length - 1} onClick={() => setStep(step + 1)}>{t("Next question", "ඊළඟ ප්‍රශ්නය")}<i className="ph ph-arrow-right"></i></button>
          </div>
        </div>
      </div>

      {/* submit bar */}
      <div className="card card--pad between" style={{ position: "sticky", bottom: 16, flexWrap: "wrap", gap: 14, boxShadow: "var(--sh-md)", border: "1px solid var(--border-strong)" }}>
        <div>
          <p style={{ margin: 0, fontWeight: 600, fontSize: 15 }}>{t("Paper II total", "පත්‍රය II එකතුව")}: <span style={{ color: "var(--blue)" }}>{got}/{totalMax}</span></p>
          <p style={{ margin: "2px 0 0", fontSize: 13, color: "var(--fg-muted)" }}>{t("Marks are credited to the teacher who marked on paper; published with the Saturday-night release.", "ලකුණු කඩදාසියේ ලකුණු කළ ගුරුවරයාට හිමිවේ; සෙනසුරාදා නිකුතුව සමඟ ප්‍රකාශයට.")}</p>
        </div>
        {submitted
          ? <span className="chip chip--green" style={{ fontSize: 14, padding: "10px 18px" }}><i className="ph ph-check-circle"></i>{t("Marks entered", "ලකුණු ඇතුළත් කළා")}</span>
          : <Btn kind="green" icon="paper-plane-tilt" disabled={!allMarked} onClick={complete}>
              {allMarked ? t("Save & finish", "සුරකින්න") : t("Enter all marks first", "පළමුව සියලු ලකුණු ඇතුළත්")}
            </Btn>}
      </div>
    </div>
  );
}

/* The student's REAL uploaded answer image via the admin image endpoint (auth-fetched as a blob),
   falling back to the shared faux ScriptImage if none was uploaded. */
function AdminScriptImage({ attemptId, position, sysId }) {
  const [src, setSrc] = useState(null);
  const [failed, setFailed] = useState(false);
  useEffect(() => {
    let url = null, alive = true;
    setSrc(null); setFailed(false);
    window.ZAPI.adminMarkingImageURL(attemptId, position, 1)
      .then(u => { if (alive) { url = u; setSrc(u); } else URL.revokeObjectURL(u); })
      .catch(() => { if (alive) setFailed(true); });
    return () => { alive = false; if (url) URL.revokeObjectURL(url); };
  }, [attemptId, position]);
  if (failed) return <ScriptImage seed={sysId + position} />;
  if (!src) return (
    <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,.5)" }}>
      <i className="ph ph-spinner-gap" style={{ fontSize: 24 }}></i>
    </div>
  );
  return <img src={src} alt="" style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }} />;
}

window.AdminPhysical = AdminPhysical;