ISR Caching & Webhooks

import { cacheTag } from "next/cache";
import { CACHE_TAGS, cachePublishedContent, cachedQueryFailed } from "@/lib/optimizely/cacheProfile";
import { graphClient } from "@/lib/optimizely/graphClient";
import { toNavNode, type NavNode, type RawNavItem } from "@/lib/graphql/queries/GetNavigation";

export interface FooterData {
  tagline: string | null;
  /** Each column is a NavigationItem: label = column heading, children = links. */
  columns: NavNode[];
}

interface GetFooterResult {
  Footer?: {
    items?: Array<{
      tagline?: string | null;
      columns?: Array<RawNavItem | { __typename?: string }> | null;
    } | null> | null;
  } | null;
}

// Display name written by seed-footer.ts - how editors identify the Footer
// block in the Shared Blocks tab. Not used for querying (the query fetches
// by type).
export const FOOTER_BLOCK_NAME = "Site Footer";

const GET_FOOTER_QUERY = /* GraphQL */ `
  fragment FooterNavItemFields on _IContent {
    ... on NavigationItem {
      __typename
      _metadata { key }
      label
      href { url { default } }
      openInNewTab
      # No description field - FooterColumns renders label + href + target only.
      # Depth 2 rather than 3: the footer is columns -> links, one level deep.
      children @recursive(depth: 2)
    }
  }

  query GetFooter($locale: [Locales]) {
    # Newest first: deleted blocks can linger in the Graph index after a
    # re-seed; ordering by lastModified guarantees the live block wins.
    Footer(locale: $locale, orderBy: { _metadata: { lastModified: DESC } }, limit: 1) {
      items {
        tagline
        columns {
          ...FooterNavItemFields
        }
      }
    }
  }
`;

// The Graph call sits in a "use cache" function rather than passing
// next: { revalidate, tags } to fetch(), because the SDK's request() does not
// forward Next.js fetch options. "use cache" caches the returned value instead,
// so cacheTag/cacheLife work over any client. Args must stay serializable.
async function fetchFooter(locale: string): Promise<GetFooterResult> {
  "use cache";
  cacheTag(CACHE_TAGS.footer);
  cachePublishedContent();

  try {
    return await graphClient().request(GET_FOOTER_QUERY, { locale: [locale] });
  } catch (error) {
    return cachedQueryFailed("fetchFooter", error);
  }
}

/**
 * Fetch the Footer shared block and map its columns into typed NavNode trees
 * (reusing the Navigation mapper - footer columns are NavigationItems).
 *
 * Cached for 1 hour with a "footer" tag - the publish webhook calls
 * revalidateTag("footer") to bust on demand.
 *
 * Returns null when the block doesn't exist or can't be reached, so the
 * Footer component falls back to its hardcoded output.
 */
export async function getFooter(options: { locale?: string } = {}): Promise<FooterData | null> {
  const { locale = "en" } = options;
  try {
    const data = await fetchFooter(locale);
    const root = data?.Footer?.items?.[0];
    if (!root) return null;

    const columns = (root.columns ?? [])
      .filter((c): c is RawNavItem => (c as RawNavItem).__typename === "NavigationItem")
      .map(toNavNode);

    if (columns.length === 0 && !root.tagline) return null;
    return { tagline: root.tagline ?? null, columns };
  } catch (error) {
    console.error("[getFooter] Falling back to hardcoded footer:", error);
    return null;
  }
}

import { cacheTag } from "next/cache";
import { CACHE_TAGS, cachePublishedContent, cachedQueryFailed } from "@/lib/optimizely/cacheProfile";
import { graphClient } from "@/lib/optimizely/graphClient";

// Public tree type — used by NestedNavMenu and the demo page

export interface NavNode {
  key: string;
  label: string;
  href: string;
  description?: string;
  openInNewTab?: boolean;
  children: NavNode[];
}

// Raw GraphQL response types

export interface RawNavItem {
  __typename?: string;
  _metadata?: { key?: string | null } | null;
  label?: string | null;
  // href is a ContentReference in Graph — url.default holds the URL string
  href?: { url?: { default?: string | null } | null } | null;
  description?: string | null;
  openInNewTab?: boolean | null;
  // Recursively typed — children are the same shape (any depth)
  children?: Array<RawNavItem | { __typename?: string }> | null;
}

interface GetNavigationResult {
  Navigation?: {
    items?: Array<{
      name?: string | null;
      navItems?: Array<RawNavItem | { __typename?: string }> | null;
    } | null> | null;
  } | null;
}

