interface TawkAPI {
  maximize: () => void;
  minimize: () => void;
  toggle: () => void;
  popup: () => void;
  showWidget: () => void;
  hideWidget: () => void;
  toggleVisibility: () => void;
  getWindowType: () => string;
  getStatus: () => string;
  isChatMaximized: () => boolean;
  isChatMinimized: () => boolean;
  isChatHidden: () => boolean;
  isChatOngoing: () => boolean;
  isVisitorEngaged: () => boolean;
  setAttributes: (
    attributes: Record<string, string | number | boolean>,
    callback?: (error: Error | null) => void
  ) => void;
  addEvent: (
    eventName: string,
    metadata?: Record<string, string | number>,
    callback?: (error: Error | null) => void
  ) => void;
  addTags: (
    tags: string[],
    callback?: (error: Error | null) => void
  ) => void;
  removeTags: (
    tags: string[],
    callback?: (error: Error | null) => void
  ) => void;
  endChat: () => void;
  visitor?: {
    name?: string;
    email?: string;
    hash?: string;
  };
  customStyle?: {
    visibility?: {
      desktop?: { position?: string; xOffset?: number | string; yOffset?: number | string };
      mobile?: { position?: string; xOffset?: number; yOffset?: number };
      bubble?: { show?: boolean };
    };
    zIndex?: number | string;
  };
  onLoad?: () => void;
  onBeforeLoad?: () => void;
  onChatMaximized?: () => void;
  onChatMinimized?: () => void;
  onChatHidden?: () => void;
  onChatStarted?: () => void;
  onChatEnded?: () => void;
  onPrechatSubmit?: (data: Record<string, string>) => void;
  onOfflineSubmit?: (data: Record<string, string>) => void;
  onChatMessageVisitor?: (message: string) => void;
  onChatMessageAgent?: (message: string) => void;
  onChatMessageSystem?: (message: string) => void;
  onAgentJoinChat?: (data: { name: string; position: string; image: string }) => void;
  onAgentLeaveChat?: (data: { name: string; id: string }) => void;
  onChatSatisfaction?: (satisfaction: string) => void;
  onVisitorNameChanged?: (visitorName: string) => void;
  onFileUpload?: (link: string) => void;
  onTagsUpdated?: (tags: string[]) => void;
  onUnreadCountChanged?: (count: number) => void;
}

declare global {
  interface Window {
    Tawk_API?: TawkAPI;
    Tawk_LoadStart?: Date;
  }
}

export {};

"use client";

import { useEffect } from "react";

interface TawkToWidgetProps {
  /** Visitor name for identified users */
  visitorName?: string;
  /** Visitor email for identified users */
  visitorEmail?: string;
  /** HMAC hash for secure mode (computed server-side) */
  visitorHash?: string;
  /** Custom attributes to set on the visitor */
  customAttributes?: Record<string, string | number | boolean>;
}

export function TawkToWidget({
  visitorName,
  visitorEmail,
  visitorHash,
  customAttributes,
}: TawkToWidgetProps) {
  useEffect(() => {
    const propertyId = process.env.NEXT_PUBLIC_TAWK_PROPERTY_ID;
    const widgetId = process.env.NEXT_PUBLIC_TAWK_WIDGET_ID;

    if (!propertyId || !widgetId) {
      console.warn("Tawk.to: Missing NEXT_PUBLIC_TAWK_PROPERTY_ID or NEXT_PUBLIC_TAWK_WIDGET_ID");
      return;
    }

    // Initialize Tawk_API before script loads
    window.Tawk_API = window.Tawk_API || {};
    window.Tawk_LoadStart = new Date();

    // Set visitor identity if available
    if (visitorEmail) {
      window.Tawk_API.visitor = {
        name: visitorName || undefined,
        email: visitorEmail,
        hash: visitorHash || undefined,
      };
    }

    // Configure widget position to avoid overlapping app UI
    window.Tawk_API.customStyle = {
      visibility: {
        desktop: {
          position: "br", // bottom-right
          xOffset: 20,
          yOffset: 20,
        },
        mobile: {
          position: "br",
          xOffset: 10,
          yOffset: 70, // above mobile nav bar
        },
      },
    };

    // Set custom attributes and events after widget loads
    window.Tawk_API.onLoad = () => {
      if (customAttributes && window.Tawk_API) {
        window.Tawk_API.setAttributes(customAttributes, (error) => {
          if (error) console.error("Tawk.to: Failed to set attributes", error);
        });
      }
    };

    // Create and inject the script
    const script = document.createElement("script");
    script.async = true;
    script.src = `https://embed.tawk.to/${propertyId}/${widgetId}`;
    script.charset = "utf-8";
    script.setAttribute("crossorigin", "*");
    document.body.appendChild(script);

    return () => {
      // Cleanup on unmount
      document.body.removeChild(script);
      delete window.Tawk_API;
      delete window.Tawk_LoadStart;
    };
  }, [visitorName, visitorEmail, visitorHash, customAttributes]);

  return null;
}

