import Image from "next/image";

import type { WpImage as WpImageData } from "@/lib/wp/types";

/**
 * Hôte média WP optimisable par next/image (doit matcher next.config
 * remotePatterns). Les chemins locaux ("/...") sont toujours optimisables ;
 * tout autre hôte externe (HubSpot, YouTube, etc.) ne l'est PAS → next/image
 * lèverait "Invalid src prop", donc on retombe sur un <img> natif.
 */
const WP_MEDIA_HOST = (() => {
  const env = process.env.NEXT_PUBLIC_WP_MEDIA_URL;
  try {
    return env ? new URL(env).hostname : "covalba-admin.paf-studio.dev";
  } catch {
    return "covalba-admin.paf-studio.dev";
  }
})();

function canOptimize(src: string): boolean {
  if (src.startsWith("/")) return true; // asset local Next
  try {
    return new URL(src).hostname === WP_MEDIA_HOST;
  } catch {
    return false;
  }
}

/**
 * Wrapper next/image autour de la sortie de `mapImage()`.
 *
 * Parité pixel : `className` est forwardé tel quel sur le <img> rendu par
 * next/image — les classes `object-cover`, `rounded-*`, sizing… continuent
 * de s'appliquer exactement comme sur les `<img>` natifs d'origine.
 *
 * Deux modes :
 *  - `fill` : parent positionné (relative/absolute), couvre via className.
 *  - intrinsèque : `width`/`height` issus de `mediaDetails`.
 * Si les dimensions intrinsèques sont absentes (mediaDetails manquant côté WP),
 * on bascule automatiquement en `fill` — sinon next/image lèverait une erreur.
 */
interface WpImageProps {
  /** Sortie directe de `mapImage(...)` (peut être null/undefined). */
  image: WpImageData | null | undefined;
  /** Mode couverture : exige un parent positionné/dimensionné. */
  fill?: boolean;
  /** Opt-in LCP (eager + fetchpriority high + preload). Convention : `position === 0`. */
  priority?: boolean;
  /** Forwardé à next/image (`sizes`). */
  sizes?: string;
  /** Forwardé sur le <img> final (object-*, rounded, sizing…). */
  className?: string;
  /** Override de `image.altText` (alt contextuel ou image décorative). */
  alt?: string;
  /** Contrôle fin du LCP. */
  fetchPriority?: "high" | "low" | "auto";
}

function WpImage({
  image,
  fill = false,
  priority = false,
  sizes,
  className,
  alt,
  fetchPriority,
}: WpImageProps) {
  // Null-guard : drop-in pour `<WpImage image={mapImage(...)} />` sans garde côté bloc.
  if (!image?.sourceUrl) return null;

  const altText = alt ?? image.altText ?? "";
  const optimizable = canOptimize(image.sourceUrl);

  // Mode fill explicite : le parent doit être positionné/dimensionné.
  if (optimizable && fill) {
    return (
      <Image
        src={image.sourceUrl}
        alt={altText}
        fill
        sizes={sizes ?? "100vw"}
        className={className}
        priority={priority}
        fetchPriority={fetchPriority}
      />
    );
  }

  // Mode intrinsèque quand les deux dimensions sont connues (cas normal pour
  // un média WP avec mediaDetails).
  if (optimizable && image.width != null && image.height != null) {
    return (
      <Image
        src={image.sourceUrl}
        alt={altText}
        width={image.width}
        height={image.height}
        sizes={sizes}
        className={className}
        priority={priority}
        fetchPriority={fetchPriority}
      />
    );
  }

  // Hôte externe non optimisable, ou ni `fill` ni dimensions connues : on ne
  // peut pas utiliser next/image (erreur "Invalid src prop" sur hôte non
  // whitelisté, ou collapse/erreur sans width/height). On retombe sur un <img>
  // natif — parité exacte avec l'original, optimisation perdue pour ces images.
  return (
    <img
      src={image.sourceUrl}
      alt={altText}
      className={className}
      loading={priority ? "eager" : "lazy"}
      decoding="async"
    />
  );
}

export default WpImage;