/* =========================================================================
 *  Python Tutor — /admin (owner-only progress tracker)
 *  -----------------------------------------------------------------------
 *  Lists every user on the Python Tutor allowlist with a tiny per-row
 *  summary (last seen, completed lesson count, current streak, last-7
 *  minutes). Click a row to drill in — same widgets as the user's own
 *  /progress page, but loaded server-side via getPythonTutorUserDetail
 *  so we don't have to relax the per-user Firestore rules.
 *
 *  Gate: owner email check is duplicated client-side (UX) and enforced
 *  server-side (the callable functions throw permission-denied for
 *  anyone else).
 * =======================================================================*/

const { useState, useEffect, useMemo, useCallback } = React;

function PythonTutorAdmin({ onNavigate }) {
  const user = window.usePtUser();
  const isOwner = !!(user && (user.email || "").toLowerCase() === window.PT_OWNER_EMAIL);

  const [summary, setSummary] = useState(null);
  const [err, setErr] = useState("");
  const [loading, setLoading] = useState(false);
  const [drilldownUid, setDrilldownUid] = useState(null);

  useEffect(() => {
    if (!isOwner) return;
    let cancelled = false;
    setLoading(true);
    setErr("");
    window.PYTHON_TUTOR_FUNCTIONS.getPythonTutorProgressSummary()
      .then((s) => { if (!cancelled) setSummary(s); })
      .catch((e) => { if (!cancelled) setErr((e && (e.message || e.code)) || String(e)); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [isOwner]);

  return (
    <div className="pt-page">
      <window.PtNav route="admin" onNavigate={onNavigate} user={user} />
      <main className="pt-main">
        <section className="pt-soon" style={{ paddingTop: 24, paddingBottom: 8 }}>
          <div className="ct-eyebrow">Python Tutor admin</div>
          <h1 className="pt-soon-h1" style={{ fontSize: "clamp(28px, 3.6vw, 36px)" }}>
            Per-user progress
          </h1>
        </section>

        {!isOwner && <NotOwnerCard />}
        {isOwner && loading && <AdminLoading />}
        {isOwner && err && <AdminError err={err} />}
        {isOwner && summary && !drilldownUid && (
          <UserList summary={summary} onPick={(uid) => setDrilldownUid(uid)} />
        )}
        {isOwner && drilldownUid && (
          <UserDetail
            uid={drilldownUid}
            summary={summary}
            onBack={() => setDrilldownUid(null)}
          />
        )}
      </main>
      <window.PtFooter />
    </div>
  );
}

function NotOwnerCard() {
  return (
    <div className="pt-feature" style={{ borderColor: "var(--ct-warn)", marginTop: 16 }}>
      <div className="ct-eyebrow pt-feature-eyebrow" style={{ color: "var(--ct-warn)" }}>
        Owner only
      </div>
      <div className="pt-feature-body">
        This page is restricted to the Python Tutor owner.
      </div>
    </div>
  );
}
function AdminLoading() {
  return (
    <div className="pt-feature" style={{ marginTop: 16, opacity: 0.6 }}>
      <div className="ct-eyebrow pt-feature-eyebrow">Loading…</div>
      <div className="pt-feature-body">Fanning out across allowlisted users.</div>
    </div>
  );
}
function AdminError({ err }) {
  return (
    <div className="pt-feature" style={{ borderColor: "var(--ct-danger)", marginTop: 16 }}>
      <div className="ct-eyebrow pt-feature-eyebrow" style={{ color: "var(--ct-danger)" }}>
        Couldn't load
      </div>
      <div className="pt-feature-body" style={{ color: "var(--ct-danger)" }}>{err}</div>
    </div>
  );
}

function UserList({ summary, onPick }) {
  const users = (summary && summary.users) || [];
  if (users.length === 0) {
    return (
      <div className="pt-feature" style={{ marginTop: 16 }}>
        <div className="ct-eyebrow pt-feature-eyebrow">No users</div>
        <div className="pt-feature-body">
          Nobody is on the Python Tutor allowlist yet. Add someone from
          ctwcad.com → Admin → Access → Python Tutor allowlist.
        </div>
      </div>
    );
  }
  return (
    <section className="pt-admin-list" style={{ marginTop: 16 }}>
      <div className="pt-admin-table-head ct-mono ct-eyebrow">
        <span>USER</span>
        <span>LESSONS</span>
        <span>STREAK</span>
        <span>7-DAY MIN</span>
        <span>LAST SYNC</span>
      </div>
      {users.map((u) => (
        <button
          key={u.email}
          className="pt-admin-row"
          onClick={() => u.uid ? onPick(u.uid) : null}
          disabled={!u.uid}
          title={u.uid ? "Open this user's full progress" : "User hasn't signed in to Python Tutor yet"}
        >
          <span className="pt-admin-user">
            {u.photoURL
              ? <img src={u.photoURL} alt="" referrerPolicy="no-referrer" />
              : <span className="pt-admin-avatar" aria-hidden="true">
                  {(u.email || "?").slice(0, 1).toUpperCase()}
                </span>}
            <span className="pt-admin-id">
              <span className="pt-admin-name">{u.displayName || (u.email || "").split("@")[0]}</span>
              <span className="ct-mono ct-dim pt-admin-email">{u.email}</span>
            </span>
          </span>
          <span className="ct-mono">{u.completedCount}</span>
          <span className="ct-mono">{u.currentStreak}</span>
          <span className="ct-mono">{u.last7DayMinutes}</span>
          <span className="ct-mono ct-dim">{u.lastSyncedAt ? fmtRelAdmin(u.lastSyncedAt) : (u.notSignedIn ? "never" : "—")}</span>
        </button>
      ))}
    </section>
  );
}

function UserDetail({ uid, summary, onBack }) {
  const [data, setData] = useState(null);
  const [err, setErr] = useState("");
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    setErr("");
    window.PYTHON_TUTOR_FUNCTIONS.getPythonTutorUserDetail(uid)
      .then((d) => { if (!cancelled) setData(d); })
      .catch((e) => { if (!cancelled) setErr((e && (e.message || e.code)) || String(e)); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [uid]);

  // Try to surface the user identity even before the detail loads, by
  // looking them up in the summary.
  const summaryRow = (summary && summary.users || []).find(u => u.uid === uid) || null;
  const headerName = summaryRow
    ? (summaryRow.displayName || (summaryRow.email || "").split("@")[0])
    : (data && data.target && (data.target.displayName || (data.target.email || "").split("@")[0])) || "User";

  return (
    <>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 16, marginBottom: 6 }}>
        <button className="ct-btn" onClick={onBack}>← Back</button>
        <div className="ct-eyebrow ct-mono">DRILL IN · {headerName}</div>
      </div>
      {loading && <AdminLoading />}
      {!loading && err && <AdminError err={err} />}
      {!loading && data && (
        // Reuse the same widgets the user's own /progress page renders.
        // ProgressBody is exported on window from progress.jsx so we can
        // share verbatim.
        <window.PtProgressBody data={data} />
      )}
    </>
  );
}

function fmtRelAdmin(iso) {
  const t = new Date(iso).getTime();
  if (!Number.isFinite(t)) return "—";
  const diff = Date.now() - t;
  const min = Math.floor(diff / 60000);
  if (min < 1) return "just now";
  if (min < 60) return `${min}m`;
  const h = Math.floor(min / 60);
  if (h < 24) return `${h}h`;
  const d = Math.floor(h / 24);
  if (d < 30) return `${d}d`;
  const mo = Math.floor(d / 30);
  return `${mo}mo`;
}

window.PythonTutorAdmin = PythonTutorAdmin;