import dynamic from "next/dynamic";
import { auth } from "@/lib/auth";
import { computeTawkHash } from "@/lib/tawk/hash";

const TawkToWidget = dynamic(
  () => import("@/components/support/tawk-to-widget").then((mod) => mod.TawkToWidget),
  { ssr: false }
);

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const session = await auth();

  // Compute HMAC hash server-side for secure mode
  const visitorHash = session?.user?.email
    ? computeTawkHash(session.user.email)
    : undefined;

  return (
    <html lang="en">
      <body>
        {children}
        <TawkToWidget
          visitorName={session?.user?.name ?? undefined}
          visitorEmail={session?.user?.email ?? undefined}
          visitorHash={visitorHash}
          customAttributes={
            session?.user
              ? {
                  plan: session.user.plan ?? "free",
                  accountId: session.user.id,
                }
              : undefined
          }
        />
      </body>
    </html>
  );
}

import { createHmac } from "crypto";

export function computeTawkHash(email: string): string {
  const apiKey = process.env.TAWK_API_KEY;
  if (!apiKey) {
    throw new Error("Missing TAWK_API_KEY environment variable");
  }
  return createHmac("sha256", apiKey).update(email).digest("hex");
}

const TAWK_API_BASE = "https://api.tawk.to/v1";

interface TawkApiConfig {
  apiKey: string;
  propertyId: string;
}

function getAuthHeader(apiKey: string): string {
  return `Basic ${Buffer.from(`${apiKey}:`).toString("base64")}`;
}

export function createTawkClient(config: TawkApiConfig) {
  const { apiKey, propertyId } = config;

  async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
    const response = await fetch(`${TAWK_API_BASE}${path}`, {
      ...options,
      headers: {
        "Content-Type": "application/json",
        Authorization: getAuthHeader(apiKey),
        ...options.headers,
      },
    });

    if (!response.ok) {
      throw new Error(`Tawk API error: ${response.status} ${response.statusText}`);
    }

    return response.json() as Promise<T>;
  }

  return {
    /** List recent chats for the property */
    async getChats(page = 0, limit = 20) {
      return request<{ data: Array<{ id: string; visitor: { name: string; email: string }; messages: unknown[] }> }>(
        `/property/${propertyId}/chats?page=${page}&limit=${limit}`
      );
    },

    /** Get details of a specific chat */
    async getChat(chatId: string) {
      return request<{ data: { id: string; visitor: Record<string, unknown>; messages: unknown[] } }>(
        `/property/${propertyId}/chat/${chatId}`
      );
    },

    /** Get visitor details */
    async getVisitor(visitorId: string) {
      return request<{ data: { name: string; email: string; city: string; country: string } }>(
        `/property/${propertyId}/visitor/${visitorId}`
      );
    },

    /** Create a ticket from a chat */
    async createTicket(data: { chatId: string; subject: string; message: string }) {
      return request<{ data: { id: string } }>(`/property/${propertyId}/ticket`, {
        method: "POST",
        body: JSON.stringify(data),
      });
    },
  };
}

// Usage in a server action or API route:
// const tawk = createTawkClient({
//   apiKey: process.env.TAWK_API_KEY!,
//   propertyId: process.env.NEXT_PUBLIC_TAWK_PROPERTY_ID!,
// });
// const chats = await tawk.getChats();

// Example: Trigger proactive message on pricing page after 10 seconds
// This runs inside the onLoad callback of TawkToWidget

window.Tawk_API!.onLoad = () => {
  // Track page-specific events for auto-trigger targeting
  if (window.location.pathname === "/pricing") {
    window.Tawk_API!.addEvent("viewed-pricing", {
      timestamp: Date.now().toString(),
    });
  }

  // Track high-intent actions
  if (window.location.pathname.startsWith("/checkout")) {
    window.Tawk_API!.addTags(["checkout-visitor"]);
  }
};

"use client";