// Query
//
// A named fragment captures the repeated scalar fields so the nesting levels
// stay readable. GraphQL does not allow recursive fragments, so each level is
// written out explicitly — this makes the depth limit clear and intentional.

/**
 * The @recursive directive tells Optimizely Graph to apply this fragment to
 * the items in the decorated content area field at each nesting level, up to
 * the given depth. No need to repeat inline fragments manually — the directive
 * handles arbitrary depth with a single fragment definition.
 *
 * depth: 5 → NavRoot → L1 → L2 → L3 → L4 → L5
 */
// Display name written by seed-nav.ts — how editors identify the Navigation
// block in the Shared Blocks tab. Not used for querying (Graph doesn't index
// the name property for filtering).
export const NAV_BLOCK_NAME = "Navigation Menu";

export const GET_NAVIGATION_QUERY = /* GraphQL */ `
  fragment NavItemFields on _IContent {
    ... on NavigationItem {
      __typename
      _metadata { key }
      label
      href { url { default } }
      description
      openInNewTab
      children @recursive(depth: 5)
    }
  }

  query GetNavigation($locale: [Locales]) {
    # Newest first: deleted blocks can linger in the Graph index for a while
    # after a re-seed; ordering by lastModified guarantees the live block wins.
    Navigation(locale: $locale, orderBy: { _metadata: { lastModified: DESC } }, limit: 1) {
      items {
        name
        navItems {
          ...NavItemFields
        }
      }
    }
  }
`;

const GET_NAVIGATION_BY_KEY_QUERY = /* GraphQL */ `
  fragment NavItemFieldsByKey on _IContent {
    ... on NavigationItem {
      __typename
      _metadata { key }
      label
      href { url { default } }
      description
      openInNewTab
      children @recursive(depth: 5)
    }
  }

  query GetNavigationByKey($key: String!, $locale: [Locales]) {
    Navigation(
      where: { _metadata: { key: { eq: $key } } }
      locale: $locale
      limit: 1
    ) {
      items {
        name
        navItems {
          ...NavItemFieldsByKey
        }
      }
    }
  }
`;

// Response mapper

export function toNavNode(raw: RawNavItem): NavNode {
  return {
    key: raw._metadata?.key ?? "",
    label: raw.label ?? "",
    href: raw.href?.url?.default ?? "#",
    description: raw.description ?? undefined,
    openInNewTab: raw.openInNewTab ?? false,
    children: (raw.children ?? [])
      .filter((c): c is RawNavItem => (c as RawNavItem).__typename === "NavigationItem")
      .map(toNavNode),
  };
}

// Fetch helper

// The cache boundary is this function, not the fetch: the SDK's request() does not
// forward next: { revalidate, tags }, but "use cache" caches the returned value, so
// cacheTag/cacheLife apply regardless of the client. The preview path deliberately
// stays outside it - a draft must never be cached or tagged, and reading a preview
// token is dynamic data that cannot cross a cache boundary.
async function fetchNavigationCached(key: string | undefined, locale: string): Promise<GetNavigationResult> {
  "use cache";
  cacheTag(CACHE_TAGS.navigation);
  cachePublishedContent();

  try {
    return await graphClient().request(
      key ? GET_NAVIGATION_BY_KEY_QUERY : GET_NAVIGATION_QUERY,
      key ? { key, locale: [locale] } : { locale: [locale] }
    );
  } catch (error) {
    return cachedQueryFailed("fetchNavigationCached", error);
  }
}

/**
 * Fetch the Navigation shared block and map its navItems into a typed NavNode
 * tree.
 *
 * By default fetches the newest Navigation block by type (the display name is
 * not used), so re-seeding with a new CMS key is transparent. Pass `key` to
 * query a specific Navigation block (e.g. for preview).
 *
 * Cached for 1 hour with a "navigation" tag — call revalidateTag("navigation")
 * from a publish webhook to bust on demand. Preview fetches bypass the cache.
 *
 * Falls back to DEMO_NAV_DATA when the block can't be reached.
 */
