spsays-training/components/social/post/post-image-lightbox.tsx

"use client";

/**
 * PostImageLightbox — full-screen viewer for a post's attached photos.
 *
 * Opened by tapping any image on a PostCard. Controlled by the caller: `index`
 * is the photo being shown (null = closed), so the card owns the state and this
 * component stays a pure presentation layer.
 *
 * Dismiss: tap the backdrop ring around the photo, the ✕, or press Escape.
 * Navigate a multi-photo post with ← / → or the on-screen chevrons.
 *
 * Rendered through a portal onto <body> so it escapes the feed's virtualised,
 * transformed rows — an overlay nested inside one of those would be clipped by
 * the row's stacking context and positioned against the transform, not the
 * viewport.
 */

import { useCallback, useEffect } from "react";
import { createPortal } from "react-dom";
import Image from "next/image";
import { ChevronLeft, ChevronRight, X } from "lucide-react";
import type { PostImage } from "@/lib/social";

export function PostImageLightbox({
  images,
  index,
  caption,
  onIndexChange,
  onClose,
}: {
  images: PostImage[];
  /** Photo currently shown; null closes the viewer. */
  index: number | null;
  /** The post's caption, shown in a gradient scrim along the bottom.
   *  Clamped to three lines with an ellipsis so a long passage can't cover
   *  the photo. Omit (or pass empty) to hide the scrim entirely. */
  caption?: string | null;
  onIndexChange: (i: number) => void;
  onClose: () => void;
}) {
  const open = index !== null;
  const count = images.length;

  // Wrap around at both ends so a long press on → never dead-ends.
  const goPrev = useCallback(() => {
    if (index === null || count < 2) return;
    onIndexChange((index - 1 + count) % count);
  }, [index, count, onIndexChange]);

  const goNext = useCallback(() => {
    if (index === null || count < 2) return;
    onIndexChange((index + 1) % count);
  }, [index, count, onIndexChange]);

  useEffect(() => {
    if (!open) return;
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowLeft") goPrev();
      else if (e.key === "ArrowRight") goNext();
    }
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, onClose, goPrev, goNext]);

  // Lock body scroll while open so the feed underneath doesn't drift.
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [open]);

  if (!open || typeof document === "undefined") return null;
  const img = images[index];
  if (!img) return null;

  return createPortal(
    <div
      role="dialog"
      aria-modal="true"
      aria-label={
        count > 1 ? `Photo ${index + 1} of ${count}` : "Photo"
      }
      onClick={onClose}
      className="fixed inset-0 z-100 bg-black/90 backdrop-blur-sm animate-in fade-in-0"
    >
      {/* The photo sits inset from the edges, leaving a genuine backdrop ring
          that closes on tap. `fill` resolves against this box (padding would
          NOT inset an absolutely-positioned child), hence inset-* rather than
          p-*. stopPropagation keeps a tap on the photo itself from closing. */}
      <div
        onClick={(e) => e.stopPropagation()}
        className="absolute inset-4 sm:inset-12"
      >
        <Image
          // Keyed so switching photos swaps the element instead of
          // cross-fading a stale bitmap into the new slot.
          key={img.id}
          src={img.url}
          alt=""
          fill
          sizes="100vw"
          className="object-contain"
          unoptimized
          priority
        />
      </div>

      <button
        type="button"
        onClick={onClose}
        aria-label="Close"
        className="fixed top-4 right-4 size-10 inline-flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
      >
        <X className="size-5" />
      </button>

      {count > 1 ? (
        <>
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              goPrev();
            }}
            aria-label="Previous photo"
            className="fixed left-2 sm:left-4 top-1/2 -translate-y-1/2 size-10 inline-flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
          >
            <ChevronLeft className="size-5" />
          </button>
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              goNext();
            }}
            aria-label="Next photo"
            className="fixed right-2 sm:right-4 top-1/2 -translate-y-1/2 size-10 inline-flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
          >
            <ChevronRight className="size-5" />
          </button>
          {/* Counter sits top-left so it never collides with the caption
              scrim along the bottom. */}
          <span className="fixed top-5 left-4 rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-white tabular-nums">
            {index + 1} / {count}
          </span>
        </>
      ) : null}

      {/* Caption scrim. `pointer-events-none` so it never intercepts a tap
          meant for the backdrop — the whole strip stays click-to-close — and
          the gradient fades upward so the photo's lower edge stays readable
          rather than being cut by a hard band. */}
      {caption?.trim() ? (
        <div className="pointer-events-none fixed inset-x-0 bottom-0 bg-gradient-to-t from-black/85 via-black/60 to-transparent px-4 pt-16 pb-6">
          <p className="mx-auto max-w-2xl text-center font-(family-name:--font-title) text-sm sm:text-base leading-relaxed text-white/95 line-clamp-3">
            &ldquo;{caption.trim()}&rdquo;
          </p>
        </div>
      ) : null}
    </div>,
    document.body,
  );
}