/* =========================================================================
 *  Python Tutor — shared top-nav for gated pages
 *  -----------------------------------------------------------------------
 *  account.jsx originally rendered its own minimal Topbar with just the
 *  brand mark. With /progress, /videos, and /admin we need real nav so
 *  signed-in users can move between them. This component is rendered by
 *  every gated page (account / progress / videos / admin). The home page
 *  keeps its own marketing topbar.
 *
 *  Owner-only links (Admin) are shown only when the signed-in user's
 *  email matches OWNER_EMAIL. The server-side enforcement lives in the
 *  callable function (getPythonTutorProgressSummary checks owner email)
 *  so the link is purely UX — non-owners who guess /admin still hit a
 *  permission-denied error from the function.
 * =======================================================================*/

const PT_OWNER_EMAIL = "sethbenricks@gmail.com";

function PtNav({ route, onNavigate, user }) {
  const isOwner = !!(user && (user.email || "").toLowerCase() === PT_OWNER_EMAIL);
  const items = [
    { id: "progress", label: "Progress" },
    { id: "videos",   label: "Videos" },
    { id: "account",  label: "Account" },
  ];
  if (isOwner) items.push({ id: "admin", label: "Admin" });

  return (
    <header className="pt-topbar">
      <button className="pt-brand-btn" onClick={() => onNavigate("home")} aria-label="Home">
        <window.PyBrand size={20} />
      </button>
      <nav className="pt-topnav" aria-label="Python Tutor">
        {items.map((it) => (
          <button
            key={it.id}
            className={"pt-topnav-link " + (route === it.id ? "is-active" : "")}
            onClick={() => onNavigate(it.id)}
          >
            {it.label}
          </button>
        ))}
      </nav>
    </header>
  );
}

function PtFooter() {
  return (
    <footer className="pt-footer">
      <div className="ct-mono ct-dim pt-footer-line">
        Part of the CTWCAD family. Built by Seth Ricks.
      </div>
      <a className="ct-mono pt-footer-link" href="https://ctwcad.com" target="_blank" rel="noopener noreferrer">
        ctwcad.com →
      </a>
    </footer>
  );
}

// Tiny hook — every gated page wants the current Firebase user object.
// Mirrors the pattern used in account.jsx and access_gate.jsx so the
// signed-in user is available without each page re-implementing the
// onUserChange dance.
function usePtUser() {
  const { useState, useEffect } = React;
  const [user, setUser] = useState(null);
  useEffect(() => {
    const off = window.PYTHON_TUTOR_AUTH.onUserChange((u) => setUser(u));
    return () => { try { off && off(); } catch {} };
  }, []);
  return user;
}

window.PtNav = PtNav;
window.PtFooter = PtFooter;
window.usePtUser = usePtUser;
window.PT_OWNER_EMAIL = PT_OWNER_EMAIL;