// 1. Install
// npm install twilio

// 2. Environment variables (.env.local)
// TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
// TWILIO_AUTH_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
// TWILIO_PHONE_NUMBER=+1234567890

// 3. lib/twilio.ts -- Singleton client
import twilio from "twilio";

const accountSid = process.env.TWILIO_ACCOUNT_SID!;
const authToken = process.env.TWILIO_AUTH_TOKEN!;

export const twilioClient = twilio(accountSid, authToken);

export const TWILIO_PHONE_NUMBER = process.env.TWILIO_PHONE_NUMBER!;

// 4. lib/sms.ts -- Typed SMS sending function
import { twilioClient, TWILIO_PHONE_NUMBER } from "./twilio";

interface SendSmsParams {
  to: string;       // E.164 format: +1234567890
  body: string;     // Max 1600 chars (multi-segment)
  statusCallback?: string; // Webhook URL for delivery status
}

export async function sendSms({ to, body, statusCallback }: SendSmsParams) {
  const message = await twilioClient.messages.create({
    to,
    from: TWILIO_PHONE_NUMBER,
    body,
    ...(statusCallback && { statusCallback }),
  });

  return {
    sid: message.sid,
    status: message.status, // "queued" initially
  };
}

// 5. app/api/sms/send/route.ts -- API route for sending SMS
import { NextResponse } from "next/server";
import { sendSms } from "@/lib/sms";
import { auth } from "@/lib/auth"; // Your auth system

export async function POST(request: Request) {
  const session = await auth();
  if (!session) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const { to, body } = await request.json();

  // Validate E.164 phone number format
  if (!/^\+[1-9]\d{1,14}$/.test(to)) {
    return NextResponse.json(
      { error: "Invalid phone number. Use E.164 format: +1234567890" },
      { status: 400 }
    );
  }

  try {
    const result = await sendSms({
      to,
      body,
      statusCallback: `${process.env.NEXT_PUBLIC_APP_URL}/api/sms/status`,
    });

    return NextResponse.json({ messageSid: result.sid, status: result.status });
  } catch (error: any) {
    console.error("SMS send failed:", error.message);
    return NextResponse.json(
      { error: "Failed to send SMS" },
      { status: 500 }
    );
  }
}

// lib/whatsapp.ts
import { twilioClient } from "./twilio";

interface SendWhatsAppParams {
  to: string;         // E.164 format: +1234567890 (no "whatsapp:" prefix)
  body?: string;      // Free-form text (only in 24hr reply window)
  templateSid?: string; // For business-initiated messages
  templateVars?: Record<string, string>;
}

export async function sendWhatsApp({
  to,
  body,
  templateSid,
  templateVars,
}: SendWhatsAppParams) {
  const messageParams: any = {
    to: `whatsapp:${to}`,
    from: `whatsapp:${process.env.TWILIO_WHATSAPP_NUMBER!}`,
  };

  if (templateSid) {
    // Business-initiated: use approved template
    messageParams.contentSid = templateSid;
    if (templateVars) {
      messageParams.contentVariables = JSON.stringify(templateVars);
    }
  } else if (body) {
    // Reply within 24hr window: free-form text
    messageParams.body = body;
  }

  const message = await twilioClient.messages.create(messageParams);
  return { sid: message.sid, status: message.status };
}

// For development/testing, use the Twilio Sandbox:
// 1. Go to Twilio Console > Messaging > Try it out > Send a WhatsApp message
// 2. Send "join <sandbox-keyword>" from your WhatsApp to the sandbox number
// 3. Use the sandbox number as TWILIO_WHATSAPP_NUMBER
// 4. Free-form messages work without templates in sandbox mode

// For production:
// 1. Register a WhatsApp Business Profile in Twilio Console
// 2. Get a dedicated WhatsApp-enabled number
// 3. Create and submit message templates for approval (takes 24-48hrs)
// 4. Use contentSid for business-initiated messages

// lib/verify.ts
import { twilioClient } from "./twilio";

const VERIFY_SERVICE_SID = process.env.TWILIO_VERIFY_SERVICE_SID!;
// Create a Verify Service in Twilio Console > Verify > Services
// The Service SID starts with "VA"

export async function sendVerificationCode(
  to: string,
  channel: "sms" | "call" | "email" | "whatsapp" = "sms"
) {
  const verification = await twilioClient.verify.v2
    .services(VERIFY_SERVICE_SID)
    .verifications.create({
      to, // E.164 phone number or email address
      channel,
    });

  return { status: verification.status }; // "pending"
}

export async function checkVerificationCode(to: string, code: string) {
  try {
    const check = await twilioClient.verify.v2
      .services(VERIFY_SERVICE_SID)
      .verificationChecks.create({
        to,
        code,
      });

    return {
      valid: check.status === "approved",
      status: check.status, // "approved" or "pending"
    };
  } catch (error: any) {
    // Code expired or too many attempts
    if (error.code === 20404) {
      return { valid: false, status: "expired" };
    }
    throw error;
  }
}

// app/api/verify/send/route.ts
import { NextResponse } from "next/server";
import { sendVerificationCode } from "@/lib/verify";

export async function POST(request: Request) {
  const { phone } = await request.json();

  if (!/^\+[1-9]\d{1,14}$/.test(phone)) {
    return NextResponse.json(
      { error: "Invalid phone number format" },
      { status: 400 }
    );
  }

  try {
    const result = await sendVerificationCode(phone);
    return NextResponse.json({ status: result.status });
  } catch (error: any) {
    // Rate limited by Twilio Verify (max 5 attempts per phone per interval)
    if (error.code === 60203) {
      return NextResponse.json(
        { error: "Too many attempts. Try again later." },
        { status: 429 }
      );
    }
    return NextResponse.json(
      { error: "Failed to send code" },
      { status: 500 }
    );
  }
}