export async function getNavigation(options: {
  previewToken?: string;
  key?: string;
  /** Content locale to fetch (defaults to "en"). Localized nav versions are
   *  created by scripts/seed-localization.ts. */
  locale?: string;
} = {}): Promise<{ tree: NavNode[]; fromCms: boolean }> {
  const { previewToken, key, locale = "en" } = options;

  try {
    const data: GetNavigationResult = previewToken
      ? await graphClient().request(
          key ? GET_NAVIGATION_BY_KEY_QUERY : GET_NAVIGATION_QUERY,
          key ? { key, locale: [locale] } : { locale: [locale] },
          previewToken,
          false
        )
      : await fetchNavigationCached(key, locale);

    const root = data?.Navigation?.items?.[0];
    if (!root) return { tree: DEMO_NAV_DATA, fromCms: false };

    const items = (root.navItems ?? [])
      .filter((c): c is RawNavItem => (c as RawNavItem).__typename === "NavigationItem")
      .map(toNavNode);

    if (items.length === 0) return { tree: DEMO_NAV_DATA, fromCms: false };
    return { tree: items, fromCms: true };
  } catch (error) {
    console.error("[getNavigation] Falling back to DEMO_NAV_DATA:", error);
    return { tree: DEMO_NAV_DATA, fromCms: false };
  }
}

// Static fallback nav — mirrors the CMS nav seeded by seed-nav.ts.
// Hrefs match the nested page URLs created by seed-content.ts.

export const DEMO_NAV_DATA: NavNode[] = [
  {
    key: 'products',
    label: 'Products',
    href: '/en/products',
    description: 'Our full product suite',
    children: [
      {
        key: 'cms',
        label: 'Content Management',
        href: '/cms',
        children: [
          { key: 'visual-builder',   label: 'Visual Builder',   href: '/visual-builder',   children: [] },
          { key: 'content-modeling', label: 'Content Modeling', href: '/content-modeling', children: [] },
          { key: 'localization',     label: 'Localization',     href: '/localization',     children: [] },
        ],
      },
      {
        key: 'feature-experimentation',
        label: 'Experimentation',
        href: '/feature-experimentation',
        children: [
          { key: 'feature-flags',        label: 'Feature Flags',        href: '/feature-flags',        children: [] },
          { key: 'progressive-rollouts', label: 'Progressive Rollouts', href: '/progressive-rollouts', children: [] },
        ],
      },
      {
        key: 'web-experimentation',
        label: 'Web Experimentation',
        href: '/web-experimentation',
        children: [
          { key: 'visual-editor', label: 'Visual Editor', href: '/visual-editor', children: [] },
          { key: 'stats-engine',  label: 'Stats Engine',  href: '/stats-engine',  children: [] },
        ],
      },
      {
        key: 'analytics',
        label: 'Analytics',
        href: '/analytics',
        children: [
          { key: 'analytics-reports',      label: 'Reports & Dashboards', href: '/reports',      children: [] },
          { key: 'analytics-integrations', label: 'Integrations',         href: '/integrations', children: [] },
        ],
      },
    ],
  },
  {
    key: 'solutions',
    label: 'Solutions',
    href: '/en/solutions',
    children: [
      { key: 'ecommerce',  label: 'E-Commerce',        href: '/en/ecommerce',        children: [] },
      { key: 'media',      label: 'Media & Publishing', href: '/en/media-publishing', children: [] },
      { key: 'enterprise', label: 'Enterprise',         href: '/en/enterprise',       children: [] },
    ],
  },
  {
    key: 'resources',
    label: 'Resources',
    href: '/en/resources',
    children: [
      { key: 'docs',         label: 'Documentation', href: '/en/docs',         children: [] },
      { key: 'blog',         label: 'Blog',          href: '/en/blog',         children: [] },
      { key: 'case-studies', label: 'Case Studies',  href: '/en/case-studies', children: [] },
    ],
  },
  {
    key: 'developers',
    label: 'Developers',
    href: '/en/developers',
    children: [
      { key: 'api-reference', label: 'API Reference', href: '/en/api-reference', children: [] },
      { key: 'sdks',          label: 'SDKs',          href: '/en/sdks',          children: [] },
      { key: 'github',        label: 'GitHub',        href: 'https://github.com/episerver', openInNewTab: true, children: [] },
    ],
  },
  {
    key: 'company',
    label: 'Company',
    href: '/en/company',
    children: [
      { key: 'about',   label: 'About',   href: '/en/about',   children: [] },
      { key: 'careers', label: 'Careers', href: '/en/careers', children: [] },
      { key: 'contact', label: 'Contact', href: '/contact',    children: [] },
    ],
  },
];

