/* ============================================================
   ZENITH — Admin · Streams & subjects console
   Prepopulated official A/L catalog; admin toggles which streams
   (and which subjects within each stream) are offered at signup.
   Effective availability = stream ON  AND  subject ON.
   ============================================================ */

function StreamToggle({ on, disabled, onChange }) {
  return (
    <button type="button" onClick={onChange} disabled={disabled} aria-pressed={on}
      style={{
        width: 44, height: 24, borderRadius: 999, border: "none", cursor: disabled ? "not-allowed" : "pointer",
        background: on ? "var(--green)" : "var(--border-strong, #C9D2E0)", position: "relative",
        opacity: disabled ? 0.5 : 1, transition: ".16s", flexShrink: 0, padding: 0,
      }}>
      <span style={{
        position: "absolute", top: 3, left: on ? 23 : 3, width: 18, height: 18, borderRadius: "50%",
        background: "#fff", boxShadow: "0 1px 3px rgba(10,20,40,.25)", transition: ".16s",
      }}></span>
    </button>
  );
}

function AdminStreams() {
  const { lang } = useApp();
  const T = (en, si) => tx(lang, en, si);
  const [streams, setStreams] = useState((window.ZDATA.admin && window.ZDATA.admin.streams) || []);
  const [busy, setBusy] = useState(null); // "code" or "code/subject" while a toggle is in flight

  const apply = block => { setStreams(block); if (window.ZDATA.admin) window.ZDATA.admin.streams = block; };

  const flipStream = async st => {
    if (busy) return;
    setBusy(st.code);
    try { apply((await window.ZAPI.toggleStream(st.code, !st.enabled)).streams); }
    catch (e) { console.error("toggleStream failed", e); }
    setBusy(null);
  };
  const flipSubject = async (st, sub) => {
    if (busy) return;
    setBusy(st.code + "/" + sub.code);
    try { apply((await window.ZAPI.toggleStreamSubject(st.code, sub.code, !sub.enabled)).streams); }
    catch (e) { console.error("toggleStreamSubject failed", e); }
    setBusy(null);
  };

  const enabledStreams = streams.filter(s => s.enabled).length;

  return (
    <div className="zfade" style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      {/* header strip */}
      <div className="card card--pad">
        <div className="between" style={{ flexWrap: "wrap", gap: 12 }}>
          <div>
            <h3 style={{ margin: "0 0 4px", fontSize: 16.5, fontWeight: 600 }}>
              {T("A/L streams offered on the platform", "වේදිකාවේ පිරිනමන උ.පෙ විෂය ධාරා")}
            </h3>
            <p style={{ margin: 0, fontSize: 13.5, color: "var(--fg-muted)" }}>
              {T("Students can only register under an enabled stream, and pick 3 subjects from its enabled list.",
                 "සිසුන්ට ලියාපදිංචි විය හැක්කේ සක්‍රීය ධාරාවක් යටතේ පමණි; එහි සක්‍රීය ලැයිස්තුවෙන් විෂයයන් 3ක් තෝරාගත යුතුය.")}
            </p>
          </div>
          <Chip tone={enabledStreams > 0 ? "green" : "red"} icon="graduation-cap">
            {enabledStreams} / {streams.length} {T("streams enabled", "ධාරා සක්‍රීයයි")}
          </Chip>
        </div>
      </div>

      {/* one card per stream */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: 16 }}>
        {streams.map(st => {
          const enabledSubs = st.subjects.filter(s => s.enabled).length;
          const short = st.enabled && enabledSubs < 3; // signup needs 3 picks
          return (
            <div key={st.code} className="card card--pad" style={{ display: "flex", flexDirection: "column", gap: 12, opacity: st.enabled ? 1 : 0.72 }}>
              <div className="between">
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 15.5, fontWeight: 600 }}>{T(st.name, st.nameSi || st.name)}</div>
                  <div style={{ fontSize: 12.5, color: "var(--fg-muted)", marginTop: 2 }}>
                    {st.studentCount > 0
                      ? st.studentCount + " " + T("registered students", "ලියාපදිංචි සිසුන්")
                      : T("No registered students yet", "තවම ලියාපදිංචි සිසුන් නැත")}
                  </div>
                </div>
                <StreamToggle on={st.enabled} disabled={busy === st.code} onChange={() => flipStream(st)} />
              </div>

              {short && (
                <div style={{ display: "flex", gap: 8, alignItems: "center", background: "var(--amber-soft, #FFF6E5)", border: "1px solid #F2DCA8", borderRadius: "var(--r-sm)", padding: "8px 11px", fontSize: 12.5, color: "#7a5b12" }}>
                  <i className="ph ph-warning" style={{ fontSize: 16, flexShrink: 0 }}></i>
                  {T("Fewer than 3 subjects enabled — students cannot register for this stream.",
                     "සක්‍රීය විෂයයන් 3කට අඩුයි — සිසුන්ට මෙම ධාරාවට ලියාපදිංචි විය නොහැක.")}
                </div>
              )}

              <div style={{ borderTop: "1px solid var(--border)", paddingTop: 10, display: "flex", flexDirection: "column", gap: 7 }}>
                {st.subjects.map(sub => (
                  <div key={sub.code} className="between" style={{ gap: 10, opacity: st.enabled ? 1 : 0.55 }}>
                    <span style={{ fontSize: 13.5, color: sub.enabled ? "var(--fg)" : "var(--fg-muted)", textDecoration: sub.enabled ? "none" : "line-through", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                      {T(sub.name, sub.nameSi || sub.name)}
                    </span>
                    <StreamToggle on={sub.enabled} disabled={busy === st.code + "/" + sub.code}
                      onChange={() => flipSubject(st, sub)} />
                  </div>
                ))}
                <div style={{ fontSize: 12, color: "var(--fg-muted)", marginTop: 3 }}>
                  {enabledSubs} / {st.subjects.length} {T("subjects enabled", "විෂයයන් සක්‍රීයයි")}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { AdminStreams });