// app/api/verify/check/route.ts
import { NextResponse } from "next/server";
import { checkVerificationCode } from "@/lib/verify";

export async function POST(request: Request) {
  const { phone, code } = await request.json();

  const result = await checkVerificationCode(phone, code);

  if (result.valid) {
    // Mark phone as verified in your database
    // Set session flag, issue token, etc.
    return NextResponse.json({ verified: true });
  }

  return NextResponse.json(
    { verified: false, status: result.status },
    { status: 400 }
  );
}

// app/api/sms/incoming/route.ts
import { NextResponse } from "next/server";
import twilio from "twilio";

const TWILIO_AUTH_TOKEN = process.env.TWILIO_AUTH_TOKEN!;

export async function POST(request: Request) {
  // 1. Verify the request is from Twilio
  const url = new URL(request.url);
  const body = await request.text();
  const params = new URLSearchParams(body);

  const signature = request.headers.get("x-twilio-signature") || "";
  const fullUrl = `${process.env.NEXT_PUBLIC_APP_URL}${url.pathname}`;

  const isValid = twilio.validateRequest(
    TWILIO_AUTH_TOKEN,
    signature,
    fullUrl,
    Object.fromEntries(params)
  );

  if (!isValid) {
    return NextResponse.json({ error: "Invalid signature" }, { status: 403 });
  }

  // 2. Extract message data
  const from = params.get("From")!;        // +1234567890 or whatsapp:+1234567890
  const to = params.get("To")!;
  const messageBody = params.get("Body")!;
  const messageSid = params.get("MessageSid")!;
  const numMedia = parseInt(params.get("NumMedia") || "0", 10);

  // 3. Handle opt-out keywords (Twilio handles STOP automatically,
  //    but you should update your database)
  const upperBody = messageBody.trim().toUpperCase();
  if (["STOP", "UNSUBSCRIBE", "CANCEL", "QUIT"].includes(upperBody)) {
    await updateOptOutStatus(from, true);
    // Twilio sends an automatic STOP confirmation -- no TwiML response needed
    return new Response("<Response></Response>", {
      headers: { "Content-Type": "text/xml" },
    });
  }

  // 4. Process the incoming message
  await processIncomingMessage({
    from,
    to,
    body: messageBody,
    sid: messageSid,
    mediaCount: numMedia,
    // Access media URLs: params.get("MediaUrl0"), params.get("MediaContentType0")
  });

  // 5. Optionally reply with TwiML
  const twiml = `
    <Response>
      <Message>Thanks for your message! We'll get back to you shortly.</Message>
    </Response>
  `;

  return new Response(twiml, {
    headers: { "Content-Type": "text/xml" },
  });
}

// app/api/sms/status/route.ts -- Delivery status webhook
import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const body = await request.text();
  const params = new URLSearchParams(body);

  const messageSid = params.get("MessageSid")!;
  const status = params.get("MessageStatus")!;
  // Status values: queued, sent, delivered, undelivered, failed
  const errorCode = params.get("ErrorCode"); // Present if failed/undelivered

  await updateMessageStatus(messageSid, status, errorCode);

  return NextResponse.json({ received: true });
}

// lib/voice.ts
import { twilioClient, TWILIO_PHONE_NUMBER } from "./twilio";

interface MakeCallParams {
  to: string;
  twimlUrl: string;     // URL that returns TwiML instructions
  statusCallback?: string;
}

export async function makeCall({ to, twimlUrl, statusCallback }: MakeCallParams) {
  const call = await twilioClient.calls.create({
    to,
    from: TWILIO_PHONE_NUMBER,
    url: twimlUrl,
    ...(statusCallback && {
      statusCallback,
      statusCallbackEvent: ["initiated", "ringing", "answered", "completed"],
    }),
  });

  return { sid: call.sid, status: call.status };
}

// app/api/voice/twiml/route.ts -- TwiML for call flow
export async function POST(request: Request) {
  // Simple example: text-to-speech greeting, then gather digits
  const twiml = `
    <Response>
      <Say voice="Polly.Amy" language="en-GB">
        Hello! Thank you for calling. Press 1 for support, or press 2 for billing.
      </Say>
      <Gather numDigits="1" action="/api/voice/handle-input" method="POST">
        <Say>Please make your selection now.</Say>
      </Gather>
      <Say>We didn't receive any input. Goodbye.</Say>
    </Response>
  `;

  return new Response(twiml, {
    headers: { "Content-Type": "text/xml" },
  });
}

// app/api/voice/handle-input/route.ts
export async function POST(request: Request) {
  const body = await request.text();
  const params = new URLSearchParams(body);
  const digit = params.get("Digits");

  let twiml: string;

  switch (digit) {
    case "1":
      twiml = `
        <Response>
          <Say>Connecting you to support.</Say>
          <Dial>${process.env.SUPPORT_PHONE_NUMBER}</Dial>
        </Response>
      `;
      break;
    case "2":
      twiml = `
        <Response>
          <Say>Connecting you to billing.</Say>
          <Dial>${process.env.BILLING_PHONE_NUMBER}</Dial>
        </Response>
      `;
      break;
    default:
      twiml = `
        <Response>
          <Say>Invalid selection. Goodbye.</Say>
        </Response>
      `;
  }

  return new Response(twiml, {
    headers: { "Content-Type": "text/xml" },
  });
}

// 1. Install
// npm install stream-chat stream-chat-react

// 2. Environment variables (.env.local)
// NEXT_PUBLIC_STREAM_API_KEY=your_api_key
// STREAM_API_SECRET=your_api_secret  (server-side only, no NEXT_PUBLIC_ prefix)

// 3. lib/stream.ts -- Server-side client (for token generation, admin operations)
import { StreamChat } from "stream-chat";

let serverClient: StreamChat | null = null;

export function getStreamServerClient(): StreamChat {
  if (!serverClient) {
    serverClient = StreamChat.getInstance(
      process.env.NEXT_PUBLIC_STREAM_API_KEY!,
      process.env.STREAM_API_SECRET!
    );
  }
  return serverClient;
}