import { type NextRequest, NextResponse } from "next/server";
import { revalidatePath, revalidateTag as _revalidateTag } from "next/cache";
import { CACHE_TAGS } from "@/lib/optimizely/cacheProfile";
import { isValidRevalidateSecret } from "@/lib/security/verifySecret";

// Next.js 16 requires a second `profile` arg in its types, but route handlers
// have no valid profile to pass (updateTag is Server Actions only). Cast to the
// single-arg overload so the runtime's immediate-invalidation path is used.
const revalidateTag = _revalidateTag as (tag: string) => void;

export async function GET() {
  return NextResponse.json({ ok: true });
}

/**
 * Optimizely Graph webhook receiver.
 *
 * Register this URL via `npm run webhook:register` — the script appends
 * ?secret=OPTIMIZELY_REVALIDATE_SECRET to the registered URL, since Graph
 * webhook registration only controls the URL, not custom headers.
 *
 * Webhook payload types:
 *   - bulk.completed  – Graph finished processing a content sync
 *   - doc.updated     – a single content item was updated
 *   - doc.expired     – a content item reached its StopPublish date
 */
export async function POST(request: NextRequest) {
  const secret =
    request.nextUrl.searchParams.get("secret") ??
    request.headers.get("x-revalidate-secret");

  if (!isValidRevalidateSecret(secret)) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  try {
    const body = await request.json();

    console.log("[Optimizely Graph Webhook] Event received:", body);

    revalidatePath("/", "layout");
    for (const tag of Object.values(CACHE_TAGS)) revalidateTag(tag);

    return NextResponse.json({ received: true, timestamp: Date.now() });
  } catch (error) {
    console.error("[Webhook] Failed to parse body:", error);
    return NextResponse.json({ error: "Failed to parse body" }, { status: 400 });
  }
}

/**
 * Registers an Optimizely Graph webhook pointing to /api/webhooks.
 *
 * Usage:
 *   npm run webhook:register
 *
 * You will be prompted for your public base URL (e.g. https://your-app.vercel.app
 * or an ngrok tunnel for local testing).
 *
 * Credentials are read from .env.local:
 *   OPTIMIZELY_APP_KEY
 *   OPTIMIZELY_APP_SECRET
 *   OPTIMIZELY_REVALIDATE_SECRET (appended to the URL so /api/webhooks can verify the sender)
 */

import { createInterface } from "readline";
import { config } from "dotenv";

config({ path: ".env.local" });

const APP_KEY = process.env.OPTIMIZELY_APP_KEY;
const APP_SECRET = process.env.OPTIMIZELY_APP_SECRET;

if (!APP_KEY || !APP_SECRET) {
  console.error(
    "Error: OPTIMIZELY_APP_KEY and OPTIMIZELY_APP_SECRET must be set in .env.local"
  );
  process.exit(1);
}

const rl = createInterface({ input: process.stdin, output: process.stdout });
const question = (prompt) =>
  new Promise((resolve) => rl.question(prompt, resolve));

const baseUrl = await question(
  "Enter your public base URL (e.g. https://your-app.vercel.app): "
);
rl.close();

const REVALIDATE_SECRET = process.env.OPTIMIZELY_REVALIDATE_SECRET;
if (!REVALIDATE_SECRET) {
  console.error(
    "Error: OPTIMIZELY_REVALIDATE_SECRET must be set in .env.local — the receiver at /api/webhooks rejects unauthenticated calls"
  );
  process.exit(1);
}

const webhookUrl = `${baseUrl.trim().replace(/\/$/, "")}/api/webhooks?secret=${encodeURIComponent(REVALIDATE_SECRET)}`;
const credentials = Buffer.from(`${APP_KEY}:${APP_SECRET}`).toString("base64");

console.log(`\nRegistering webhook → ${webhookUrl}`);

const response = await fetch("https://cg.optimizely.com/api/webhooks", {
  method: "POST",
  headers: {
    Authorization: `Basic ${credentials}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    disabled: false,
    request: {
      url: webhookUrl,
      method: "post",
    },
    topic: ["*.*"],
  }),
});

const text = await response.text();

if (!response.ok) {
  console.error(`Failed to register webhook (HTTP ${response.status}):`, text);
  process.exit(1);
}

console.log("\nWebhook registered successfully!");
try {
  console.log(JSON.parse(text));
} catch {
  console.log(text);
}
console.log(
  "\nTo list all registered webhooks, run:\n" +
    "  curl -u '<app-key>:<app-secret>' https://cg.optimizely.com/api/webhooks"
);