// SPAND Studio — Admin Portal shell
// ───────────────────────────────────────────────────────────────
// Three states:
//   1. Loading      — Firebase Auth is reporting back on initial state
//   2. Not signed in / Not an admin → AdminAuth or AccessDenied
//   3. Admin → the inner shell (tabs + content)
//
// Custom claim is the only source of truth — never trust UI alone.
// Firestore + Storage rules also enforce admin == true on every read
// and write the admin portal makes, so a non-admin who somehow loaded
// this page would still see nothing.

const { useState, useEffect } = React;

const ADMIN_SECTIONS = [
  { id: "inbox",   label: "Inbox",   icon: "mail",     desc: "Incoming quotes & leads" },
  { id: "clients", label: "Clients", icon: "user",     desc: "Project list & impersonation" },
  { id: "audit",   label: "Audit",   icon: "activity", desc: "Recent admin actions" },
];

const AdminPortal = () => {
  const [bootState, setBootState] = useState("loading"); // loading | guest | nonadmin | admin
  const [user, setUser] = useState(null);
  const [section, setSection] = useState("inbox");

  // Listen to auth state. Whenever the user changes, refresh their token
  // (forces a JWT refresh so the latest custom claims show up — important
  // right after bootstrap, when an existing session won't otherwise pick
  // up the new admin claim until the next hour rolls over).
  useEffect(() => {
    let cancelled = false;
    const unsub = window.fb.onAuthStateChanged(window.fb.auth, async (u) => {
      if (cancelled) return;
      if (!u) {
        setUser(null);
        setBootState("guest");
        return;
      }
      try {
        const tokenResult = await u.getIdTokenResult(true);
        if (cancelled) return;
        const isAdmin = tokenResult.claims && tokenResult.claims.admin === true;
        setUser(u);
        setBootState(isAdmin ? "admin" : "nonadmin");
      } catch (err) {
        console.error("Token refresh failed:", err);
        setUser(u);
        setBootState("nonadmin");
      }
    });
    return () => { cancelled = true; unsub && unsub(); };
  }, []);

  const signOut = async () => {
    await window.fb.signOut(window.fb.auth);
  };

  if (bootState === "loading") {
    return <div className="admin-boot" />;
  }
  if (bootState === "guest") {
    return <AdminAuth onSignedIn={() => { /* listener flips state */ }} />;
  }
  if (bootState === "nonadmin") {
    return <AccessDenied user={user} onSignOut={signOut} />;
  }

  // bootState === "admin"
  const sectionMeta = ADMIN_SECTIONS.find(s => s.id === section) || ADMIN_SECTIONS[0];

  return (
    <div className="admin-app">
      <aside className="admin-rail">
        <div className="admin-brand">
          <span className="admin-brand-mark">S</span>
          <div className="admin-brand-stack">
            <span className="admin-brand-name">SPAND</span>
            <span className="admin-brand-sub">ADMIN</span>
          </div>
        </div>

        <nav className="admin-nav">
          {ADMIN_SECTIONS.map(s => (
            <button
              key={s.id}
              className={`admin-nav-item ${section === s.id ? "active" : ""}`}
              onClick={() => setSection(s.id)}
            >
              <Icon name={s.icon} size={15} />
              <span>{s.label}</span>
            </button>
          ))}
        </nav>

        <div className="admin-rail-footer">
          <div className="admin-avatar">{(user.email || "A").charAt(0).toUpperCase()}</div>
          <div style={{ minWidth: 0 }}>
            <div className="admin-user-name">{user.displayName || user.email}</div>
            <div className="admin-user-meta">ADMIN</div>
          </div>
          <button className="admin-signout" title="Sign out" onClick={signOut}>
            <Icon name="logout" size={15} />
          </button>
        </div>
      </aside>

      <main className="admin-main">
        <header className="admin-topbar">
          <div>
            <span className="eyebrow">ADMIN PORTAL · {sectionMeta.label.toUpperCase()}</span>
            <h1>{sectionMeta.label}</h1>
            <p className="lede">{sectionMeta.desc}</p>
          </div>
          <div className="admin-topbar-meta">
            <div>{new Date().toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" }).toUpperCase()}</div>
            <div>SIGNED IN AS {user.email}</div>
          </div>
        </header>

        <div className="admin-content">
          {section === "inbox"   && <AdminInboxModule user={user} />}
          {section === "clients" && <AdminClientsModule user={user} />}
          {section === "audit"   && <PlaceholderTab title="Audit log" body="Every admin write writes a row to /audit. This view will surface the last 100 entries with filters by actor and target." />}
        </div>
      </main>
    </div>
  );
};

const PlaceholderTab = ({ title, body }) => (
  <div className="admin-placeholder">
    <span className="eyebrow">COMING SOON</span>
    <h2>{title}</h2>
    <p>{body}</p>
  </div>
);

const AccessDenied = ({ user, onSignOut }) => (
  <div className="auth-shell">
    <div className="auth-card">
      <div className="auth-brand">
        <span className="auth-brand-mark">S</span>
        <div>
          <div className="auth-brand-name">SPAND STUDIO</div>
          <div className="auth-brand-sub">ADMINISTRATOR PORTAL</div>
        </div>
      </div>
      <h1>Access denied</h1>
      <p className="auth-lede">
        You're signed in as <strong>{user.email}</strong>, but this account
        doesn't have admin access. If you need it, message Jackson.
      </p>
      <button className="btn ghost lg" onClick={onSignOut}>
        Sign out and try a different account
      </button>
    </div>
  </div>
);

window.firebaseReady.then(() => {
  ReactDOM.createRoot(document.getElementById("root")).render(<AdminPortal />);
});