// Generate a user token -- MUST be called server-side only
export function generateStreamToken(userId: string): string {
  const client = getStreamServerClient();
  return client.createToken(userId);
}

// Generate a token with expiration (recommended for production)
export function generateStreamTokenWithExpiry(
  userId: string,
  expiresInSeconds: number = 3600
): string {
  const client = getStreamServerClient();
  const expiresAt = Math.floor(Date.now() / 1000) + expiresInSeconds;
  return client.createToken(userId, expiresAt);
}

// 4. app/api/stream/token/route.ts -- Token endpoint
import { NextResponse } from "next/server";
import { generateStreamTokenWithExpiry, getStreamServerClient } from "@/lib/stream";
import { auth } from "@/lib/auth";

export async function GET() {
  const session = await auth();
  if (!session?.user?.id) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  // Upsert the user in Stream (sync from your auth system)
  const serverClient = getStreamServerClient();
  await serverClient.upsertUser({
    id: session.user.id,
    name: session.user.name || "Anonymous",
    image: session.user.image,
    // Custom fields
    role: "user",
  });

  const token = generateStreamTokenWithExpiry(session.user.id);

  return NextResponse.json({ token, userId: session.user.id });
}

// 5. components/chat/stream-provider.tsx -- Client-side provider
"use client";

import { useEffect, useState } from "react";
import { StreamChat } from "stream-chat";
import { Chat } from "stream-chat-react";
import "stream-chat-react/dist/css/v2/index.css";

const apiKey = process.env.NEXT_PUBLIC_STREAM_API_KEY!;

interface StreamProviderProps {
  children: React.ReactNode;
}

export function StreamChatProvider({ children }: StreamProviderProps) {
  const [client, setClient] = useState<StreamChat | null>(null);

  useEffect(() => {
    const chatClient = StreamChat.getInstance(apiKey);

    async function connectUser() {
      // Fetch token from your backend
      const res = await fetch("/api/stream/token");
      const { token, userId } = await res.json();

      await chatClient.connectUser(
        { id: userId },
        token
      );

      setClient(chatClient);
    }

    connectUser();

    return () => {
      chatClient.disconnectUser().then(() => {
        setClient(null);
      });
    };
  }, []);

  if (!client) return <div>Loading chat...</div>;

  return (
    <Chat client={client} theme="str-chat__theme-light">
      {children}
    </Chat>
  );
}

// components/chat/chat-view.tsx
"use client";

import { useEffect, useState } from "react";
import { Channel as StreamChannel } from "stream-chat";
import {
  Channel,
  ChannelHeader,
  ChannelList,
  MessageInput,
  MessageList,
  Thread,
  Window,
  useCreateChatClient,
} from "stream-chat-react";

interface ChatViewProps {
  userId: string;
}

export function ChatView({ userId }: ChatViewProps) {
  const [activeChannel, setActiveChannel] = useState<StreamChannel | null>(null);

  // Filter: show channels the current user is a member of
  const filters = { type: "messaging", members: { $in: [userId] } };
  const sort = { last_message_at: -1 as const };
  const options = { limit: 20, presence: true, state: true };

  return (
    <div className="flex h-[600px]">
      {/* Left sidebar: channel list */}
      <div className="w-[300px] border-r">
        <ChannelList
          filters={filters}
          sort={sort}
          options={options}
          setActiveChannel={setActiveChannel}
          showChannelSearch
        />
      </div>

      {/* Right panel: active conversation */}
      <div className="flex-1">
        <Channel channel={activeChannel ?? undefined}>
          <Window>
            <ChannelHeader />
            <MessageList />
            <MessageInput focus />
          </Window>
          <Thread />
        </Channel>
      </div>
    </div>
  );
}

// Creating channels server-side
// app/api/chat/channels/route.ts
import { NextResponse } from "next/server";
import { getStreamServerClient } from "@/lib/stream";
import { auth } from "@/lib/auth";

export async function POST(request: Request) {
  const session = await auth();
  if (!session?.user?.id) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const { memberIds, name, type = "messaging" } = await request.json();

  const serverClient = getStreamServerClient();

  // Create a channel with specific members
  const channel = serverClient.channel(type, {
    members: [session.user.id, ...memberIds],
    name,
    created_by_id: session.user.id,
    // Custom data
    // project_id: "proj_123",
  });

  await channel.create();

  return NextResponse.json({
    channelId: channel.id,
    channelType: channel.type,
  });
}

// Custom message types for rich content
// Server-side: send a custom message with structured data
import { getStreamServerClient } from "@/lib/stream";

export async function sendSystemMessage(
  channelId: string,
  channelType: string,
  data: {
    type: "invoice" | "file_shared" | "task_assigned";
    payload: Record<string, unknown>;
  }
) {
  const serverClient = getStreamServerClient();
  const channel = serverClient.channel(channelType, channelId);

  await channel.sendMessage({
    text: "", // Required but can be empty for custom types
    user_id: "system", // Requires a "system" user to be created
    type: "regular",
    // Custom fields
    custom_type: data.type,
    custom_payload: data.payload,
  });
}

// Client-side: render custom message types
// components/chat/custom-message.tsx
"use client";

import { MessageSimple, useMessageContext } from "stream-chat-react";

export function CustomMessage() {
  const { message } = useMessageContext();

  // Render custom message types with specialised UI
  if (message.custom_type === "invoice") {
    return (
      <div className="rounded-lg border bg-blue-50 p-4">
        <p className="font-semibold">Invoice #{message.custom_payload?.invoiceId}</p>
        <p className="text-2xl">${message.custom_payload?.amount}</p>
        <a
          href={message.custom_payload?.url as string}
          className="text-blue-600 underline"
        >
          View Invoice
        </a>
      </div>
    );
  }

  // Fall back to default rendering for normal messages
  return <MessageSimple />;
}

