/* eslint-disable react-hooks/static-components */
'use client';

import * as React from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { fass } from '@/lib/fontawesome-kit';
import { cn } from '../../lib/utils';
import { Button } from "@/components/ui/button";

// Note: Using native <img> elements for framework-agnostic compatibility.
// Next.js apps consuming this library can wrap with next/image if needed.

interface ProductImageGalleryProps {
  images: string[];
  productName: string;
  className?: string;
}

export function ProductImageGallery({ images, productName, className }: ProductImageGalleryProps) {
  const [currentIndex, setCurrentIndex] = React.useState(0);
  const [lightboxOpen, setLightboxOpen] = React.useState(false);
  const [imgErrors, setImgErrors] = React.useState<Record<number, boolean>>({});

  const count = images.length;
  const currentImage = images[currentIndex] || '';

  const handleImgError = (idx: number) => {
    setImgErrors((prev) => ({ ...prev, [idx]: true }));
  };

  const goTo = React.useCallback(
    (idx: number) => {
      if (count <= 0) return;
      setCurrentIndex(((idx % count) + count) % count);
    },
    [count]
  );

  const handlePrevious = React.useCallback(() => {
    goTo(currentIndex - 1);
  }, [currentIndex, goTo]);

  const handleNext = React.useCallback(() => {
    goTo(currentIndex + 1);
  }, [currentIndex, goTo]);

  React.useEffect(() => {
    if (!lightboxOpen || count <= 1) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'ArrowLeft') {
        e.preventDefault();
        handlePrevious();
      } else if (e.key === 'ArrowRight') {
        e.preventDefault();
        handleNext();
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [lightboxOpen, count, handlePrevious, handleNext]);

  const openLightbox = () => setLightboxOpen(true);

  const ThumbnailButton = ({
    idx,
    size,
    forDarkChrome = false,
    className: thumbClassName,
  }: {
    idx: number;
    size: 'sm' | 'md';
    forDarkChrome?: boolean;
    className?: string;
  }) => {
    const image = images[idx];
    const active = idx === currentIndex;
    return (
      <button
        type="button"
        onClick={() => setCurrentIndex(idx)}
        className={cn(
          'relative shrink-0 overflow-hidden border bg-foreground/5 transition-[border-color,transform,box-shadow] duration-200',
          size === 'sm' ? 'h-16 w-16 sm:h-20 sm:w-20' : 'h-[4.5rem] w-[4.5rem] sm:h-[5.25rem] sm:w-[5.25rem]',
          active
            ? 'border-primary ring-2 ring-primary ring-inset scale-[1.02]'
            : forDarkChrome
              ? 'border-white/20 hover:border-white/45'
              : 'border-foreground/15 hover:border-foreground/35 hover:shadow-sm',
          thumbClassName
        )}
        aria-label={`View image ${idx + 1} of ${count}`}
        aria-current={active ? 'true' : undefined}
      >
        {image && !imgErrors[idx] ? (
          <img
            src={image}
            alt=""
            className="h-full w-full object-contain"
            onError={() => handleImgError(idx)}
          />
        ) : (
          <span className="flex h-full items-center justify-center px-1 text-center text-[10px] font-medium text-foreground/40">
            {idx + 1}
          </span>
        )}
      </button>
    );
  };

  const NavArrow = ({
    direction,
    onClick,
    label,
    className: navClassName,
  }: {
    direction: 'prev' | 'next';
    onClick: () => void;
    label: string;
    className?: string;
  }) => (
    <Button
      type="button"
      size="icon"
      variant="secondary"
      onClick={(e) => {
        e.stopPropagation();
        onClick();
      }}
      className={cn(
        'border border-white/10 bg-white/10 text-white shadow-lg backdrop-blur-md hover:bg-white/20 hover:border-white/20',
        navClassName
      )}
      aria-label={label}
    >
      <FontAwesomeIcon
        icon={direction === 'prev' ? fass.faChevronLeft : fass.faChevronRight}
        className="h-5 w-5"
      />
    </Button>
  );

  return (
    <DialogPrimitive.Root open={lightboxOpen} onOpenChange={setLightboxOpen}>
      <div className={cn('space-y-4', className)}>
        {/* Main image */}
        <div className="relative aspect-square overflow-hidden border border-foreground/10 bg-foreground/5 shadow-sm">
          <button
            type="button"
            onClick={openLightbox}
            className="group relative block h-full w-full cursor-zoom-in text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
            aria-label={`Open ${productName} image gallery`}
          >
            {currentImage && !imgErrors[currentIndex] ? (
              <img
                src={currentImage}
                alt={`${productName} — image ${currentIndex + 1} of ${count}`}
                className="h-full w-full object-contain transition-transform duration-300 ease-out group-hover:scale-[1.02]"
                onError={() => handleImgError(currentIndex)}
              />
            ) : (
              <div className="flex h-full items-center justify-center p-8 text-foreground/40">
                <span className="text-center text-2xl font-semibold leading-snug">{productName}</span>
              </div>
            )}
            {currentImage && !imgErrors[currentIndex] && (
              <span className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
            )}
          </button>

          <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between gap-3 p-3 sm:p-4">
            {count > 1 && (
              <div className="pointer-events-none border border-white/15 bg-black/55 px-3 py-1 text-xs font-medium tabular-nums text-white backdrop-blur-md">
                {currentIndex + 1} / {count}
              </div>
            )}
            {currentImage && !imgErrors[currentIndex] && (
              <Button
                type="button"
                size="icon"
                variant="secondary"
                onClick={(e) => {
                  e.stopPropagation();
                  openLightbox();
                }}
                className="pointer-events-auto ml-auto border border-white/20 bg-black/55 text-white shadow-md backdrop-blur-md hover:bg-black/70"
                aria-label="Expand image"
              >
                <FontAwesomeIcon icon={fass.faMagnifyingGlassPlus} className="h-4 w-4" />
              </Button>
            )}
          </div>

          {count > 1 && (
            <>
              <NavArrow
                direction="prev"
                onClick={handlePrevious}
                label="Previous image"
                className="absolute left-3 top-1/2 -translate-y-1/2 sm:left-4 border-foreground/10 bg-background/90 text-foreground hover:bg-background"
              />
              <NavArrow
                direction="next"
                onClick={handleNext}
                label="Next image"
                className="absolute right-3 top-1/2 -translate-y-1/2 sm:right-4 border-foreground/10 bg-background/90 text-foreground hover:bg-background"
              />
            </>
          )}
        </div>

        {/* Thumbnail strip — padding prevents focus/active rings from clipping */}
        {count > 1 && (
          <div
            className="-mx-1 flex gap-2 overflow-x-auto overscroll-x-contain px-1 py-1 [scrollbar-gutter:stable]"
            aria-label="Product images"
          >
            {images.map((_, idx) => (
              <ThumbnailButton key={idx} idx={idx} size="sm" />
            ))}
          </div>
        )}
      </div>

      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay
          className={cn(
            'fixed inset-0 z-50 bg-black/93 backdrop-blur-sm',
            'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-200'
          )}
        />
        <DialogPrimitive.Content
          className={cn(
            'fixed inset-0 z-50 flex flex-col outline-none',
            'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-200'
          )}
        >
          <DialogPrimitive.Title className="sr-only">
            {productName} — image gallery
          </DialogPrimitive.Title>
          <DialogPrimitive.Description className="sr-only">
            Expanded product photos. Use arrow keys or the on-screen controls to move between images. Press Escape to
            close.
          </DialogPrimitive.Description>

          <div className="flex min-h-0 flex-1 flex-col">
            <div className="flex shrink-0 items-center justify-between gap-3 border-b border-white/10 px-4 py-3 sm:px-6">
              <p className="min-w-0 truncate text-sm font-medium text-white/90">{productName}</p>
              <div className="flex shrink-0 items-center gap-2">
                {count > 1 && (
                  <span className="hidden text-xs tabular-nums text-white/50 sm:inline">
                    {currentIndex + 1} / {count}
                  </span>
                )}
                <DialogPrimitive.Close asChild>
                  <Button
                    type="button"
                    size="icon"
                    variant="secondary"
                    className="border border-white/15 bg-white/10 text-white hover:bg-white/20"
                    aria-label="Close gallery"
                  >
                    <FontAwesomeIcon icon={fass.faXmark} className="h-5 w-5" />
                  </Button>
                </DialogPrimitive.Close>
              </div>
            </div>

            <div className="relative flex min-h-0 flex-1 items-center justify-center px-4 py-4 sm:px-8 sm:py-6">
              <div
                role="presentation"
                className="absolute inset-0 z-0 cursor-default bg-transparent"
                onClick={() => setLightboxOpen(false)}
              />
              {count > 1 && (
                <>
                  <div className="absolute left-2 top-1/2 z-20 -translate-y-1/2 sm:left-4">
                    <NavArrow direction="prev" onClick={handlePrevious} label="Previous image" />
                  </div>
                  <div className="absolute right-2 top-1/2 z-20 -translate-y-1/2 sm:right-4">
                    <NavArrow direction="next" onClick={handleNext} label="Next image" />
                  </div>
                </>
              )}

              <div
                className="relative z-10 flex max-h-[min(72vh,860px)] w-full max-w-5xl items-center justify-center"
                onClick={(e) => e.stopPropagation()}
                onPointerDown={(e) => e.stopPropagation()}
              >
                {currentImage && !imgErrors[currentIndex] ? (
                  <img
                    key={currentIndex}
                    src={currentImage}
                    alt={`${productName} — image ${currentIndex + 1} of ${count}`}
                    className="max-h-[min(72vh,860px)] w-full object-contain animate-in fade-in duration-200"
                    onError={() => handleImgError(currentIndex)}
                  />
                ) : (
                  <div className="border border-white/10 bg-white/5 px-8 py-16 text-center text-lg font-medium text-white/50">
                    {productName}
                  </div>
                )}
              </div>
            </div>

            {count > 1 && (
              <div className="shrink-0 border-t border-white/10 bg-black/40 px-4 py-3 sm:px-6">
                <div className="mx-auto flex max-w-3xl justify-center gap-2 overflow-x-auto overscroll-x-contain px-1 py-1 [scrollbar-gutter:stable]">
                  {images.map((_, idx) => (
                    <ThumbnailButton key={idx} idx={idx} size="md" forDarkChrome />
                  ))}
                </div>
              </div>
            )}
          </div>
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
}
Product Image Gallery

Installation

Usage
