/* ============================================================
   ZENITH — Admin (Open Ai Pvt Ltd)
   - Overview: institute KPIs, papers, classes
   - Batch & Release (SRS 3.1): Excel/CSV parser → staged "Hidden"
     records → Saturday-night CRON flips them to "Published",
     pushing Z-Scores & Island Ranks to student dashboards.
   ============================================================ */

function AdminOverview() {
  const { lang } = useApp();
  const A = window.ZDATA.admin;
  const t = (en, si) => tx(lang, en, si);
  const statusTone = s => ({ Active: "green", Released: "blue", Published: "green", Marking: "amber", Draft: "grey", Archived: "grey" }[s] || "grey");
  const [papers, setPapers] = useState(A.papers);
  const [building, setBuilding] = useState(false);
  const [viewing, setViewing] = useState(null);   // examId currently open in the paper viewer

  return (
    <div className="zfade" style={{ display: "flex", flexDirection: "column", gap: 22 }}>
      {building && <AdminPaperBuilder onClose={() => setBuilding(false)}
        onSave={p => { setPapers(ps => [p, ...ps]); setBuilding(false); }} />}
      {viewing && <AdminPaperView examId={viewing} onClose={() => setViewing(null)} />}
      <div className="grid grid--2mob" style={{ gridTemplateColumns: "repeat(4,1fr)" }}>
        <div className="card card--pad"><i className="ph ph-students" style={{ fontSize: 26, color: "var(--blue)" }}></i>
          <div className="stat__num" style={{ marginTop: 10 }}>{fmtInt(A.stats.students)}</div><div className="stat__lab">{t("Active students", "සක්‍රිය සිසුන්")}</div></div>
        <div className="card card--pad"><i className="ph ph-exam" style={{ fontSize: 26, color: "var(--cyan)" }}></i>
          <div className="stat__num" style={{ marginTop: 10 }}>{fmtInt(A.stats.papers)}</div><div className="stat__lab">{t("Papers published", "ප්‍රකාශිත පත්‍ර")}</div></div>
        <div className="card card--pad"><i className="ph ph-hourglass-medium" style={{ fontSize: 26, color: "var(--amber)" }}></i>
          <div className="stat__num" style={{ marginTop: 10 }}>{fmtInt(A.stats.pendingMarking)}</div><div className="stat__lab">{t("Scripts to mark", "ලකුණු කිරීමට")}</div></div>
        <div className="card card--pad"><i className="ph ph-chart-bar" style={{ fontSize: 26, color: "var(--green)" }}></i>
          <div className="stat__num" style={{ marginTop: 10 }}>{A.stats.avgZ ?? "—"}</div><div className="stat__lab">{t("Avg. predicted Z", "සාමාන්‍ය පුරෝකථන Z")}</div></div>
      </div>

      <div className="card" style={{ padding: "8px 4px 4px" }}>
        <div className="between" style={{ padding: "14px 18px 6px" }}>
          <p className="eyebrow" style={{ margin: 0 }}>{t("Papers", "ප්‍රශ්න පත්‍ර")}</p>
          <Btn size="sm" icon="plus" onClick={() => setBuilding(true)}>{t("New paper", "නව පත්‍රය")}</Btn>
        </div>
        <table className="tbl">
          <thead><tr>
            <th>{t("Paper", "පත්‍රය")}</th><th style={{ textAlign: "center" }}>{t("Sat", "ලියූ")}</th>
            <th style={{ width: 220 }}>{t("Marking progress", "ලකුණු ප්‍රගතිය")}</th>
            <th style={{ textAlign: "center" }}>{t("Avg / 200", "සාමා. / 200")}</th><th style={{ textAlign: "right" }}>{t("Status", "තත්ත්වය")}</th>
          </tr></thead>
          <tbody>
            {papers.map((p, i) => {
              const isDraft = p.status === "Draft";
              const publish = async () => {
                if (!isDraft || !p.id) return;
                try { await window.ZAPI.publishPaper(p.id); } catch (e) { console.error("publish failed", e); return; }
                setPapers(ps => ps.map(x => x === p ? { ...x, status: "Published" } : x));
              };
              return (
                <tr key={p.id || p.title || i} className={isDraft ? "clickable" : ""}
                    onClick={publish} style={{ cursor: isDraft ? "pointer" : "default" }}
                    title={isDraft ? t("Click to publish this paper", "මෙම පත්‍රය ප්‍රකාශ කිරීමට click කරන්න") : undefined}>
                  <td style={{ fontWeight: 600 }}>{p.title}</td>
                  <td style={{ textAlign: "center", fontVariantNumeric: "tabular-nums" }}>{p.sat}</td>
                  <td><div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <div style={{ flex: 1 }}><PBar value={p.marked} max={p.sat || 1} color={p.sat && p.marked === p.sat ? "green" : "blue"} /></div>
                    <span style={{ fontSize: 12.5, color: "var(--fg-muted)", width: 64 }}>{p.marked}/{p.sat}</span></div></td>
                  <td style={{ textAlign: "center", fontVariantNumeric: "tabular-nums" }}>{p.avg}</td>
                  <td style={{ textAlign: "right" }}>
                    <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", alignItems: "center" }}>
                      <Chip tone={statusTone(p.status)}>{p.status}{isDraft ? " · " + t("publish", "ප්‍රකාශ") : ""}</Chip>
                      {p.id && (
                        <button className="btn btn--ghost btn--sm" title={t("View paper", "පත්‍රය බලන්න")}
                          onClick={e => { e.stopPropagation(); setViewing(p.id); }}>
                          <i className="ph ph-eye"></i>
                        </button>
                      )}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div>
        <p className="eyebrow" style={{ margin: "0 0 12px" }}>{t("Classes", "පන්ති")}</p>
        <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fill,minmax(300px,1fr))" }}>
          {A.classes.map(c => (
            <div key={c.name} className="card card--pad card--hover" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div className="between">
                <div style={{ width: 40, height: 40, borderRadius: 12, background: "var(--blue-soft)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--blue)" }}><i className="ph ph-chalkboard-teacher" style={{ fontSize: 22 }}></i></div>
                <span className="chip chip--green">Z {c.avgZ}</span>
              </div>
              <div><h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, lineHeight: 1.3 }}>{c.name}</h3>
                <p style={{ margin: "6px 0 0", fontSize: 13.5, color: "var(--fg-muted)" }}>{c.students} {t("students", "සිසුන්")} · {c.teacher}</p></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Batch upload + staging + scheduled publish (CRON)
   ============================================================ */
function AdminBatch() {
  const { lang } = useApp();
  const t = (en, si) => tx(lang, en, si);
  const c = useCountdown(window.ZDATA.release.releaseHour);
  const inputRef = useRef(null);

  // lifecycle: existing staged rows → upload(staged Hidden) → published
  const [rows, setRows] = useState(window.ZDATA.staging || []);
  const [fileName, setFileName] = useState("");
  const [published, setPublished] = useState(false);
  const [cyc, setCyc] = useState(window.ZDATA.admin && window.ZDATA.admin.cycleId);

  // ensure a cycle exists to upload against (a fresh system has none)
  const ensureCycle = async () => {
    if (cyc) return cyc;
    const c = await window.ZAPI.createCycle();
    setCyc(c.id);
    return c.id;
  };
  // sample/demo fallback (no real file) — mirrors any existing staging
  const ingest = name => {
    setFileName(name || "z-scores.xlsx");
    setRows((window.ZDATA.staging || []).map(r => ({ ...r, state: "Hidden" })));
    setPublished(false);
  };
  // real Excel/CSV upload -> backend parse + hidden staging
  const onFile = async files => {
    if (!files || !files[0]) return;
    try {
      const id = await ensureCycle();
      const r = await window.ZAPI.uploadResults(id, files[0], true);
      setRows(r.staging || []);
      setFileName(files[0].name);
      setPublished(false);
    } catch (e) { console.error("upload failed", e); }
  };
  const runCron = async () => {
    try {
      const id = await ensureCycle();
      const r = await window.ZAPI.publishNow(id);
      setRows(r.rows || rows.map(x => ({ ...x, state: "Published" })));
      setPublished(true);
    } catch (e) {
      console.error("publish failed", e);
      setRows(rs => rs.map(r => ({ ...r, state: "Published" }))); setPublished(true);
    }
  };

  const staged = rows.length;

  return (
    <div className="zfade" style={{ display: "flex", flexDirection: "column", gap: 22 }}>
      {/* Step 1 — Excel/CSV parser */}
      <div className="card card--pad">
        <div className="between" style={{ marginBottom: 4 }}>
          <p className="eyebrow" style={{ margin: 0 }}>{t("Step 1 · Batch result upload", "පියවර 1 · කාණ්ඩ ප්‍රතිඵල උඩුගත")}</p>
          <span className="chip chip--grey">.xlsx · .csv</span>
        </div>
        <p style={{ margin: "0 0 16px", fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.5 }}>
          {t("Upload the offline-calculated file mapping System IDs to their Z-Score and Island Rank. The parser stages records in a hidden state.",
             "පද්ධති හැඳුනුම් ඔවුන්ගේ Z අගය හා දිවයින් ශ්‍රේණියට සම්බන්ධ කරන නොබැඳිව ගණනය කළ ගොනුව උඩුගත කරන්න. විග්‍රහකය වාර්තා සැඟවුණු තත්ත්වයක තබයි.")}
        </p>
        <div onClick={() => inputRef.current.click()}
          onDragOver={e => e.preventDefault()} onDrop={e => { e.preventDefault(); onFile(e.dataTransfer.files); }}
          style={{ border: "2px dashed var(--border-strong)", borderRadius: "var(--r-md)", padding: "32px 20px",
            textAlign: "center", cursor: "pointer", background: "var(--grey-5)" }}>
          <i className="ph ph-file-xls" style={{ fontSize: 42, color: "var(--green)" }}></i>
          <p style={{ margin: "10px 0 2px", fontWeight: 600, fontSize: 15 }}>{t("Drop your .xlsx / .csv here, or click to browse", "ඔබගේ .xlsx / .csv මෙහි දමන්න, හෝ ක්ලික් කරන්න")}</p>
          <p style={{ margin: 0, fontSize: 13, color: "var(--fg-muted)" }}>{t("Columns: System ID · Z-Score · Island Rank · District Rank", "තීරු: පද්ධති හැඳුනුම · Z අගය · දිවයින් ශ්‍රේණිය · දිස්ත්‍රික් ශ්‍රේණිය")}</p>
          <input ref={inputRef} type="file" accept=".xlsx,.csv" style={{ display: "none" }} onChange={e => onFile(e.target.files)} />
          <button className="btn btn--ghost btn--sm" style={{ marginTop: 14 }}
            onClick={e => { e.stopPropagation(); ingest("z-scores-week21-sample.xlsx"); }}>
            <i className="ph ph-sparkle"></i>{t("Use sample file", "නියැදි ගොනුව භාවිතා")}
          </button>
        </div>
        {fileName && (
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 14, fontSize: 14 }}>
            <i className="ph ph-check-circle" style={{ color: "var(--green)", fontSize: 20 }}></i>
            <strong>{fileName}</strong> · {t("parsed", "විග්‍රහ කළා")} {staged} {t("records into staging", "වාර්තා staging වෙත")}
          </div>
        )}
      </div>

      {/* Step 2 — staging table */}
      {staged > 0 && (
        <div className="card" style={{ padding: "8px 4px 4px" }}>
          <div className="between" style={{ padding: "14px 18px 6px" }}>
            <div>
              <p className="eyebrow" style={{ margin: 0 }}>{t("Step 2 · Staged records", "පියවර 2 · staged වාර්තා")}</p>
              <p style={{ fontSize: 13, color: "var(--fg-muted)", margin: "4px 0 0" }}>
                {published ? t("Now visible on student dashboards.", "දැන් සිසු උපකරණ පුවරු මත දෘශ්‍යමානයි.") : t("Invisible to students until release.", "නිකුත් වන තුරු සිසුන්ට නොපෙනේ.")}
              </p>
            </div>
            <span className={"chip " + (published ? "chip--green" : "chip--amber")}>
              <i className={"ph " + (published ? "ph-eye" : "ph-eye-slash")}></i>{published ? t("Published", "නිකුත් කළා") : t("Hidden", "සැඟවුණු")}
            </span>
          </div>
          <table className="tbl">
            <thead><tr>
              <th>{t("System ID", "පද්ධති හැඳුනුම")}</th>
              <th style={{ textAlign: "center" }}>{t("Z-Score", "Z අගය")}</th>
              <th style={{ textAlign: "center" }}>{t("Island Rank", "දිවයින් ශ්‍රේණිය")}</th>
              <th style={{ textAlign: "center" }}>{t("District Rank", "දිස්ත්‍රික් ශ්‍රේණිය")}</th>
              <th style={{ textAlign: "right" }}>{t("State", "තත්ත්වය")}</th>
            </tr></thead>
            <tbody>
              {rows.map(r => (
                <tr key={r.sysId}>
                  <td style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{r.sysId}</td>
                  <td style={{ textAlign: "center", fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>{r.z.toFixed(2)}</td>
                  <td style={{ textAlign: "center", fontVariantNumeric: "tabular-nums" }}>#{r.islandRank.toLocaleString()}</td>
                  <td style={{ textAlign: "center", fontVariantNumeric: "tabular-nums" }}>#{r.districtRank}</td>
                  <td style={{ textAlign: "right" }}>
                    <span className={"chip " + (r.state === "Published" ? "chip--green" : "chip--grey")} style={{ fontSize: 11 }}>
                      <i className={"ph " + (r.state === "Published" ? "ph-eye" : "ph-eye-slash")}></i>{r.state === "Published" ? t("Published", "නිකුත්") : t("Hidden", "සැඟවුණු")}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* Step 3 — scheduled publish CRON */}
      <div className="card card--dark card--pad" style={{ position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "var(--grad-navy)", opacity: .6 }}></div>
        <div style={{ position: "relative" }}>
          <div className="between" style={{ flexWrap: "wrap", gap: 16 }}>
            <div style={{ maxWidth: 460 }}>
              <p className="eyebrow" style={{ color: "var(--cyan)", margin: 0 }}>{t("Step 3 · Scheduled publishing protocol", "පියවර 3 · සැලසුම් කළ ප්‍රකාශන ක්‍රමවේදය")}</p>
              <h3 style={{ margin: "8px 0 6px", fontSize: 21, fontWeight: 600, color: "#fff" }}>{t("Saturday-night automated release", "සෙනසුරාදා රාත්‍රී ස්වයංක්‍රීය නිකුතුව")}</h3>
              <p style={{ margin: 0, fontSize: 14, color: "var(--fg-on-dark-muted)", lineHeight: 1.55 }}>
                {t("A server-side CRON job (node-cron / Celery) runs every Saturday at 9:00 PM, flipping all staged records from Hidden to Published and pushing them to student dashboards at once.",
                   "සේවාදායක CRON කාර්යයක් (node-cron / Celery) සෑම සෙනසුරාදාම රාත්‍රී 9.00ට ක්‍රියාත්මක වී, සියලු staged වාර්තා Hidden සිට Published වෙත මාරු කර එකවර සිසු උපකරණ පුවරු වෙත යවයි.")}
              </p>
            </div>
            <div style={{ textAlign: "center" }}>
              <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "var(--tr-caps)", color: "var(--fg-on-dark-muted)", marginBottom: 8 }}>{t("Next scheduled run", "ඊළඟ සැලසුම් කළ ක්‍රියාව")}</div>
              <div style={{ display: "flex", gap: 12 }}>
                {[[c.d, t("d", "දි")], [c.h, t("h", "පැ")], [c.m, t("m", "මි")], [c.s, t("s", "ත")]].map((u, i) => (
                  <div key={i} style={{ background: "rgba(255,255,255,.08)", borderRadius: "var(--r-sm)", padding: "10px 14px", minWidth: 56 }}>
                    <div style={{ fontSize: 24, fontWeight: 600, fontVariantNumeric: "tabular-nums", color: "#fff", lineHeight: 1 }}>{String(u[0]).padStart(2, "0")}</div>
                    <div style={{ fontSize: 10, color: "var(--fg-on-dark-muted)", marginTop: 4 }}>{u[1]}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div style={{ height: 1, background: "rgba(255,255,255,.12)", margin: "20px 0" }}></div>
          <div className="between" style={{ flexWrap: "wrap", gap: 12 }}>
            <span style={{ fontSize: 13, color: "var(--fg-on-dark-muted)" }}>
              <i className="ph ph-info" style={{ verticalAlign: "-2px", marginRight: 6 }}></i>
              {t("For demos you can trigger the job manually.", "ආදර්ශන සඳහා ඔබට කාර්යය අතින් ක්‍රියාත්මක කළ හැක.")}
            </span>
            {published
              ? <span className="chip chip--green" style={{ fontSize: 14, padding: "10px 18px" }}><i className="ph ph-check-circle"></i>{t("Released to all students", "සියලු සිසුන්ට නිකුත් කළා")}</span>
              : <Btn kind="green" icon="rocket-launch" disabled={staged === 0} onClick={runCron}>{t("Run scheduled publish now", "දැන් ප්‍රකාශනය ක්‍රියාත්මක කරන්න")}</Btn>}
          </div>
        </div>
      </div>
    </div>
  );
}

window.AdminOverview = AdminOverview;
window.AdminBatch = AdminBatch;