// Use it: <Channel Message={CustomMessage}>...</Channel>

// 1. Install
// npm install getstream

// 2. lib/stream-feeds.ts -- Server-side feed client
import { connect } from "getstream";

let feedClient: ReturnType<typeof connect> | null = null;

export function getStreamFeedClient() {
  if (!feedClient) {
    feedClient = connect(
      process.env.STREAM_FEEDS_API_KEY!,
      process.env.STREAM_FEEDS_API_SECRET!,
      process.env.STREAM_FEEDS_APP_ID!
    );
  }
  return feedClient;
}

// Generate a read-only feed token for the client
export function generateFeedToken(userId: string): string {
  const client = getStreamFeedClient();
  return client.createUserToken(userId);
}

// 3. Adding activities to a feed
// app/api/feeds/post/route.ts
import { NextResponse } from "next/server";
import { getStreamFeedClient } from "@/lib/stream-feeds";
import { auth } from "@/lib/auth";

export async function POST(request: Request) {
  const session = await auth();
  if (!session?.user?.id) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const { text, verb, object, target } = await request.json();

  const client = getStreamFeedClient();

  // Add activity to the user's feed
  const userFeed = client.feed("user", session.user.id);
  const activity = await userFeed.addActivity({
    actor: `user:${session.user.id}`,
    verb: verb || "post",           // "post", "like", "comment", "share"
    object: object || `post:${Date.now()}`,
    // Custom fields
    text,
    author_name: session.user.name,
    author_image: session.user.image,
    ...(target && { target }),
  });

  return NextResponse.json({ activityId: activity.id });
}

// 4. Following/unfollowing feeds
export async function followUser(currentUserId: string, targetUserId: string) {
  const client = getStreamFeedClient();

  // Current user's timeline feed follows target user's user feed
  const timelineFeed = client.feed("timeline", currentUserId);
  await timelineFeed.follow("user", targetUserId);
}

export async function unfollowUser(currentUserId: string, targetUserId: string) {
  const client = getStreamFeedClient();

  const timelineFeed = client.feed("timeline", currentUserId);
  await timelineFeed.unfollow("user", targetUserId);
}

// 1. Install
// npm install @knocklabs/node @knocklabs/react

// 2. Environment variables (.env.local)
// KNOCK_API_KEY=sk_xxxxxxxxxxxxx           (server-side secret key)
// NEXT_PUBLIC_KNOCK_PUBLIC_API_KEY=pk_xxxxxxxxxxxxx  (client-side public key)
// KNOCK_SIGNING_KEY=xxxxxxxxxxxxx           (for user token signing)
// NEXT_PUBLIC_KNOCK_FEED_CHANNEL_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

// 3. lib/knock.ts -- Server-side client
import { Knock } from "@knocklabs/node";

let knockClient: Knock | null = null;

export function getKnockClient(): Knock {
  if (!knockClient) {
    knockClient = new Knock(process.env.KNOCK_API_KEY!);
  }
  return knockClient;
}

// 4. Defining a workflow in Knock Dashboard:
//
// Workflow: "new-comment"
// Trigger data: { commentId, commentText, postTitle, commenterName, postUrl }
//
// Steps:
//   1. Batch (5 minute window, group by: recipient + postTitle)
//   2. Channel: In-app feed
//   3. Delay: 5 minutes
//   4. Channel: Email (only if not seen in-app)
//   5. Channel: Push notification
//   6. Channel: SMS (only if preference enabled)
//
// Each channel step has its own template using Knock's template language:
//   In-app: "{{ commenterName }} commented on {{ postTitle }}"
//   Email:  Full HTML template with comment preview
//   Push:   "{{ commenterName }}: {{ commentText | truncate: 80 }}"
//   SMS:    "New comment on {{ postTitle }} from {{ commenterName }}"

// 5. Triggering a workflow -- server-side
import { getKnockClient } from "@/lib/knock";

interface TriggerCommentNotificationParams {
  recipientIds: string[];    // User IDs to notify
  commentId: string;
  commentText: string;
  postTitle: string;
  commenterName: string;
  postUrl: string;
  actorId: string;           // The user who made the comment
}

export async function notifyNewComment({
  recipientIds,
  commentId,
  commentText,
  postTitle,
  commenterName,
  postUrl,
  actorId,
}: TriggerCommentNotificationParams) {
  const knock = getKnockClient();

  await knock.workflows.trigger("new-comment", {
    recipients: recipientIds,
    actor: actorId,
    data: {
      commentId,
      commentText,
      postTitle,
      commenterName,
      postUrl,
    },
    // Optional: tenant for multi-tenant apps
    // tenant: "org_123",
  });
}

// Usage in your comment creation handler:
// app/api/comments/route.ts
import { NextResponse } from "next/server";
import { notifyNewComment } from "@/lib/notifications";

export async function POST(request: Request) {
  const session = await auth();
  const { postId, text } = await request.json();

  // 1. Save comment to database
  const comment = await db.comment.create({
    data: { postId, userId: session.user.id, text },
  });

  // 2. Get post details and subscriber IDs
  const post = await db.post.findUnique({
    where: { id: postId },
    include: { subscribers: true },
  });

  // 3. Trigger notification (fire-and-forget, do not await in the response path)
  notifyNewComment({
    recipientIds: post.subscribers
      .filter((s) => s.userId !== session.user.id) // Don't notify the commenter
      .map((s) => s.userId),
    commentId: comment.id,
    commentText: text,
    postTitle: post.title,
    commenterName: session.user.name,
    postUrl: `/posts/${post.slug}`,
    actorId: session.user.id,
  }).catch((err) => console.error("Notification trigger failed:", err));

  return NextResponse.json({ comment });
}

