/* ============================================================
   ZENITH — Admin: Marking backlog
   Institute-wide view of every active script and its claim state.
   Admin can reassign a script to any teacher (which clears prior
   marks so the new marker starts fresh) or force-release it.
   ============================================================ */

function AdminBacklog() {
  const { lang } = useApp();
  const t = (en, si) => tx(lang, en, si);
  const D = window.ZDATA.admin || {};
  const rows = D.backlog || [];
  const teachers = D.teachers || [];
  const [, force] = useState(0);
  const [q, setQ] = useState("");
  const [status, setStatus] = useState("all");
  const [busy, setBusy] = useState(null);
  const [picks, setPicks] = useState({});   // attemptId -> chosen teacher accountId

  const refresh = async () => { await window.ZDATA_load("admin"); force(x => x + 1); };
  const reassign = async r => {
    const teacherAccountId = picks[r.attemptId];
    if (!teacherAccountId) return;
    setBusy(r.attemptId);
    try { await window.ZAPI.reassignScript(r.attemptId, teacherAccountId); await refresh(); }
    catch (e) { console.error("reassign failed", e); }
    finally { setBusy(null); }
  };
  const release = async r => {
    const reason = window.prompt(t("Reason for removing this script from the teacher's marking list:", "ගුරුවරයාගේ ලකුණු ලැයිස්තුවෙන් මෙම පත්‍රය ඉවත් කිරීමට හේතුව:"));
    if (!reason || !reason.trim()) return;
    setBusy(r.attemptId);
    try { await window.ZAPI.releaseBacklog(r.attemptId, reason.trim()); await refresh(); }
    catch (e) { console.error("release failed", e); }
    finally { setBusy(null); }
  };

  const counts = { available: 0, claimed: 0, completed: 0 };
  rows.forEach(r => { counts[r.status] = (counts[r.status] || 0) + 1; });
  const tone = s => ({ completed: "green", claimed: "amber", available: "grey" }[s] || "grey");
  const label = s => s === "completed" ? t("Completed", "සම්පූර්ණයි")
    : s === "claimed" ? t("Claimed", "ලබාගෙන")
    : t("Available", "ලබාගත හැකි");

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

  const selStyle = { border: "1.5px solid var(--border)", borderRadius: "var(--r-sm)", padding: "7px 26px 7px 10px",
    fontSize: 13, outline: "none", fontFamily: "var(--font)", background: "#fff", appearance: "none", minWidth: 150 };

  return (
    <div className="zfade" style={{ display: "flex", flexDirection: "column", gap: 22 }}>
      <div className="grid grid--2mob" style={{ gridTemplateColumns: "repeat(3,1fr)" }}>
        <div className="card card--pad"><Stat num={counts.available || 0} label={t("Available", "ලබාගත හැකි")} /></div>
        <div className="card card--pad"><Stat num={counts.claimed || 0} label={t("Claimed / marking", "ලබාගෙන / ලකුණු")} tone="amber" /></div>
        <div className="card card--pad"><Stat num={counts.completed || 0} label={t("Completed", "සම්පූර්ණයි")} tone="green" /></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("Marking list", "ලකුණු කිරීමේ ලැයිස්තුව")}</p>
            <p style={{ fontSize: 13, color: "var(--fg-muted)", margin: "4px 0 0" }}>
              {t("Every active script and who owns it. Reassign to balance load — reassigning clears any marks entered so far.",
                 "සෑම ක්‍රියාකාරී පත්‍රයක්ම සහ එය අයිති කවුරුන්ද. බර සමතුලනය කිරීමට නැවත පවරන්න — නැවත පැවරීම ඇතුළත් කළ ලකුණු ඉවත් කරයි.")}
            </p>
          </div>
        </div>

        {rows.length === 0 ? (
          <p style={{ padding: "10px 18px 16px", margin: 0, fontSize: 14, color: "var(--fg-muted)" }}>
            {t("No active scripts in the marking list.", "ලකුණු ලැයිස්තුවේ ක්‍රියාකාරී පත්‍ර නැත.")}
          </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", "සියල්ල")], ["available", t("Available", "ලබාගත හැකි")],
                  ["claimed", t("Claimed", "ලබාගෙන")], ["completed", t("Completed", "සම්පූර්ණයි")]].map(f => (
                  <button key={f[0]} className={status === f[0] ? "on" : ""} onClick={() => setStatus(f[0])}>{f[1]}</button>
                ))}
              </div>
            </div>

            <table className="tbl">
              <thead><tr>
                <th>{t("System ID", "පද්ධති හැඳුනුම")}</th>
                <th>{t("Paper", "පත්‍රය")}</th>
                <th style={{ width: 150 }}>{t("Progress", "ප්‍රගතිය")}</th>
                <th>{t("Assigned to", "පවරා ඇත")}</th>
                <th style={{ width: 110 }}>{t("Status", "තත්ත්වය")}</th>
                <th style={{ textAlign: "right", width: 300 }}>{t("Reassign", "නැවත පවරන්න")}</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.releaseReason && r.status === "available" &&
                        <div style={{ fontSize: 12 }}>{t("Returned:", "ආපසු:")} {r.releaseReason}</div>}
                    </td>
                    <td>
                      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                        <div style={{ flex: 1 }}><PBar value={r.marked} max={r.total || 6} color={r.status === "completed" ? "green" : "blue"} /></div>
                        <span style={{ fontSize: 12.5, color: "var(--fg-muted)", width: 30 }}>{r.marked}/{r.total || 6}</span>
                      </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>
                        : <span style={{ color: "var(--fg-muted)", fontSize: 13.5 }}>{t("— unassigned", "— පවරා නැත")}</span>}
                    </td>
                    <td><Chip tone={tone(r.status)}>{label(r.status)}</Chip></td>
                    <td style={{ textAlign: "right" }}>
                      <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", alignItems: "center", flexWrap: "wrap" }}>
                        <select style={selStyle} value={picks[r.attemptId] || ""}
                          onChange={e => setPicks({ ...picks, [r.attemptId]: e.target.value })}>
                          <option value="">{t("Choose teacher…", "ගුරුවරයෙකු තෝරන්න…")}</option>
                          {teachers.map(tc => (
                            <option key={tc.accountId} value={tc.accountId}
                              disabled={tc.accountId === r.teacherAccountId}>{tc.name}</option>
                          ))}
                        </select>
                        <Btn kind="primary" size="sm" icon="user-switch"
                          disabled={busy === r.attemptId || !picks[r.attemptId]} onClick={() => reassign(r)}>
                          {t("Assign", "පවරන්න")}
                        </Btn>
                        {r.status !== "available" && (
                          <button className="btn btn--ghost btn--sm" disabled={busy === r.attemptId} onClick={() => release(r)}>
                            <i className="ph ph-x"></i>{t("Remove", "ඉවත් කරන්න")}
                          </button>
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

window.AdminBacklog = AdminBacklog;