Implementación de Preview Mode en Headless WordPress

// ============================================================================
// PARTE 1: Next.js 16 Route Handler de activación (app/api/draft/route.ts)
// ============================================================================

import { draftMode } from 'next/headers';
import { redirect } from 'next/navigation';
import { NextRequest, NextResponse } from 'next/server';
import crypto from 'node:crypto';

/**
* Saneamiento de rutas de redirección relativas para evitar Open Redirect.
*/
function sanitizeRedirect(path: string | null): string {
if (!path || !path.startsWith('/') || path.startsWith('//') || path.includes(':')) {
  return '/';
}
return path;
}

export async function GET(request: NextRequest): Promise<NextResponse | void> {
const { searchParams } = new URL(request.url);
const secret = searchParams.get('secret');
const slug = searchParams.get('slug');
const id = searchParams.get('id');

const configuredSecret = process.env.WORDPRESS_PREVIEW_SECRET;

if (!configuredSecret || !secret) {
  return NextResponse.json({ message: 'Token de previsualización inválido' }, { status: 401 });
}

// Comparación segura del secreto frente a Timing Attacks
const secretBuffer = Buffer.from(secret, 'utf8');
const expectedBuffer = Buffer.from(configuredSecret, 'utf8');

if (
  secretBuffer.length !== expectedBuffer.length ||
  !crypto.timingSafeEqual(secretBuffer, expectedBuffer)
) {
  return NextResponse.json({ message: 'Acceso no autorizado a previsualización' }, { status: 401 });
}

// 1. Activa Draft Mode (establece la cookie __prerender_bypass)
const draft = await draftMode();
draft.enable();

// 2. Redirección segura hacia la ruta destino
const redirectPath = slug ? `/blog/${slug}` : (id ? `/blog/?p=${id}` : '/');
redirect(sanitizeRedirect(redirectPath));
}

// ============================================================================
// PARTE 2: Next.js 16 Route Handler de desconexión (app/api/disable-draft/route.ts)
// ============================================================================

export async function GET(request: NextRequest): Promise<NextResponse | void> {
const { searchParams } = new URL(request.url);
const redirectUrl = sanitizeRedirect(searchParams.get('redirect'));

// Desactiva Draft Mode (elimina la cookie __prerender_bypass)
const draft = await draftMode();
draft.disable();

redirect(redirectUrl);
}

// ============================================================================
// PARTE 3: Componente de servidor para banner de estado (components/PreviewBanner.tsx)
// ============================================================================

export async function PreviewBanner({ currentPath }: { currentPath: string }) {
const { isEnabled } = await draftMode();

if (!isEnabled) {
  return null;
}

return (
  <aside className="sticky top-0 z-50 flex items-center justify-between bg-accent-amber/90 px-4 py-2 text-xs font-semibold text-black backdrop-blur-md shadow-md">
    <div className="flex items-center gap-2">
      <span className="h-2 w-2 rounded-full bg-red-600 animate-pulse" />
      <span>Atención: Modo Previsualización Activo (mostrando borradores y revisiones)</span>
    </div>
    <a
      href={`/api/disable-draft?redirect=${encodeURIComponent(currentPath)}`}
      className="rounded bg-black px-3 py-1 text-white hover:bg-neutral-800 transition-colors"
    >
      Salir de previsualización
    </a>
  </aside>
);
}

// ============================================================================
// PARTE 4: Filtro de previsualización en WordPress (wp-content/mu-plugins/agentic-preview.php)
// ============================================================================
/*
<?php
declare(strict_types=1);

namespace AgenticLab\Integration;

final class AgenticPreviewLinkFilter {
  private const string FRONTEND_DRAFT_URL = 'https://frontend.agenticlab.com/api/draft';

  public static function init(): void {
      add_filter('preview_post_link', [self::class, 'filter_preview_link'], 10, 2);
  }

  public static function filter_preview_link(string $link, \WP_Post $post): string {
      $secret = defined('WORDPRESS_PREVIEW_SECRET') ? WORDPRESS_PREVIEW_SECRET : '';
      if (empty($secret)) {
          return $link;
      }

      return add_query_arg([
          'secret' => $secret,
          'id'     => $post->ID,
          'slug'   => $post->post_name ?: 'draft-' . $post->ID,
      ], self::FRONTEND_DRAFT_URL);
  }
}

add_action('init', [AgenticPreviewLinkFilter::class, 'init']);
*/