// 1. Generate user tokens server-side
// app/api/knock/token/route.ts
import { NextResponse } from "next/server";
import { getKnockClient } from "@/lib/knock";
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 knock = getKnockClient();

  // Identify the user in Knock (upsert)
  await knock.users.identify(session.user.id, {
    name: session.user.name,
    email: session.user.email,
    // Custom properties
    // avatar: session.user.image,
    // plan: "pro",
  });

  // Generate a signed token for client-side access
  // Requires KNOCK_SIGNING_KEY environment variable
  const { Knock: KnockClient } = await import("@knocklabs/node");
  const token = await KnockClient.signUserToken(session.user.id, {
    signingKey: process.env.KNOCK_SIGNING_KEY!,
    expiresInSeconds: 3600,
  });

  return NextResponse.json({ token, userId: session.user.id });
}

// 2. components/notifications/knock-provider.tsx
"use client";

import { useEffect, useState } from "react";
import { KnockProvider, KnockFeedProvider } from "@knocklabs/react";
import "@knocklabs/react/dist/index.css";

interface NotificationProviderProps {
  children: React.ReactNode;
}

export function NotificationProvider({ children }: NotificationProviderProps) {
  const [knockAuth, setKnockAuth] = useState<{
    token: string;
    userId: string;
  } | null>(null);

  useEffect(() => {
    fetch("/api/knock/token")
      .then((res) => res.json())
      .then(setKnockAuth)
      .catch(console.error);
  }, []);

  if (!knockAuth) return <>{children}</>;

  return (
    <KnockProvider
      apiKey={process.env.NEXT_PUBLIC_KNOCK_PUBLIC_API_KEY!}
      userId={knockAuth.userId}
      userToken={knockAuth.token}
    >
      <KnockFeedProvider
        feedId={process.env.NEXT_PUBLIC_KNOCK_FEED_CHANNEL_ID!}
      >
        {children}
      </KnockFeedProvider>
    </KnockProvider>
  );
}

// 3. components/notifications/notification-bell.tsx
"use client";

import { useState, useRef } from "react";
import {
  NotificationIconButton,
  NotificationFeedPopover,
} from "@knocklabs/react";

export function NotificationBell() {
  const [isOpen, setIsOpen] = useState(false);
  const buttonRef = useRef<HTMLButtonElement>(null);

  return (
    <div className="relative">
      <NotificationIconButton
        ref={buttonRef}
        onClick={() => setIsOpen(!isOpen)}
      />
      {isOpen && (
        <NotificationFeedPopover
          buttonRef={buttonRef}
          isVisible={isOpen}
          onClose={() => setIsOpen(false)}
          onNotificationClick={(item) => {
            // Navigate to the relevant page
            const url = item.data?.url;
            if (url) {
              window.location.href = url as string;
            }
            setIsOpen(false);
          }}
        />
      )}
    </div>
  );
}

// 4. Custom notification feed (instead of the popover)
// components/notifications/notification-feed.tsx
"use client";

import { useKnockFeed, NotificationCell } from "@knocklabs/react";
import { formatDistanceToNow } from "date-fns";

export function NotificationFeed() {
  const { feedClient, useFeedStore } = useKnockFeed();
  const { items, metadata } = useFeedStore();

  const handleMarkAllRead = () => {
    feedClient.markAllAsRead();
  };

  const handleMarkAsRead = (itemId: string) => {
    feedClient.markAsRead({ id: itemId } as any);
  };

  return (
    <div className="max-w-md rounded-lg border bg-white shadow-lg">
      {/* Header */}
      <div className="flex items-center justify-between border-b p-4">
        <h2 className="text-lg font-semibold">
          Notifications
          {metadata.unseen_count > 0 && (
            <span className="ml-2 rounded-full bg-red-500 px-2 py-0.5 text-xs text-white">
              {metadata.unseen_count}
            </span>
          )}
        </h2>
        <button
          onClick={handleMarkAllRead}
          className="text-sm text-blue-600 hover:underline"
        >
          Mark all read
        </button>
      </div>

      {/* Notification list */}
      <div className="max-h-[400px] overflow-y-auto">
        {items.length === 0 ? (
          <p className="p-8 text-center text-gray-500">No notifications yet</p>
        ) : (
          items.map((item) => (
            <NotificationCell key={item.id} item={item} />
          ))
        )}
      </div>
    </div>
  );
}

// 1. Define preference sets in Knock Dashboard:
//
// Workflow categories:
//   - "social"    -> comment.new, mention, follow
//   - "updates"   -> product.update, changelog
//   - "billing"   -> invoice.created, payment.failed
//   - "security"  -> login.new_device, password.changed
//
// Default preferences (set in Dashboard):
//   social:   { in_app: true, email: true, push: true, sms: false }
//   updates:  { in_app: true, email: true, push: false, sms: false }
//   billing:  { in_app: true, email: true, push: true, sms: true }
//   security: { in_app: true, email: true, push: true, sms: true }

// 2. Server-side: set preferences programmatically
import { getKnockClient } from "@/lib/knock";

export async function setUserPreferences(
  userId: string,
  preferences: Record<string, Record<string, boolean>>
) {
  const knock = getKnockClient();

  await knock.users.setPreferences(userId, {
    channel_types: {
      email: preferences.email?.enabled ?? true,
      sms: preferences.sms?.enabled ?? false,
      push: preferences.push?.enabled ?? true,
      in_app_feed: true, // Always keep in-app enabled
    },
    workflows: {
      "comment-new": {
        channel_types: {
          email: preferences.social?.email ?? true,
          sms: preferences.social?.sms ?? false,
          push: preferences.social?.push ?? true,
        },
      },
      "product-update": {
        channel_types: {
          email: preferences.updates?.email ?? true,
          sms: preferences.updates?.sms ?? false,
          push: preferences.updates?.push ?? false,
        },
      },
      // Security notifications: always on, do not allow disabling
      "login-new-device": {
        channel_types: {
          email: true,
          push: true,
          sms: true,
        },
      },
    },
  });
}

