<div id="signal-visibility"></div>

<script src="https://cdn.signal.ceyo.ai/embed/v1.js"></script>
<script>
  async function requestSignalSession(path, body) {
    const response = await fetch(path, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Idempotency-Key": crypto.randomUUID(),
      },
      body: body ? JSON.stringify(body) : undefined,
    });
    if (!response.ok) throw new Error("Unable to create embed session");
    return response.json();
  }

  let sessionToken;

  async function createSignalSession() {
    const session = await requestSignalSession("/api/signal-session");
    sessionToken = session.token;
    return sessionToken;
  }

  async function refreshSignalSession() {
    const session = await requestSignalSession("/api/signal-session/refresh", {
      session_token: sessionToken,
    });
    sessionToken = session.token;
    return sessionToken;
  }

  (async () => {
    await createSignalSession();
    const embed = Ceyo.mount(
      "#signal-visibility",
      {
        "sessionToken": sessionToken,
        "height": "760px",
        "minWidth": "360px",
        "title": "Signal visibility demo",
        "settings": {
          "title": "AI Visibility",
          "subtitle": "",
          "showProjectName": true,
          "showProjectAdminTabs": false,
          "showLocationAdminTabs": false,
          "enablePromptDetail": true,
          "autoOpenSingleLocation": true
        },
        "theme": {
          "colors": {
            "primary": "#16181d",
            "primaryText": "#ffffff",
            "background": "transparent",
            "surface": "#ffffff",
            "text": "#16181d",
            "muted": "#6b7280",
            "border": "#e5e7eb",
            "success": "#047857",
            "successSurface": "#ecfdf5",
            "warning": "#b45309",
            "warningSurface": "#fffbeb",
            "danger": "#b91c1c",
            "dangerSurface": "#fef2f2"
          },
          "typography": {
            "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
            "baseSize": "14px",
            "smallSize": "12.5px",
            "titleSize": "22px",
            "titleWeight": "700",
            "bodyWeight": "400"
          },
          "shape": {
            "radius": "10px",
            "cardRadius": "10px",
            "controlRadius": "10px",
            "pillRadius": "7px"
          },
          "spacing": {
            "pagePadding": "20px",
            "panelPadding": "16px",
            "cardPadding": "16px 18px",
            "gap": "12px",
            "controlHeight": "34px"
          },
          "density": "compact"
        },
        "onTokenExpired": () => refreshSignalSession(),
      }
    );
    window.signalEmbed = embed;
  })();
</script>