import { useEffect } from "react";
import { usePathname } from "next/navigation";

interface CrispProviderProps {
  /** User email for identification */
  userEmail?: string;
  /** User display name */
  userName?: string;
  /** User avatar URL */
  userAvatar?: string;
  /** Token for identity verification (computed server-side) */
  userToken?: string;
  /** Custom session data */
  sessionData?: Record<string, string | number | boolean>;
  /** Segments to apply to the session */
  segments?: string[];
  /** Routes where the widget should be hidden */
  hiddenRoutes?: string[];
}

export function CrispProvider({
  userEmail,
  userName,
  userAvatar,
  userToken,
  sessionData,
  segments,
  hiddenRoutes = [],
}: CrispProviderProps) {
  const pathname = usePathname();

  // Initialize Crisp on mount
  useEffect(() => {
    const websiteId = process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID;
    if (!websiteId) {
      console.warn("Crisp: Missing NEXT_PUBLIC_CRISP_WEBSITE_ID");
      return;
    }

    let isMounted = true;

    async function initCrisp() {
      const { Crisp } = await import("crisp-sdk-web");

      if (!isMounted) return;

      Crisp.configure(websiteId!);

      // Set user identity
      if (userEmail) {
        Crisp.user.setEmail(userEmail);
        if (userToken) {
          Crisp.user.setTokenId(userToken);
        }
      }
      if (userName) {
        Crisp.user.setNickname(userName);
      }
      if (userAvatar) {
        Crisp.user.setAvatar(userAvatar);
      }

      // Set session data (custom attributes visible to agents)
      if (sessionData) {
        Crisp.session.setData(sessionData);
      }

      // Set segments for chatbot targeting and filtering
      if (segments && segments.length > 0) {
        Crisp.session.setSegments(segments, true); // true = overwrite existing
      }

      // Register event listeners for analytics
      Crisp.chat.onChatOpened(() => {
        // Example: track in your analytics provider
        // analytics.track("support_chat_opened", { page: window.location.pathname });
      });

      Crisp.chat.onChatClosed(() => {
        // analytics.track("support_chat_closed");
      });

      Crisp.message.onMessageSent(() => {
        // analytics.track("support_message_sent");
      });
    }

    initCrisp();

    return () => {
      isMounted = false;
    };
  }, [userEmail, userName, userAvatar, userToken, sessionData, segments]);

  // Show/hide widget based on route
  useEffect(() => {
    async function updateVisibility() {
      const { Crisp } = await import("crisp-sdk-web");
      const shouldHide = hiddenRoutes.some((route) => pathname.startsWith(route));

      if (shouldHide) {
        Crisp.chat.hide();
      } else {
        Crisp.chat.show();
      }
    }

    if (hiddenRoutes.length > 0) {
      updateVisibility();
    }
  }, [pathname, hiddenRoutes]);

  return null;
}

import { NextResponse } from "next/server";
import { createHmac } from "crypto";
import { auth } from "@/lib/auth";

export async function GET() {
  const session = await auth();

  if (!session?.user?.email) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const secret = process.env.CRISP_IDENTITY_SECRET;
  if (!secret) {
    return NextResponse.json({ error: "Crisp identity secret not configured" }, { status: 500 });
  }

  const token = createHmac("sha256", secret)
    .update(session.user.email)
    .digest("hex");

  return NextResponse.json({ token });
}

import dynamic from "next/dynamic";
import { auth } from "@/lib/auth";
import { computeCrispToken } from "@/lib/crisp/token";

const CrispProvider = dynamic(
  () => import("@/components/support/crisp-provider").then((mod) => mod.CrispProvider),
  { ssr: false }
);

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const session = await auth();

  const crispToken = session?.user?.email
    ? computeCrispToken(session.user.email)
    : undefined;

  return (
    <html lang="en">
      <body>
        {children}
        <CrispProvider
          userEmail={session?.user?.email ?? undefined}
          userName={session?.user?.name ?? undefined}
          userAvatar={session?.user?.image ?? undefined}
          userToken={crispToken}
          sessionData={
            session?.user
              ? {
                  plan: session.user.plan ?? "free",
                  accountId: session.user.id,
                  signupDate: session.user.createdAt ?? "",
                }
              : undefined
          }
          segments={
            session?.user?.plan === "pro" ? ["paying", "pro"] : ["free"]
          }
          hiddenRoutes={["/blog", "/docs"]}
        />
      </body>
    </html>
  );
}

