Integración de Next.js y Headless WordPress

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import parse, { DOMNode, Element, domToReact } from 'html-react-parser';
import { z } from 'zod';

/**
* Esquema de validación para publicaciones de WordPress con Zod.
* Protege la ejecución en runtime frente a payloads corruptos de la API.
*/
export const WpPostSchema = z.object({
id: z.number(),
slug: z.string(),
date: z.string(),
title: z.object({
  rendered: z.string(),
}),
content: z.object({
  rendered: z.string(),
}),
excerpt: z.object({
  rendered: z.string(),
}),
featured_media: z.number().default(0),
_embedded: z.record(z.string(), z.unknown()).optional(),
});

export type WpPost = z.infer<typeof WpPostSchema>;

interface FetchOptions extends RequestInit {
revalidateTags?: string[];
revalidateTime?: number | false;
}

/**
* Cliente tipado y resiliente para WP REST API.
* Implementa backoff exponencial y validación en tiempo de ejecución con Zod.
*/
export class WpApiClient {
private baseUrl: string;

constructor(baseUrl?: string) {
  this.baseUrl = baseUrl || process.env.WORDPRESS_INTERNAL_API_URL || 'https://cms.agenticlab.com/wp-json';
}

public async getPostBySlug(slug: string): Promise<WpPost | null> {
  const endpoint = `/wp/v2/posts?slug=${encodeURIComponent(slug)}&_embed=true`;
  const data = await this.fetchWithRetry<unknown[]>(endpoint, {
    revalidateTags: ['posts', `post:${slug}`],
  });

  if (!Array.isArray(data) || data.length === 0) {
    return null;
  }

  const validated = WpPostSchema.safeParse(data[0]);
  if (!validated.success) {
    console.error('[WpApiClient] Schema validation error:', validated.error.format());
    throw new Error(`Invalid API response format for post ${slug}`);
  }

  return validated.data;
}

private async fetchWithRetry<T>(endpoint: string, options: FetchOptions = {}, retries = 2): Promise<T> {
  const url = `${this.baseUrl}${endpoint}`;
  const headers = new Headers(options.headers);
  headers.set('Accept', 'application/json');

  // Autenticación M2M mediante token secreto compartido
  if (process.env.WORDPRESS_M2M_SECRET) {
    headers.set('X-Agentic-M2M-Secret', process.env.WORDPRESS_M2M_SECRET);
  }

  const nextConfig: { tags?: string[]; revalidate?: number | false } = {};
  if (options.revalidateTags) {
    nextConfig.tags = options.revalidateTags;
  }
  if (options.revalidateTime !== undefined) {
    nextConfig.revalidate = options.revalidateTime;
  }

  for (let attempt = 0; attempt <= retries; attempt++) {
    try {
      const response = await fetch(url, {
        ...options,
        headers,
        next: nextConfig,
      });

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

      return (await response.json()) as T;
    } catch (error) {
      if (attempt === retries) {
        throw error;
      }
      // Demora con backoff exponencial: 200ms, 400ms...
      await new Promise((resolve) => setTimeout(resolve, Math.pow(2, attempt) * 200));
    }
  }

  throw new Error('Unreachable fetch failure');
}
}

/**
* Propiedades del componente para renderizado seguro de contenido.
*/
interface WpContentRendererProps {
html: string;
allowedOrigins?: string[];
}

/**
* Parser AST de alto rendimiento para contenido HTML de WordPress.
* Sustituye automáticamente <img> por next/image y <a> por next/link.
*/
export const WpContentRenderer: React.FC<WpContentRendererProps> = ({
html,
allowedOrigins = ['https://cms.agenticlab.com'],
}) => {
const options = {
  replace: (domNode: DOMNode) => {
    if (!(domNode instanceof Element)) {
      return;
    }

    // 1. Optimización de etiquetas <img> con next/image
    if (domNode.name === 'img') {
      const { src, alt, width, height, class: className } = domNode.attribs;

      if (!src) {
        return null;
      }

      const isAllowedOrigin = allowedOrigins.some((origin) => src.startsWith(origin));
      const numWidth = width ? parseInt(width, 10) : 800;
      const numHeight = height ? parseInt(height, 10) : 500;

      return (
        <Image
          src={src}
          alt={alt || 'WordPress Post Asset'}
          width={isNaN(numWidth) ? 800 : numWidth}
          height={isNaN(numHeight) ? 500 : numHeight}
          className={className || 'rounded-lg object-cover my-6'}
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 60vw"
          unoptimized={!isAllowedOrigin}
        />
      );
    }

    // 2. Transformación de enlaces internos <a> a next/link
    if (domNode.name === 'a') {
      const { href, class: className, target, rel } = domNode.attribs;

      if (!href) {
        return;
      }

      const isInternal = href.startsWith('/') || allowedOrigins.some((origin) => href.startsWith(origin));

      if (isInternal) {
        // Normalización de URL absoluta a ruta relativa
        let internalHref = href;
        for (const origin of allowedOrigins) {
          internalHref = internalHref.replace(origin, '');
        }
        if (internalHref === '') {
          internalHref = '/';
        }

        return (
          <Link
            href={internalHref}
            className={className || 'text-accent-cyan hover:underline transition-colors'}
            prefetch={false}
          >
            {domToReact(domNode.children as DOMNode[], options)}
          </Link>
        );
      }

      // Enlaces externos: atributos de seguridad rel
      return (
        <a
          href={href}
          target={target || '_blank'}
          rel={rel || 'noopener noreferrer'}
          className={className || 'text-accent-violet hover:underline'}
        >
          {domToReact(domNode.children as DOMNode[], options)}
        </a>
      );
    }
  },
};

return <div className="prose prose-invert max-w-none">{parse(html, options)}</div>;
};