/* ==================================================================
   Overview → Academics
   ------------------------------------------------------------------
   Master data at a glance: teaching staff, the student roll broken down
   by class, the class/section/subject registry, and how far syllabus
   mapping has actually got.

   Reads /admin/cockpit/academics. Every count comes from the Cockpit
   database; nothing here is illustrative.
   ================================================================== */

const AcademicsScreen = ({ setScreen }) => {
  const CX = window.CX;
  const state = CX.useCockpitData("/admin/cockpit/academics");
  const d = state.data;

  const statusPill = (s) =>
    s === "present"  ? <span className="cx-pill tint green">Present</span>
  : s === "on_leave" ? <span className="cx-pill tint amber">On leave</span>
  :                    <span className="cx-pill tint grey">No record</span>;

  const WING_COLOR = {
    primary: "var(--pink-solid)", middle: "var(--blue-solid)", senior: "var(--green-solid)",
  };

  return (
    <div className="cx-page">
      <CX.PageHead
        eyebrow={`Master data${window.APP.CURRENT_SCHOOL?.academic_year ? " · " + window.APP.CURRENT_SCHOOL.academic_year : ""}`}
        title="Academics"
        actions={
          <button className="cx-btn-dark" onClick={() => setScreen("students")}>
            <CX.Icon name="plus" size={17}/> Manage students
          </button>
        }
      />

      <CX.Screen state={state} skeleton={<CX.Skeleton rows={2} height={320}/>}>
        {d && (
          <>
            {/* ---- Teachers · Students ---- */}
            <div className="cx-grid split" style={{ gridTemplateColumns: "1.2fr 1fr", marginBottom: 20 }}>
              <CX.Card>
                <div className="cx-card-head" style={{ marginBottom: 6 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 14, minWidth: 0 }}>
                    <div className="cx-stat-icon" style={{ background: "var(--green-solid)", boxShadow: "0 0 0 5px color-mix(in srgb, var(--green-solid) 15%, transparent)" }}>
                      <CX.Icon name="staff" size={20}/>
                    </div>
                    <div>
                      <div className="cx-card-title">Teachers</div>
                      <div style={{ fontSize: 13, color: "var(--ink-3)" }}>
                        {CX.num(d.teachers.total)} active
                        {d.teachers.pending ? ` · ${d.teachers.pending} pending approval` : ""}
                        {d.teachers.inactive ? ` · ${d.teachers.inactive} inactive` : ""}
                      </div>
                    </div>
                  </div>
                  <button className="cx-round-btn sm" title="Open teachers"
                          aria-label="Open teachers" onClick={() => setScreen("teachers")}>
                    <CX.Icon name="arrowUpRight" size={16}/>
                  </button>
                </div>

                <div>
                  {d.teachers.list.length === 0 && (
                    <CX.Empty icon="staff" title="No teaching staff yet"
                              hint="Add teachers from Academics → Teachers."/>
                  )}
                  {d.teachers.list.map((t) => (
                    <div key={t.id} className="cx-row">
                      <CX.Avatar name={t.name}/>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div className="cx-row-title">{t.name}</div>
                        <div className="cx-row-sub">
                          {[t.role, t.subjects, t.classes].filter(Boolean).join(" · ") || "No assignments"}
                        </div>
                      </div>
                      {statusPill(t.status)}
                    </div>
                  ))}
                </div>

                <div className="cx-card-foot">
                  <span style={{ fontSize: 13, color: "var(--ink-3)" }}>
                    {d.teachers.pendingResets
                      ? `${d.teachers.pendingResets} password reset request${d.teachers.pendingResets === 1 ? "" : "s"} waiting`
                      : "No password reset requests"}
                  </span>
                  <button className="cx-pill" onClick={() => setScreen("teachers")}>
                    View all {CX.num(d.teachers.total)}
                  </button>
                </div>
              </CX.Card>

              <CX.Card style={{ display: "flex", flexDirection: "column" }}>
                <div className="cx-card-head">
                  <div style={{ display: "flex", alignItems: "center", gap: 14, minWidth: 0 }}>
                    <div className="cx-stat-icon" style={{ background: "var(--blue-solid)", boxShadow: "0 0 0 5px color-mix(in srgb, var(--blue-solid) 15%, transparent)" }}>
                      <CX.Icon name="cap" size={20}/>
                    </div>
                    <div>
                      <div className="cx-card-title">Students</div>
                      <div style={{ fontSize: 13, color: "var(--ink-3)" }}>{CX.num(d.students.total)} enrolled</div>
                    </div>
                  </div>
                  <button className="cx-round-btn sm" title="Open students"
                          aria-label="Open students" onClick={() => setScreen("students")}>
                    <CX.Icon name="arrowUpRight" size={16}/>
                  </button>
                </div>

                <div style={{ display: "flex", gap: 10, marginBottom: 20 }}>
                  <div className="cx-tile" style={{ flex: 1 }}>
                    <div className="cx-tile-value">{CX.num(d.students.boarders)}</div>
                    <div className="cx-tile-label">Boarders</div>
                  </div>
                  <div className="cx-tile" style={{ flex: 1 }}>
                    <div className="cx-tile-value">{CX.num(d.students.dayScholars)}</div>
                    <div className="cx-tile-label">Day scholars</div>
                  </div>
                  {/* Suppressed by the API when it equals the whole roll (a
                      bulk import), so the tile falls back to section count. */}
                  {d.students.newThisTerm != null ? (
                    <div className="cx-tile" style={{ flex: 1 }}>
                      <div className="cx-tile-value">{CX.num(d.students.newThisTerm)}</div>
                      <div className="cx-tile-label">New in 90 days</div>
                    </div>
                  ) : (
                    <div className="cx-tile" style={{ flex: 1 }}>
                      <div className="cx-tile-value">{CX.num(d.classes.sectionCount)}</div>
                      <div className="cx-tile-label">Sections</div>
                    </div>
                  )}
                </div>

                <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-3)", marginBottom: 10 }}>BY CLASS</div>
                <div style={{ flex: 1 }}>
                  <CX.BarList items={d.students.byClass.map((c) => ({
                    label: c.level,
                    pct: c.barPct,
                    value: CX.num(c.students),
                    color: WING_COLOR[c.wing],
                  }))}/>
                </div>
              </CX.Card>
            </div>

            {/* ---- Classes & subjects · syllabus ---- */}
            <div className="cx-grid split" style={{ gridTemplateColumns: "1fr 1.2fr" }}>
              <CX.Card>
                <div className="cx-card-head">
                  <div className="cx-card-title">Classes &amp; Subjects</div>
                  <span className="cx-pill">
                    {d.classes.classCount} classes · {d.classes.sectionCount} sections
                  </span>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 8, marginBottom: 20 }}>
                  {d.classes.rows.map((c) => (
                    <div key={c.level} className="cx-tile" style={{ padding: 12, textAlign: "center" }}
                         title={`${c.students} students · sections ${c.sectionLabels || "—"}`}>
                      <div style={{ fontSize: 15, fontWeight: 700, color: "var(--ink-0)" }}>{c.level}</div>
                      <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>
                        {c.sections} section{c.sections === 1 ? "" : "s"}
                      </div>
                    </div>
                  ))}
                </div>
                <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-3)", marginBottom: 10 }}>
                  {d.subjects.count} SUBJECTS
                </div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {d.subjects.list.map((s) => (
                    <span key={s.id} className="cx-pill">{s.name}</span>
                  ))}
                  {d.subjects.count === 0 && (
                    <span style={{ fontSize: 13, color: "var(--ink-3)" }}>No subjects registered yet.</span>
                  )}
                </div>
                <div className="cx-card-foot">
                  <span style={{ fontSize: 13, color: "var(--ink-3)" }}>Registry drives every test-creation picker</span>
                  <button className="cx-pill" onClick={() => setScreen("taxonomy")}>Manage</button>
                </div>
              </CX.Card>

              <CX.Card>
                <div className="cx-card-head">
                  <div className="cx-card-title">Chapters &amp; Topics</div>
                  <span className="cx-pill">Syllabus mapping</span>
                </div>
                {d.syllabus.length === 0 ? (
                  <CX.Empty icon="book" title="No chapters registered"
                            hint="Add them under Academics → Chapters."/>
                ) : (
                  <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                    {d.syllabus.map((s, i) => {
                      const colors = ["var(--green-solid)", "var(--blue-solid)", "var(--pink-solid)",
                                      "var(--amber-solid)", "var(--violet-solid)", "var(--grey-solid)"];
                      return (
                        <div key={i}>
                          <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5, marginBottom: 7, gap: 12 }}>
                            <span style={{ fontWeight: 600, color: "var(--ink-0)" }}>
                              {s.subject}{s.classLevel ? ` · ${s.classLevel}` : ""}
                            </span>
                            <span style={{ color: "var(--ink-3)", whiteSpace: "nowrap" }}>
                              {s.chapters} chapters · {s.topics} topics ·{" "}
                              <strong style={{ color: "var(--ink-0)" }}>{s.coveragePct}%</strong>
                            </span>
                          </div>
                          <CX.Meter pct={s.coveragePct} color={colors[i % colors.length]}/>
                        </div>
                      );
                    })}
                  </div>
                )}
                <div className="cx-note" style={{ marginTop: 18 }}>
                  <div className="cx-note-mark"><CX.Icon name="book" size={18}/></div>
                  <div>Coverage is the share of a subject's chapters that have at least one topic registered against them — it is what the AI question generator reads when building a paper.</div>
                </div>
                <div className="cx-card-foot">
                  <span style={{ fontSize: 13, color: "var(--ink-3)" }}>Chapters feed test authoring and topic tagging</span>
                  <button className="cx-pill" onClick={() => setScreen("chapters")}>Open registry</button>
                </div>
              </CX.Card>
            </div>
          </>
        )}
      </CX.Screen>
    </div>
  );
};

window.CockpitAcademics = AcademicsScreen;