const CRISP_API_BASE = "https://api.crisp.chat/v1";

interface CrispApiConfig {
  tokenId: string;
  tokenKey: string;
  websiteId: string;
}

export function createCrispClient(config: CrispApiConfig) {
  const { tokenId, tokenKey, websiteId } = config;

  const authHeader = `Basic ${Buffer.from(`${tokenId}:${tokenKey}`).toString("base64")}`;

  async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
    const response = await fetch(`${CRISP_API_BASE}${path}`, {
      ...options,
      headers: {
        "Content-Type": "application/json",
        Authorization: authHeader,
        ...options.headers,
      },
    });

    if (!response.ok) {
      const body = await response.text();
      throw new Error(`Crisp API error: ${response.status} - ${body}`);
    }

    const json = await response.json();
    return json.data as T;
  }

  return {
    // --- Conversations ---

    /** List conversations with optional pagination */
    async listConversations(page = 1) {
      return request<Array<{ session_id: string; meta: Record<string, unknown>; state: string }>>(
        `/website/${websiteId}/conversations/${page}`
      );
    },

    /** Get a single conversation */
    async getConversation(sessionId: string) {
      return request<{ session_id: string; state: string; meta: Record<string, unknown> }>(
        `/website/${websiteId}/conversation/${sessionId}`
      );
    },

    /** Get messages in a conversation */
    async getMessages(sessionId: string) {
      return request<Array<{ type: string; from: string; content: string; timestamp: number }>>(
        `/website/${websiteId}/conversation/${sessionId}/messages`
      );
    },

    /** Send a message in a conversation */
    async sendMessage(sessionId: string, message: string, type: "text" | "note" = "text") {
      return request<void>(`/website/${websiteId}/conversation/${sessionId}/message`, {
        method: "POST",
        body: JSON.stringify({
          type,
          from: "operator",
          origin: "chat",
          content: message,
        }),
      });
    },

    /** Resolve a conversation */
    async resolveConversation(sessionId: string) {
      return request<void>(`/website/${websiteId}/conversation/${sessionId}/state`, {
        method: "PATCH",
        body: JSON.stringify({ state: "resolved" }),
      });
    },

    // --- Helpdesk Articles ---

    /** Create a helpdesk article */
    async createArticle(locale: string, data: { title: string; content: string; category?: string; status?: "published" | "draft" }) {
      return request<{ article_id: string }>(
        `/website/${websiteId}/helpdesk/locale/${locale}/article`,
        {
          method: "POST",
          body: JSON.stringify(data),
        }
      );
    },

    /** Update an existing article */
    async updateArticle(locale: string, articleId: string, data: Partial<{ title: string; content: string; status: string }>) {
      return request<void>(
        `/website/${websiteId}/helpdesk/locale/${locale}/article/${articleId}`,
        {
          method: "PATCH",
          body: JSON.stringify(data),
        }
      );
    },

    /** List all articles */
    async listArticles(locale: string, page = 1) {
      return request<Array<{ article_id: string; title: string; status: string }>>(
        `/website/${websiteId}/helpdesk/locale/${locale}/articles/${page}`
      );
    },

    // --- People (CRM) ---

    /** Get a contact profile */
    async getContact(peopleId: string) {
      return request<{ people_id: string; email: string; data: Record<string, unknown> }>(
        `/website/${websiteId}/people/data/${peopleId}`
      );
    },

    /** Update a contact profile */
    async updateContact(peopleId: string, data: Record<string, unknown>) {
      return request<void>(`/website/${websiteId}/people/data/${peopleId}`, {
        method: "PATCH",
        body: JSON.stringify({ data }),
      });
    },
  };
}

// Usage:
// const crisp = createCrispClient({
//   tokenId: process.env.CRISP_TOKEN_ID!,
//   tokenKey: process.env.CRISP_TOKEN_KEY!,
//   websiteId: process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID!,
// });
// const conversations = await crisp.listConversations();

import { createHmac } from "crypto";

export function computeCrispToken(email: string): string {
  const secret = process.env.CRISP_IDENTITY_SECRET;
  if (!secret) {
    throw new Error("Missing CRISP_IDENTITY_SECRET environment variable");
  }
  return createHmac("sha256", secret).update(email).digest("hex");
}

"use client";

import { useEffect, useCallback } from "react";
import { usePathname } from "next/navigation";
import Intercom from "@intercom/messenger-js-sdk";

