// Admin Clients — list of every Firebase Auth user, fetched via the
// listClients callable. Searchable by name/email. Highlights admins
// and shows last sign-in so the studio can see which accounts are
// active. Impersonation lands next.

const formatTimeAgo = (iso) => {
  if (!iso) return "—";
  const t = Date.parse(iso);
  if (isNaN(t)) return "—";
  const secs = Math.floor((Date.now() - t) / 1000);
  if (secs < 60) return `${secs}s ago`;
  if (secs < 3600) return `${Math.floor(secs / 60)}m ago`;
  if (secs < 86400) return `${Math.floor(secs / 3600)}h ago`;
  if (secs < 86400 * 7) return `${Math.floor(secs / 86400)}d ago`;
  return new Date(t).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
};

const AdminClientsModule = ({ user }) => {
  const [clients, setClients] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [search, setSearch] = React.useState("");

  React.useEffect(() => {
    let cancelled = false;
    const fb = window.fb;
    if (!fb || !fb.httpsCallable) return;

    const listClients = fb.httpsCallable(fb.functions, "listClients");
    setLoading(true);
    setError(null);

    listClients({})
      .then((res) => {
        if (cancelled) return;
        const data = res && res.data;
        setClients(Array.isArray(data && data.users) ? data.users : []);
      })
      .catch((err) => {
        if (cancelled) return;
        setError(err.message || "Couldn't load clients.");
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });

    return () => { cancelled = true; };
  }, []);

  const filtered = React.useMemo(() => {
    const q = search.trim().toLowerCase();
    if (!q) return clients;
    return clients.filter((c) =>
      (c.email && c.email.toLowerCase().includes(q)) ||
      (c.displayName && c.displayName.toLowerCase().includes(q)) ||
      (c.uid && c.uid.toLowerCase().includes(q))
    );
  }, [clients, search]);

  if (loading) {
    return <div className="admin-placeholder"><p>Loading clients…</p></div>;
  }
  if (error) {
    return <div className="admin-placeholder"><h2>Couldn't load</h2><p>{error}</p></div>;
  }
  if (clients.length === 0) {
    return (
      <div className="admin-placeholder">
        <span className="eyebrow">NO CLIENTS YET</span>
        <h2>Empty roster</h2>
        <p>The first time someone creates an account in the client portal, they'll appear here.</p>
      </div>
    );
  }

  return (
    <div>
      <div className="clients-search">
        <Icon name="search" size={15} />
        <input
          type="search"
          placeholder={`Search ${clients.length} ${clients.length === 1 ? "client" : "clients"} by name, email, or UID…`}
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          autoFocus
        />
      </div>

      <div className="clients-list">
        {filtered.map((c) => {
          const initial = (c.displayName || c.email || "?").trim().charAt(0).toUpperCase();
          return (
            <div key={c.uid} className="clients-row">
              <div className="clients-avatar">{initial}</div>
              <div className="clients-name">
                <strong>
                  {c.displayName || (c.email && c.email.split("@")[0]) || "Unknown"}
                  {c.isAdmin && (
                    <span style={{ marginLeft: 8, fontFamily: "JetBrains Mono, monospace", fontSize: 9.5, letterSpacing: "0.14em", color: "var(--accent)" }}>
                      · ADMIN
                    </span>
                  )}
                </strong>
                <span>UID {c.uid.slice(0, 12)}…</span>
              </div>
              <div className="clients-email">
                {c.email || <em style={{ color: "var(--fg-mute)" }}>no email</em>}
                {!c.emailVerified && c.email && (
                  <span style={{ marginLeft: 6, fontSize: 10, color: "var(--fg-mute)" }}>(unverified)</span>
                )}
              </div>
              <div className="clients-meta">
                <div>LAST SEEN {formatTimeAgo(c.lastSignInAt).toUpperCase()}</div>
                <div>JOINED {formatTimeAgo(c.createdAt).toUpperCase()}</div>
              </div>
            </div>
          );
        })}
        {filtered.length === 0 && (
          <div className="admin-placeholder">
            <p>No clients match "{search}".</p>
          </div>
        )}
      </div>
    </div>
  );
};

window.AdminClientsModule = AdminClientsModule;