Optional UI components

// GET /api/tenant/connection — authenticated session required
const { linkToken } = await client.mintDirectConnectToken({ externalUserId: session.userId });

{
  "externalUserId": "user-123",
  "connectExternalUserId": "anlt1....",
  "returnUrl": "https://your-app.com/account",
  "primaryBaseUrl": "https://app.anemone.com",
  "connectUrl": "https://app.anemone.com/connect?external_user_id=anlt1....",
  "disconnectUrl": "https://app.anemone.com/disconnect?external_user_id=anlt1....",
  "connectSignInUrl": "https://app.anemone.com/sign-in?redirect_url=...",
  "disconnectSignInUrl": "https://app.anemone.com/sign-in?redirect_url=...",
  "connected": true,
  "autoConnected": true,
  "mockMode": false
}

"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import {
  invalidatePrimarySessionCache,
  probePrimaryClerkSession,
  type TenantConnectionInfo,
} from "anemone-server-js/embed";

const VISIBILITY_REFRESH_MS = 2_000;

export function AnemoneConnectionPanel() {
  const [info, setInfo] = useState<TenantConnectionInfo | null>(null);
  const [linked, setLinked] = useState(false);
  const [signedIn, setSignedIn] = useState(false);
  const [email, setEmail] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const hiddenAt = useRef<number | null>(null);
  const infoRef = useRef<TenantConnectionInfo | null>(null);

  const refreshSession = useCallback(async (connection: TenantConnectionInfo, force = false) => {
    if (connection.mockMode || !connection.primaryBaseUrl) {
      setLinked(false);
      setSignedIn(connection.mockMode);
      setEmail(null);
      return;
    }
    const status = await probePrimaryClerkSession(
      connection.primaryBaseUrl,
      connection.connectExternalUserId,
      { force },
    );
    setLinked(status.linked);
    setSignedIn(status.signedIn);
    setEmail(status.email);
  }, []);

  useEffect(() => {
    void (async () => {
      const res = await fetch("/api/tenant/connection");
      if (!res.ok) return;
      const connection = (await res.json()) as TenantConnectionInfo;
      setInfo(connection);
      infoRef.current = connection;
      setLoading(false);
      await refreshSession(connection);
    })();
  }, [refreshSession]);

  useEffect(() => {
    function onVisibilityChange() {
      if (document.visibilityState === "hidden") {
        hiddenAt.current = Date.now();
        return;
      }
      const connection = infoRef.current;
      if (!connection) return;
      const hiddenFor = hiddenAt.current ? Date.now() - hiddenAt.current : 0;
      hiddenAt.current = null;
      if (hiddenFor < VISIBILITY_REFRESH_MS) return;
      invalidatePrimarySessionCache();
      void refreshSession(connection, true);
    }
    document.addEventListener("visibilitychange", onVisibilityChange);
    return () => document.removeEventListener("visibilitychange", onVisibilityChange);
  }, [refreshSession]);

  if (loading || !info) return <p>Loading…</p>;

  function goToSignIn() {
    if (!info?.connectSignInUrl) return;
    invalidatePrimarySessionCache();
    window.location.assign(info.connectSignInUrl);
  }

  function goToConnect() {
    if (!info?.connectUrl || !signedIn) return;
    invalidatePrimarySessionCache();
    window.location.assign(info.connectUrl);
  }

  function goToDisconnect() {
    if (!info?.disconnectUrl) return;
    if (!signedIn && info.disconnectSignInUrl) {
      window.location.assign(info.disconnectSignInUrl);
      return;
    }
    invalidatePrimarySessionCache();
    window.location.assign(info.disconnectUrl);
  }

  return (
    <section aria-label="Anemone account">
      <h2>Anemone account</h2>
      <p>
        {linked
          ? "Your account is connected to Anemone."
          : signedIn
            ? "Connect your account to sync contact updates."
            : "Sign in to Anemone to connect your account."}
      </p>
      {!info.mockMode && (
        <span>{signedIn ? (email ?? "Signed in") : "Not signed in"}</span>
      )}
      <span>{linked ? "Connected" : "Not connected"}</span>
      {linked ? (
        <button type="button" onClick={goToDisconnect}>
          {signedIn ? "Disconnect account" : "Sign in to disconnect"}
        </button>
      ) : signedIn ? (
        <button type="button" onClick={goToConnect}>
          Connect account
        </button>
      ) : (
        <button type="button" onClick={goToSignIn}>
          Sign in
        </button>
      )}
    </section>
  );
}