interface IntercomProviderProps {
  /** Intercom app ID */
  appId: string;
  /** Authenticated user ID */
  userId?: string;
  /** User display name */
  userName?: string;
  /** User email */
  userEmail?: string;
  /** Unix timestamp of user creation */
  userCreatedAt?: number;
  /** HMAC hash for identity verification (computed server-side) */
  userHash?: string;
  /** Custom attributes to pass to Intercom */
  customAttributes?: Record<string, string | number | boolean>;
  /** Whether to hide the default launcher */
  hideDefaultLauncher?: boolean;
  /** Routes where Intercom should be hidden */
  hiddenRoutes?: string[];
}

export function IntercomProvider({
  appId,
  userId,
  userName,
  userEmail,
  userCreatedAt,
  userHash,
  customAttributes,
  hideDefaultLauncher = false,
  hiddenRoutes = [],
}: IntercomProviderProps) {
  const pathname = usePathname();

  // Boot Intercom on mount
  useEffect(() => {
    if (!appId) {
      console.warn("Intercom: Missing app_id");
      return;
    }

    const settings: Record<string, unknown> = {
      app_id: appId,
      hide_default_launcher: hideDefaultLauncher,
    };

    // Add authenticated user data
    if (userId && userEmail) {
      settings.user_id = userId;
      settings.email = userEmail;
      if (userName) settings.name = userName;
      if (userCreatedAt) settings.created_at = userCreatedAt;
      if (userHash) settings.user_hash = userHash;
      if (customAttributes) {
        Object.assign(settings, customAttributes);
      }
    }

    Intercom(settings);

    return () => {
      Intercom("shutdown");
    };
  }, [appId, userId, userName, userEmail, userCreatedAt, userHash, customAttributes, hideDefaultLauncher]);

  // Update on route change for SPA page tracking
  useEffect(() => {
    Intercom("update");
  }, [pathname]);

  // Hide/show based on route
  useEffect(() => {
    if (hiddenRoutes.length === 0) return;

    const shouldHide = hiddenRoutes.some((route) => pathname.startsWith(route));

    if (shouldHide) {
      Intercom("update", { hide_default_launcher: true });
    } else {
      Intercom("update", { hide_default_launcher: hideDefaultLauncher });
    }
  }, [pathname, hiddenRoutes, hideDefaultLauncher]);

  return null;
}

import { NextResponse } from "next/server";
import { createHmac } from "crypto";
import { auth } from "@/lib/auth";

export async function GET() {
  const session = await auth();

  if (!session?.user?.id) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const secret = process.env.INTERCOM_IDENTITY_SECRET;
  if (!secret) {
    return NextResponse.json(
      { error: "Intercom identity secret not configured" },
      { status: 500 }
    );
  }

  const hash = createHmac("sha256", secret)
    .update(session.user.id)
    .digest("hex");

  return NextResponse.json({ hash });
}

import dynamic from "next/dynamic";
import { auth } from "@/lib/auth";
import { computeIntercomHash } from "@/lib/intercom/hash";

const IntercomProvider = dynamic(
  () => import("@/components/support/intercom-provider").then((mod) => mod.IntercomProvider),
  { ssr: false }
);

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const session = await auth();

  const intercomHash = session?.user?.id
    ? computeIntercomHash(session.user.id)
    : undefined;

  return (
    <html lang="en">
      <body>
        {children}
        <IntercomProvider
          appId={process.env.NEXT_PUBLIC_INTERCOM_APP_ID!}
          userId={session?.user?.id}
          userName={session?.user?.name ?? undefined}
          userEmail={session?.user?.email ?? undefined}
          userCreatedAt={
            session?.user?.createdAt
              ? Math.floor(new Date(session.user.createdAt).getTime() / 1000)
              : undefined
          }
          userHash={intercomHash}
          customAttributes={
            session?.user
              ? {
                  plan: session.user.plan ?? "free",
                  company_name: session.user.companyName ?? "",
                  mrr: session.user.mrr ?? 0,
                }
              : undefined
          }
          hiddenRoutes={["/blog", "/docs"]}
        />
      </body>
    </html>
  );
}

"use client";

import { useCallback } from "react";
import Intercom from "@intercom/messenger-js-sdk";

interface IntercomLauncherProps {
  /** Number of unread messages to show in badge */
  unreadCount?: number;
  className?: string;
}