// 3. components/notifications/preference-center.tsx
"use client";

import { useEffect, useState } from "react";

interface PreferenceRow {
  category: string;
  label: string;
  description: string;
  channels: {
    in_app: boolean;
    email: boolean;
    push: boolean;
    sms: boolean;
  };
  locked?: boolean; // Security notifications cannot be disabled
}

const DEFAULT_PREFERENCES: PreferenceRow[] = [
  {
    category: "social",
    label: "Social",
    description: "Comments, mentions, and follows",
    channels: { in_app: true, email: true, push: true, sms: false },
  },
  {
    category: "updates",
    label: "Product Updates",
    description: "New features and changelog",
    channels: { in_app: true, email: true, push: false, sms: false },
  },
  {
    category: "billing",
    label: "Billing",
    description: "Invoices, payment confirmations, and failures",
    channels: { in_app: true, email: true, push: true, sms: true },
  },
  {
    category: "security",
    label: "Security",
    description: "Login alerts and password changes",
    channels: { in_app: true, email: true, push: true, sms: true },
    locked: true,
  },
];

export function PreferenceCenter() {
  const [preferences, setPreferences] =
    useState<PreferenceRow[]>(DEFAULT_PREFERENCES);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    // Load saved preferences from API
    fetch("/api/notifications/preferences")
      .then((res) => res.json())
      .then((data) => {
        if (data.preferences) setPreferences(data.preferences);
      })
      .catch(console.error);
  }, []);

  const toggleChannel = (
    categoryIndex: number,
    channel: keyof PreferenceRow["channels"]
  ) => {
    setPreferences((prev) => {
      const updated = [...prev];
      if (updated[categoryIndex].locked) return updated;
      updated[categoryIndex] = {
        ...updated[categoryIndex],
        channels: {
          ...updated[categoryIndex].channels,
          [channel]: !updated[categoryIndex].channels[channel],
        },
      };
      return updated;
    });
  };

  const savePreferences = async () => {
    setSaving(true);
    try {
      await fetch("/api/notifications/preferences", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ preferences }),
      });
    } finally {
      setSaving(false);
    }
  };

  const channelHeaders = [
    { key: "in_app" as const, label: "In-App" },
    { key: "email" as const, label: "Email" },
    { key: "push" as const, label: "Push" },
    { key: "sms" as const, label: "SMS" },
  ];

  return (
    <div className="rounded-lg border bg-white">
      <div className="border-b p-4">
        <h2 className="text-lg font-semibold">Notification Preferences</h2>
        <p className="text-sm text-gray-500">
          Choose how you want to be notified for each category.
        </p>
      </div>

      <table className="w-full">
        <thead>
          <tr className="border-b bg-gray-50 text-left text-sm text-gray-600">
            <th className="p-4">Category</th>
            {channelHeaders.map((ch) => (
              <th key={ch.key} className="p-4 text-center">
                {ch.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {preferences.map((pref, rowIdx) => (
            <tr key={pref.category} className="border-b last:border-b-0">
              <td className="p-4">
                <p className="font-medium">{pref.label}</p>
                <p className="text-sm text-gray-500">{pref.description}</p>
              </td>
              {channelHeaders.map((ch) => (
                <td key={ch.key} className="p-4 text-center">
                  <input
                    type="checkbox"
                    checked={pref.channels[ch.key]}
                    onChange={() => toggleChannel(rowIdx, ch.key)}
                    disabled={pref.locked}
                    className="h-4 w-4 rounded border-gray-300"
                  />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      <div className="flex justify-end border-t p-4">
        <button
          onClick={savePreferences}
          disabled={saving}
          className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
        >
          {saving ? "Saving..." : "Save Preferences"}
        </button>
      </div>
    </div>
  );
}

// Complete workflow: "order-status-updated"
//
// Knock Dashboard workflow configuration:
//
// Trigger data schema:
//   orderId: string
//   orderNumber: string
//   status: "confirmed" | "shipped" | "delivered" | "cancelled"
//   trackingUrl?: string
//   estimatedDelivery?: string
//
// Workflow steps:
//   1. Function: set notification urgency based on status
//   2. Branch:
//      - If status == "shipped" or "delivered":
//          a. In-app feed (immediate)
//          b. Push notification (immediate)
//          c. Email (immediate)
//          d. SMS (only if user opted in)
//      - If status == "confirmed":
//          a. In-app feed (immediate)
//          b. Email (immediate)
//      - If status == "cancelled":
//          a. In-app feed (immediate)
//          b. Email (immediate)
//          c. Push notification (immediate)
//          d. SMS (immediate, override preferences)

// Triggering the workflow from your order service
// lib/notifications/order.ts
import { getKnockClient } from "@/lib/knock";

type OrderStatus = "confirmed" | "shipped" | "delivered" | "cancelled";

interface OrderStatusNotification {
  userId: string;
  orderId: string;
  orderNumber: string;
  status: OrderStatus;
  trackingUrl?: string;
  estimatedDelivery?: string;
}

export async function notifyOrderStatusChange({
  userId,
  orderId,
  orderNumber,
  status,
  trackingUrl,
  estimatedDelivery,
}: OrderStatusNotification) {
  const knock = getKnockClient();

  await knock.workflows.trigger("order-status-updated", {
    recipients: [userId],
    data: {
      orderId,
      orderNumber,
      status,
      trackingUrl,
      estimatedDelivery,
      // Template helpers
      statusEmoji: {
        confirmed: "receipt",
        shipped: "package",
        delivered: "check",
        cancelled: "warning",
      }[status],
      statusLabel: {
        confirmed: "Order Confirmed",
        shipped: "Order Shipped",
        delivered: "Order Delivered",
        cancelled: "Order Cancelled",
      }[status],
    },
  });
}

// Connecting Twilio as the SMS channel in Knock:
//
// 1. In Knock Dashboard, go to Integrations > Channels > SMS
// 2. Select "Twilio" as the SMS provider
// 3. Enter your Twilio Account SID and Auth Token
// 4. Enter your Twilio phone number (the "from" number)
// 5. Save -- Knock will now use Twilio to deliver SMS notifications
//
// This means you use Twilio for direct SMS (OTP, transactional)
// and Knock routes through Twilio for notification SMS.
// One Twilio account, two integration paths.

// Full phone verification flow for Next.js App Router

// 1. lib/twilio.ts (shared client)
import twilio from "twilio";

export const twilioClient = twilio(
  process.env.TWILIO_ACCOUNT_SID!,
  process.env.TWILIO_AUTH_TOKEN!
);

// 2. app/verify/page.tsx (client component)
"use client";

import { useState } from "react";

export default function VerifyPage() {
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [step, setStep] = useState<"phone" | "code" | "verified">("phone");
  const [error, setError] = useState("");

  const handleSendCode = async () => {
    setError("");
    const res = await fetch("/api/verify/send", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ phone }),
    });

    if (res.ok) {
      setStep("code");
    } else {
      const data = await res.json();
      setError(data.error);
    }
  };

  const handleVerifyCode = async () => {
    setError("");
    const res = await fetch("/api/verify/check", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ phone, code }),
    });

    const data = await res.json();
    if (data.verified) {
      setStep("verified");
    } else {
      setError("Invalid code. Please try again.");
    }
  };

  if (step === "verified") {
    return (
      <div className="p-8 text-center">
        <p className="text-green-600 text-lg font-semibold">
          Phone verified successfully.
        </p>
      </div>
    );
  }

  return (
    <div className="max-w-sm mx-auto p-8 space-y-4">
      {step === "phone" && (
        <>
          <label className="block text-sm font-medium">Phone Number</label>
          <input
            type="tel"
            value={phone}
            onChange={(e) => setPhone(e.target.value)}
            placeholder="+1234567890"
            className="w-full rounded border px-3 py-2"
          />
          <button
            onClick={handleSendCode}
            className="w-full rounded bg-blue-600 py-2 text-white"
          >
            Send Verification Code
          </button>
        </>
      )}

      {step === "code" && (
        <>
          <p className="text-sm text-gray-600">
            Enter the 6-digit code sent to {phone}
          </p>
          <input
            type="text"
            value={code}
            onChange={(e) => setCode(e.target.value)}
            placeholder="123456"
            maxLength={6}
            className="w-full rounded border px-3 py-2 text-center text-2xl tracking-widest"
          />
          <button
            onClick={handleVerifyCode}
            className="w-full rounded bg-blue-600 py-2 text-white"
          >
            Verify Code
          </button>
          <button
            onClick={handleSendCode}
            className="w-full text-sm text-blue-600 underline"
          >
            Resend Code
          </button>
        </>
      )}

      {error && <p className="text-red-600 text-sm">{error}</p>}
    </div>
  );
}

// Complete minimal chat in one page

// app/chat/page.tsx
import { ChatClient } from "./chat-client";
import { auth } from "@/lib/auth";
import { generateStreamTokenWithExpiry, getStreamServerClient } from "@/lib/stream";
import { redirect } from "next/navigation";

export default async function ChatPage() {
  const session = await auth();
  if (!session?.user?.id) redirect("/login");

  // Server-side: sync user and generate token
  const serverClient = getStreamServerClient();
  await serverClient.upsertUser({
    id: session.user.id,
    name: session.user.name || "Anonymous",
    image: session.user.image,
  });

  const token = generateStreamTokenWithExpiry(session.user.id);

  return (
    <ChatClient
      userId={session.user.id}
      userName={session.user.name || "Anonymous"}
      userImage={session.user.image}
      token={token}
    />
  );
}

// app/chat/chat-client.tsx
"use client";

import { useEffect, useState } from "react";
import { StreamChat } from "stream-chat";
import {
  Chat,
  Channel,
  ChannelHeader,
  ChannelList,
  MessageInput,
  MessageList,
  Thread,
  Window,
} from "stream-chat-react";
import "stream-chat-react/dist/css/v2/index.css";

interface ChatClientProps {
  userId: string;
  userName: string;
  userImage?: string | null;
  token: string;
}

export function ChatClient({ userId, userName, userImage, token }: ChatClientProps) {
  const [client, setClient] = useState<StreamChat | null>(null);

  useEffect(() => {
    const chatClient = StreamChat.getInstance(
      process.env.NEXT_PUBLIC_STREAM_API_KEY!
    );

    chatClient
      .connectUser(
        { id: userId, name: userName, image: userImage || undefined },
        token
      )
      .then(() => setClient(chatClient));

    return () => {
      chatClient.disconnectUser();
    };
  }, [userId, userName, userImage, token]);

  if (!client) {
    return <div className="flex h-screen items-center justify-center">Loading chat...</div>;
  }

  return (
    <div className="h-screen">
      <Chat client={client} theme="str-chat__theme-light">
        <div className="flex h-full">
          <div className="w-[300px] border-r">
            <ChannelList
              filters={{ type: "messaging", members: { $in: [userId] } }}
              sort={{ last_message_at: -1 }}
              options={{ presence: true, state: true }}
              showChannelSearch
            />
          </div>
          <div className="flex-1">
            <Channel>
              <Window>
                <ChannelHeader />
                <MessageList />
                <MessageInput focus />
              </Window>
              <Thread />
            </Channel>
          </div>
        </div>
      </Chat>
    </div>
  );
}

// Complete notification bell with real-time updates

// app/layout.tsx (add provider to root layout)
import { NotificationProvider } from "@/components/notifications/knock-provider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <NotificationProvider>
          <nav className="flex items-center justify-between border-b px-6 py-3">
            <a href="/" className="text-lg font-bold">MyApp</a>
            <div className="flex items-center gap-4">
              {/* The notification bell auto-updates in real-time */}
              <NotificationBell />
              <UserMenu />
            </div>
          </nav>
          <main>{children}</main>
        </NotificationProvider>
      </body>
    </html>
  );
}

// Triggering a notification from a Server Action
// app/actions/comments.ts
"use server";

import { auth } from "@/lib/auth";
import { db } from "@/lib/db";
import { getKnockClient } from "@/lib/knock";
import { revalidatePath } from "next/cache";

export async function createComment(postId: string, text: string) {
  const session = await auth();
  if (!session?.user?.id) throw new Error("Unauthorized");

  const comment = await db.comment.create({
    data: {
      postId,
      userId: session.user.id,
      text,
    },
  });

  const post = await db.post.findUniqueOrThrow({
    where: { id: postId },
    include: {
      author: true,
      subscribers: { select: { userId: true } },
    },
  });

  // Notify all subscribers except the commenter
  const recipientIds = post.subscribers
    .map((s) => s.userId)
    .filter((id) => id !== session.user.id);

  if (recipientIds.length > 0) {
    const knock = getKnockClient();
    await knock.workflows.trigger("new-comment", {
      recipients: recipientIds,
      actor: session.user.id,
      data: {
        commentText: text,
        postTitle: post.title,
        commenterName: session.user.name,
        url: `/posts/${post.slug}#comment-${comment.id}`,
      },
    });
  }

  revalidatePath(`/posts/${post.slug}`);
  return comment;
}

// components/sms-button.tsx
"use client";
import { twilioClient } from "@/lib/twilio"; // Auth token leaks to client bundle

// The client calls an API route. The API route calls Twilio.
const res = await fetch("/api/sms/send", {
  method: "POST",
  body: JSON.stringify({ to: phone, body: message }),
});

await twilioClient.messages.create({
  to: userInput, // "555-1234" -- Twilio rejects this
  from: TWILIO_PHONE_NUMBER,
  body: "Your code is 123456",
});

import { parsePhoneNumberFromString } from "libphonenumber-js";

const parsed = parsePhoneNumberFromString(userInput, "US");
if (!parsed || !parsed.isValid()) {
  throw new Error("Invalid phone number");
}
const e164 = parsed.format("E.164"); // "+15551234567"

// NEVER in production:
const token = chatClient.devToken(userId);

const token = serverClient.createToken(userId, Math.floor(Date.now() / 1000) + 3600);

useEffect(() => {
  const client = StreamChat.getInstance(apiKey);
  client.connectUser({ id: userId }, token);
  setClient(client);
  // No cleanup -- WebSocket leaks, MAU inflates
}, []);

useEffect(() => {
  const client = StreamChat.getInstance(apiKey);
  client.connectUser({ id: userId }, token).then(() => setClient(client));

  return () => {
    client.disconnectUser();
    setClient(null);
  };
}, [userId, token]);

await knock.workflows.trigger("welcome", {
  recipients: ["user_123"], // Knock has no data for this user
});

await knock.users.identify("user_123", {
  name: "Jane Smith",
  email: "jane@example.com",
  phone_number: "+1234567890",
});

await knock.workflows.trigger("welcome", {
  recipients: ["user_123"],
});

export async function POST(request: Request) {
  const body = await request.json();
  // Immediately process -- no verification
  await processEvent(body);
}

// Twilio
const isValid = twilio.validateRequest(authToken, signature, url, params);
if (!isValid) return NextResponse.json({ error: "Forbidden" }, { status: 403 });

// Stream
const isValid = serverClient.verifyWebhook(body, signature);
if (!isValid) return NextResponse.json({ error: "Forbidden" }, { status: 403 });

// In comment handler -- fires for EVERY comment
await knock.workflows.trigger("new-comment", {
  recipients: [post.authorId],
  data: { commentText: comment.text },
});
// With no batching, this sends 50 separate notifications

// Knock workflow step configuration:
// Step 1: Batch
//   Window: 5 minutes
//   Group by: recipient + data.postId
// Step 2: In-app (template uses {{ total_activities }} for count)
// Step 3: Email (template lists all batched comments)

// Sending immediately after getting a Twilio number
// without A2P 10DLC registration
await sendSms({ to: "+1555...", body: "Check out our sale!" });
// 40-60% of messages silently filtered by carriers

// After 10DLC registration, delivery rates jump to 95%+
// Always include opt-out for marketing messages:
await sendSms({
  to: "+1555...",
  body: "Your order #1234 has shipped! Track: https://... Reply STOP to opt out.",
});

// Months of work to replicate what Stream gives you for free:
const [messages, setMessages] = useState([]);
const [typing, setTyping] = useState({});
const [unread, setUnread] = useState(0);
// ... hundreds of lines of custom state management

// Stream's components handle all of this out of the box:
<Channel>
  <Window>
    <ChannelHeader />
    <MessageList />
    <MessageInput />
  </Window>
  <Thread />
</Channel>

// Customise appearance with CSS variables or component overrides:
// <Channel Message={CustomMessage} Input={CustomInput}>

await knock.workflows.trigger("new-comment", {
  recipients: [userId],
  data: {
    // You template in your code instead of in Knock
    emailSubject: `${commenter} commented on "${postTitle}"`,
    emailBody: `<h1>${commenter} left a comment</h1><p>${text}</p>`,
    pushTitle: `New comment from ${commenter}`,
    pushBody: text.substring(0, 80),
  },
});

await knock.workflows.trigger("new-comment", {
  recipients: [userId],
  actor: commenterId,
  data: {
    commentText: text,
    postTitle,
    postUrl: `/posts/${slug}`,
  },
});

// Templates in Knock Dashboard:
// Email subject: "{{ actor.name }} commented on {{ postTitle }}"
// Push body:     "{{ data.commentText | truncate: 80 }}"
// In-app:        "{{ actor.name }} commented on {{ postTitle }}"