export function IntercomLauncher({ unreadCount = 0, className }: IntercomLauncherProps) {
  const handleClick = useCallback(() => {
    Intercom("show");
  }, []);

  return (
    <button
      onClick={handleClick}
      className={className}
      aria-label={`Open support chat${unreadCount > 0 ? `, ${unreadCount} unread messages` : ""}`}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        className="h-6 w-6"
        aria-hidden="true"
      >
        <path d="M4.913 2.658c2.075-.27 4.19-.408 6.337-.408 2.147 0 4.262.139 6.337.408 1.922.25 3.291 1.861 3.405 3.727a4.403 4.403 0 0 0-1.032-.211 50.89 50.89 0 0 0-8.42 0c-2.358.196-4.04 2.19-4.04 4.434v4.286a4.47 4.47 0 0 0 2.433 3.984L7.28 21.53A.75.75 0 0 1 6 20.97v-3.364a4.393 4.393 0 0 1-1.942-1.655 4.482 4.482 0 0 1-.645-1.753c-.244-1.424-.244-2.956 0-4.38.25-1.458 1.283-2.647 2.5-3.16Z" />
        <path d="M15.75 7.5c-1.376 0-2.739.057-4.086.169C10.124 7.797 9 9.103 9 10.609v4.285c0 1.507 1.128 2.814 2.67 2.94 1.243.102 2.5.157 3.768.165l2.782 2.781a.75.75 0 0 0 1.28-.53v-2.39l.33-.026c1.542-.125 2.67-1.433 2.67-2.94v-4.286c0-1.505-1.125-2.811-2.664-2.94A49.392 49.392 0 0 0 15.75 7.5Z" />
      </svg>
      {unreadCount > 0 && (
        <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white">
          {unreadCount > 9 ? "9+" : unreadCount}
        </span>
      )}
    </button>
  );
}

"use client";

import { useEffect, useRef } from "react";
import Intercom from "@intercom/messenger-js-sdk";

/**
 * Trigger an Intercom product tour when a condition is met.
 * Uses localStorage to prevent showing the same tour twice.
 */
export function useIntercomTour(tourId: number, shouldTrigger: boolean) {
  const hasTriggered = useRef(false);

  useEffect(() => {
    if (!shouldTrigger || hasTriggered.current) return;

    const storageKey = `intercom_tour_${tourId}_completed`;
    const alreadyCompleted = localStorage.getItem(storageKey) === "true";

    if (alreadyCompleted) return;

    // Slight delay to ensure the page has rendered target elements
    const timer = setTimeout(() => {
      Intercom("startTour", tourId);
      hasTriggered.current = true;
      localStorage.setItem(storageKey, "true");
    }, 1000);

    return () => clearTimeout(timer);
  }, [tourId, shouldTrigger]);
}

// Usage in a page component:
// function DashboardPage() {
//   const { isFirstVisit } = useOnboarding();
//   useIntercomTour(12345, isFirstVisit);
//   return <Dashboard />;
// }

const INTERCOM_API_BASE = "https://api.intercom.io";

interface IntercomApiConfig {
  accessToken: string;
}

export function createIntercomClient(config: IntercomApiConfig) {
  const { accessToken } = config;

  async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
    const response = await fetch(`${INTERCOM_API_BASE}${path}`, {
      ...options,
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${accessToken}`,
        Accept: "application/json",
        "Intercom-Version": "2.11",
        ...options.headers,
      },
    });

    if (!response.ok) {
      const body = await response.text();
      throw new Error(`Intercom API error: ${response.status} - ${body}`);
    }

    return response.json() as Promise<T>;
  }

  return {
    // --- Conversations ---

    /** Create a new conversation from a user */
    async createConversation(userId: string, message: string) {
      return request<{ id: string; state: string }>("/conversations", {
        method: "POST",
        body: JSON.stringify({
          from: { type: "user", id: userId },
          body: message,
        }),
      });
    },

    /** Reply to a conversation as an admin */
    async replyToConversation(conversationId: string, adminId: string, message: string) {
      return request<{ id: string }>(`/conversations/${conversationId}/reply`, {
        method: "POST",
        body: JSON.stringify({
          message_type: "comment",
          type: "admin",
          admin_id: adminId,
          body: message,
        }),
      });
    },

    /** Close a conversation */
    async closeConversation(conversationId: string, adminId: string, body?: string) {
      return request<{ id: string }>(`/conversations/${conversationId}/parts`, {
        method: "POST",
        body: JSON.stringify({
          message_type: "close",
          type: "admin",
          admin_id: adminId,
          body: body || "Conversation resolved.",
        }),
      });
    },

    /** Tag a conversation */
    async tagConversation(conversationId: string, tagId: string) {
      return request<{ id: string }>(`/conversations/${conversationId}/tags`, {
        method: "POST",
        body: JSON.stringify({ id: tagId }),
      });
    },

    /** Search conversations with filters */
    async searchConversations(query: {
      field: string;
      operator: string;
      value: string | number | boolean;
    }) {
      return request<{ conversations: Array<{ id: string; state: string; title: string }> }>(
        "/conversations/search",
        {
          method: "POST",
          body: JSON.stringify({
            query: {
              field: query.field,
              operator: query.operator,
              value: query.value,
            },
          }),
        }
      );
    },

    // --- Articles ---

    /** Create a help center article */
    async createArticle(data: {
      title: string;
      body: string;
      author_id: number;
      state: "published" | "draft";
      parent_id?: number;
      parent_type?: "collection" | "section";
    }) {
      return request<{ id: string; title: string }>("/articles", {
        method: "POST",
        body: JSON.stringify(data),
      });
    },

    /** Update an existing article */
    async updateArticle(articleId: string, data: Partial<{ title: string; body: string; state: string }>) {
      return request<{ id: string }>(`/articles/${articleId}`, {
        method: "PUT",
        body: JSON.stringify(data),
      });
    },

    /** List all articles */
    async listArticles(page = 1, perPage = 25) {
      return request<{ data: Array<{ id: string; title: string; state: string }> }>(
        `/articles?page=${page}&per_page=${perPage}`
      );
    },

    // --- Contacts ---

    /** Find or create a contact */
    async findOrCreateContact(data: { email: string; name?: string; custom_attributes?: Record<string, unknown> }) {
      // Search first
      const searchResult = await request<{ data: Array<{ id: string }> }>("/contacts/search", {
        method: "POST",
        body: JSON.stringify({
          query: {
            field: "email",
            operator: "=",
            value: data.email,
          },
        }),
      });

      if (searchResult.data.length > 0) {
        return searchResult.data[0];
      }

      // Create if not found
      return request<{ id: string }>("/contacts", {
        method: "POST",
        body: JSON.stringify({
          role: "user",
          ...data,
        }),
      });
    },

    /** Update contact attributes */
    async updateContact(contactId: string, data: Record<string, unknown>) {
      return request<{ id: string }>(`/contacts/${contactId}`, {
        method: "PUT",
        body: JSON.stringify(data),
      });
    },

    // --- Events ---

    /** Submit a user event for behavioral targeting */
    async trackEvent(data: { event_name: string; user_id: string; metadata?: Record<string, unknown>; created_at?: number }) {
      return request<void>("/events", {
        method: "POST",
        body: JSON.stringify({
          ...data,
          created_at: data.created_at || Math.floor(Date.now() / 1000),
        }),
      });
    },
  };
}

// Usage:
// const intercom = createIntercomClient({
//   accessToken: process.env.INTERCOM_ACCESS_TOKEN!,
// });
// await intercom.createConversation("user_abc123", "I need help with billing.");

import { createHmac } from "crypto";

export function computeIntercomHash(userId: string): string {
  const secret = process.env.INTERCOM_IDENTITY_SECRET;
  if (!secret) {
    throw new Error("Missing INTERCOM_IDENTITY_SECRET environment variable");
  }
  return createHmac("sha256", secret).update(userId).digest("hex");
}

// layout.tsx — the wrong way
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <script src="https://embed.tawk.to/PROP_ID/WIDGET_ID" />
      </head>
      <body>{children}</body>
    </html>
  );
}

import dynamic from "next/dynamic";

const TawkToWidget = dynamic(
  () => import("@/components/support/tawk-to-widget").then((mod) => mod.TawkToWidget),
  { ssr: false }
);

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <TawkToWidget />
      </body>
    </html>
  );
}

// No identity passed — agent has zero context
useEffect(() => {
  Crisp.configure(websiteId);
  // That is it. No user data.
}, []);

useEffect(() => {
  Crisp.configure(websiteId);
  if (session?.user) {
    Crisp.user.setEmail(session.user.email);
    Crisp.user.setNickname(session.user.name);
    Crisp.session.setData({
      plan: session.user.plan,
      accountId: session.user.id,
      signupDate: session.user.createdAt,
    });
  }
}, [session]);

// Client passes email directly — no HMAC verification
Crisp.user.setEmail(userEmail);

// Server-side
const token = createHmac("sha256", process.env.CRISP_IDENTITY_SECRET!)
  .update(userEmail)
  .digest("hex");

// Client-side
Crisp.user.setEmail(userEmail);
Crisp.user.setTokenId(token); // Crisp verifies this hash

// Boot once, never update — Intercom thinks the user is on the same page forever
useEffect(() => {
  Intercom({ app_id: appId });
}, []);

const pathname = usePathname();

useEffect(() => {
  Intercom({ app_id: appId });
}, []);

useEffect(() => {
  Intercom("update");
}, [pathname]);

// Widget always visible, no route filtering
export function ChatWidget() {
  useEffect(() => {
    Crisp.configure(websiteId);
  }, []);
  return null;
}

const pathname = usePathname();

useEffect(() => {
  const supportPages = ["/dashboard", "/settings", "/pricing", "/account"];
  const isSupported = supportPages.some((page) => pathname.startsWith(page));

  if (isSupported) {
    Crisp.chat.show();
  } else {
    Crisp.chat.hide();
  }
}, [pathname]);

// Logout handler — no Intercom cleanup
async function handleLogout() {
  await signOut();
  router.push("/login");
}

async function handleLogout() {
  Intercom("shutdown"); // Clear User A's data
  await signOut();
  Intercom({ app_id: appId }); // Re-init anonymous
  router.push("/login");
}

Bot: What issue are you experiencing?
User: Billing problem
Bot: What kind of billing problem?
User: I was charged twice
Bot: When were you charged?
User: Yesterday
Bot: Can you provide your invoice number?
User: I DON'T KNOW JUST LET ME TALK TO SOMEONE
Bot: I did not understand that. What kind of billing problem are you experiencing?

Bot: What issue are you experiencing?
  [Billing] [Technical] [Account] [Talk to a human]
User: Billing
Bot: I can help with billing. What happened?
  [Charged twice] [Refund request] [Update payment] [Talk to a human]
User: Charged twice
Bot: I am sorry about that. Let me connect you with our billing team right away.
  → [Routes to human agent with context: "Billing > Charged twice"]

# .env.local — WRONG
NEXT_PUBLIC_INTERCOM_SECRET=sk_live_abc123def456
NEXT_PUBLIC_TAWK_API_KEY=abc123xyz

# .env.local — CORRECT
NEXT_PUBLIC_INTERCOM_APP_ID=abc123              # Safe: public identifier
INTERCOM_IDENTITY_SECRET=sk_live_abc123def456   # Server-only: never reaches client
INTERCOM_ACCESS_TOKEN=dG9rOmFiYz...             # Server-only: API access

// Widget always shows "Chat with us" regardless of agent availability
Crisp.configure(websiteId);

// In Crisp: set availability schedule in dashboard
// In Tawk.to: configure offline form in widget settings
// In Intercom: use office hours and set away mode messaging

// Programmatic approach: check agent availability
Crisp.chat.onChatOpened(() => {
  // Crisp automatically shows offline form when no operators are available
  // Ensure you have configured the offline form in dashboard > Settings > Chat Widget
});

// For Tawk.to: hide widget entirely when offline
window.Tawk_API!.onBeforeLoad = () => {
  if (window.Tawk_API!.getStatus() === "offline") {
    window.Tawk_API!.hideWidget();
  }
};

// next.config.ts — strict CSP that blocks chat widgets
const cspHeader = `
  script-src 'self';
  connect-src 'self';
  frame-src 'self';
`;

// next.config.ts — CSP with Tawk.to allowed
const cspHeader = `
  script-src 'self' https://embed.tawk.to;
  connect-src 'self' wss://chat.tawk.to https://va.tawk.to;
  frame-src 'self' https://tawk.to;
  img-src 'self' https://tawk.to;
`;

// For Crisp:
// script-src 'self' https://client.crisp.chat;
// connect-src 'self' wss://client.relay.crisp.chat https://client.crisp.chat;
// frame-src 'self' https://game.crisp.chat;
// img-src 'self' https://image.crisp.chat https://storage.crisp.chat;

// For Intercom:
// script-src 'self' https://widget.intercom.io https://js.intercomcdn.com;
// connect-src 'self' https://api-iam.intercom.io wss://nexus-websocket-a.intercom.io;
// frame-src 'self' https://intercom-sheets.com;
// img-src 'self' https://static.intercomassets.com https://downloads.intercomcdn.com;